* feat: create custom-theme plugin
* feat: add custom-theme
* chore: add plugin name and description
* chore: add deps
* chore: optimize deps
* refactor: rename
* chore: add antd-token-previewer
* chore: add deps in plugin
* feat: add theme-editor
* feat: add theme-editor
* feat: add settings
* feat: add theme collection
* refactor: migration to the components folder
* feat: add ThemeList
* refactor: be better
* feat: export createStyles
* feat: implement ThemeCard (T-723)
* style: optimize style
* feat: add ThemeEditorProvider
* feat: add ToEditTheme
* chore: add isBuiltIn field
* feat: implement WYSIWYG
* refactor: migrate i18n
* feat: support to save config
* feat: add validation rule
* refactor: remove useless code
* refactor: optimize GlobalThemeProvider
* feat: add CurrentUserSettingsMenuProvider
* feat: support switching themes
* refactor: migrate CurrentUserProvider to app root
* feat: add InitializeTheme
* fix: fix preview demo
* fix: filter themes
* fix: not valid when editing theme
* fix: should restore the previous theme when closing theme editor
* fix: fix algorithm
* fix: the theme that was just saved should be applied
* refactor: loacl antd-token-previewer
* fix: should be based on the current theme when editing themes
* feat: support to edit theme
* perf: reduce executions
* feat: add animation
* fix: fix the type error of useRequest
* feat: remove built-in themes
* chore: reinstall deps
* fix: fix version of deps
* fix: delete client.d.ts to fix build error
* chore: reinstall deps
* fix: fix build
* fix: fix build
* fix: avoid build errors
* fix: fix crashing
* fix: use value instead of defaultValue
* fix: avoid error
* fix: avoid closure
* fix: fix build
* fix: fix style of login page
* refactor(page): fix style
* fix: fix style of PageHeader
* refactor: fix style of Drawer
* refactor: add FormDialog to loacl
* refactor: fix style of SchemaSettings.ModalItem
* refactor: fix style of pm/Card
* fix: fix text color of pm/Marketplace
* fix: fix table error
* refactor: fix style of collection-manager/summary
* refactor: fix style of fields drawer
* chore: reinstall deps
* fix: fix build
* fix: fix build of custom-theme
* fix: should export Plugin
* refactor: fix style of GraphDrawPage
* chore: upgrade plugin version
* refactor: fix style of Modal by using antd App
* refactor: fix style of FormDialog by using local version
* refactor(workflow): refactor style using antd-style in workflow
* fix(workflow): fix style of workflow
* fix: fix size
* refactor: add --nb-header-height
* feat: remove theme configuration from system settings
* refactor: migrate useUpdateThemeSettings to a new file
* refactor: rename theme to themeId
* feat: add updateSystemThemeSettings
* refactor: migrate utils function
* feat: use localStorage to avoid theme invalid in login page
* fix: fix style of login page
* fix: fix style of Drawer
* feat: optimize style of theme card
* fix: should use a empty object to reset theme
* fix: fix test of Page
* fix: fix test of Application
* fix: change backgroundColor of login page
* fix: fix all style of modal
* fix: fix gap between blocks (T-896)
* fix: fix color of font (T-905)
* fix: fix build
* fix: fix can not scroll in Drawer (T-897)
* fix: fix width of built-in plugins page (T-900)
* fix: fix style of import Modal (T-907)
* fix: fix style of calendar (T-908)
* fix: fix style of kanban (T-909)
* fix: fix style of Gantt (T-910)
* fix: fix style of Collapse (T-915)
* fix: fix style of mobile (T-916)
* fix: fix style of PageHeader (T-958)
* fix: optimize background color of Drawer
* fix: fix style of notification
* fix: fix T-1000
* fix: fix style of LinkageHeader (T-1003)
* fix: fix T-1004
* fix: fix style of scroll bar of chart (T-911)
* fix: fix style of workflow drawer (T-997)
* fix: fix T-922
* fix: fix T-924
* refactor: rename custom-theme to theme-editor
* fix: fix T-999
* fix: fix T-1011
* fix: fix error
* fix: optimize dark mode (T-921)
* fix: fix style of markdown (T-1020)
* fix: fix style of data template (T-1025)
* fix: fix style of rich text (T-1026)
* fix: fix style of a
* fix: fix style of XButton (T-1028)
* fix: fix T-1027
* fix: fix color of variable tag (T-1030)
* chore: translation
* feat: add a modal before create new theme (T-1024)
* feat: highlight card when editing theme (T-1031)
* feat: support to change theme name (T-1023)
* fix: api.auth.getOption('theme')
* fix: fix T-1032
* fix: fix feedback in feishu group
* refactor: code review
* fix: fix test
* chore: rename
* fix: useNotificationMiddleware
* refactor: revert
* fix: fix build
* fix: notification
* refactor: migrate CurrentUserProvider from Application to NocoBaseBuildInPlugin
* fix: fix test
* refactor: fix code review
* chore: avoid test error
---------
Co-authored-by: chenos <chenlinxh@gmail.com>
213 lines
6.1 KiB
TypeScript
213 lines
6.1 KiB
TypeScript
import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
|
|
import { Button, Dropdown, Menu } from 'antd';
|
|
import classNames from 'classnames';
|
|
import type { FC, ReactNode } from 'react';
|
|
import React, { useMemo } from 'react';
|
|
import type { Theme } from './interface';
|
|
import makeStyle from './utils/makeStyle';
|
|
|
|
interface ThemeItem extends Theme {
|
|
icon?: ReactNode;
|
|
closable?: boolean;
|
|
fixed?: boolean;
|
|
}
|
|
|
|
export type ThemeSelectProps = {
|
|
onEnabledThemeChange: (themes: string[]) => void;
|
|
onShownThemeChange: (themes: string[], selectTheme: string, info: { type: 'select' | 'deselect' }) => void;
|
|
enabledThemes: string[];
|
|
shownThemes: string[];
|
|
themes: ThemeItem[];
|
|
showAddTheme?: boolean;
|
|
};
|
|
|
|
const useStyle = makeStyle('ThemeSelect', (token) => ({
|
|
'.previewer-theme-select': {
|
|
padding: `${token.paddingXXS}px ${token.paddingXS}px`,
|
|
borderRadius: 4,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.02)',
|
|
height: token.controlHeight,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
overflow: 'hidden',
|
|
|
|
[`${token.rootCls}-btn.previewer-theme-select-add-btn`]: {
|
|
minWidth: 0,
|
|
width: 16,
|
|
height: 16,
|
|
fontSize: 8,
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginInlineStart: token.marginSM,
|
|
boxShadow: 'none',
|
|
},
|
|
|
|
'.previewer-theme-select-tag': {
|
|
height: 22,
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
boxSizing: 'border-box',
|
|
borderRadius: 4,
|
|
backgroundColor: token.colorBgContainer,
|
|
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
|
paddingInline: 10,
|
|
fontSize: token.fontSizeSM,
|
|
position: 'relative',
|
|
cursor: 'pointer',
|
|
// transition: `all ${token.motionDurationMid}`,
|
|
|
|
'&:not(:last-child)': {
|
|
marginInlineEnd: token.marginXS,
|
|
},
|
|
|
|
'&.previewer-theme-select-tag-active': {
|
|
border: `${token.lineWidth}px ${token.lineType} ${token['blue-1']}`,
|
|
backgroundColor: 'rgba(22,119,255,0.10)',
|
|
color: token.colorPrimary,
|
|
|
|
'&::after': {
|
|
content: '""',
|
|
borderStartEndRadius: 2,
|
|
position: 'absolute',
|
|
insetInlineEnd: 2,
|
|
top: 2,
|
|
width: 6,
|
|
height: 6,
|
|
background: `linear-gradient(to right top, transparent, transparent 50%, ${token.colorPrimary} 50%, ${token.colorPrimary} 100%)`,
|
|
},
|
|
},
|
|
|
|
'.previewer-theme-select-tag-close-btn': {
|
|
position: 'absolute',
|
|
top: -2,
|
|
insetInlineEnd: -2,
|
|
width: 12,
|
|
height: 12,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: token.colorBgContainer,
|
|
boxShadow: '0 2px 8px -2px rgba(0,0,0,0.05), 0 1px 4px -1px rgba(25,15,15,0.07), 0 0 1px 0 rgba(0,0,0,0.08)',
|
|
borderRadius: '50%',
|
|
opacity: 0,
|
|
pointerEvents: 'none',
|
|
zIndex: 2,
|
|
color: token.colorIcon,
|
|
|
|
'> .anticon': {
|
|
fontSize: 6,
|
|
},
|
|
},
|
|
|
|
'&:hover': {
|
|
'.previewer-theme-select-tag-close-btn': {
|
|
opacity: 1,
|
|
pointerEvents: 'initial',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
'.previewer-theme-select-dropdown': {
|
|
'.previewer-theme-select-dropdown-title': {
|
|
[`${token.rootCls}-dropdown-menu-item-group-title`]: {
|
|
fontSize: token.fontSizeSM,
|
|
paddingBottom: token.padding,
|
|
paddingTop: 10,
|
|
},
|
|
},
|
|
},
|
|
}));
|
|
|
|
const ThemeSelect: FC<ThemeSelectProps> = (props) => {
|
|
const { onEnabledThemeChange, onShownThemeChange, enabledThemes, shownThemes, themes, showAddTheme } = props;
|
|
|
|
const [wrapSSR, hashId] = useStyle();
|
|
|
|
const dropdownItems = useMemo(
|
|
() => [
|
|
{
|
|
disabled: true,
|
|
label: '添加主题即可预览',
|
|
className: 'previewer-theme-select-dropdown-title',
|
|
type: 'group',
|
|
key: 'add-theme-to-preview',
|
|
},
|
|
...themes
|
|
.filter((theme) => !shownThemes.includes(theme.key))
|
|
.map((theme) => ({
|
|
icon: theme.icon,
|
|
value: theme.key,
|
|
label: theme.name,
|
|
key: theme.key,
|
|
onClick: () => {
|
|
onShownThemeChange([...shownThemes, theme.key], theme.key, {
|
|
type: 'select',
|
|
});
|
|
},
|
|
})),
|
|
],
|
|
[themes, shownThemes, onShownThemeChange],
|
|
);
|
|
|
|
const shownThemeEntities = useMemo(
|
|
() => themes.filter((theme) => shownThemes.includes(theme.key)),
|
|
[themes, shownThemes],
|
|
);
|
|
|
|
return wrapSSR(
|
|
<div className={classNames('previewer-theme-select', hashId)}>
|
|
{shownThemeEntities.map((theme) => (
|
|
<span
|
|
onClick={() => {
|
|
if (theme.fixed) {
|
|
return;
|
|
}
|
|
onEnabledThemeChange(
|
|
enabledThemes.includes(theme.key)
|
|
? enabledThemes.filter((item) => item !== theme.key)
|
|
: [...enabledThemes, theme.key],
|
|
);
|
|
}}
|
|
key={theme.key}
|
|
className={classNames('previewer-theme-select-tag', {
|
|
'previewer-theme-select-tag-active': enabledThemes.includes(theme.key),
|
|
})}
|
|
>
|
|
{theme.name}
|
|
{theme.closable && (
|
|
<span
|
|
className="previewer-theme-select-tag-close-btn"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onEnabledThemeChange(enabledThemes.filter((item) => item !== theme.key));
|
|
onShownThemeChange(
|
|
shownThemes.filter((item) => item !== theme.key),
|
|
theme.key,
|
|
{ type: 'deselect' },
|
|
);
|
|
}}
|
|
>
|
|
<CloseOutlined />
|
|
</span>
|
|
)}
|
|
</span>
|
|
))}
|
|
{showAddTheme && (
|
|
<Dropdown
|
|
placement="bottomRight"
|
|
trigger={['click']}
|
|
overlay={<Menu items={dropdownItems} />}
|
|
overlayClassName={classNames('previewer-theme-select-dropdown', hashId)}
|
|
>
|
|
<Button type="primary" shape="circle" className="previewer-theme-select-add-btn" icon={<PlusOutlined />} />
|
|
</Dropdown>
|
|
)}
|
|
</div>,
|
|
);
|
|
};
|
|
|
|
export default ThemeSelect;
|