From 986aa38903b08d43ad2d32f6485cd1228f427439 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Tue, 28 Mar 2023 14:23:08 +0200
Subject: [PATCH] Implemented basic color picker in newsletter settings

refs https://github.com/TryGhost/Team/issues/2830

Allows to change the colors, but not yet allows to select custom colors.
---
 .../newsletters/components/color-picker.hbs   | 10 ++++
 .../newsletters/components/color-picker.js    | 39 +++++++++++++
 .../modals/newsletters/edit/design-labs.hbs   | 42 ++++++--------
 .../modals/newsletters/edit/design-labs.js    | 57 +++++++++++++++++++
 ghost/admin/app/models/newsletter.js          |  3 +
 5 files changed, 125 insertions(+), 26 deletions(-)
 create mode 100644 ghost/admin/app/components/modals/newsletters/components/color-picker.hbs
 create mode 100644 ghost/admin/app/components/modals/newsletters/components/color-picker.js

diff --git a/ghost/admin/app/components/modals/newsletters/components/color-picker.hbs b/ghost/admin/app/components/modals/newsletters/components/color-picker.hbs
new file mode 100644
index 0000000000..b4781f0794
--- /dev/null
+++ b/ghost/admin/app/components/modals/newsletters/components/color-picker.hbs
@@ -0,0 +1,10 @@
+<div class="gh-email-design-color-picker">
+    <div class="gh-btn-group">
+        <p>{{this.currentColorObject.name}}</p>
+        <button type="button" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
+        {{#each this.availablePresetColors as |color|}}
+            <button type="button" class="gh-btn gh-email-design-color {{color.class}}" {{on "click" (fn this.setCurrentColor color.value) }}></button>
+        {{/each}}
+        <button type="button" class="gh-btn gh-email-design-color {{this.currentColorObject.class}} gh-btn-group-selected" style={{html-safe this.currentColorObject.style}}></button>
+    </div>
+</div>
diff --git a/ghost/admin/app/components/modals/newsletters/components/color-picker.js b/ghost/admin/app/components/modals/newsletters/components/color-picker.js
new file mode 100644
index 0000000000..feb94e51a1
--- /dev/null
+++ b/ghost/admin/app/components/modals/newsletters/components/color-picker.js
@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+
+export default class ColorPicker extends Component {
+    get presetColors() {
+        return this.args.presetColors ?? [];
+    }
+
+    get currentColor() {
+        return this.args.color || null;
+    }
+
+    set currentColor(value) {
+        this.args.onColorChange(value);
+    }
+
+    @action
+    setCurrentColor(value) {
+        this.currentColor = value;
+    }
+
+    get availablePresetColors() {
+        return this.presetColors.filter(preset => preset.value !== this.currentColor);
+    }
+
+    get currentColorObject() {
+        for (const preset of this.presetColors) {
+            if (preset.value === this.currentColor) {
+                return preset;
+            }
+        }
+        return {
+            value: this.currentColor,
+            name: this.currentColor,
+            class: 'custom-value',
+            style: 'background-color: ' + this.currentColor + ';'
+        };
+    }
+}
diff --git a/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs b/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
index 7bd94e1919..2c6b10e4ea 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
@@ -121,29 +121,22 @@
                     <div class="gh-stack">
                         <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Background color</label>
-                            <div class="gh-email-design-color-picker">
-                                <div class="gh-btn-group">
-                                    <p>White</p>
-                                    <button type="button" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
-                                    <button type="button" class="gh-btn gh-email-design-color black"></button>
-                                    <button type="button" class="gh-btn gh-email-design-color white gh-btn-group-selected"></button>
-                                </div>
-                            </div>
+                            <Modals::Newsletters::Components::ColorPicker
+                                @color={{@newsletter.backgroundColor}}
+                                @presetColors={{this.backgroundPresetColors}}
+                                @onColorChange={{fn this.changeSetting "backgroundColor"}}
+                            />
                         </GhFormGroup>
 
                         <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Border color</label>
-                            <div class="gh-email-design-color-picker">
-                                <div class="gh-btn-group">
-                                    <p>Transparent</p>
-                                    <button type="button" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
-                                    <button type="button" class="gh-btn gh-email-design-color accent"></button>
-                                    <button type="button" class="gh-btn gh-email-design-color black"></button>
-                                    <button type="button" class="gh-btn gh-email-design-color transparent gh-btn-group-selected"></button>
-                                </div>
-                            </div>
+                            <Modals::Newsletters::Components::ColorPicker
+                                @color={{@newsletter.borderColor}}
+                                @presetColors={{this.borderPresetColors}}
+                                @onColorChange={{fn this.changeSetting "borderColor"}}
+                            />
                         </GhFormGroup>
-                        
+
                         <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Post title</label>
                             <div class="for-switch x-small">
@@ -179,14 +172,11 @@
                         {{/if}}
                         <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Heading color</label>
-                            <div class="gh-email-design-color-picker">
-                                <div class="gh-btn-group">
-                                    <p>Auto</p>
-                                    <button type="button" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
-                                    <button type="button" class="gh-btn gh-email-design-color accent"></button>
-                                    <button type="button" class="gh-btn gh-email-design-color black gh-btn-group-selected"></button>
-                                </div>
-                            </div>
+                            <Modals::Newsletters::Components::ColorPicker
+                                @color={{@newsletter.titleColor}}
+                                @presetColors={{this.titlePresetColors}}
+                                @onColorChange={{fn this.changeSetting "titleColor"}}
+                            />
                         </GhFormGroup>
 
                         <GhFormGroup class="gh-stack-item row">
diff --git a/ghost/admin/app/components/modals/newsletters/edit/design-labs.js b/ghost/admin/app/components/modals/newsletters/edit/design-labs.js
index 19228e75b1..f0a6839dcf 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/design-labs.js
+++ b/ghost/admin/app/components/modals/newsletters/edit/design-labs.js
@@ -34,4 +34,61 @@ export default class EditNewsletterDesignForm extends Component {
     toggleSetting(property, event) {
         this.args.newsletter[property] = event.target.checked;
     }
+
+    get backgroundPresetColors() {
+        return [
+            {
+                value: 'dark',
+                name: 'Black',
+                class: 'black',
+                style: ''
+            },
+            {
+                value: 'light',
+                name: 'White',
+                class: 'white',
+                style: ''
+            }
+        ];
+    }
+
+    get borderPresetColors() {
+        return [
+            {
+                value: 'accent',
+                name: 'Accent',
+                class: 'accent',
+                style: ''
+            },
+            {
+                value: 'dark',
+                name: 'Black',
+                class: 'black',
+                style: ''
+            },
+            {
+                value: null,
+                name: 'Transparent',
+                class: 'transparent',
+                style: ''
+            }
+        ];
+    }
+
+    get titlePresetColors() {
+        return [
+            {
+                value: 'accent',
+                name: 'Accent',
+                class: 'accent',
+                style: ''
+            },
+            {
+                value: null,
+                name: 'Auto',
+                class: 'black',
+                style: ''
+            }
+        ];
+    }
 }
diff --git a/ghost/admin/app/models/newsletter.js b/ghost/admin/app/models/newsletter.js
index c24d3a9fa3..45d567ecdb 100644
--- a/ghost/admin/app/models/newsletter.js
+++ b/ghost/admin/app/models/newsletter.js
@@ -31,6 +31,9 @@ export default class Newsletter extends Model.extend(ValidationEngine) {
     @attr({defaultValue: 'center'}) titleAlignment;
     @attr({defaultValue: true}) showFeatureImage;
     @attr({defaultValue: 'sans_serif'}) bodyFontCategory;
+    @attr({defaultValue: 'light'}) backgroundColor;
+    @attr({defaultValue: null}) borderColor;
+    @attr({defaultValue: null}) titleColor;
     @attr footerContent;
     @attr({defaultValue: true}) showBadge;
     @attr count;