Fixed settings not saving due to settings.brand

refs https://github.com/TryGhost/Ghost/issues/10318

- moves `settings.brand` as a JSON object to `settings.accentColor` as a string
This commit is contained in:
Kevin Ansfield 2020-06-23 20:48:53 +01:00
parent 6d83c30f01
commit f2b28cfa26
3 changed files with 25 additions and 24 deletions

View File

@ -50,13 +50,13 @@ export default Controller.extend({
return `${blogUrl}/${publicHash}/rss`;
}),
backgroundStyle: computed('settings.brand.primaryColor', function () {
let color = this.get('settings.brand.primaryColor') || '#ffffff';
backgroundStyle: computed('settings.accentColor', function () {
let color = this.get('settings.accentColor') || '#ffffff';
return htmlSafe(`background-color: ${color}`);
}),
brandColor: computed('settings.brand.primaryColor', function () {
let color = this.get('settings.brand.primaryColor');
accentColor: computed('settings.accentColor', function () {
let color = this.get('settings.accentColor');
if (color && color[0] === '#') {
return color.slice(1);
}
@ -271,22 +271,23 @@ export default Controller.extend({
return;
}
},
validateBrandColor() {
let newColor = this.get('brandColor');
let oldColor = this.get('settings.brand.primaryColor');
validateAccentColor() {
let newColor = this.get('accentColor');
let oldColor = this.get('settings.accentColor');
let errMessage = '';
// reset errors and validation
this.get('settings.errors').remove('brandColor');
this.get('settings.hasValidated').removeObject('brandColor');
this.get('settings.errors').remove('accentColor');
this.get('settings.hasValidated').removeObject('accentColor');
if (newColor === '') {
// Clear out the brand color
this.set('settings.brand.primaryColor', '');
// Clear out the accent color
this.set('settings.accentColor', '');
return;
}
// brandColor will be null unless the user has input something
// accentColor will be null unless the user has input something
if (!newColor) {
newColor = oldColor;
}
@ -296,14 +297,14 @@ export default Controller.extend({
}
if (newColor.match(/#[0-9A-Fa-f]{6}$/)) {
this.set('settings.brand.primaryColor', '');
this.set('settings.accentColor', '');
run.schedule('afterRender', this, function () {
this.set('settings.brand.primaryColor', newColor);
this.set('settings.accentColor', newColor);
});
} else {
errMessage = 'The color should be in valid hex format';
this.get('settings.errors').add('brandColor', errMessage);
this.get('settings.hasValidated').pushObject('brandColor');
this.get('settings.errors').add('accentColor', errMessage);
this.get('settings.hasValidated').pushObject('accentColor');
return;
}
}

View File

@ -10,7 +10,7 @@ export default Model.extend(ValidationEngine, {
logo: attr('string'),
coverImage: attr('string'),
icon: attr('string'),
brand: attr('json-string'),
accentColor: attr('string'),
defaultLocale: attr('string'),
activeTimezone: attr('string', {defaultValue: 'Etc/UTC'}),
codeinjectionHead: attr('string'),

View File

@ -165,26 +165,26 @@
</GhUploader>
</div>
{{#if this.config.enableDeveloperExperiments}}
<div class="gh-setting" data-test-setting="brand-color">
<div class="gh-setting" data-test-setting="accent-color">
<div class="gh-setting-content">
<div class="gh-setting-title">Accent Color</div>
<div class="gh-setting-desc">Primary color used in your publication theme</div>
</div>
<div class="gh-setting-action">
<GhFormGroup @errors={{settings.errors}} @hasValidated={{settings.hasValidated}} @property="brandColor" @class="input-color-form-group">
<GhFormGroup @errors={{settings.errors}} @hasValidated={{settings.hasValidated}} @property="accentColor" @class="input-color-form-group">
<div class="input-color">
<GhTextInput
@name="brand-color"
@name="accent-color"
@placeholder="abcdef"
@autocorrect="off"
@maxlength="6"
@focus-out={{action "validateBrandColor"}}
@value={{brandColor}}
data-test-brand-color-input={{true}}
@focus-out={{action "validateAccentColor"}}
@value={{accentColor}}
data-test-input="accentColor"
/>
<div class="color-box" style={{this.backgroundStyle}}></div>
</div>
<GhErrorMessage @errors={{settings.errors}} @property="brandColor" data-test-brandColor-error={{true}} />
<GhErrorMessage @errors={{settings.errors}} @property="accentColor" data-test-error="accentColor" />
</GhFormGroup>
</div>
</div>