Add Tootlip fop options

src/components/PageHeaderWrapper/GridContent.js

@@ -4,9 +4,9 @@ import styles from './GridContent.less';
 
 class GridContent extends PureComponent {
   render() {
-    const { grid, children } = this.props;
+    const { contentWidth, children } = this.props;
     let className = `${styles.main}`;
-    if (grid === 'Fixed') {
+    if (contentWidth === 'Fixed') {
       className = `${styles.main} ${styles.wide}`;
     }
     return <div className={className}>{children}</div>;
@@ -14,5 +14,5 @@ class GridContent extends PureComponent {
 }
 
 export default connect(({ setting }) => ({
-  grid: setting.grid,
+  contentWidth: setting.contentWidth,
 }))(GridContent);

src/components/PageHeaderWrapper/index.js

@@ -7,13 +7,13 @@ import GridContent from './GridContent';
 import styles from './index.less';
 import MenuContext from '@/layouts/MenuContext';
 
-const PageHeaderWrapper = ({ children, grid, wrapperClassName, top, ...restProps }) => (
+const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => (
   <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
     {top}
     <MenuContext.Consumer>
       {value => (
         <PageHeader
-          wide={grid === 'Fixed'}
+          wide={contentWidth === 'Fixed'}
           home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
           {...value}
           key="pageheader"
@@ -37,5 +37,5 @@ const PageHeaderWrapper = ({ children, grid, wrapperClassName, top, ...restProps
 );
 
 export default connect(({ setting }) => ({
-  grid: setting.grid,
+  contentWidth: setting.contentWidth,
 }))(PageHeaderWrapper);

src/components/SettingDrawer/BlockChecbox.js

@@ -1,27 +1,23 @@
-import { Icon } from 'antd';
 import React from 'react';
+import { Tooltip, Icon } from 'antd';
 import style from './index.less';
 
 const BlockChecbox = ({ value, onChange, list }) => (
   <div className={style.blockChecbox} key={value}>
     {list.map(item => (
-      <div
-        key={item.key}
-        className={style.item}
-        onClick={() => {
-          onChange(item.key);
-        }}
-      >
-        <img src={item.url} alt={item.key} />
-        <div
-          className={style.selectIcon}
-          style={{
-            display: value === item.key ? 'block' : 'none',
-          }}
-        >
-          <Icon type="check" />
+      <Tooltip title={item.title} key={item.key}>
+        <div className={style.item} onClick={() => onChange(item.key)}>
+          <img src={item.url} alt={item.key} />
+          <div
+            className={style.selectIcon}
+            style={{
+              display: value === item.key ? 'block' : 'none',
+            }}
+          >
+            <Icon type="check" />
+          </div>
         </div>
-      </div>
+      </Tooltip>
     ))}
   </div>
 );

src/components/SettingDrawer/ThemeColor.js

@@ -1,5 +1,6 @@
-import { Icon } from 'antd';
 import React from 'react';
+import { Tooltip, Icon } from 'antd';
+import { formatMessage } from 'umi/locale';
 import styles from './ThemeColor.less';
 
 const Tag = ({ color, check, ...rest }) => (
@@ -17,28 +18,53 @@ const ThemeColor = ({ colors, title, value, onChange }) => {
   let colorList = colors;
   if (!colors) {
     colorList = [
-      '#F5222D',
-      '#FA541C',
-      '#FAAD14',
-      '#13C2C2',
-      '#52C41A',
-      '#1890FF',
-      '#2F54EB',
-      '#722ED1',
+      {
+        key: 'dust',
+        color: '#F5222D',
+      },
+      {
+        key: 'volcano',
+        color: '#FA541C',
+      },
+      {
+        key: 'sunset',
+        color: '#FAAD14',
+      },
+      {
+        key: 'cyan',
+        color: '#13C2C2',
+      },
+      {
+        key: 'green',
+        color: '#52C41A',
+      },
+      {
+        key: 'daybreak',
+        color: '#1890FF',
+      },
+      {
+        key: 'geekblue',
+        color: '#2F54EB',
+      },
+      {
+        key: 'purple',
+        color: '#722ED1',
+      },
     ];
   }
   return (
     <div className={styles.themeColor}>
       <h3 className={styles.title}>{title}</h3>
       <div className={styles.content}>
-        {colorList.map(color => (
-          <Tag
-            className={styles.colorBlock}
-            key={color}
-            color={color}
-            check={value === color}
-            onClick={() => onChange && onChange(color)}
-          />
+        {colorList.map(({ key, color }) => (
+          <Tooltip key={color} title={formatMessage({ id: `app.setting.themecolor.${key}` })}>
+            <Tag
+              className={styles.colorBlock}
+              color={color}
+              check={value === color}
+              onClick={() => onChange && onChange(color)}
+            />
+          </Tooltip>
         ))}
       </div>
     </div>

src/components/SettingDrawer/index.js

@@ -28,23 +28,23 @@ class SettingDrawer extends PureComponent {
 
   getLayOutSetting = () => {
     const {
-      setting: { grid, fixedHeader, layout, autoHideHeader, fixSiderbar },
+      setting: { contentWidth, fixedHeader, layout, autoHideHeader, fixSiderbar },
     } = this.props;
     return [
       {
-        title: formatMessage({ id: 'app.setting.gridmode' }),
+        title: formatMessage({ id: 'app.setting.content-width' }),
         action: [
           <Select
-            value={grid}
+            value={contentWidth}
             size="small"
-            onSelect={value => this.changeSetting('grid', value)}
+            onSelect={value => this.changeSetting('contentWidth', value)}
             style={{ width: 80 }}
           >
             <Select.Option value="Fixed">
-              {formatMessage({ id: 'app.setting.gridmode.fixed' })}
+              {formatMessage({ id: 'app.setting.content-width.fixed' })}
             </Select.Option>
             <Select.Option value="Fluid">
-              {formatMessage({ id: 'app.setting.gridmode.fluid' })}
+              {formatMessage({ id: 'app.setting.content-width.fluid' })}
             </Select.Option>
           </Select>,
         ],
@@ -89,7 +89,7 @@ class SettingDrawer extends PureComponent {
     const nextState = { ...setting };
     nextState[key] = value;
     if (key === 'layout') {
-      nextState.grid = value === 'topmenu' ? 'Fixed' : 'Fluid';
+      nextState.contentWidth = value === 'topmenu' ? 'Fixed' : 'Fluid';
     } else if (key === 'fixedHeader' && !value) {
       nextState.autoHideHeader = false;
     }
@@ -140,10 +140,12 @@ class SettingDrawer extends PureComponent {
                 {
                   key: 'dark',
                   url: 'https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg',
+                  title: formatMessage({ id: 'app.setting.pagestyle.dark' }),
                 },
                 {
                   key: 'light',
                   url: 'https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg',
+                  title: formatMessage({ id: 'app.setting.pagestyle.light' }),
                 },
               ]}
               value={navTheme}
@@ -165,10 +167,12 @@ class SettingDrawer extends PureComponent {
                 {
                   key: 'sidemenu',
                   url: 'https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg',
+                  title: formatMessage({ id: 'app.setting.sidemenu' }),
                 },
                 {
                   key: 'topmenu',
                   url: 'https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg',
+                  title: formatMessage({ id: 'app.setting.topmenu' }),
                 },
               ]}
               value={layout}

src/components/TopNavHeader/index.js

@@ -9,18 +9,18 @@ export default class TopNavHeader extends PureComponent {
     super(props);
 
     this.state = {
-      maxWidth: (props.grid === 'Fixed' ? 1200 : window.innerWidth) - 324 - 165 - 4,
+      maxWidth: (props.contentWidth === 'Fixed' ? 1200 : window.innerWidth) - 324 - 165 - 4,
     };
   }
 
   static getDerivedStateFromProps(props) {
     return {
-      maxWidth: (props.grid === 'Fixed' ? 1200 : window.innerWidth) - 324 - 165 - 4,
+      maxWidth: (props.contentWidth === 'Fixed' ? 1200 : window.innerWidth) - 324 - 165 - 4,
     };
   }
 
   render() {
-    const { theme, grid, logo } = this.props;
+    const { theme, contentWidth, logo } = this.props;
     const { maxWidth } = this.state;
     return (
       <div className={`${styles.head} ${theme === 'light' ? styles.light : ''}`}>
@@ -28,7 +28,7 @@ export default class TopNavHeader extends PureComponent {
           ref={ref => {
             this.maim = ref;
           }}
-          className={`${styles.main} ${grid === 'Fixed' ? styles.wide : ''}`}
+          className={`${styles.main} ${contentWidth === 'Fixed' ? styles.wide : ''}`}
         >
           <div className={styles.left}>
             <div className={styles.logo} key="logo" id="logo">

src/locales/en-US.js

@@ -156,11 +156,23 @@ export default {
   'app.result.success.btn-project': 'View project',
   'app.result.success.btn-print': 'Print',
   'app.setting.pagestyle': 'Page style setting',
+  'app.setting.pagestyle.dark': 'Dark style',
+  'app.setting.pagestyle.light': 'Light style',
   'app.setting.content-width': 'Content Width',
   'app.setting.content-width.fixed': 'Fixed',
   'app.setting.content-width.fluid': 'Fluid',
   'app.setting.themecolor': 'Theme Color',
+  'app.setting.themecolor.dust': 'Dust Red',
+  'app.setting.themecolor.volcano': 'Volcano',
+  'app.setting.themecolor.sunset': 'Sunset Orange',
+  'app.setting.themecolor.cyan': 'Cyan',
+  'app.setting.themecolor.green': 'Polar Green',
+  'app.setting.themecolor.daybreak': 'Daybreak Blue (default)',
+  'app.setting.themecolor.geekblue': 'Geek Glue',
+  'app.setting.themecolor.purple': 'Golden Purple',
   'app.setting.navigationmode': 'Navigation Mode',
+  'app.setting.sidemenu': 'Side Menu Layout',
+  'app.setting.topmenu': 'Top Menu Layout',
   'app.setting.fixedheader': 'Fixed Header',
   'app.setting.fixedsidebar': 'Fixed Sidebar',
   'app.setting.hideheader': 'Hidden Header when sliding ',

src/locales/zh-CN.js

@@ -152,13 +152,25 @@ export default {
   'app.result.success.btn-project': '查看项目',
   'app.result.success.btn-print': '打印',
   'app.setting.pagestyle': '整体风格设置',
+  'app.setting.pagestyle.dark': '暗色菜单风格',
+  'app.setting.pagestyle.light': '亮色菜单风格',
   'app.setting.content-width': '内容区域宽度',
   'app.setting.content-width.fixed': '定宽',
   'app.setting.content-width.fluid': '流式',
   'app.setting.themecolor': '主题色',
+  'app.setting.themecolor.dust': '薄暮',
+  'app.setting.themecolor.volcano': '火山',
+  'app.setting.themecolor.sunset': '日暮',
+  'app.setting.themecolor.cyan': '明青',
+  'app.setting.themecolor.green': '极光绿',
+  'app.setting.themecolor.daybreak': '拂晓蓝（默认）',
+  'app.setting.themecolor.geekblue': '极客蓝',
+  'app.setting.themecolor.purple': '酱紫',
   'app.setting.navigationmode': '导航模式',
+  'app.setting.sidemenu': '侧边菜单布局',
+  'app.setting.topmenu': '顶部菜单布局',
   'app.setting.fixedheader': '固定 Header',
-  'app.setting.fixedsidebar': '固定 Sidebar',
+  'app.setting.fixedsidebar': '固定侧边菜单',
   'app.setting.hideheader': '下滑时隐藏 Header',
   'app.setting.othersettings': '其他设置',
   'app.setting.weakmode': '色弱模式',