FEATURE: color-palettes component (#6992)

app/assets/javascripts/admin/templates/customize-themes-show.hbs

@@ -104,11 +104,14 @@
     <div class="control-unit">
       <div class="mini-title">{{i18n "admin.customize.theme.color_scheme"}}</div>
       <div class="description">{{i18n "admin.customize.theme.color_scheme_select"}}</div>
-      <div class="control">{{combo-box content=colorSchemes
+      <div class="control">
-                                       filterable=true
+        {{color-palettes
-                                       forceEscape=true
+          content=colorSchemes
-                                       value=colorSchemeId
+          filterable=true
-                                       icon="paint-brush"}}
+          forceEscape=true
+          value=colorSchemeId
+          icon="paint-brush"}}
+
          {{#if colorSchemeChanged}}
             {{d-button action=(action "changeScheme") class="btn-primary submit-edit" icon="check"}}
             {{d-button action=(action "cancelChangeScheme") class="btn-default cancel-edit" icon="times"}}

app/assets/javascripts/select-kit/components/color-palettes.js.es6

@@ -0,0 +1,7 @@
+import ComboBoxComponent from "select-kit/components/combo-box";
+
+export default ComboBoxComponent.extend({
+  pluginApiIdentifiers: ["color-palettes"],
+  classNames: "color-palettes",
+  rowComponent: "color-palettes/color-palettes-row"
+});

app/assets/javascripts/select-kit/components/color-palettes/color-palettes-row.js.es6

@@ -0,0 +1,14 @@
+import { escapeExpression } from "discourse/lib/utilities";
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+import { default as computed } from "ember-addons/ember-computed-decorators";
+
+export default SelectKitRowComponent.extend({
+  layoutName:
+    "select-kit/templates/components/color-palettes/color-palettes-row",
+  classNames: "color-palettes-row",
+
+  @computed("computedContent.originalContent.colors")
+  colors(colors) {
+    return (colors || []).map(color => `#${escapeExpression(color.hex)}`);
+  }
+});

app/assets/javascripts/select-kit/templates/components/color-palettes/color-palettes-row.hbs

@@ -0,0 +1,11 @@
+<span class="name">
+  {{label}}
+</span>
+
+{{#if colors}}
+  <div class="palettes">
+    {{#each colors as |color|}}
+      <span class="palette" style="background-color:{{color}};"></span>
+    {{/each}}
+  </div>
+{{/if}}

app/assets/stylesheets/common.scss

@@ -26,6 +26,7 @@
 @import "common/select-kit/tag-drop";
 @import "common/select-kit/toolbar-popup-menu-options";
 @import "common/select-kit/topic-notifications-button";
+@import "common/select-kit/color-palettes";
 @import "common/components/*";
 @import "common/input_tip";
 @import "common/topic-entrance";

app/assets/stylesheets/common/select-kit/color-palettes.scss

@@ -0,0 +1,20 @@
+.select-kit {
+  &.combo-box {
+    &.color-palettes {
+      .color-palettes-row {
+        .palettes {
+          display: flex;
+          align-items: center;
+          margin-left: 0.5em;
+          flex: 1 0 0;
+
+          .palette {
+            height: 15px;
+            width: 15px;
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}