Fixes mozilla-services#4741 - Update color in text tool for localized…

… sites
punamdahiya · Aug 6, 2018 · cdbbaf8 · cdbbaf8
1 parent 201f677
commit cdbbaf8
Showing 1 changed file with 13 additions and 11 deletions.
diff --git a/server/src/pages/shot/color-picker.js b/server/src/pages/shot/color-picker.js
@@ -71,35 +71,35 @@ exports.ColorPicker = class ColorPicker extends React.Component {
         <div className="triangle-inner"></div>
       </div>
       <div className="color-row">
-        <Localized id="annotationColorWhite"><div className="swatch" title="White"
+        <Localized id="annotationColorWhite"><div className="swatch" title="White" data-color-name="White"
           style={{ backgroundColor: "#FFF", border: "1px solid #000" }}
           onClick={this.onClickSwatch.bind(this)}></div></Localized>
-        <Localized id="annotationColorBlack"><div className="swatch" title="Black"
+        <Localized id="annotationColorBlack"><div className="swatch" title="Black" data-color-name="Black"
           style={{ backgroundColor: "#000" }}
           onClick={this.onClickSwatch.bind(this)}></div></Localized>
-        <Localized id="annotationColorRed"><div className="swatch" title="Red"
+        <Localized id="annotationColorRed"><div className="swatch" title="Red" data-color-name="Red"
           style={{ backgroundColor: "#E74C3C" }}
           onClick={this.onClickSwatch.bind(this)}></div></Localized>
       </div>
       <div className="color-row">
-        <Localized id="annotationColorGreen"><div className="swatch" title="Green"
+        <Localized id="annotationColorGreen"><div className="swatch" title="Green" data-color-name="Green"
           style={{ backgroundColor: "#2ECC71" }}
           onClick={this.onClickSwatch.bind(this)}></div></Localized>
-        <Localized id="annotationColorBlue"><div className="swatch" title="Blue"
+        <Localized id="annotationColorBlue"><div className="swatch" title="Blue" data-color-name="Blue"
           style={{ backgroundColor: "#3498DB" }}
           onClick={this.onClickSwatch.bind(this)}></div></Localized>
-        <Localized id="annotationColorYellow"><div className="swatch" title="Yellow"
+        <Localized id="annotationColorYellow"><div className="swatch" title="Yellow" data-color-name="Yellow"
           style={{ backgroundColor: "#FF0" }}
           onClick={this.onClickSwatch.bind(this)}></div></Localized>
       </div>
       <div className="color-row">
-        <Localized id="annotationColorPurple"><div className="swatch" title="Purple"
+        <Localized id="annotationColorPurple"><div className="swatch" title="Purple" data-color-name="Purple"
           style={{ backgroundColor: "#8E44AD" }}
           onClick={this.onClickSwatch.bind(this)}></div></Localized>
-        <Localized id="annotationColorSeaGreen"><div className="swatch" title="Sea Green"
+        <Localized id="annotationColorSeaGreen"><div className="swatch" title="Sea Green" data-color-name="Sea Green"
           style={{ backgroundColor: "#1ABC9C" }}
           onClick={this.onClickSwatch.bind(this)}></div></Localized>
-        <Localized id="annotationColorGrey"><div className="swatch" title="Grey"
+        <Localized id="annotationColorGrey"><div className="swatch" title="Grey" data-color-name="Grey"
           style={{ backgroundColor: "#34495E" }}
           onClick={this.onClickSwatch.bind(this)}></div></Localized>
       </div>
@@ -108,9 +108,11 @@ exports.ColorPicker = class ColorPicker extends React.Component {
 
   onClickSwatch(e) {
     const color = e.target.style.backgroundColor;
+    const colorName = e.target.dataset.colorName.toLowerCase().replace(/\s/g, "-");
+    this.setState({color, colorName, pickerActive: false});
+    this.props.setColorCallback && this.props.setColorCallback(color, colorName);
+
     const title = e.target.title.toLowerCase().replace(/\s/g, "-");
-    this.setState({color, colorName: title, pickerActive: false});
-    this.props.setColorCallback && this.props.setColorCallback(color, title);
     sendEvent(`${title}-select`, "annotation-color-board");
   }