root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: dark theme for scroller

Browse Source
This commit is contained in:
jialin
2025-04-28 10:05:06 +08:00
parent ce9c31f368
commit 60d0750695
39 changed files with 216 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/hf-model-file.tsx
+3 -7
View File
@@ -1,3 +1,4 @@
import SimpleOverlay from '@/components/simple-overlay';
import { createAxiosToken } from '@/hooks/use-chunk-request';
import { useIntl } from '@umijs/max';
import { Empty, Select, Spin } from 'antd';
@@ -11,7 +12,6 @@ import React, {
useRef,
useState
} from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import styled from 'styled-components';
import {
@@ -399,11 +399,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
></Spin>
</div>
)}
<SimpleBar
style={{
height: collapsed ? 'max-content' : 'calc(100vh - 300px)'
}}
>
<SimpleOverlay height={collapsed ? 'max-content' : 'calc(100vh - 300px)'}>
<div style={{ padding: '16px 24px' }}>
{dataSource.fileList.length ? (
<ItemFileWrapper>
@@ -433,7 +429,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
)
)}
</div>
</SimpleBar>
</SimpleOverlay>
</div>
);
});
src/pages/llmodels/components/model-card.tsx
+3 -3
View File
@@ -1,5 +1,6 @@
import IconFont from '@/components/icon-font';
import MarkdownViewer from '@/components/markdown-viewer';
import SimpleOverlay from '@/components/simple-overlay';
import useRequestToken from '@/hooks/use-request-token';
import {
DownOutlined,
@@ -17,7 +18,6 @@ import React, {
useRef,
useState
} from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import {
downloadModelFile,
@@ -357,7 +357,7 @@ const ModelCard: React.FC<{
{collapsed ? <DownOutlined /> : <RightOutlined />}
</span>
</span>
<SimpleBar
<SimpleOverlay
style={{
paddingTop: collapsed ? 12 : 0,
maxHeight: collapsed ? 300 : 0
@@ -368,7 +368,7 @@ const ModelCard: React.FC<{
content={readmeText}
theme="light"
></MarkdownViewer>
</SimpleBar>
</SimpleOverlay>
</div>
)}
</div>
src/pages/llmodels/components/search-result.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import IconFont from '@/components/icon-font';
import SimpleOverlay from '@/components/simple-overlay';
import { SearchOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Col, Empty, Row, Spin } from 'antd';
import React, { useMemo } from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import { modelSourceMap } from '../config';
import '../style/search-result.less';
@@ -89,7 +89,7 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
}, [networkError, source, intl]);
return (
<SimpleBar style={{ height: 'calc(100vh - 224px)' }}>
<SimpleOverlay style={{ height: 'calc(100vh - 224px)' }}>
<div style={{ ...props.style }} className="search-result-wrap">
<Spin spinning={props.loading}>
<div style={{ minHeight: 200 }}>
@@ -124,7 +124,7 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
</div>
</Spin>
</div>
</SimpleBar>
</SimpleOverlay>
);
};
src/pages/llmodels/style/catalog-item.less
+2 -2
View File
@@ -34,11 +34,11 @@
}
&:hover {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
&.active {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
.title {
src/pages/llmodels/style/column-wrapper.less
+1 -1
View File
@@ -26,6 +26,6 @@
right: 0;
z-index: 100;
padding-block: 0;
background-color: var(--color-white-1);
background-color: var(--ant-color-bg-elevated);
}
}
src/pages/llmodels/style/data-form.less
+1 -1
View File
@@ -11,7 +11,7 @@
font-weight: var(--font-weight-bold) !important;
&:hover {
background-color: var(--color-fill-sider) !important;
background-color: var(--ant-color-fill-tertiary) !important;
}
}
src/pages/llmodels/style/hf-model-file.less
+3 -2
View File
@@ -8,13 +8,14 @@
border: 1px solid var(--ant-color-border);
border-radius: var(--border-radius-base);
cursor: pointer;
background-color: var(--ant-color-bg-container);
&:hover {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
&.active {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
.tags {
src/pages/llmodels/style/hf-model-item.less
+3 -2
View File
@@ -7,13 +7,14 @@
border-radius: var(--border-radius-base);
padding: 12px 14px;
cursor: pointer;
background-color: var(--ant-color-bg-container);
&:hover {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
&.active {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
.title {
src/pages/llmodels/style/model-card.less
+1 -1
View File
@@ -27,7 +27,7 @@
.mkd-title {
cursor: pointer;
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
border-bottom: 1px solid rgba(255, 255, 255, 10%);
display: flex;
justify-content: space-between;
src/pages/llmodels/style/search-result.less
-1
View File
@@ -1,7 +1,6 @@
@padding: 24px;
.search-result-wrap {
background-color: rgba(255, 255, 255, 100%);
padding: 16px @padding;
border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
}
src/pages/playground/components/view-code-modal.tsx
+9 -16
View File
@@ -113,8 +113,8 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
return '';
}, [lang, payload, parameters, api, clientType, logcommand]);
const handleOnChangeLang = (value: string) => {
setLang(value);
const handleOnChangeLang = (value: string | number) => {
setLang(value as string);
};
const handleClose = () => {
@@ -152,20 +152,13 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
}
}}
>
<div
style={{
paddingRight: 2,
paddingBottom: 2
}}
>
<HighlightCode
height={380}
theme="dark"
code={codeValue}
lang={lang}
copyable={false}
></HighlightCode>
</div>
<HighlightCode
height={380}
theme="dark"
code={codeValue}
lang={lang}
copyable={false}
></HighlightCode>
</EditorWrap>
<div
style={{ marginTop: 10, display: 'flex', alignItems: 'baseline' }}
src/pages/playground/components/view-common-code.tsx
+7 -14
View File
@@ -86,20 +86,13 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
}
}}
>
<div
style={{
paddingRight: 2,
paddingBottom: 2
}}
>
<HighlightCode
height={380}
theme="dark"
code={codeValue}
lang={lang}
copyable={false}
></HighlightCode>
</div>
<HighlightCode
height={380}
theme="dark"
code={codeValue}
lang={lang}
copyable={false}
></HighlightCode>
</EditorWrap>
<div
style={{ marginTop: 10, display: 'flex', alignItems: 'baseline' }}
src/pages/playground/style/message-input.less
+7 -1
View File
@@ -80,11 +80,17 @@
width: 100%;
display: flex;
position: relative;
background-color: var(--ant-color-bg-elevated);
border-radius: var(--border-radius-base);
textarea {
padding-block-start: var(--ant-padding-xxs);
}
.holder {
pointer-events: none;
position: absolute;
top: 0;
top: var(--ant-padding-xxs);
left: 6px;
color: var(--ant-color-text-quaternary);
src/pages/resources/components/styles/installation.less
+2 -1
View File
@@ -7,7 +7,7 @@
border-left: 2px solid var(--ant-color-split);
margin-bottom: 16px;
padding-left: 16px;
background: var(--color-fill-sider);
background: var(--ant-color-fill-tertiary);
border-radius: 2px;
list-style-type: decimal;
@@ -23,6 +23,7 @@
.ant-radio-button-wrapper {
flex: auto;
font-size: var(--font-size-small);
background-color: var(--ant-tabs-card-bg);
}
}
src/pages/resources/components/update-labels.tsx
+3 -3
View File
@@ -2,11 +2,11 @@ import LabelSelector from '@/components/label-selector';
import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal';
import SealInput from '@/components/seal-form/seal-input';
import SimpleOverlay from '@/components/simple-overlay';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import React from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
type ViewModalProps = {
@@ -67,7 +67,7 @@ const UpdateLabels: React.FC<ViewModalProps> = (props) => {
<ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
}
>
<SimpleBar
<SimpleOverlay
style={{
maxHeight: '550px'
}}
@@ -131,7 +131,7 @@ const UpdateLabels: React.FC<ViewModalProps> = (props) => {
></LabelSelector>
</Form.Item>
</Form>
</SimpleBar>
</SimpleOverlay>
</ScrollerModal>
);
};