diff --git a/app/assets/javascripts/discourse/components/d-editor.js.es6 b/app/assets/javascripts/discourse/components/d-editor.js.es6 index 9fd9e43ef..3b2aa3740 100644 --- a/app/assets/javascripts/discourse/components/d-editor.js.es6 +++ b/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 diff --git a/app/assets/javascripts/discourse/templates/components/d-editor.hbs b/app/assets/javascripts/discourse/templates/components/d-editor.hbs index 27119b84d..dacde9aa7 100644 --- a/app/assets/javascripts/discourse/templates/components/d-editor.hbs +++ b/app/assets/javascripts/discourse/templates/components/d-editor.hbs @@ -11,7 +11,7 @@
{{#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}}
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss index 0901a9f4e..1088eca1b 100644 --- a/app/assets/stylesheets/common/d-editor.scss +++ b/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; } } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index aad28eab0..7a947239b 100644 --- a/config/locales/client.en.yml +++ b/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"