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