github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-05-22 22:59:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Drastically improve how the composer looks and behaves

Browse Source 
- New, cleaner, more prominent look
- Make it statically positioned down the bottom on mobile, so you can
still scroll up to look at posts
- Fix some bugs with animation, jumping between views
This commit is contained in:
Toby Zerner
2015-05-18 10:40:14 +09:30
parent e6362a222e
commit aa2bc23039
7 changed files with 83 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
js/forum/src/components/composer.js
View File

@ -133,19 +133,16 @@ class Composer extends Component {
}
render(anchorToBottom) {
// @todo this function's logic could probably use some reworking. The
// following line is bad because it prevents focusing on the composer
// input when the composer is shown when it's already being shown
if (this.position() === this.oldPosition) { return; }
var $composer = this.$();
var $composer = this.$().stop(true);
var oldHeight = $composer.is(':visible') ? $composer.outerHeight() : 0;
if (this.position() !== Composer.PositionEnum.HIDDEN) {
m.redraw(true);
}
this.updateHeight();
this.$().height(this.computedHeight());
var newHeight = $composer.outerHeight();
switch (this.position()) {
@ -178,7 +175,10 @@ class Composer extends Component {
}
$('body').toggleClass('composer-open', this.position() !== Composer.PositionEnum.HIDDEN);
this.oldPosition = this.position();
this.setContentHeight(this.computedHeight());
if (this.position() !== Composer.PositionEnum.HIDDEN) {
this.setContentHeight(this.computedHeight());
}
}
// Update the amount of padding-bottom on the body so that the page's
@ -203,12 +203,12 @@ class Composer extends Component {
// to fill up the height of the composer, minus the space taken up by the
// composer's header/footer/etc.
setContentHeight(height) {
var content = this.$('.composer-content');
this.$('.flexible-height').height(height -
parseInt(content.css('padding-top')) -
parseInt(content.css('padding-bottom')) -
this.$('.composer-header').outerHeight(true) -
this.$('.text-editor-controls').outerHeight(true));
var flexible = this.$('.flexible-height');
if (flexible.length) {
flexible.height(height -
(flexible.offset().top - this.$().offset().top) -
this.$('.text-editor-controls').outerHeight(true));
}
}
load(component) {
@ -225,8 +225,7 @@ class Composer extends Component {
if ([Composer.PositionEnum.MINIMIZED, Composer.PositionEnum.HIDDEN].indexOf(this.position()) !== -1) {
this.position(Composer.PositionEnum.NORMAL);
}
// work around https://github.com/lhorie/mithril.js/issues/603
setTimeout(() => this.render(anchorToBottom));
this.render(anchorToBottom);
}
hide() {
@ -276,7 +275,7 @@ class Composer extends Component {
items.add('minimize', this.control({ icon: 'minus minimize', title: 'Minimize', onclick: this.minimize.bind(this) }));
items.add('fullScreen', this.control({ icon: 'expand', title: 'Full Screen', onclick: this.fullScreen.bind(this) }));
}
items.add('close', this.control({ icon: 'times', title: 'Close', wrapperClass: 'back-control', onclick: this.close.bind(this) }));
items.add('close', this.control({ icon: 'times', title: 'Close', onclick: this.close.bind(this) }));
}
return items;