Add l10n title messages for edit btn and colors. (#4206) (#4265)

mozilla-services · Mar 26, 2018 · 81ab9ce · 81ab9ce
1 parent 5aa2986
commit 81ab9ce
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 11 deletions.
diff --git a/locales/en-US/server.ftl b/locales/en-US/server.ftl
@@ -114,6 +114,8 @@ shotPageAbuseButton =
     .title = Report this shot for abuse, spam, or other problems
 shotPageDownloadShot =
     .title = Download
+shotPageEditButton =
+    .title = Edit this image
 shotPageDownload = Download
 shotPageScreenshotsDescription = Screenshots made simple. Take, save, and share screenshots without leaving Firefox.
 shotPageUpsellFirefox = Get Firefox now
@@ -192,6 +194,24 @@ annotationCropConfirmButton = Confirm
     .title = Confirm selection
 annotationCropCancelButton = Cancel
     .title = Cancel selection
+annotationColorWhite =
+    .title = White
+annotationColorBlack =
+    .title = Black
+annotationColorRed =
+    .title = Red
+annotationColorGreen =
+    .title = Green
+annotationColorBlue =
+    .title = Blue
+annotationColorYellow =
+    .title = Yellow
+annotationColorPurple =
+    .title = Purple
+annotationColorSeaGreen =
+    .title = Sea Green
+annotationColorGrey =
+    .title = Grey
 
 ## Shotindex page
 

diff --git a/server/src/pages/shot/editor.js b/server/src/pages/shot/editor.js
@@ -780,19 +780,37 @@ class ColorPicker extends React.Component {
         <div className="triangle-inner"></div>
       </div>
       <div className="color-row">
-        <div className="swatch" title="White" style={{backgroundColor: "#FFF", border: "1px solid #000"}} onClick={this.onClickSwatch.bind(this)}></div>
-        <div className="swatch" title="Black" style={{backgroundColor: "#000"}} onClick={this.onClickSwatch.bind(this)}></div>
-        <div className="swatch" title="Red" style={{backgroundColor: "#E74C3C"}} onClick={this.onClickSwatch.bind(this)}></div>
+        <Localized id="annotationColorWhite"><div className="swatch" title="White"
+          style={{ backgroundColor: "#FFF", border: "1px solid #000" }}
+          onClick={this.onClickSwatch.bind(this)}></div></Localized>
+        <Localized id="annotationColorBlack"><div className="swatch" title="Black"
+          style={{ backgroundColor: "#000" }}
+          onClick={this.onClickSwatch.bind(this)}></div></Localized>
+        <Localized id="annotationColorRed"><div className="swatch" title="Red"
+          style={{ backgroundColor: "#E74C3C" }}
+          onClick={this.onClickSwatch.bind(this)}></div></Localized>
       </div>
-        <div className="color-row">
-        <div className="swatch" title="Green" style={{backgroundColor: "#2ECC71"}} onClick={this.onClickSwatch.bind(this)}></div>
-        <div className="swatch" title="Blue" style={{backgroundColor: "#3498DB"}} onClick={this.onClickSwatch.bind(this)}></div>
-        <div className="swatch" title="Yellow" style={{backgroundColor: "#FF0"}} onClick={this.onClickSwatch.bind(this)}></div>
+      <div className="color-row">
+        <Localized id="annotationColorGreen"><div className="swatch" title="Green"
+          style={{ backgroundColor: "#2ECC71" }}
+          onClick={this.onClickSwatch.bind(this)}></div></Localized>
+        <Localized id="annotationColorBlue"><div className="swatch" title="Blue"
+          style={{ backgroundColor: "#3498DB" }}
+          onClick={this.onClickSwatch.bind(this)}></div></Localized>
+        <Localized id="annotationColorYellow"><div className="swatch" title="Yellow"
+          style={{ backgroundColor: "#FF0" }}
+          onClick={this.onClickSwatch.bind(this)}></div></Localized>
       </div>
       <div className="color-row">
-        <div className="swatch" title="Purple" style={{backgroundColor: "#8E44AD"}} onClick={this.onClickSwatch.bind(this)}></div>
-        <div className="swatch" title="Sea Green" style={{backgroundColor: "#1ABC9C"}} onClick={this.onClickSwatch.bind(this)}></div>
-        <div className="swatch" title="Grey" style={{backgroundColor: "#34495E"}} onClick={this.onClickSwatch.bind(this)}></div>
+        <Localized id="annotationColorPurple"><div className="swatch" title="Purple"
+          style={{ backgroundColor: "#8E44AD" }}
+          onClick={this.onClickSwatch.bind(this)}></div></Localized>
+        <Localized id="annotationColorSeaGreen"><div className="swatch" title="Sea Green"
+          style={{ backgroundColor: "#1ABC9C" }}
+          onClick={this.onClickSwatch.bind(this)}></div></Localized>
+        <Localized id="annotationColorGrey"><div className="swatch" title="Grey"
+          style={{ backgroundColor: "#34495E" }}
+          onClick={this.onClickSwatch.bind(this)}></div></Localized>
       </div>
     </div>
   }

diff --git a/server/src/pages/shot/view.js b/server/src/pages/shot/view.js
@@ -352,7 +352,9 @@ class Body extends React.Component {
       trashOrFlagButton = <Localized id="shotPageDeleteButton">
         <button className="button transparent trash" title="Delete this shot permanently" onClick={ this.onClickDelete.bind(this) }></button>
       </Localized>;
-      editButton = <button className="button transparent edit" title="Edit this image" onClick={ this.onClickEdit.bind(this) } ref={(edit) => { this.editButton = edit }}></button>
+      editButton = <Localized id="shotPageEditButton">
+        <button className="button transparent edit" title="Edit this image" onClick={ this.onClickEdit.bind(this) } ref={(edit) => { this.editButton = edit }}></button>
+      </Localized>;
     } else {
       trashOrFlagButton = <Localized id="shotPageAbuseButton">
         <button className="button transparent flag" title="Report this shot for abuse, spam, or other problems" onClick={ this.onClickFlag.bind(this) }></button>