Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use partials for category modal sections, components for pills

This commit is contained in:
Robin Ward 2014-06-25 14:42:23 -04:00
parent 983f4829f0
commit 2f710142f0
11 changed files with 161 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/javascripts/discourse/components/edit-category-tab.js.es6 Normal file
View File

@ -0,0 +1,13 @@
export default Em.Component.extend({
tagName: 'li',
classNameBindings: ['active'],
active: Discourse.computed.propertyEqual('selectedTab', 'tab'),
title: Discourse.computed.i18n('tab', 'category.%@'),
actions: {
select: function() {
this.set('selectedTab', this.get('tab'));
}
}
});

16
app/assets/javascripts/discourse/controllers/edit-category.js.es6
View File

@ -8,9 +8,6 @@
@module Discourse
**/
export default Discourse.ObjectController.extend(Discourse.ModalFunctionality, {
generalSelected: Ember.computed.equal('selectedTab', 'general'),
securitySelected: Ember.computed.equal('selectedTab', 'security'),
settingsSelected: Ember.computed.equal('selectedTab', 'settings'),
foregroundColors: ['FFFFFF', '000000'],
parentCategories: function() {
@ -117,19 +114,6 @@ export default Discourse.ObjectController.extend(Discourse.ModalFunctionality, {
showPositionInput: Discourse.computed.setting('fixed_category_positions'),
actions: {
selectGeneral: function() {
this.set('selectedTab', 'general');
},
selectSecurity: function() {
this.set('selectedTab', 'security');
},
selectSettings: function() {
this.set('selectedTab', 'settings');
},
showCategoryTopic: function() {
this.send('closeModal');
Discourse.URL.routeTo(this.get('topic_url'));

1
app/assets/javascripts/discourse/templates/components/edit-category-tab.js.handlebars Normal file
View File

@ -0,0 +1 @@
<a href {{action select}}>{{title}}</a>

53
app/assets/javascripts/discourse/templates/modal/edit-category-general.js.handlebars Normal file
View File

@ -0,0 +1,53 @@
<form>
<section class='field'>
<label>{{i18n category.name}}</label>
{{text-field value=name placeholderKey="category.name_placeholder" maxlength="50"}}
</section>
<section class='field'>
{{#if subCategories}}
<label>{{i18n categories.subcategories}}</label>
{{#each subCategories}}
{{category-badge this}}
{{/each}}
{{else}}
<label>{{i18n category.parent}}</label>
{{category-chooser valueAttribute="id" value=parent_category_id categories=parentCategories rootNone=true}}
{{/if}}
</section>
{{#if showDescription}}
<section class='field'>
<label>{{i18n category.description}}</label>
{{#if description}}
{{description}}
{{else}}
{{i18n category.no_description}}
{{/if}}
{{#if topic_url}}
<br/>
<button class="btn btn-small" {{action showCategoryTopic}}><i class="fa fa-pencil"></i>{{i18n category.change_in_category_topic}}</button>
{{/if}}
</section>
{{/if}}
<section class='field'>
<label>{{i18n category.badge_colors}}</label>
<div class="category-color-editor">
{{{categoryBadgePreview}}}
<div class='input-prepend input-append' style="margin-top: 10px;">
<span class='color-title'>{{i18n category.background_color}}:</span>
<span class='add-on'>#</span>{{text-field value=color placeholderKey="category.color_placeholder" maxlength="6"}}
{{colorPicker colors=backgroundColors usedColors=usedBackgroundColors value=color}}
</div>
<div class='input-prepend input-append'>
<span class='color-title'>{{i18n category.foreground_color}}:</span>
<span class='add-on'>#</span>{{text-field value=text_color placeholderKey="category.color_placeholder" maxlength="6"}}
{{colorPicker colors=foregroundColors value=text_color}}
</div>
</div>
</section>
</form>

21
app/assets/javascripts/discourse/templates/modal/edit-category-security.js.handlebars Normal file
View File

@ -0,0 +1,21 @@
<section class='field'>
<ul class='permission-list'>
{{#each permissions}}
<li>
<span class="name"><span class="badge-group">{{group_name}}</span></span>
{{{i18n "category.can"}}}
<span class="permission">{{permission.description}}</span>
{{#if controller.editingPermissions}}
<a {{action removePermission this}}><i class="fa fa-times-circle"></i></a>
{{/if}}
</li>
{{/each}}
</ul>
{{#if controller.editingPermissions}}
{{view Ember.Select content=availableGroups value=selectedGroup}}
{{view Ember.Select class="permission-selector" optionValuePath="content.id" optionLabelPath="content.description" content=availablePermissions value=selectedPermission}}
<button {{action addPermission selectedGroup selectedPermission}} class="btn btn-small">{{i18n category.add_permission}}</button>
{{else}}
<button {{action editPermissions}} class="btn btn-small">{{i18n category.edit_permissions}}</button>
{{/if}}
</section>

37
app/assets/javascripts/discourse/templates/modal/edit-category-settings.js.handlebars Normal file
View File

@ -0,0 +1,37 @@
<section class='field'>
<div class="auto-close-fields">
<div>
<i class="fa fa-clock-o"></i>
{{i18n category.auto_close_label}}
{{text-field value=auto_close_hours}}
{{i18n category.auto_close_units}}
</div>
</div>
</section>
{{#if emailInEnabled}}
<section class='field'>
<div class="email-in-fields">
<div>
<i class="fa fa-envelope-o"></i>
{{i18n category.email_in}}
{{text-field value=email_in}}
</div>
<div>
<label class="checkbox-label">
{{input type="checkbox" checked=email_in_allow_strangers}}
{{i18n category.email_in_allow_strangers}}
</label>
</div>
</div>
</section>
{{/if}}
{{#if showPositionInput}}
<section class='field'>
<label>{{i18n category.position}}</label>
{{text-field value=position class="position-input"}}
</section>
{{else}}
<p>{{i18n category.position_disabled}}</p>
{{/if}}

23
app/assets/javascripts/discourse/templates/modal/edit-category.js.handlebars Normal file
View File

@ -0,0 +1,23 @@
<div {{bind-attr class="loading:invisible"}}>
<ul class="nav nav-pills">
{{edit-category-tab selectedTab=selectedTab tab="general"}}
{{#unless isUncategorizedCategory}}
{{edit-category-tab selectedTab=selectedTab tab="security"}}
{{edit-category-tab selectedTab=selectedTab tab="settings"}}
{{/unless}}
</ul>
<div class="modal-body">
{{view 'edit-category-panel' tab="general" className="general-tab"}}
{{#unless isUncategorizedCategory}}
{{view 'edit-category-panel' tab="security" className="options-tab"}}
{{view 'edit-category-panel' tab="settings" className="options-tab"}}
{{/unless}}
</div>
<div class="modal-footer">
<button class='btn btn-primary' {{bind-attr disabled="disabled"}} {{action saveCategory}}>{{buttonTitle}}</button>
{{#if can_delete}}
<button class='btn btn-danger pull-right' {{bind-attr disabled="deleteDisabled"}} {{action deleteCategory}}><i class="fa fa-trash-o"></i>{{deleteButtonTitle}}</button>
{{/if}}
</div>
</div>

143
app/assets/javascripts/discourse/templates/modal/edit_category.js.handlebars
View File

@ -1,143 +0,0 @@
<div {{bind-attr class="loading:invisible"}}>
<ul class="nav nav-pills">
<li {{bind-attr class="generalSelected:active"}}>
<a href="#" {{action selectGeneral}}>{{i18n category.general}}</a>
</li>
{{#unless isUncategorizedCategory}}
<li {{bind-attr class="securitySelected:active"}}>
<a href="#" {{action selectSecurity}}>{{i18n category.security}}</a>
</li>
<li {{bind-attr class="settingsSelected:active"}}>
<a href="#" {{action selectSettings}}>{{i18n category.settings}}</a>
</li>
{{/unless}}
</ul>
<div class="modal-body">
<div {{bind-attr class=":modal-tab :general-tab generalSelected::invisible"}}>
<form>
<section class='field'>
<label>{{i18n category.name}}</label>
{{text-field value=name placeholderKey="category.name_placeholder" maxlength="50"}}
</section>
<section class='field'>
{{#if subCategories}}
<label>{{i18n categories.subcategories}}</label>
{{#each subCategories}}
{{category-badge this}}
{{/each}}
{{else}}
<label>{{i18n category.parent}}</label>
{{category-chooser valueAttribute="id" value=parent_category_id categories=parentCategories rootNone=true}}
{{/if}}
</section>
{{#if showDescription}}
<section class='field'>
<label>{{i18n category.description}}</label>
{{#if description}}
{{description}}
{{else}}
{{i18n category.no_description}}
{{/if}}
{{#if topic_url}}
<br/>
<button class="btn btn-small" {{action showCategoryTopic}}><i class="fa fa-pencil"></i>{{i18n category.change_in_category_topic}}</button>
{{/if}}
</section>
{{/if}}
<section class='field'>
<label>{{i18n category.badge_colors}}</label>
<div class="category-color-editor">
{{{categoryBadgePreview}}}
<div class='input-prepend input-append' style="margin-top: 10px;">
<span class='color-title'>{{i18n category.background_color}}:</span>
<span class='add-on'>#</span>{{text-field value=color placeholderKey="category.color_placeholder" maxlength="6"}}
{{colorPicker colors=backgroundColors usedColors=usedBackgroundColors value=color}}
</div>
<div class='input-prepend input-append'>
<span class='color-title'>{{i18n category.foreground_color}}:</span>
<span class='add-on'>#</span>{{text-field value=text_color placeholderKey="category.color_placeholder" maxlength="6"}}
{{colorPicker colors=foregroundColors value=text_color}}
</div>
</div>
</section>
</form>
</div>
{{#unless isUncategorizedCategory}}
<div {{bind-attr class=":modal-tab :options-tab securitySelected::invisible"}}>
<section class='field'>
<ul class='permission-list'>
{{#each permissions}}
<li>
<span class="name"><span class="badge-group">{{group_name}}</span></span>
{{{i18n "category.can"}}}
<span class="permission">{{permission.description}}</span>
{{#if controller.editingPermissions}}
<a {{action removePermission this}}><i class="fa fa-times-circle"></i></a>
{{/if}}
</li>
{{/each}}
</ul>
{{#if controller.editingPermissions}}
{{view Ember.Select contentBinding="availableGroups" valueBinding="selectedGroup"}}
{{view Ember.Select class="permission-selector" optionValuePath="content.id" optionLabelPath="content.description" contentBinding="availablePermissions" valueBinding="selectedPermission"}}
<button {{action addPermission selectedGroup selectedPermission}} class="btn btn-small">{{i18n category.add_permission}}</button>
{{else}}
<button {{action editPermissions}} class="btn btn-small">{{i18n category.edit_permissions}}</button>
{{/if}}
</section>
</div>
<div {{bind-attr class=":modal-tab :options-tab settingsSelected::invisible"}}>
<section class='field'>
<div class="auto-close-fields">
<div>
<i class="fa fa-clock-o"></i>
{{i18n category.auto_close_label}}
{{text-field value=auto_close_hours}}
{{i18n category.auto_close_units}}
</div>
</div>
</section>
{{#if controller.emailInEnabled}}
<section class='field'>
<div class="email-in-fields">
<div>
<i class="fa fa-envelope-o"></i>
{{i18n category.email_in}}
{{text-field value=email_in}}
</div>
<div>
<label class="checkbox-label">
{{view Ember.Checkbox checkedBinding="email_in_allow_strangers"}}
{{i18n category.email_in_allow_strangers}}
</label>
</div>
</div>
</section>
{{/if}}
{{#if showPositionInput}}
<section class='field'>
<label>{{i18n category.position}}</label>
{{text-field value=position class="position-input"}}
</section>
{{else}}
<p>{{i18n category.position_disabled}}</p>
{{/if}}
</div>
{{/unless}}
</div>
<div class="modal-footer">
<button class='btn btn-primary' {{bind-attr disabled="disabled"}} {{action saveCategory}}>{{buttonTitle}}</button>
{{#if can_delete}}
<button class='btn btn-danger pull-right' {{bind-attr disabled="deleteDisabled"}} {{action deleteCategory}}><i class="fa fa-trash-o"></i>{{deleteButtonTitle}}</button>
{{/if}}
</div>
</div>

10
app/assets/javascripts/discourse/views/edit-category-panel.js.es6 Normal file
View File

@ -0,0 +1,10 @@
export default Em.View.extend({
classNameBindings: [':modal-tab', 'invisible'],
invisible: Discourse.computed.propertyNotEqual('controller.selectedTab', 'tab'),
templateName: function() {
return "modal/edit-category-" + this.get('tab');
}.property('tab')
});

3
app/assets/javascripts/discourse/views/edit-category.js.es6 Normal file
View File

@ -0,0 +1,3 @@
export default Discourse.ModalBodyView.extend({
templateName: 'modal/edit-category'
});

11
app/assets/javascripts/discourse/views/modal/edit_category_view.js
View File

@ -1,11 +0,0 @@
/**
A modal view for editing the basic aspects of a category
@class EditCategoryView
@extends Discourse.ModalBodyView
@namespace Discourse
@module Discourse
**/
Discourse.EditCategoryView = Discourse.ModalBodyView.extend({
templateName: 'modal/edit_category'
});