PR: Custom Color Choice (#38)

javascripts/discourse/api-initializers/next-gen.gjs

@@ -1,6 +1,8 @@
 import { apiInitializer } from "discourse/lib/api";
+import ClassAdder from "../components/class-adder";
 import ExperimentalScreen from "../components/experimental-screen";
 
 export default apiInitializer("1.8.0", (api) => {
   api.renderInOutlet("above-main-container", ExperimentalScreen);
+  api.renderInOutlet("above-main-container", ClassAdder);
 });

javascripts/discourse/api-initializers/user-pallette.js

@@ -0,0 +1,6 @@
+import { apiInitializer } from "discourse/lib/api";
+import CustomUserPallette from "../components/custom-user-pallette";
+
+export default apiInitializer("1.8.0", (api) => {
+  api.renderInOutlet("sidebar-footer-actions", CustomUserPallette);
+});

javascripts/discourse/components/class-adder.gjs

@@ -0,0 +1,12 @@
+import Component from "@glimmer/component";
+import { concat } from "@ember/helper";
+import { service } from "@ember/service";
+import htmlClass from "discourse/helpers/html-class";
+
+export default class ClassAdder extends Component {
+  @service customColor;
+
+  <template>
+    {{htmlClass (concat "custom-color-" this.customColor.color)}}
+  </template>
+}

javascripts/discourse/components/custom-user-pallette.gjs

@@ -0,0 +1,54 @@
+import { array } from "@ember/helper";
+import icon from "discourse/helpers/d-icon";
+import DMenu from "float-kit/components/d-menu";
+import SitePallette from "./site-pallette";
+
+const PALLETTES = [
+  {
+    name: "marigold",
+    color: "#d3881f",
+  },
+  {
+    name: "violet",
+    color: "#9b15de",
+  },
+  {
+    name: "lily",
+    color: "#CC336F",
+  },
+  {
+    name: "clover",
+    color: "#4caf50",
+  },
+  {
+    name: "royal",
+    color: "#4169e1",
+  },
+  {
+    name: "horizon",
+    color: "#595bca",
+  },
+];
+
+<template>
+  <DMenu
+    @identifier="user-color-pallette"
+    @triggers={{array "click"}}
+    @placementStrategy="fixed"
+    class="btn-flat user-color-pallette sidebar-footer-actions-button"
+    @inline={{true}}
+  >
+    <:trigger>
+      {{icon "paint-brush"}}
+    </:trigger>
+    <:content>
+      <div class="color-pallette-menu">
+        <div class="color-pallette-menu__content">
+          {{#each PALLETTES as |colorScheme|}}
+            <SitePallette @colorScheme={{colorScheme}} />
+          {{/each}}
+        </div>
+      </div>
+    </:content>
+  </DMenu>
+</template>

javascripts/discourse/components/site-pallette.gjs

@@ -0,0 +1,31 @@
+import Component from "@glimmer/component";
+import { fn } from "@ember/helper";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import DButton from "discourse/components/d-button";
+
+export default class SitePallette extends Component {
+  @service customColor;
+
+  get siteStyle() {
+    return `--icon-color: ${this.args.colorScheme.color}`;
+  }
+
+  @action
+  handleInput(colorScheme) {
+    this.customColor.setColor(colorScheme.name);
+  }
+
+  <template>
+    <div class="color-pallette-menu__item">
+      <DButton
+        class="btn-flat color-pallette-menu__item-choice"
+        style={{htmlSafe this.siteStyle}}
+        @icon="circle"
+        @translatedLabel={{@colorScheme.name}}
+        @action={{fn this.handleInput @colorScheme}}
+      />
+    </div>
+  </template>
+}

javascripts/discourse/services/custom-color.gjs

@@ -0,0 +1,13 @@
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import Service from "@ember/service";
+
+export default class customColor extends Service {
+  @tracked color = localStorage.getItem("d-customColor") || "horizon";
+
+  @action
+  setColor(color) {
+    this.color = color;
+    localStorage.setItem("d-customColor", color);
+  }
+}