framework/ember/app/components/ui/text-editor.js
Toby Zerner 1d6616a419 Responsive design baby!
Mobile responsive design with a very native feel, all in pure CSS (no
templating differences between versions — even though some things are
in very different positions.)

I’ve been working on this whole thing in my head for a while now,
planning out how certain components will be laid out on the mobile
version, and how to reason about them in the templates so that a
substantially different layout can still be achieved by only using CSS.
Today I finally wrote the CSS and it’s come together pretty damn
perfectly.

Still to come:
- Swiping left or right on discussions to reveal controls
- Tablet version
2015-03-03 20:30:52 +10:30

34 lines
869 B
JavaScript

import Ember from 'ember';
import HasItemLists from 'flarum/mixins/has-item-lists';
import ActionButton from 'flarum/components/ui/action-button';
/**
A text editor. Contains a textarea and an item list of `controls`, including
a submit button.
*/
export default Ember.Component.extend(HasItemLists, {
classNames: ['text-editor'],
itemLists: ['controls'],
value: '',
disabled: false,
didInsertElement: function() {
var component = this;
this.$('textarea').bind('keydown', 'meta+return', function() {
component.send('submit');
});
},
populateControls: function(items) {
this.addActionItem(items, 'submit', this.get('submitLabel'), 'check').reopen({className: 'btn btn-primary', listItemClass: 'primary-control'});
},
actions: {
submit: function() {
this.sendAction('submit', this.get('value'));
}
}
});