mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-01 14:10:37 +02:00
Code Issues Releases Wiki Activity

Implement redesign, refactor everything

Browse Source 
- 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!
This commit is contained in:
Toby Zerner
2015-01-16 17:26:10 +10:30
parent d204ca87cf
commit 74e80ea2df
69 changed files with 2564 additions and 1334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
ember/app/controllers/application.js
View File

@@ -1,48 +1,35 @@
import Ember from 'ember';
// import NotificationMessage from '../models/notification-message';
export default Ember.Controller.extend({
needs: ['discussions'],
// The title of the forum.
// TODO: Preload this value in the index.html payload from Laravel config.
forumTitle: 'Ninetech Support Forum',
// forumTitle: '<img src="tv.png" height="24" style="vertical-align: baseline; margin-right: 5px"> TV Addicts',
// forumTitle: '<img src="gametoaid.png" height="50">',
// forumTitle: '<i class="fa fa-stethoscope" style="font-size: 140%"></i>&nbsp; Med Students Forum',
pageTitle: '',
documentTitle: function() {
return this.get('pageTitle') || this.get('forumTitle');
}.property('pageTitle', 'forumTitle'),
_updateTitle: function() {
// The title of the current page. This should be set as appropriate in
// controllers/views.
pageTitle: '',
// When either the forum title or the page title changes, we want to
// refresh the document's title.
updateTitle: function() {
var parts = [this.get('forumTitle')];
var pageTitle = this.get('pageTitle');
if (pageTitle) parts.unshift(pageTitle);
if (pageTitle) {
parts.unshift(pageTitle);
}
document.title = parts.join(' - ');
}.observes('pageTitle', 'forumTitle'),
// Whether or not a pane is currently pinned to the side of the interface.
panePinned: false,
searchQuery: '',
searchActive: false,
showDiscussionStream: false,
// notificationMessage: NotificationMessage.create({text: 'Sorry, you do not have permission to do that!', class: 'message-warning'}), // currently displaying notification message object
currentUser: null,
actions: {
hideMessage: function() {
this.set('notificationMessage', null);
},
search: function(query) {
this.transitionToRoute('discussions', {queryParams: {searchQuery: query, sort: query ? 'relevance' : 'recent'}});
},
this.transitionToRoute('index', {queryParams: {searchQuery: query, sort: query ? 'relevance' : 'recent'}});
}
}
});

4
ember/app/controllers/composer.js
View File

