mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-03-14 20:19:42 +01:00
Code Issues Releases Wiki Activity

Working on interface components.

Browse Source
This commit is contained in:
Toby Zerner 2015-01-03 12:26:14 +10:30
parent 23424a51c6
commit 9375f605a8
20 changed files with 161 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ember/app/components/button-item.js
View File

@ -10,7 +10,7 @@ export default Ember.View.extend({
classNames: ['btn'],
classNameBindings: ['class', 'disabled'],
layout: Ember.Handlebars.compile('{{#if view.icon}}{{fa-icon view.icon class="fa-fw"}} {{/if}}<span>{{view.title}}</span>'),
layout: Ember.Handlebars.compile('{{#if view.icon}}{{fa-icon view.icon class="fa-fw"}} {{/if}}<span class="label">{{view.title}}</span>'),
click: function() {
this.action();

18
ember/app/components/discussions-list-item.js
View File

@ -131,18 +131,18 @@ export default Ember.View.extend({
var discussion = this.get('discussion');
var controls = this.get('controls');
// var controls = this.get('controls');
controls.addItem('sticky', MenuItem.extend({title: 'Sticky', icon: 'thumb-tack', action: 'sticky'}));
controls.addItem('lock', MenuItem.extend({title: 'Lock', icon: 'lock', action: 'lock'}));
// controls.addItem('sticky', MenuItem.extend({title: 'Sticky', icon: 'thumb-tack', action: 'sticky'}));
// controls.addItem('lock', MenuItem.extend({title: 'Lock', icon: 'lock', action: 'lock'}));
controls.addSeparator();
// controls.addSeparator();
controls.addItem('delete', MenuItem.extend({title: 'Delete', icon: 'times', className: 'delete', action: function() {
// this.get('controller').send('delete', discussion);
var discussion = view.$().slideUp().find('.discussion');
discussion.css('position', 'relative').animate({left: -discussion.width()});
}}));
// controls.addItem('delete', MenuItem.extend({title: 'Delete', icon: 'times', className: 'delete', action: function() {
// // this.get('controller').send('delete', discussion);
// var discussion = view.$().slideUp().find('.discussion');
// discussion.css('position', 'relative').animate({left: -discussion.width()});
// }}));
},
actions: {

18
ember/app/components/dropdown-button.js
View File

@ -1,5 +1,7 @@
import Ember from 'ember';
import MenuItemContainer from '../components/menu-item-container';
export default Ember.Component.extend({
items: null, // NamedContainerView/Menu
layoutName: 'components/dropdown-button',
@ -17,5 +19,19 @@ export default Ember.Component.extend({
itemCountClass: function() {
return 'item-count-'+this.get('items.length');
}.property('items')
}.property('items'),
containedItems: function() {
var contained = [];
this.get('items').forEach(function(item) {
if (item.tagName != 'li') {
contained.push(MenuItemContainer.extend({
item: item
}));
} else {
contained.push(item);
}
});
return contained;
}.property('items.[]')
});

30
ember/app/components/dropdown-select.js Normal file
View File

@ -0,0 +1,30 @@
import Ember from 'ember';
import Menu from '../utils/menu';
export default Ember.Component.extend({
items: [],
layoutName: 'components/dropdown-select',
classNames: ['dropdown', 'dropdown-select', 'btn-group'],
classNameBindings: ['itemCountClass'],
buttonClass: 'btn-default',
menuClass: 'pull-right',
icon: 'ellipsis-v',
mainButtonClass: function() {
return 'btn '+this.get('buttonClass');
}.property('buttonClass'),
dropdownMenuClass: function() {
return 'dropdown-menu '+this.get('menuClass');
}.property('menuClass'),
itemCountClass: function() {
return 'item-count-'+this.get('items.length');
}.property('items.length'),
currentItem: function() {
return this.get('menu.childViews').findBy('active');
}.property('menu.childViews.@each.active')
});

18
ember/app/components/dropdown-split.js
View File

@ -1,5 +1,7 @@
import Ember from 'ember';
import MenuItemContainer from '../components/menu-item-container';
export default Ember.Component.extend({
items: null, // NamedContainerView/Menu
layoutName: 'components/dropdown-split',
@ -20,5 +22,19 @@ export default Ember.Component.extend({
itemCountClass: function() {
return 'item-count-'+this.get('items.length');
}.property('items')
}.property('items'),
containedItems: function() {
var contained = [];
this.get('items').forEach(function(item) {
if (item.tagName != 'li') {
contained.push(MenuItemContainer.extend({
item: item
}));
} else {
contained.push(item);
}
});
return contained;
}.property('items.[]')
});

6
ember/app/components/menu-item-container.js Normal file
View File

@ -0,0 +1,6 @@
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'li',
layoutName: 'components/menu-item-container'
});

3
ember/app/components/menu-item-separator.js
View File

@ -1,5 +1,6 @@
import Ember from 'ember';
export default Ember.Component.extend({
liClass: 'divider'
liClass: 'divider',
active: false
});

1
ember/app/components/menu-item.js
View File

@ -6,6 +6,7 @@ var MenuItem = Ember.Component.extend({
className: '',
action: null,
divider: false,
active: false,
tagName: 'a',
attributeBindings: ['href'],

2
ember/app/components/menu-list.js
View File

@ -2,5 +2,5 @@ import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'ul',
layoutName: 'components/menu-list',
layoutName: 'components/menu-list'
});

19
ember/app/components/nav-item.js
View File

@ -5,18 +5,24 @@ export default Ember.Component.extend({
title: '',
action: null,
badge: '',
badgeAction: null,
// active: false,
tagName: 'li',
classNameBindings: ['active'],
active: function() {
return this.get('childViews').anyBy('active');
return !! this.get('childViews').anyBy('active');
}.property('childViews.@each.active'),
// init: function() {
// var params = this.params;
// if (params[params.length - 1].queryParams) {
// this.queryParamsObject = {values: params.pop().queryParams};
// }
// this._super();
// },
layout: function() {
return Ember.Handlebars.compile('<a href="#" class="count" {{action "badge"}}>{{badge}}</a>\
{{#link-to '+this.get('linkTo')+'}}'+this.get('iconTemplate')+'{{title}}{{/link-to}}');
return Ember.Handlebars.compile('{{#link-to '+this.get('linkTo')+'}}'+this.get('iconTemplate')+' {{title}} <span class="count">{{badge}}</span>{{/link-to}}');
}.property('linkTo', 'iconTemplate'),
iconTemplate: function() {
@ -26,9 +32,6 @@ export default Ember.Component.extend({
actions: {
main: function() {
this.get('action')();
},
badge: function() {
this.get('badgeAction')();
}
}
});

2
ember/app/components/select-input.js
View File

@ -4,6 +4,6 @@ export default Ember.View.extend({
tagName: 'span',
classNames: ['select'],
layout: Ember.Handlebars.compile('{{view Ember.Select content=view.content optionValuePath=view.optionValuePath optionLabelPath=view.optionLabelPath value=view.value}} {{fa-icon "sort"}}')
layout: Ember.Handlebars.compile('{{view "select" content=view.content optionValuePath=view.optionValuePath optionLabelPath=view.optionLabelPath value=view.value}} {{fa-icon "sort"}}')
});

4
ember/app/templates/components/dropdown-button.hbs
View File

@ -1,8 +1,8 @@
{{#if items}}
<button {{bind-attr class=":dropdown-toggle :btn buttonClass"}}>
<button {{bind-attr class=":dropdown-toggle :btn buttonClass"}} data-toggle="dropdown">
{{fa-icon icon class="icon-glyph"}}
<span class="label">{{title}}</span>
{{fa-icon "caret-down" class="icon-caret"}}
</button>
{{menu-list items=items class=dropdownMenuClass}}
{{menu-list items=containedItems class=dropdownMenuClass}}
{{/if}}

7
ember/app/templates/components/dropdown-select.hbs Normal file
View File

@ -0,0 +1,7 @@
{{#if items}}
<button {{bind-attr class=":dropdown-toggle :btn buttonClass"}} data-toggle="dropdown">
<span class="label">{{currentItem.title}}</span>
{{fa-icon "sort" class="icon-caret"}}
</button>
{{menu-list items=items class=dropdownMenuClass viewName="menu"}}
{{/if}}

4
ember/app/templates/components/dropdown-split.hbs
View File

@ -1,8 +1,8 @@
{{#if items}}
{{view items.firstItem class=mainButtonClass}}
<button {{bind-attr class=":dropdown-toggle :btn buttonClass"}}>
<button {{bind-attr class=":dropdown-toggle :btn buttonClass"}} data-toggle="dropdown">
{{fa-icon "caret-down" class="icon-caret"}}
{{fa-icon icon class="icon-glyph"}}
</button>
{{menu-list items=items class=dropdownMenuClass}}
{{menu-list items=containedItems class=dropdownMenuClass}}
{{/if}}

1
ember/app/templates/components/menu-item-container.hbs Normal file
View File

@ -0,0 +1 @@
{{view item}}

2
ember/app/templates/components/menu-list.hbs
View File

@ -1,3 +1,3 @@
{{#each item in items}}
<li {{bind-attr class="item.liClass"}}>{{view item}}</li>
{{view item}}
{{/each}}

6
ember/app/templates/discussions.hbs
View File

@ -1,11 +1,7 @@
<div class="discussions-area">
<nav class="discussions-nav">
<button class="btn btn-primary">
{{fa-icon "edit"}}
<span class="label">Start a Discussion</span>
</button>
{{menu-list items=discussionsNavItems class="nav"}}
{{view view.sidebarView viewName="sidebar"}}
</nav>
<div class="discussions-results">

21
ember/app/utils/menu.js
View File

@ -5,29 +5,10 @@ import MenuItemSeparator from '../components/menu-item-separator';
export default NamedContainerView.extend({
tagName: 'ul',
active: null,
i: 1,
addSeparator: function(index) {
var item = MenuItemSeparator;
this.addItem('separator'+(this.i++), item, index);
},
activeChanged: function() {
var active = this.get('active');
if (typeof active != 'array') {
active = [active];
}
var namedViews = this.get('namedViews');
var view;
for (var name in namedViews) {
if (namedViews.hasOwnProperty(name) && (view = namedViews.get(name))) {
view.set('active', active.indexOf(name) !== -1);
}
}
}.observes('active')
}
});

3
ember/app/utils/named-container-view.js
View File

@ -3,11 +3,10 @@ import Ember from 'ember';
export default Ember.ArrayProxy.extend({
content: null,
namedViews: null,
init: function() {
this.set('content', Ember.A());
this.set('content', Ember.A()); // this is an important line.
this.set('namedViews', Ember.Object.create());
this._super();
},

49
ember/app/views/discussions.js
View File

@ -1,7 +1,14 @@
import Ember from 'ember';
import DropdownSelect from '../components/dropdown-select';
import ButtonItem from '../components/button-item';
import NavItem from '../components/nav-item';
import Menu from '../utils/menu';
export default Ember.View.extend({
sidebarView: Ember.ContainerView.extend(),
classNameBindings: ['pinned'],
pinned: function() {
@ -10,6 +17,8 @@ export default Ember.View.extend({
didInsertElement: function() {
this.trigger('populateSidebar', this.get('sidebar'));
var view = this;
this.$().find('.discussions-pane').on('mouseenter', function() {
@ -49,6 +58,46 @@ export default Ember.View.extend({
});
},
setupSidebar: function(sidebar) {
sidebar.pushObject(ButtonItem.create({
title: 'Start a Discussion',
icon: 'edit',
class: 'btn-primary'
}));
var nav = Menu.create();
this.trigger('populateNav', nav);
sidebar.pushObject(DropdownSelect.create({
items: nav
}));
}.on('populateSidebar'),
setupNav: function(nav) {
nav.addItem('all', NavItem.create({
title: 'All Discussions',
icon: 'comments-o',
linkTo: '"discussions" (query-params filter="")'
}));
nav.addItem('private', NavItem.create({
title: 'Private',
icon: 'envelope-o',
linkTo: '"discussions" (query-params filter="private")'
}));
nav.addItem('following', NavItem.create({
title: 'Following',
icon: 'star',
linkTo: '"discussions" (query-params filter="following")'
}));
nav.addItem('categories', NavItem.create({
title: 'Categories',
icon: 'reorder',
linkTo: '"categories"'
}));
}.on('populateNav'),
willDestroyElement: function() {
this.set('controller.test', $(window).scrollTop());
$(window).off('scroll.loadMore');