feat(client): tooltip for designable button
This commit is contained in:
parent
3fe80cf370
commit
1408de55d2
@ -50,19 +50,59 @@ import { MenuSelectedKeysContext } from '../../schemas/menu';
|
|||||||
|
|
||||||
function DesignableToggle() {
|
function DesignableToggle() {
|
||||||
const { designable, setDesignable } = useDesignableSwitchContext();
|
const { designable, setDesignable } = useDesignableSwitchContext();
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
|
useEffect(() => {
|
||||||
|
if (designable) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (localStorage.getItem('hide-tip')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
setVisible(true);
|
||||||
|
}, 2000);
|
||||||
|
}, []);
|
||||||
return (
|
return (
|
||||||
<Tooltip title={'界面配置'}>
|
<div>
|
||||||
<Button
|
<Tooltip
|
||||||
className={cls('nb-designable-toggle', { active: designable })}
|
// color={'volcano'}
|
||||||
type={'primary'}
|
placement={'bottom'}
|
||||||
style={{ height: 46, border: 0 }}
|
title={
|
||||||
onClick={() => {
|
<span>
|
||||||
setDesignable(!designable);
|
点此进入界面配置{' '}
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
localStorage.setItem('hide-tip', 'true');
|
||||||
|
setVisible(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
关闭
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
visible={visible}
|
||||||
|
onVisibleChange={(visible) => {
|
||||||
|
setVisible(visible);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<HighlightOutlined />
|
<span style={{ height: 45, width: 45, position: 'absolute' }}></span>
|
||||||
</Button>
|
</Tooltip>
|
||||||
</Tooltip>
|
<Tooltip title={'界面配置'}>
|
||||||
|
<Button
|
||||||
|
className={cls('nb-designable-toggle', {
|
||||||
|
'has-tip': visible,
|
||||||
|
active: designable,
|
||||||
|
})}
|
||||||
|
type={'primary'}
|
||||||
|
style={{ height: 46, border: 0 }}
|
||||||
|
onClick={() => {
|
||||||
|
setDesignable(!designable);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<HighlightOutlined />
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -70,6 +70,9 @@
|
|||||||
&.active {
|
&.active {
|
||||||
// background: #faad14 !important;
|
// background: #faad14 !important;
|
||||||
}
|
}
|
||||||
|
&.has-tip {
|
||||||
|
background: #f18b62 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-info {
|
.user-info {
|
||||||
|
Loading…
Reference in New Issue
Block a user