ES6: More modal views

app/assets/javascripts/discourse/components/color-picker.js.es6

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

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

@@ -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>

app/assets/javascripts/discourse/views/archetype-options-modal.js.es6

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

app/assets/javascripts/discourse/views/archetype-options.js.es6

@@ -1,12 +1,4 @@
-/**
+export default Discourse.ContainerView.extend({
-  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({
   metaDataBinding: 'parentView.metaData',
 
   init: function() {
@@ -23,5 +15,4 @@ Discourse.ArchetypeOptionsView = Discourse.ContainerView.extend({
 
     });
   }
-
 });

app/assets/javascripts/discourse/views/flag.js.es6

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

app/assets/javascripts/discourse/views/modal/archetype_options_modal_view.js

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

app/assets/javascripts/discourse/views/modal/color_picker_view.js

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

app/assets/javascripts/discourse/views/modal/flag_view.js

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

app/assets/javascripts/main_include.js

@@ -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