@@ -2,7 +2,9 @@ import Ember from 'ember';
export default Ember.Controller.extend({
needs: ['discussions'],
needs: ['index'],
user: Ember.Object.create({avatarNumber: 1}),
showing: false,

65
ember/app/controllers/discussion.js
View File

@@ -1,6 +1,6 @@
import Ember from 'ember';
import Stream from '../models/stream';
import PostStream from '../models/post-stream';
export default Ember.ObjectController.extend(Ember.Evented, {
@@ -19,7 +19,7 @@ export default Ember.ObjectController.extend(Ember.Evented, {
// Set up the post stream object. It needs to know about the discussion
// its representing the posts for, and we also need to inject the Ember
// data store.
var stream = Stream.create();
var stream = PostStream.create();
stream.set('discussion', discussion);
stream.set('store', this.get('store'));
this.set('stream', stream);
@@ -30,74 +30,25 @@ export default Ember.ObjectController.extend(Ember.Evented, {
var promise = discussion.get('posts') ? Ember.RSVP.resolve(discussion) : discussion.reload();
// When we know we have the post IDs, we can set up the post stream with
// them. Then we're ready to load some posts!
// them. Then the view will trigger the stream to load as it sees fit.
var controller = this;
promise.then(function(discussion) {
stream.setup(discussion.get('postIds'));
controller.set('loaded', true);
controller.send('jumpToNumber', controller.get('start'));
});
},
actions: {
reply: function() {
this.set('controllers.composer.showing', true);
this.set('controllers.composer.title', 'Replying to <em>'+this.get('model.title')+'</em>');
},
jumpToNumber: function(number) {
// In some instances, we might be given a placeholder start index
// value. We need to convert this into a numerical value.
switch (number) {
case 'last':
number = this.get('model.lastPostNumber');
break;
case 'unread':
number = this.get('model.readNumber') + 1;
break;
}
number = Math.max(number, 1);
// Let's start by telling our listeners that we're going to load
// posts near this number. The discussion view will listen and
// consequently scroll down to the appropriate position in the
// discussion.
this.trigger('loadingNumber', number);
// Now we have to actually make sure the posts around this new start
// position are loaded. We will tell our listeners when they are.
// Again, the view will scroll down to the appropriate post.
var controller = this;
this.get('stream').loadNearNumber(number).then(function() {
Ember.run.scheduleOnce('afterRender', function() {
controller.trigger('loadedNumber', number);
});
});
},
jumpToIndex: function(index) {
// Let's start by telling our listeners that we're going to load
// posts at this index. The discussion view will listen and
// consequently scroll down to the appropriate position in the
// discussion.
this.trigger('loadingIndex', index);
// Now we have to actually make sure the posts around this index are
// loaded. We will tell our listeners when they are. Again, the view
// will scroll down to the appropriate post.
var controller = this;
this.get('stream').loadNearIndex(index).then(function() {
Ember.run.scheduleOnce('afterRender', function() {
controller.trigger('loadedIndex', index);
});
});
},
loadRange: function(start, end, backwards) {
this.get('stream').loadRange(start, end, backwards);
// This action is called when the start position of the discussion
// currently being viewed changes (i.e. when the user scrolls up/down
// the post stream.)
updateStart: function(start) {
this.set('start', start);
}
}
});

70
ember/app/controllers/discussions.js → ember/app/controllers/index.js
View File

@@ -2,44 +2,16 @@ import Ember from 'ember';
import DiscussionResult from '../models/discussion-result';
import PostResult from '../models/post-result';
import PaneableMixin from '../mixins/paneable';
export default Ember.ArrayController.extend(Ember.Evented, {
export default Ember.ArrayController.extend(Ember.Evented, PaneableMixin, {
needs: ['application', 'composer'],
paned: false,
paneShowing: false,
paneTimeout: null,
panePinned: false,
current: null,
index: function() {
var index = '?';
var id = this.get('current.id');
this.get('model').some(function(result, i) {
if (result.get('id') == id) {
index = i + 1;
return true;
}
});
return index;
}.property('current', 'model.@each'),
count: function() {
return this.get('model.length');
}.property('model.@each'),
previous: function() {
var result = this.get('model').objectAt(this.get('index') - 2);
return result && result.get('content');
}.property('index'),
next: function() {
var result = this.get('model').objectAt(this.get('index'));
return result && result.get('content');
}.property('index'),
queryParams: ['sort', 'show', {searchQuery: 'q'}, 'filter'],
sort: 'recent',
show: 'discussions',
@@ -55,8 +27,12 @@ export default Ember.ArrayController.extend(Ember.Evented, {
{sort: 'oldest', label: 'Oldest'},
],
displayStartUsers: function() {
return ['newest', 'oldest'].indexOf(this.get('sort')) != -1;
terminalPostType: function() {
return ['newest', 'oldest'].indexOf(this.get('sort')) != -1 ? 'start' : 'last';
}.property('sort'),
countType: function() {
return this.get('sort') == 'replies' ? 'replies' : 'unread';
}.property('sort'),
discussionsCount: function() {
@@ -80,10 +56,11 @@ export default Ember.ArrayController.extend(Ember.Evented, {
var show = this.get('show');
var searchQuery = this.get('searchQuery');
if (sort == 'newest') sort = 'created';
else if (sort == 'oldest') {
if (sort == 'newest') {
sort = 'created';
order = 'desc';
} else if (sort == 'oldest') {
sort = 'created';
order = 'asc';
}
else if (sort == 'recent') {
sort = '';
@@ -124,37 +101,24 @@ export default Ember.ArrayController.extend(Ember.Evented, {
},
actions: {
showDiscussionPane: function() {
this.set('paneShowing', true);
},
hideDiscussionPane: function() {
this.set('paneShowing', false);
},
togglePinned: function() {
this.set('panePinned', ! this.get('panePinned'));
},
loadMore: function() {
var self = this;
this.set('start', this.get('length'));
this.set('loadingMore', true);
this.set('resultsLoading', true);
this.getResults(this.get('start')).then(function(results) {
self.get('model').addObjects(results);
self.set('meta', results.get('meta'));
// self.set('moreResults', !! results.get('meta.moreUrl'));
self.set('loadingMore', false);
self.set('resultsLoading', false);
});
},
delete: function(discussion) {
alert('are you sure you want to delete discusn: '+discussion.get('title'));
transitionFromBackButton: function() {
this.transitionToRoute('index');
}
},
queryDidChange: function(q) {
searchQueryDidChange: function(q) {
this.get('controllers.application').set('searchQuery', this.get('searchQuery'));
this.get('controllers.application').set('searchActive', !! this.get('searchQuery'));

2
ember/app/controllers/discussions/index.js → ember/app/controllers/index/index.js
View File

@@ -1,5 +1,5 @@
import Ember from 'ember';
export default Ember.ArrayController.extend({
needs: ['application', 'composer']
needs: ['application']
});