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/components/alert-info/block.less
+1 -1
View File
@@ -31,7 +31,7 @@
&.success {
border: 1px solid var(--color-progress-green);
color: var(--color-progress-green);
background: var(--color-green-fill-light);
background: var(--ant-color-success-bg);
.content.success {
font-weight: var(--font-weight-normal);
src/components/drop-down-buttons/index.tsx
+2 -1
View File
@@ -3,6 +3,7 @@ import { useIntl } from '@umijs/max';
import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import React from 'react';
import './index.less';
type Trigger = 'click' | 'hover';
@@ -68,7 +69,7 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
<div
className="flex flex-column "
style={{
backgroundColor: 'var(--color-white-1)',
backgroundColor: 'var(--ant-color-bg-elevated)',
padding: 5,
alignItems: 'flex-start',
borderRadius: 'var(--border-radius-base)',
src/components/echarts/config.ts
-1
View File
@@ -68,7 +68,6 @@ export default function useChartConfig() {
const legend = {
itemWidth: 8,
itemHeight: 8,
padding: 0,
textStyle: {
color: chartColorMap.axislabelColor
}
src/components/echarts/line-chart.tsx
+6 -1
View File
@@ -51,7 +51,12 @@ const LineChart: React.FC<ChartProps> = (props) => {
yAxis,
legend: {
...legend,
data: legendData
data: legendData.map((item: any) => {
return {
name: item,
icon: 'circle'
};
})
},
series: []
src/components/highlight-code/index.tsx
+8 -1
View File
@@ -1,3 +1,4 @@
import useUserSettings from '@/hooks/use-user-settings';
import React from 'react';
import CodeViewerDark from './code-viewer-dark';
import CodeViewerLight from './code-viewer-light';
@@ -22,9 +23,15 @@ const HighlightCode: React.FC<{
height = 'auto'
} = props;
const { userSettings } = useUserSettings();
const currentTheme = React.useMemo(() => {
return theme || userSettings.theme === 'realDark' ? 'dark' : 'light';
}, [theme, userSettings.theme]);
return (
<div className="high-light-wrapper hj-wrapper">
{theme === 'dark' ? (
{currentTheme === 'dark' ? (
<CodeViewerDark
lang={lang}
code={code}
src/components/highlight-code/styles/dark.less
+1 -1
View File
@@ -31,7 +31,7 @@ hue-6-2: #e6c07b
.code-pre.dark {
.hljs {
color: #abb2bf;
background: #282c34;
background: var(--color-editor-dark);
}
.hljs-comment,
src/components/highlight-code/styles/index.less
+1 -1
View File
@@ -60,7 +60,7 @@
}
&.dark {
background-color: #282c34;
background-color: var(--color-editor-dark);
&:hover {
&::-webkit-scrollbar-thumb {
src/components/highlight-code/styles/light.less
+1 -1
View File
@@ -31,7 +31,7 @@ hue-6-2: #c18401
.code-pre.light {
.hljs {
color: #383a42;
background: #fafafa;
background: var(--color-editor-light);
}
.hljs-comment,
src/components/icon-font/index.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import { createFromIconfontCN } from '@ant-design/icons';
import './iconfont/iconfont.js';
// import './iconfont/iconfont.js';
const IconFont = createFromIconfontCN({
scriptUrl: ''
scriptUrl: '//at.alicdn.com/t/c/font_4613488_uw2djf1vxgf.js'
});
export default IconFont;
src/components/image-editor/tools-bar.tsx
+1 -1
View File
@@ -177,7 +177,7 @@ const ImageActionsBar: React.FC<ImageActionsBarProps> = (props) => {
})}
>
<Button onClick={downloadMask} size="middle" type="text">
<IconFont className="font-size-14" type="icon-save2"></IconFont>
<IconFont className="font-size-14" type="icon-save1"></IconFont>
</Button>
</Tooltip>
</>
src/components/markdown-viewer/index.tsx
+1 -3
View File
@@ -152,9 +152,7 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
}
if (token.type === 'code') {
htmlstr = (
<HighlightCode theme={theme} code={token.text} lang={token.lang} />
);
htmlstr = <HighlightCode code={token.text} lang={token.lang} />;
}
if (token.type === 'link') {
src/components/seal-form/wrapper/index.tsx
+2 -2
View File
@@ -34,7 +34,7 @@ const WrapperBox = styled.div`
border-style: var(--ant-line-type);
border-color: var(--ant-color-border);
border-radius: var(--border-radius-base);
// background-color: var(--color-white-1);
background-color: var(--ant-color-bg-container);
&.borderless {
border: none;
box-shadow: none;
@@ -167,7 +167,7 @@ const Extra = styled.div`
const AddAfter = styled.div`
position: relative;
color: var(--ant-color-text-quaternary);
font-size: 14px;
font-size: var(--font-size-base);
padding-right: calc(var(--ant-padding-sm) - 1px);
`;
src/components/seal-table/index.tsx
+5 -2
View File
@@ -15,8 +15,10 @@ const Wrapper = styled.div<{ $token: any }>`
--ant-table-header-border-radius: ${(props) =>
props.$token.headerBorderRadius}px;
--ant-table-header-split-color: ${(props) => props.$token.headerSplitColor};
--ant-table-row-selected-bg: var(--ant-table-row-selected-bg);
--ant-table-row-selected-hover-bg: var(--ant-table-row-selected-hover-bg);
--ant-table-row-selected-bg: ${(props) => props.$token.rowSelectedBg};
--ant-table-row-selected-hover-bg: ${(props) =>
props.$token.rowSelectedHoverBg};
--ant-table-row-hover-bg: ${(props) => props.$token.rowHoverBg};
`;
const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
@@ -45,6 +47,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
loadChildrenAPI
} = props;
const { token } = theme.useToken();
console.log('seal-table-props', token.Table);
const parsedColumns = useMemo(() => {
if (columns) return columns;
src/components/seal-table/styles/skeleton.less
Vendored
+1 -1
View File
@@ -1,7 +1,7 @@
.row-skeleton {
display: flex;
justify-content: flex-start;
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
padding: 16px;
height: 68px;
border-radius: var(--border-radius-base);
src/components/segment-line/index.tsx
+1
View File
@@ -28,6 +28,7 @@ const SegmentedQwrapper = styled.div<{ $height: number }>`
padding: 0px;
bottom: 0px;
top: unset;
background-color: var(--color-white-primary) !important;
}
.ant-segmented-item-label {
display: flex;
src/components/short-cuts/index.less
+2 -2
View File
@@ -23,7 +23,7 @@
}
.ant-table-thead > tr > th {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
height: 36px;
padding-block: 0;
}
@@ -34,7 +34,7 @@
// overflow-y: auto !important;
// }
.ant-table-thead > tr > th {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
height: 36px;
padding-block: 0;
}
src/components/simple-overlay/index.tsx
+46
View File
@@ -0,0 +1,46 @@
import useUserSettings from '@/hooks/use-user-settings';
import React from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import styled from 'styled-components';
const Wrapper = styled.div`
.simplebar-scrollbar::before {
width: var(--scrollbar-size);
background: var(--scrollbar-handle-bg);
}
&.dark {
.simplebar-scrollbar::before {
width: var(--scrollbar-size);
background: var(--scrollbar-handle-light-bg);
}
}
`;
interface SimpleOverlayProps {
height?: string | number;
children?: React.ReactNode;
style?: React.CSSProperties;
}
const SimpleOverlay: React.FC<SimpleOverlayProps> = ({
height,
children,
style
}) => {
const { isDarkTheme } = useUserSettings();
return (
<Wrapper className={isDarkTheme ? 'dark' : 'light'}>
<SimpleBar
style={{
height: height,
...style
}}
>
{children}
</SimpleBar>
</Wrapper>
);
};
export default SimpleOverlay;
src/components/status-tag/index.tsx
+4 -7
View File
@@ -4,9 +4,9 @@ import { InfoCircleOutlined } from '@ant-design/icons';
import { Button, Divider, Tooltip } from 'antd';
import classNames from 'classnames';
import React, { useEffect, useMemo, useState } from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import CopyButton from '../copy-button';
import SimpleOverlay from '../simple-overlay';
import CopyStyle from './copy-btn.less';
import './index.less';
@@ -118,11 +118,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
})}
</div>
<SimpleBar
style={{ maxHeight: 200 }}
autoHide={false}
className="tooltip-scrollbar"
>
<SimpleOverlay style={{ maxHeight: 200 }}>
<div
style={{
width: 'max-content',
@@ -139,7 +135,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
<span dangerouslySetInnerHTML={{ __html: messageLink }}></span>
)}
</div>
</SimpleBar>
</SimpleOverlay>
</div>
);
}, [statusValue]);
@@ -155,6 +151,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
>
{statusValue.message ? (
<Tooltip
trigger={['hover']}
title={renderTitle}
destroyTooltipOnHide={true}
overlayInnerStyle={{ paddingInline: 0 }}