Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Refactor composer buttons into flat buttons

This commit is contained in:
Robin Ward 2017-07-24 17:31:14 -04:00
parent d67fe4c674
commit 5da848088a
9 changed files with 66 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/discourse/components/composer-toggles.js.es6 Normal file
View File

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

16
app/assets/javascripts/discourse/components/flat-button.js.es6 Normal file
View File

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

26
app/assets/javascripts/discourse/controllers/composer.js.es6
View File

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

12
app/assets/javascripts/discourse/templates/components/composer-toggles.hbs Normal file
View File

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

1
app/assets/javascripts/discourse/templates/components/flat-button.hbs Normal file
View File

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

8
app/assets/javascripts/discourse/templates/composer.hbs
View File

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

6
app/assets/stylesheets/common/components/buttons.scss
View File

@ -189,3 +189,9 @@
font-size: 1.143em;
line-height: 20px;
}
.btn-flat {
background: transparent;
border: 0;
outline: 0;
}

19
app/assets/stylesheets/desktop/compose.scss
View File

@ -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;

21
app/assets/stylesheets/mobile/compose.scss
View File

@ -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,12 +102,6 @@ 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;
@ -124,12 +109,6 @@ input[type=radio], input[type=checkbox] {
.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