Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Implemented basic color picker in newsletter settings

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

Allows to change the colors, but not yet allows to select custom colors.
This commit is contained in:
Simon Backx 2023-03-28 14:23:08 +02:00
parent 4ca61837f4
commit 986aa38903
5 changed files with 125 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ghost/admin/app/components/modals/newsletters/components/color-picker.hbs Normal file
View file

@ -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>

39
ghost/admin/app/components/modals/newsletters/components/color-picker.js Normal file
View file

@ -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 + ';'
};
}
}

42
ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
View file

@ -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">

57
ghost/admin/app/components/modals/newsletters/edit/design-labs.js
View file

@ -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: ''
}
];
}
}

3
ghost/admin/app/models/newsletter.js
View file

@ -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;