mirror of
https://github.com/flarum/framework.git
synced 2024-11-30 13:36:10 +08:00
74e80ea2df
- Write CSS for everything, update templates. - Refactor discussion view. Stream is split into two components (content and scrubber) which have their own responsibilities. - Extract pane functionality into a mixin. - Implement global “back button” system. You give a “paneable” target to the application controller, the back button will modulate its pane-related properties as necessary, and call an action when the button is clicked. - Extract welcome-hero into its own component. - Lots of other general improvements/refactoring. The code is quite well-commented so take a look!
47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
import Ember from 'ember';
|
|
|
|
// This mixin defines a "paneable" controller - this is, one that has a
|
|
// portion of its interface that can be turned into a pane which slides out
|
|
// from the side of the screen. This is useful, for instance, when you have
|
|
// nested routes (index > discussion) and want to have the parent
|
|
// route's interface transform into a side pane when entering the child route.
|
|
export default Ember.Mixin.create({
|
|
needs: ['application'],
|
|
|
|
// Whether or not the "paneable" interface element is paned.
|
|
paned: false,
|
|
|
|
// Whether or not the pane should be visible on screen.
|
|
paneShowing: false,
|
|
paneHideTimeout: null,
|
|
|
|
// Whether or not the pane is always visible on screen, even when the
|
|
// mouse is taken away.
|
|
panePinned: false,
|
|
|
|
actions: {
|
|
showPane: function() {
|
|
if (this.get('paned')) {
|
|
clearTimeout(this.get('paneHideTimeout'));
|
|
this.set('paneShowing', true);
|
|
}
|
|
},
|
|
|
|
hidePane: function(delay) {
|
|
var controller = this;
|
|
controller.set('paneHideTimeout', setTimeout(function() {
|
|
controller.set('paneShowing', false);
|
|
}, delay || 250));
|
|
},
|
|
|
|
togglePinned: function() {
|
|
this.toggleProperty('panePinned');
|
|
}
|
|
},
|
|
|
|
// Tell the application controller when we pin/unpin the pane so that
|
|
// other parts of the interface can respond appropriately.
|
|
panePinnedChanged: function() {
|
|
this.set('controllers.application.panePinned', this.get('paned') && this.get('panePinned'));
|
|
}.observes('paned', 'panePinned')
|
|
}); |