From 5da848088a016e8839f055c7d54c5692f843ce26 Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Mon, 24 Jul 2017 17:31:14 -0400 Subject: [PATCH] UX: Refactor composer buttons into flat buttons --- .../components/composer-toggles.js.es6 | 14 ++++++++++ .../discourse/components/flat-button.js.es6 | 16 ++++++++++++ .../discourse/controllers/composer.js.es6 | 26 ++++++++----------- .../templates/components/composer-toggles.hbs | 12 +++++++++ .../templates/components/flat-button.hbs | 1 + .../discourse/templates/composer.hbs | 8 +++--- .../common/components/buttons.scss | 6 +++++ app/assets/stylesheets/desktop/compose.scss | 19 +------------- app/assets/stylesheets/mobile/compose.scss | 23 +--------------- 9 files changed, 66 insertions(+), 59 deletions(-) create mode 100644 app/assets/javascripts/discourse/components/composer-toggles.js.es6 create mode 100644 app/assets/javascripts/discourse/components/flat-button.js.es6 create mode 100644 app/assets/javascripts/discourse/templates/components/composer-toggles.hbs create mode 100644 app/assets/javascripts/discourse/templates/components/flat-button.hbs diff --git a/app/assets/javascripts/discourse/components/composer-toggles.js.es6 b/app/assets/javascripts/discourse/components/composer-toggles.js.es6 new file mode 100644 index 00000000000..cd5369638c7 --- /dev/null +++ b/app/assets/javascripts/discourse/components/composer-toggles.js.es6 @@ -0,0 +1,14 @@ +import computed from 'ember-addons/ember-computed-decorators'; + +export default Ember.Component.extend({ + tagName: '', + + @computed('composeState') + toggleIcon(composeState) { + if (composeState === "draft" || composeState === "saving") { + return "times"; + } + return "chevron-down"; + } +}); + diff --git a/app/assets/javascripts/discourse/components/flat-button.js.es6 b/app/assets/javascripts/discourse/components/flat-button.js.es6 new file mode 100644 index 00000000000..792db361387 --- /dev/null +++ b/app/assets/javascripts/discourse/components/flat-button.js.es6 @@ -0,0 +1,16 @@ +import { default as computed } from 'ember-addons/ember-computed-decorators'; + +export default Ember.Component.extend({ + tagName: 'button', + classNames: ['btn-flat'], + attributeBindings: ['disabled', 'translatedTitle:title'], + + @computed("title") + translatedTitle(title) { + if (title) return I18n.t(title); + }, + + click() { + return this.attrs.action(); + } +}); diff --git a/app/assets/javascripts/discourse/controllers/composer.js.es6 b/app/assets/javascripts/discourse/controllers/composer.js.es6 index 88e3dba6c2f..af23cb7d436 100644 --- a/app/assets/javascripts/discourse/controllers/composer.js.es6 +++ b/app/assets/javascripts/discourse/controllers/composer.js.es6 @@ -277,7 +277,17 @@ export default Ember.Controller.extend({ // Toggle the reply view toggle() { - this.toggle(); + this.closeAutocomplete(); + if (this.get('model.composeState') === Composer.OPEN) { + if (Ember.isEmpty(this.get('model.reply')) && Ember.isEmpty(this.get('model.title'))) { + this.close(); + } else { + this.shrink(); + } + } else { + this.close(); + } + return false; }, togglePreview() { @@ -390,20 +400,6 @@ export default Ember.Controller.extend({ return Discourse.Category.list(); }.property(), - toggle() { - this.closeAutocomplete(); - if (this.get('model.composeState') === Composer.OPEN) { - if (Ember.isEmpty(this.get('model.reply')) && Ember.isEmpty(this.get('model.title'))) { - this.close(); - } else { - this.shrink(); - } - } else { - this.close(); - } - return false; - }, - disableSubmit: Ember.computed.or("model.loading", "isUploading"), save(force) { diff --git a/app/assets/javascripts/discourse/templates/components/composer-toggles.hbs b/app/assets/javascripts/discourse/templates/components/composer-toggles.hbs new file mode 100644 index 00000000000..09e841bd85b --- /dev/null +++ b/app/assets/javascripts/discourse/templates/components/composer-toggles.hbs @@ -0,0 +1,12 @@ +{{#if site.mobileView}} + {{flat-button + class="toggle-toolbar" + icon="bars" + action=toggleToolbar}} +{{/if}} + +{{flat-button + class="toggler" + icon=toggleIcon + action=toggleComposer + title='composer.toggler'}} diff --git a/app/assets/javascripts/discourse/templates/components/flat-button.hbs b/app/assets/javascripts/discourse/templates/components/flat-button.hbs new file mode 100644 index 00000000000..41ee1dc6407 --- /dev/null +++ b/app/assets/javascripts/discourse/templates/components/flat-button.hbs @@ -0,0 +1 @@ +{{fa-icon icon}} diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs index 9e20fd73309..24912fed6be 100644 --- a/app/assets/javascripts/discourse/templates/composer.hbs +++ b/app/assets/javascripts/discourse/templates/composer.hbs @@ -22,10 +22,10 @@ {{composer-messages composer=model messageCount=messageCount addLinkLookup="addLinkLookup"}}
- {{#if site.mobileView}} - - {{/if}} - + {{composer-toggles + composeState=model.composeState + toggleComposer=(action "toggle") + toggleToolbar=(action "toggleToolbar")}} {{#if model.viewOpen}}
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss index f94de4060d9..4f4cf30549e 100644 --- a/app/assets/stylesheets/common/components/buttons.scss +++ b/app/assets/stylesheets/common/components/buttons.scss @@ -189,3 +189,9 @@ font-size: 1.143em; line-height: 20px; } + +.btn-flat { + background: transparent; + border: 0; + outline: 0; +} diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss index b3fdf423bb8..197169c728a 100644 --- a/app/assets/stylesheets/desktop/compose.scss +++ b/app/assets/stylesheets/desktop/compose.scss @@ -145,16 +145,11 @@ font-size: 1em; position: fixed; .toggler { - width: 15px; right: 1px; position: absolute; - font-size: 1.071em; + i { font-size: 1.1em; } color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); padding: 0 10px 5px 10px; - &:before { - font-family: "FontAwesome"; - content: "\f078"; - } } a.cancel { padding-left: 7px; @@ -192,12 +187,6 @@ color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } } - .toggler { - &:before { - font-family: "FontAwesome"; - content: "\f00d"; - } - } } &.saving { height: 40px !important; @@ -205,12 +194,6 @@ .saving-text { display: block; } - .toggler { - &:before { - font-family: "FontAwesome"; - content: "\f00d"; - } - } } .reply-area { max-width: 1500px; diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss index da6b7016d2b..1256f823e29 100644 --- a/app/assets/stylesheets/mobile/compose.scss +++ b/app/assets/stylesheets/mobile/compose.scss @@ -43,23 +43,14 @@ input[type=radio], input[type=checkbox] { font-size: 1em; position: fixed; .toggle-toolbar, .toggler { - width: 15px; right: 1px; position: absolute; font-size: 1.071em; color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); - padding: 0 10px 5px 10px; - &:before { - font-family: "FontAwesome"; - content: "\f078"; - } } .toggle-toolbar { right: 30px; - &:before { - content: "\f0c9"; - } } a.cancel { @@ -111,25 +102,13 @@ input[type=radio], input[type=checkbox] { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } } - .toggler { - &:before { - font-family: "FontAwesome"; - content: "\f00d"; - } - } } &.saving { height: 40px !important; - border-top: 1px solid $primary-low; + border-top: 1px solid $primary-low; .saving-text { display: block; } - .toggler { - &:before { - font-family: "FontAwesome"; - content: "\f00d"; - } - } } // if this is a new topic, make room for the category field in the editor on