UX: Refactor composer buttons into flat buttons

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";
+  }
+});
+

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();
+  }
+});

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) {

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'}}

app/assets/javascripts/discourse/templates/components/flat-button.hbs

@@ -0,0 +1 @@
+{{fa-icon icon}}

app/assets/javascripts/discourse/templates/composer.hbs

@@ -22,10 +22,10 @@
       {{composer-messages composer=model messageCount=messageCount addLinkLookup="addLinkLookup"}}
 
       <div class='control'>
-        {{#if site.mobileView}}
-          <a href class='toggle-toolbar' {{action "toggleToolbar" bubbles=false}}></a>
-        {{/if}}
-        <a href class='toggler' {{action "toggle" bubbles=false}} title={{i18n 'composer.toggler'}}></a>
+        {{composer-toggles
+          composeState=model.composeState
+          toggleComposer=(action "toggle")
+          toggleToolbar=(action "toggleToolbar")}}
 
         {{#if model.viewOpen}}
           <div class='control-row reply-area'>

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;
+}

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;

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