UX: adds support for a color setting type (#9016)

app/assets/javascripts/admin/components/color-input.js.es6

@@ -1,5 +1,6 @@
 import { schedule } from "@ember/runloop";
 import Component from "@ember/component";
+import { computed, action } from "@ember/object";
 import loadScript, { loadCSS } from "discourse/lib/load-script";
 import { observes } from "discourse-common/utils/decorators";
 
@@ -13,12 +14,29 @@ import { observes } from "discourse-common/utils/decorators";
 export default Component.extend({
   classNames: ["color-picker"],
 
+  onlyHex: true,
+
+  styleSelection: true,
+
+  maxlength: computed("onlyHex", function() {
+    return this.onlyHex ? 6 : null;
+  }),
+
+  @action
+  onHexInput(color) {
+    this.attrs.onChangeColor &&
+      this.attrs.onChangeColor((color || "").replace(/^#/, ""));
+  },
+
   @observes("hexValue", "brightnessValue", "valid")
   hexValueChanged: function() {
-    var hex = this.hexValue;
+    const hex = this.hexValue;
     let text = this.element.querySelector("input.hex-input");
 
+    this.attrs.onChangeColor && this.attrs.onChangeColor(hex);
+
     if (this.valid) {
+      this.styleSelection &&
         text.setAttribute(
           "style",
           "color: " +
@@ -30,11 +48,11 @@ export default Component.extend({
 
       if (this.pickerLoaded) {
         $(this.element.querySelector(".picker")).spectrum({
-          color: "#" + this.hexValue
+          color: "#" + hex
         });
       }
     } else {
-      text.setAttribute("style", "");
+      this.styleSelection && text.setAttribute("style", "");
     }
   },
 
@@ -51,8 +69,6 @@ export default Component.extend({
         });
       });
     });
-    schedule("afterRender", () => {
-      this.hexValueChanged();
-    });
+    schedule("afterRender", () => this.hexValueChanged());
   }
 });

app/assets/javascripts/admin/components/site-settings/color.js.es6

@@ -0,0 +1,49 @@
+import Component from "@ember/component";
+import { computed, action } from "@ember/object";
+
+function RGBToHex(rgb) {
+  // Choose correct separator
+  let sep = rgb.indexOf(",") > -1 ? "," : " ";
+  // Turn "rgb(r,g,b)" into [r,g,b]
+  rgb = rgb
+    .substr(4)
+    .split(")")[0]
+    .split(sep);
+
+  let r = (+rgb[0]).toString(16),
+    g = (+rgb[1]).toString(16),
+    b = (+rgb[2]).toString(16);
+
+  if (r.length === 1) r = "0" + r;
+  if (g.length === 1) g = "0" + g;
+  if (b.length === 1) b = "0" + b;
+
+  return "#" + r + g + b;
+}
+
+export default Component.extend({
+  valid: computed("value", function() {
+    let value = this.value.toLowerCase();
+
+    let testColor = new Option().style;
+    testColor.color = value;
+
+    if (!testColor.color && !value.startsWith("#")) {
+      value = `#${value}`;
+      testColor = new Option().style;
+      testColor.color = value;
+    }
+
+    let hexifiedColor = RGBToHex(testColor.color);
+    if (hexifiedColor.includes("NaN")) {
+      hexifiedColor = testColor.color;
+    }
+
+    return testColor.color && hexifiedColor === value;
+  }),
+
+  @action
+  onChangeColor(color) {
+    this.set("value", color);
+  }
+});

app/assets/javascripts/admin/mixins/setting-component.js.es6

@@ -22,7 +22,8 @@ const CUSTOM_TYPES = [
   "secret_list",
   "upload",
   "group_list",
-  "tag_list"
+  "tag_list",
+  "color"
 ];
 
 const AUTO_REFRESH_ON_SAVE = ["logo", "logo_small", "large_icon"];

app/assets/javascripts/admin/templates/components/site-settings/color.hbs

@@ -0,0 +1,9 @@
+{{color-input
+  hexValue=(readonly value)
+  valid=valid
+  onlyHex=false
+  styleSelection=false
+  onChangeColor=(action "onChangeColor")
+}}
+{{setting-validation-message message=validationMessage}}
+<div class="desc">{{{unbound setting.description}}}</div>

app/assets/javascripts/discourse/templates/components/color-input.hbs

@@ -1 +1,7 @@
-{{text-field class="hex-input" value=hexValue maxlength="6"}} <input class="picker" type="input">
+{{text-field
+  class="hex-input"
+  value=hexValue
+  maxlength=maxlength
+  input=(action "onHexInput" value="target.value")
+}}
+<input class="picker" type="input">

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

@@ -96,6 +96,15 @@
       font-size: $font-0;
       font-weight: normal;
     }
+
+    &.color {
+      .color-picker {
+        display: flex;
+        .picker + .sp-replacer {
+          border-left: none;
+        }
+      }
+    }
   }
   .setting.overridden {
     h3 {

config/site_settings.yml

@@ -942,7 +942,9 @@ email:
     default: false
     client: true
   apply_custom_styles_to_digest: true
-  email_accent_bg_color: "#2F70AC"
+  email_accent_bg_color:
+    type: color
+    default: "#2F70AC"
   email_accent_fg_color: "#FFFFFF"
   email_link_color: "#006699"
   show_topic_featured_link_in_digest: false

lib/site_settings/type_supervisor.rb

@@ -34,6 +34,7 @@ class SiteSettings::TypeSupervisor
       group: 19,
       group_list: 20,
       tag_list: 21,
+      color: 22
     )
   end
 

spec/components/site_settings/type_supervisor_spec.rb

@@ -82,6 +82,12 @@ describe SiteSettings::TypeSupervisor do
       it "'group_list' should be at the right position" do
         expect(SiteSettings::TypeSupervisor.types[:group_list]).to eq(20)
       end
+      it "'tag_list' should be at the right position" do
+        expect(SiteSettings::TypeSupervisor.types[:tag_list]).to eq(21)
+      end
+      it "'color' should be at the right position" do
+        expect(SiteSettings::TypeSupervisor.types[:color]).to eq(22)
+      end
     end
   end