ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: layout of plugin settings icons (#3478)

Browse Source
This commit is contained in:
chenos 2024-02-03 19:41:26 +08:00 committed by GitHub
parent 237c4aa084
commit 6c9520e0a2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 70 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
packages/core/client/src/pm/PluginManagerLink.tsx
View File

@ -36,74 +36,79 @@ export const SettingsCenterDropdown = () => {
const settings = app.pluginSettingsManager.getList(); const settings = app.pluginSettingsManager.getList();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
return ( return (
<ActionContextProvider value={{ visible, setVisible }}> settings.length > 0 && (
<Popover <ActionContextProvider value={{ visible, setVisible }}>
open={open} <Popover
onOpenChange={(open) => { open={open}
setOpen(open); onOpenChange={(open) => {
}} setOpen(open);
arrow={false} }}
content={ arrow={false}
<div style={{ maxWidth: '21rem' }}> content={
<Card <div style={{ maxWidth: '21rem', overflow: 'auto', maxHeight: '50vh' }}>
bordered={false} <Card
className={css` bordered={false}
box-shadow: none; className={css`
`} box-shadow: none;
style={{ boxShadow: 'none' }} `}
> style={{ boxShadow: 'none' }}
{settings.map((setting) => ( >
<Card.Grid {settings.map((setting) => (
className={css` <Card.Grid
cursor: pointer; style={{
padding: 0 !important; width: settings.length === 1 ? '100%' : settings.length === 2 ? '50%' : '33.33%',
box-shadow: none !important;
&:hover {
border-radius: ${token.borderRadius}px;
background: rgba(0, 0, 0, 0.045);
}
`}
key={setting.name}
>
<a
role="button"
aria-label={setting.name}
onClick={(e) => {
e.preventDefault();
setOpen(false);
navigate(setting.path);
}} }}
title={compile(setting.title)} className={css`
style={{ display: 'block', color: 'inherit', padding: token.marginSM }} cursor: pointer;
href={setting.path} padding: 0 !important;
box-shadow: none !important;
&:hover {
border-radius: ${token.borderRadius}px;
background: rgba(0, 0, 0, 0.045);
}
`}
key={setting.name}
> >
<div style={{ fontSize: '1.2rem', textAlign: 'center', marginBottom: '0.3rem' }}> <a
{setting.icon || <SettingOutlined />} role="button"
</div> aria-label={setting.name}
<div onClick={(e) => {
style={{ e.preventDefault();
textAlign: 'center', setOpen(false);
whiteSpace: 'nowrap', navigate(setting.path);
overflow: 'hidden',
textOverflow: 'ellipsis',
fontSize: token.fontSizeSM,
}} }}
title={compile(setting.title)}
style={{ display: 'block', color: 'inherit', minWidth: '4.5rem', padding: token.marginSM }}
href={setting.path}
> >
{compile(setting.title)} <div style={{ fontSize: '1.2rem', textAlign: 'center', marginBottom: '0.3rem' }}>
</div> {setting.icon || <SettingOutlined />}
</a> </div>
</Card.Grid> <div
))} style={{
</Card> textAlign: 'center',
</div> whiteSpace: 'nowrap',
} overflow: 'hidden',
> textOverflow: 'ellipsis',
<Button fontSize: token.fontSizeSM,
data-testid="plugin-settings-button" }}
icon={<SettingOutlined style={{ color: token.colorTextHeaderMenu }} />} >
// title={t('All plugin settings')} {compile(setting.title)}
/> </div>
</Popover> </a>
</ActionContextProvider> </Card.Grid>
))}
</Card>
</div>
}
>
<Button
data-testid="plugin-settings-button"
icon={<SettingOutlined style={{ color: token.colorTextHeaderMenu }} />}
// title={t('All plugin settings')}
/>
</Popover>
</ActionContextProvider>
)
); );
}; };