f l20n plural headers

translate · Dec 8, 2016 · 93db32f · 93db32f
1 parent 078169b
commit 93db32f
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 20 deletions.
diff --git a/mozilla_pootle/static/js/editor/formats/l20n/L20nPluralFormHeader.js b/mozilla_pootle/static/js/editor/formats/l20n/L20nPluralFormHeader.js
@@ -31,26 +31,61 @@ const L20nEditorPluralFormHeader = React.createClass({
     return false;
   },
 
+  getMenuItems(props) {
+    const items = [];
+    if (props.default) {
+      items.push(
+        <input
+          key={`menu-item-${items.length}`}
+          type="radio"
+          readOnly={true}
+          checked={true}
+          onClick={this.setDefaultPluralForm}
+          title={t('This plural form is used as a default')}
+        />
+      );
+      items.push(
+        <a
+          key={`menu-item-${items.length}`}
+          onClick={this.addPluralForm}
+        >
+          <i className="icon-add" title={t('Add another plural form')}></i>
+        </a>
+      );
+    } else {
+      items.push(
+        <input
+          key={`menu-item-${items.length}`}
+          type="radio"
+          onClick={this.setDefaultPluralForm}
+          title={t('Use this plural form as a default')}
+        />
+      );
+      items.push(
+        <a
+          key={`menu-item-${items.length}`}
+          onClick={this.removePluralForm}
+        >
+          <i className="icon-reject-white" title={t('Remove this plural form')}></i>
+        </a>
+      );
+    }
+    return items;
+  },
+
   render() {
     const props = this.props.getProps();
-    if (this.props.count === 1 || props === null) {
+    if (this.props.count === 1 && props === null) {
       return null;
     }
+    const items = this.getMenuItems(props);
+
     return (
       <div className="subheader">
         <div className="title">{props.title}</div>
-        { !props.default &&
-          <div className="menu">
-            <button
-              onClick={this.setDefaultPluralForm}
-              title={t('Set as default')}
-            >*</button>
-            <button
-              onClick={this.removePluralForm}
-              title={t('Remove')}
-            >x</button>
-          </div>
-        }
+        <div className="menu">
+          { items }
+        </div>
       </div>
     );
   },

diff --git a/mozilla_pootle/static/js/editor/formats/l20n/L20nUnit.js b/mozilla_pootle/static/js/editor/formats/l20n/L20nUnit.js
@@ -107,11 +107,7 @@ class L20nUnitPluralsState extends L20nUnitState {
   }
 
   extractPluralFormName(variant) {
-    const key = FTLASTSerializer.dumpExpression(variant.key);
-    if (variant.default) {
-      return `${key}, default`;
-    }
-    return key;
+    return FTLASTSerializer.dumpExpression(variant.key);
   }
 
   getEditorState() {
@@ -146,15 +142,15 @@ class L20nUnitPluralsState extends L20nUnitState {
     return this.l20nUnit.entity.value.elements[0].expressions[0].variants;
   }
 
-  setDefault({index}) {
+  setDefault(index) {
     for (let i = 0; i < this.variants.length; i++ ) {
       this.variants[i].default = (i === index);
       this.pluralForms[i] = this.extractPluralFormName(this.variants[i]);
     }
     this.view.update(this.pluralForms);
   }
 
-  removePluralForm({index}) {
+  removePluralForm(index) {
     this.variants.splice(index, 1);
     this.pluralForms.splice(index, 1);
     this.values.splice(index, 1);
@@ -168,6 +164,11 @@ class L20nUnitPluralsState extends L20nUnitState {
       }
     }
   }
+
+  getEditingAreaHeaderComponent() {
+    return L20nPluralFormHeader;
+  }
+
 }
 
 

diff --git a/mozilla_pootle/static/js/editor/formats/l20n/l20n.css b/mozilla_pootle/static/js/editor/formats/l20n/l20n.css
@@ -27,3 +27,10 @@
 {
   margin-left: 5px;
 }
+
+.subheader .menu .icon-reject-white,
+.subheader .menu .icon-add
+{
+  border-radius: 7px;
+  background-color: #ccc;
+}