🎨 color picker in footer

ant-design · Sep 19, 2019 · d9b0582 · d9b0582
1 parent 16dff49
commit d9b0582
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 16 deletions.
diff --git a/site/theme/en-US.js b/site/theme/en-US.js
@@ -54,6 +54,7 @@ module.exports = {
     'app.footer.awesome': 'Awesome Ant Design',
     'app.footer.course': 'Ant Design Practical Tutorial',
     'app.footer.chinamirror': 'China Mirror 🇨🇳',
+    'app.footer.primary-color-changing': 'Changing primary color...',
     'app.footer.primary-color-changed': 'Change primary color successfully!',
     'app.footer.scaffold': 'Scaffold',
     'app.footer.kitchen': 'Sketch Toolkit',

diff --git a/site/theme/template/Layout/Footer.jsx b/site/theme/template/Layout/Footer.jsx
@@ -1,16 +1,17 @@
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Modal, message, Row, Col, Icon } from 'antd';
+import { Modal, message, Icon } from 'antd';
 import { Link } from 'bisheng/router';
 import RcFooter from 'rc-footer';
+import { presetPalettes } from '@ant-design/colors';
 import { isLocalStorageNameSupported, loadScript, getLocalizedPathname } from '../utils';
 import ColorPicker from '../Color/ColorPicker';
 
 class Footer extends React.Component {
   lessLoaded = false;
 
   state = {
-    color: '#1890ff',
+    color: presetPalettes.blue.primary,
   };
 
   componentDidMount() {
@@ -32,7 +33,6 @@ class Footer extends React.Component {
 
   getColumns() {
     const { intl = {} } = this.props;
-    const { color } = this.state;
     const isZhCN = intl.locale === 'zh-CN';
     return [
       {
@@ -171,7 +171,19 @@ class Footer extends React.Component {
             url: getLocalizedPathname('/docs/react/faq', isZhCN),
           },
           {
-            icon: <Icon type="code" />,
+            icon: <Icon type="bug" />,
+            title: <FormattedMessage id="app.footer.bug-report" />,
+            url: 'https://new-issue.ant.design/',
+            openExternal: true,
+          },
+          {
+            icon: <Icon type="issues-close" />,
+            title: <FormattedMessage id="app.footer.issues" />,
+            url: 'https://github.com/ant-design/ant-design/issues',
+            openExternal: true,
+          },
+          {
+            icon: <Icon type="book" />,
             title: <FormattedMessage id="app.footer.course" />,
             url: 'https://www.yuque.com/ant-design/course',
             openExternal: true,
@@ -188,18 +200,6 @@ class Footer extends React.Component {
             url: 'https://gitter.im/ant-design/ant-design-english',
             openExternal: true,
           },
-          {
-            icon: <Icon type="bug" />,
-            title: <FormattedMessage id="app.footer.bug-report" />,
-            url: 'https://new-issue.ant.design/',
-            openExternal: true,
-          },
-          {
-            icon: <Icon type="issues-close" />,
-            title: <FormattedMessage id="app.footer.issues" />,
-            url: 'https://github.com/ant-design/ant-design/issues',
-            openExternal: true,
-          },
           {
             icon: <Icon type="question-circle" />,
             title: <FormattedMessage id="app.footer.stackoverflow" />,
@@ -294,6 +294,9 @@ class Footer extends React.Component {
             url: 'https://xtech.antfin.com/',
             openExternal: true,
           },
+          {
+            title: this.renderThemeChanger(),
+          },
         ],
       },
     ];
@@ -304,11 +307,13 @@ class Footer extends React.Component {
       const {
         intl: { messages },
       } = this.props;
+      const hide = message.loading(messages['app.footer.primary-color-changing']);
       window.less
         .modifyVars({
           '@primary-color': color,
         })
         .then(() => {
+          hide();
           Icon.setTwoToneColor({ primaryColor: color });
           message.success(messages['app.footer.primary-color-changed']);
           this.setState({ color });
@@ -364,6 +369,27 @@ class Footer extends React.Component {
     });
   }
 
+  renderThemeChanger() {
+    const { color } = this.state;
+    const colors = Object.keys(presetPalettes).filter(item => item !== 'grey');
+    return (
+      <div style={{ marginTop: 20 }}>
+        <ColorPicker
+          type="sketch"
+          small
+          color={color}
+          position="top"
+          presetColors={[
+            ...colors.map(c => presetPalettes[c][5]),
+            ...colors.map(c => presetPalettes[c][4]),
+            ...colors.map(c => presetPalettes[c][6]),
+          ]}
+          onChangeComplete={this.handleColorChange}
+        />
+      </div>
+    );
+  }
+
   render() {
     return (
       <RcFooter

diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js
@@ -51,6 +51,7 @@ module.exports = {
     'app.footer.awesome': 'Awesome Ant Design',
     'app.footer.course': 'Ant Design 实战教程',
     'app.footer.chinamirror': '国内镜像站点 🇨🇳',
+    'app.footer.primary-color-changing': '正在修改主题色...',
     'app.footer.primary-color-changed': '修改主题色成功！',
     'app.footer.kitchen': 'Sketch 工具集',
     'app.footer.landing': '首页模板集',