Merge pull request #2207 from riking/list-setting

UI for list site settings

app/assets/javascripts/admin/components/list_setting_component.js

@@ -0,0 +1,82 @@
+/**
+  Provide a nice GUI for a pipe-delimited list in the site settings.
+
+  @param settingValue is a reference to SiteSetting.value.
+
+  @class Discourse.ListSettingComponent
+  @extends Ember.Component
+  @namespace Discourse
+  @module Discourse
+ **/
+Discourse.ListSettingComponent = Ember.Component.extend({
+  layoutName: 'components/list-setting',
+
+  init: function() {
+    this._super();
+    this.on("focusOut", this.uncacheValue);
+    this.set('children', []);
+  },
+
+  canAddNew: true,
+
+  readValues: function() {
+    return this.get('settingValue').split('|');
+  }.property('settingValue'),
+
+  /**
+    Transfer the debounced value into the settingValue parameter.
+
+    This will cause a redraw of the child textboxes.
+
+    @param newFocus {Number|undefined} Which list index to focus on next, or undefined to not refocus
+  **/
+  uncacheValue: function(newFocus) {
+    var oldValue = this.get('settingValue'),
+        newValue = this.get('settingValueCached'),
+        self = this;
+
+    if (newValue !== undefined && newValue !== oldValue) {
+      this.set('settingValue', newValue);
+    }
+
+    if (newFocus !== undefined && newFocus > 0) {
+      Em.run.schedule('afterRender', function() {
+        var children = self.get('children');
+        if (newFocus < children.length) {
+          $(children[newFocus].get('element')).focus();
+        } else if (newFocus === children.length) {
+          $(self.get('element')).children().children('.list-add-value').focus();
+        }
+      });
+    }
+  },
+
+  setItemValue: function(index, item) {
+    var values = this.get('readValues');
+    values[index] = item;
+
+    // Remove blank items
+    values = values.filter(function(s) { return s !== ''; });
+    this.setProperties({
+      settingValueCached: values.join('|'),
+      canAddNew: true
+    });
+  },
+
+  actions: {
+    addNewItem: function() {
+      var newValue = this.get('settingValue') + '|';
+      this.setProperties({
+        settingValue: newValue,
+        settingValueCached: newValue,
+        canAddNew: false
+      });
+
+      var self = this;
+      Em.run.schedule('afterRender', function() {
+        var children = self.get('children');
+        $(children[children.length - 1].get('element')).focus();
+      });
+    }
+  }
+});

app/assets/javascripts/admin/components/list_setting_item_component.js

@@ -0,0 +1,44 @@
+/**
+  One item in a ListSetting.
+
+  @param parent is the ListSettingComponent.
+
+  @class Discourse.ListSettingItemComponent
+  @extends Ember.Component, Ember.TextSupport
+  @namespace Discourse
+  @module Discourse
+ **/
+Discourse.ListSettingItemComponent = Ember.Component.extend(Ember.TextSupport, {
+  classNames: ['ember-text-field'],
+  tagName: "input",
+  attributeBindings: ['type', 'value', 'size', 'pattern'],
+
+  _initialize: function() {
+    // _parentView is the #each
+    // parent is the ListSettingComponent
+    this.setProperties({
+      value: this.get('_parentView.content'),
+      index: this.get('_parentView.contentIndex')
+    });
+    this.get('parent').get('children')[this.get('index')] = this;
+  }.on('init'),
+
+  markTab: function(e) {
+    var keyCode = e.keyCode || e.which;
+
+    if (keyCode === 9) {
+      this.set('nextIndex', this.get('index') + (e.shiftKey ? -1 : 1));
+    }
+  }.on('keyDown'),
+
+  reloadList: function() {
+    var nextIndex = this.get('nextIndex');
+    this.set('nextIndex', undefined); // one use only
+    this.get('parent').uncacheValue(nextIndex);
+  }.on('focusOut'),
+
+  _elementValueDidChange: function() {
+    this._super();
+    this.get('parent').setItemValue(this.get('index'), this.get('value'));
+  }
+});

app/assets/javascripts/admin/templates/site_settings/setting_list.js.handlebars

@@ -0,0 +1,17 @@
+<div class='setting-label'>
+    <h3>{{unbound setting}}</h3>
+</div>
+<div class="setting-value">
+  {{list-setting settingValue=value}}
+    <div class='desc'>{{unbound description}}</div>
+</div>
+{{#if dirty}}
+    <div class='setting-controls'>
+        <button class='btn ok no-text' {{action save this}}><i class='fa fa-check'></i></button>
+        <button class='btn cancel no-text' {{action cancel this}}><i class='fa fa-times'></i></button>
+    </div>
+{{else}}
+  {{#if overridden}}
+      <button class='btn' href='#' {{action resetDefault this}}>{{i18n admin.site_settings.reset}}</button>
+  {{/if}}
+{{/if}}

app/assets/javascripts/admin/views/site_setting_view.js

@@ -10,13 +10,15 @@ Discourse.SiteSettingView = Discourse.View.extend(Discourse.ScrollTop, {
   classNameBindings: [':row', ':setting', 'content.overridden'],
 
   templateName: function() {
-
-    // If we're editing a boolean, return a different template
+    // If we're editing a boolean, show a checkbox
     if (this.get('content.type') === 'bool') return 'admin/templates/site_settings/setting_bool';
 
     // If we're editing an enum field, show a dropdown
     if (this.get('content.type') === 'enum' ) return 'admin/templates/site_settings/setting_enum';
 
+    // If we're editing a list, show a list editor
+    if (this.get('content.type') === 'list' ) return 'admin/templates/site_settings/setting_list';
+
     // Default to string editor
     return 'admin/templates/site_settings/setting_string';
 

app/assets/javascripts/discourse/templates/components/list-setting.js.handlebars

@@ -0,0 +1,8 @@
+<div class="ac-wrap clearfix input-setting-list">
+    {{#each readValues}}
+      {{list-setting-item parent=view action=update classNames="list-input-item"}}
+    {{/each}}
+    {{#if canAddNew}}
+      <button class="btn no-text list-add-value" {{action addNewItem}}><i class="fa fa-plus"></i></button>
+    {{/if}}
+</div>

app/assets/stylesheets/common/admin/admin_base.scss

@@ -194,6 +194,40 @@
       @include medium-width { width: 314px; }
       @include small-width  { width: 284px; }
     }
+    .input-setting-list {
+      width: 408px;
+      padding: 1px;
+      background-color: white;
+      border: 1px solid #e6e6e6;
+      border-radius: 3px;
+      box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
+      -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+      transition: border linear 0.2s, box-shadow linear 0.2s;
+
+      .list-input-item {
+        width: 90px;
+        margin: 2px 1px;
+        background-color: white;
+        border: 1px solid #e6e6e6;
+        border-radius: 3px;
+        box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
+        -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+        transition: border linear 0.2s, box-shadow linear 0.2s;
+
+        &:focus {
+          border-color: #00aaff;
+          outline: 0;
+          box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3), 0 0 8px #00aaff;
+        }
+      }
+
+      .btn.list-add-value {
+        margin: 0px 3px;
+        padding: 4px 10px;
+        color: $link-color;
+      }
+    }
+
 
     .desc {
       padding-top: 3px;

app/models/post.rb

@@ -163,9 +163,9 @@ class Post < ActiveRecord::Base
 
     hosts = SiteSetting
               .white_listed_spam_host_domains
-              .split(",")
+              .split('|')
               .map{|h| h.strip}
-              .reject{|h| !h.include?(".")}
+              .reject{|h| !h.include?('.')}
 
     hosts << GlobalSetting.hostname