From 8b02a21d365e31e7e7fe32fbd45ed8635a3faac7 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Apr 2018 22:09:49 +0800
Subject: [PATCH] site: valid primary color range

---
 site/theme/static/colors.less                 | 16 ++++-
 .../theme/template/Color/ColorPaletteTool.jsx | 60 ++++++++++++-------
 site/theme/template/Color/ColorPicker.jsx     |  2 +-
 3 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/site/theme/static/colors.less b/site/theme/static/colors.less
index 271da99f42..379dc4c9ae 100644
--- a/site/theme/static/colors.less
+++ b/site/theme/static/colors.less
@@ -9,13 +9,23 @@
   &-pick {
     text-align: center;
     font-size: 20px;
-    margin-bottom: 8px;
+    margin: 0 0 20px;
   }
   &-picker {
-    margin: 12px 0 24px;
+    margin: 24px 0;
     &-value {
-      font-size: 13px;
+      font-size: 14px;
       font-family: Consolas;
+      margin-left: 16px;
+      position: relative;
+      top: -3px;
+    }
+    &-validation {
+      font-size: 13px;
+      color: @error-color;
+      margin-left: 16px;
+      position: relative;
+      top: -3px;
     }
   }
 }
diff --git a/site/theme/template/Color/ColorPaletteTool.jsx b/site/theme/template/Color/ColorPaletteTool.jsx
index 642a887c16..f7a4af067e 100644
--- a/site/theme/template/Color/ColorPaletteTool.jsx
+++ b/site/theme/template/Color/ColorPaletteTool.jsx
@@ -3,41 +3,59 @@ import { FormattedMessage } from 'react-intl';
 import ColorPicker from './ColorPicker';
 import ColorPatterns from './ColorPatterns';
 
+const primaryMinSaturation = 70; // 主色推荐最小饱和度
+const primaryMinBrightness = 70; // 主色推荐最小亮度
+
 // eslint-disable-next-line
 export default class ColorPaletteTool extends Component {
   state = {
     primaryColor: '#1890ff',
+    primaryColorInstance: null,
   };
 
-  handleChangeColor = (e) => {
+  handleChangeColor = (e, color) => {
     const value = e.target ? e.target.value : e;
     this.setState({
       primaryColor: value,
+      primaryColorInstance: color,
     });
   }
 
+  renderColorValidation() {
+    const { primaryColorInstance } = this.state;
+    let text = '';
+    if (primaryColorInstance) {
+      if (primaryColorInstance.hsv.s * 100 < primaryMinSaturation) {
+        text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(primaryColorInstance.hsv.s * 100).toFixed(2)}）`;
+      }
+      if (primaryColorInstance.hsv.v * 100 < primaryMinBrightness) {
+        text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(primaryColorInstance.hsv.v * 100).toFixed(2)}）`;
+      }
+    }
+    return <span className="color-palette-picker-validation">{text.trim()}</span>;
+  }
+
   render() {
     return (
-      <div style={{ margin: '0 auto', textAlign: 'center' }}>
-        <div className="color-palette-horizontal">
-          <div className="color-palette-pick">
-            <FormattedMessage id="app.docs.color.pick-primary" />
-            <div className="color-palette-picker">
-              <span style={{ display: 'inline-block' }}>
-                <ColorPicker
-                  type="chrome"
-                  color={this.state.primaryColor}
-                  onChange={this.handleChangeColor}
-                />
-              </span>
-              <div className="color-palette-picker-value">
-                {this.state.primaryColor}
-              </div>
-            </div>
-          </div>
-          <div className="main-color">
-            <ColorPatterns color={this.state.primaryColor} />
-          </div>
+      <div className="color-palette-horizontal">
+        <div className="color-palette-pick">
+          <FormattedMessage id="app.docs.color.pick-primary" />
+        </div>
+        <div className="main-color">
+          <ColorPatterns color={this.state.primaryColor} />
+        </div>
+        <div className="color-palette-picker">
+          <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
+            <ColorPicker
+              type="chrome"
+              color={this.state.primaryColor}
+              onChange={this.handleChangeColor}
+            />
+          </span>
+          <span className="color-palette-picker-value">
+            {this.state.primaryColor}
+          </span>
+          {this.renderColorValidation()}
         </div>
       </div>
     );
diff --git a/site/theme/template/Color/ColorPicker.jsx b/site/theme/template/Color/ColorPicker.jsx
index 5aec75ccb5..b93a699f62 100644
--- a/site/theme/template/Color/ColorPicker.jsx
+++ b/site/theme/template/Color/ColorPicker.jsx
@@ -33,7 +33,7 @@ export default class ColorPicker extends Component {
   };
   handleChange = (color) => {
     this.setState({ color: color.hex });
-    this.props.onChange(color.hex);
+    this.props.onChange(color.hex, color);
   };
   handleChangeComplete = (color) => {
     this.setState({ color: color.hex });