From 44d9bc12c9dc1b5bea7b16a4d2933f477fbac14f Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 8 Feb 2019 14:01:14 +0100
Subject: [PATCH] FEATURE: color-palettes component (#6992)

---
 .../admin/templates/customize-themes-show.hbs | 17 +++++++++-------
 .../components/color-palettes.js.es6          |  7 +++++++
 .../color-palettes/color-palettes-row.js.es6  | 14 +++++++++++++
 .../color-palettes/color-palettes-row.hbs     | 11 ++++++++++
 app/assets/stylesheets/common.scss            |  1 +
 .../common/select-kit/color-palettes.scss     | 20 +++++++++++++++++++
 6 files changed, 63 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/javascripts/select-kit/components/color-palettes.js.es6
 create mode 100644 app/assets/javascripts/select-kit/components/color-palettes/color-palettes-row.js.es6
 create mode 100644 app/assets/javascripts/select-kit/templates/components/color-palettes/color-palettes-row.hbs
 create mode 100644 app/assets/stylesheets/common/select-kit/color-palettes.scss

diff --git a/app/assets/javascripts/admin/templates/customize-themes-show.hbs b/app/assets/javascripts/admin/templates/customize-themes-show.hbs
index 10cfc8fe3ef..3df0d459882 100644
--- a/app/assets/javascripts/admin/templates/customize-themes-show.hbs
+++ b/app/assets/javascripts/admin/templates/customize-themes-show.hbs
@@ -67,13 +67,13 @@
             <code>{{model.remoteError}}</code>
           </div>
         {{/if}}
-        
+
         {{#if model.remote_theme.commits_behind}}
           {{#d-button action=(action "updateToLatest") icon="download" class='btn-primary'}}{{i18n "admin.customize.theme.update_to_latest"}}{{/d-button}}
         {{else}}
           {{#d-button action=(action "checkForThemeUpdates") icon="refresh" class="btn-default"}}{{i18n "admin.customize.theme.check_for_updates"}}{{/d-button}}
         {{/if}}
-        
+
         <span class='status-message'>
             {{#if updatingRemote}}
               {{i18n 'admin.customize.theme.updating'}}
@@ -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
-                                       filterable=true
-                                       forceEscape=true
-                                       value=colorSchemeId
-                                       icon="paint-brush"}}
+      <div class="control">
+        {{color-palettes
+          content=colorSchemes
+          filterable=true
+          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"}}
diff --git a/app/assets/javascripts/select-kit/components/color-palettes.js.es6 b/app/assets/javascripts/select-kit/components/color-palettes.js.es6
new file mode 100644
index 00000000000..e66cbaaee67
--- /dev/null
+++ b/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"
+});
diff --git a/app/assets/javascripts/select-kit/components/color-palettes/color-palettes-row.js.es6 b/app/assets/javascripts/select-kit/components/color-palettes/color-palettes-row.js.es6
new file mode 100644
index 00000000000..e0ae6b7039f
--- /dev/null
+++ b/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)}`);
+  }
+});
diff --git a/app/assets/javascripts/select-kit/templates/components/color-palettes/color-palettes-row.hbs b/app/assets/javascripts/select-kit/templates/components/color-palettes/color-palettes-row.hbs
new file mode 100644
index 00000000000..b24b2f2f5d3
--- /dev/null
+++ b/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}}
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 02473d0f8d6..21b84a51a66 100644
--- a/app/assets/stylesheets/common.scss
+++ b/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";
diff --git a/app/assets/stylesheets/common/select-kit/color-palettes.scss b/app/assets/stylesheets/common/select-kit/color-palettes.scss
new file mode 100644
index 00000000000..07098882adf
--- /dev/null
+++ b/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;
+          }
+        }
+      }
+    }
+  }
+}