1
0
mirror of https://github.com/flarum/core.git synced 2025-07-31 13:40:20 +02:00

Working on interface components.

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

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();

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: {

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.[]')
});

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')
});

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.[]')
});

View File

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

View File

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

View File

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

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'
});

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')();
}
}
});

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"}}')
});