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

ES6: More modal views

This commit is contained in:
Robin Ward 2014-07-04 11:50:40 -04:00
parent abf6ffcaa0
commit 4237099db3
9 changed files with 55 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/assets/javascripts/discourse/components/color-picker.js.es6 Normal file
View File

@ -0,0 +1,28 @@
export default Discourse.ContainerView.extend({
classNames: 'colors-container',
_createButtons: function() {
var colors = this.get('colors'),
isUsed, usedColors = this.get('usedColors') || [];
if (!colors) return;
var self = this;
colors.forEach(function(color) {
isUsed = usedColors.indexOf(color.toUpperCase()) >= 0;
self.attachViewWithArgs({
tagName: 'button',
attributeBindings: ['style', 'title'],
classNames: ['colorpicker'].concat( isUsed ? ['used-color'] : ['unused-color'] ),
style: 'background-color: #' + color + ';',
title: isUsed ? I18n.t("category.already_used") : null,
click: function() {
self.set("value", color);
return false;
}
});
});
}.on('init')
});

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

@ -40,13 +40,13 @@
<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}}
{{color-picker 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}}
{{color-picker colors=foregroundColors value=text_color}}
</div>
</div>
</section>

4
app/assets/javascripts/discourse/views/archetype-options-modal.js.es6 Normal file
View File

@ -0,0 +1,4 @@
export default Discourse.ModalBodyView.extend({
templateName: 'modal/archetype_options',
title: I18n.t('topic.options')
});

11
app/assets/javascripts/discourse/views/modal/archetype_options_view.js → app/assets/javascripts/discourse/views/archetype-options.js.es6
View File

@ -1,12 +1,4 @@
/**
This view handles the rendering of an archetype as an option
@class ArchetypeOptionsView
@extends Discourse.ContainerView
@namespace Discourse
@module Discourse
**/
Discourse.ArchetypeOptionsView = Discourse.ContainerView.extend({
export default Discourse.ContainerView.extend({
metaDataBinding: 'parentView.metaData',
init: function() {
@ -23,5 +15,4 @@ Discourse.ArchetypeOptionsView = Discourse.ContainerView.extend({
});
}
});

19
app/assets/javascripts/discourse/views/flag.js.es6 Normal file
View File

@ -0,0 +1,19 @@
export default Discourse.ModalBodyView.extend({
templateName: 'modal/flag',
title: function() {
return this.get('controller.flagTopic') ? I18n.t('flagging_topic.title') : I18n.t('flagging.title');
}.property('controller.flagTopic'),
selectedChanged: function() {
var self = this;
Em.run.next(function() {
self.$("input[type='radio']").prop('checked', false);
var nameKey = self.get('controller.selected.name_key');
if (!nameKey) return;
self.$('#radio_' + nameKey).prop('checked', 'true');
});
}.observes('controller.selected.name_key')
});

14
app/assets/javascripts/discourse/views/modal/archetype_options_modal_view.js
View File

@ -1,14 +0,0 @@
/**
This view handles rendering of options for an archetype
@class ArchetypeOptionsModalView
@extends Discourse.View
@namespace Discourse
@module Discourse
**/
Discourse.ArchetypeOptionsModalView = Discourse.ModalBodyView.extend({
templateName: 'modal/archetype_options',
title: I18n.t('topic.options')
});

43
app/assets/javascripts/discourse/views/modal/color_picker_view.js
View File

@ -1,43 +0,0 @@
/**
This view shows an array of buttons for selection of a color from a predefined set.
@class ColorPickerView
@extends Discourse.ContainerView
@namespace Discourse
@module Discourse
**/
Discourse.ColorPickerView = Discourse.ContainerView.extend({
classNames: 'colors-container',
init: function() {
this._super();
return this.createButtons();
},
createButtons: function() {
var colors = this.get('colors');
var colorPickerView = this;
var isUsed, usedColors = this.get('usedColors') || [];
if (!colors) return;
colors.forEach(function(color) {
isUsed = usedColors.indexOf(color.toUpperCase()) >= 0;
colorPickerView.attachViewWithArgs({
tagName: 'button',
attributeBindings: ['style', 'title'],
classNames: ['colorpicker'].concat( isUsed ? ['used-color'] : ['unused-color'] ),
style: 'background-color: #' + color + ';',
title: isUsed ? I18n.t("category.already_used") : null,
click: function() {
colorPickerView.set("value", color);
return false;
}
});
});
}
});
Discourse.View.registerHelper('colorPicker', Discourse.ColorPickerView);

28
app/assets/javascripts/discourse/views/modal/flag_view.js
View File

@ -1,28 +0,0 @@
/**
This view handles the modal for flagging posts
@class FlagView
@extends Discourse.ModalBodyView
@namespace Discourse
@module Discourse
**/
Discourse.FlagView = Discourse.ModalBodyView.extend({
templateName: 'modal/flag',
title: function() {
return this.get('controller.flagTopic') ? I18n.t('flagging_topic.title') : I18n.t('flagging.title');
}.property('controller.flagTopic'),
selectedChanged: function() {
var flagView = this;
Em.run.next(function() {
flagView.$("input[type='radio']").prop('checked', false);
var nameKey = flagView.get('controller.selected.name_key');
if (!nameKey) return;
flagView.$('#radio_' + nameKey).prop('checked', 'true');
});
}.observes('controller.selected.name_key')
});

2
app/assets/javascripts/main_include.js
View File

@ -22,7 +22,7 @@
//= require ./discourse/controllers/navigation/default
//= require ./discourse/views/text-field
//= require ./discourse/views/modal/modal_body_view
//= require ./discourse/views/modal/flag_view
//= require ./discourse/views/flag
//= require ./discourse/views/combo-box
//= require ./discourse/views/button
//= require ./discourse/views/dropdown-button