UX: Allow translation of composer icons

app/assets/javascripts/discourse/components/d-editor.js.es6

@@ -21,6 +21,11 @@ function getHead(head, prev) {
   }
 }
 
+function getButtonLabel(labelKey, defaultLabel) {
+  // use the Font Awesome icon if the label matches the default
+  return I18n.t(labelKey) === defaultLabel ? null : labelKey;
+}
+
 const OP = {
   NONE: 0,
   REMOVED: 1,
@@ -44,6 +49,8 @@ class Toolbar {
       trimLeading: true,
       id: 'bold',
       group: 'fontStyles',
+      icon: 'bold',
+      label: getButtonLabel('composer.bold_label', 'B'),
       shortcut: 'B',
       perform: e => e.applySurround('**', '**', 'bold_text')
     });
@@ -52,6 +59,8 @@ class Toolbar {
       trimLeading: true,
       id: 'italic',
       group: 'fontStyles',
+      icon: 'italic',
+      label: getButtonLabel('composer.italic_label', 'I'),
       shortcut: 'I',
       perform: e => e.applySurround('_', '_', 'italic_text')
     });
@@ -89,7 +98,8 @@ class Toolbar {
     this.addButton({
       id: 'heading',
       group: 'extras',
-      icon: 'font',
+      icon: 'header',
+      label: getButtonLabel('composer.heading_label', 'H'),
       shortcut: 'Alt+1',
       perform: e => e.applyList('## ', 'heading_text')
     });
@@ -119,7 +129,8 @@ class Toolbar {
     const createdButton = {
       id: button.id,
       className: button.className || button.id,
-      icon: button.icon || button.id,
+      label: button.label,
+      icon: button.label ? null : button.icon || button.id,
       action: button.action || 'toolbarButton',
       perform: button.perform || Ember.K,
       trimLeading: button.trimLeading

app/assets/javascripts/discourse/templates/components/d-editor.hbs

@@ -11,7 +11,7 @@
   <div class='d-editor-button-bar'>
     {{#each toolbar.groups as |group|}}
       {{#each group.buttons as |b|}}
-        {{d-button action=b.action actionParam=b translatedTitle=b.title icon=b.icon class=b.className}}
+        {{d-button action=b.action actionParam=b translatedTitle=b.title label=b.label icon=b.icon class=b.className}}
       {{/each}}
       {{#unless group.lastGroup}}
         <div class='d-editor-spacer'></div>

app/assets/stylesheets/common/d-editor.scss

@@ -45,6 +45,24 @@
     padding: 2px 4px;
     float: left;
     margin-right: 6px;
+    min-width: 20px;
+  }
+
+  .btn:not(.no-text) {
+    font-size: 1.2em;
+  }
+
+  .btn.bold {
+    font-weight: bolder;
+  }
+
+  .btn.italic {
+    font-style: italic;
+  }
+
+  .btn.heading {
+    font-family: Palatino, Cambria, Georgia, "Times New Roman", serif;
+    font-weight: bold;
   }
 }
 

config/locales/client.en.yml

@@ -1065,8 +1065,10 @@ en:
       hide_preview: '« hide preview'
 
       quote_post_title: "Quote whole post"
+      bold_label: "B"
       bold_title: "Strong"
       bold_text: "strong text"
+      italic_label: "I"
       italic_title: "Emphasis"
       italic_text: "emphasized text"
       link_title: "Hyperlink"
@@ -1084,6 +1086,7 @@ en:
       olist_title: "Numbered List"
       ulist_title: "Bulleted List"
       list_item: "List item"
+      heading_label: "H"
       heading_title: "Heading"
       heading_text: "Heading"
       hr_title: "Horizontal Rule"