TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-03 16:38:22 +03:00
Code Issues Projects Releases Wiki Activity

Fixed tag accent color picker

Browse Source 
refs f10e133acd

- updated the component backing class with the expected actions/tasks
- largely duplicated from `<GhBrandSettingsForm>` which had more up-to-date code style
This commit is contained in:
Kevin Ansfield 2021-03-04 18:07:48 +00:00
parent f10e133acd
commit ea76d5f178
2 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/components/gh-tag-settings-form.hbs
View File

@ -41,7 +41,7 @@
<div class="color-picker-horizontal-divider"></div>
<div
class="color-box-container"
style={{this.accentColorBgStlye}}
style={{this.accentColorBgStyle}}
>
<input
type="color"

78
ghost/admin/app/components/gh-tag-settings-form.js
View File

@ -5,6 +5,7 @@ import {htmlSafe} from '@ember/string';
import {or} from '@ember/object/computed';
import {run} from '@ember/runloop';
import {inject as service} from '@ember/service';
import {task, timeout} from 'ember-concurrency';
const {Handlebars} = Ember;
@ -35,9 +36,12 @@ export default Component.extend({
return color;
}),
accentColorBackgroundStyle: computed('tag.accentColor', function () {
let color = this.get('tag.accentColor') || '#ffffff';
return htmlSafe(`background-color: ${color}`);
accentColorPickerValue: computed('tag.accentColor', function () {
return this.tag.get('accentColor') || '#ffffff';
}),
accentColorBgStyle: computed('accentColorPickerValue', function () {
return htmlSafe(`background-color: ${this.accentColorPickerValue}`);
}),
title: computed('tag.isNew', function () {
@ -154,39 +158,51 @@ export default Component.extend({
this.get('tag.errors').add('canonicalUrl', errMessage);
this.get('tag.hasValidated').pushObject('canonicalUrl');
}
},
}
},
validateAccentColor() {
let newColor = this.get('accentColor');
let oldColor = this.get('tag.accentColor');
let errMessage = '';
updateAccentColor: async function (event) {
let newColor = event.target.value;
const oldColor = this.tag.get('accentColor');
this.get('tag.errors').remove('accentColor');
this.get('tag.hasValidated').removeObject('accentColor');
// reset errors and validation
this.tag.errors.remove('accentColor');
this.tag.hasValidated.removeObject('accentColor');
if (newColor === '') {
this.setProperty('accentColor', '');
if (newColor === '') {
if (newColor === oldColor) {
return;
}
if (!newColor) {
newColor = oldColor;
}
if (newColor[0] !== '#') {
newColor = `#${newColor}`;
}
if (newColor.match(/#[0-9A-Fa-f]{6}$/)) {
this.setProperty('accentColor', '');
run.schedule('afterRender', this, function () {
this.setProperty('accentColor', newColor);
});
} else {
errMessage = 'The color should be in valid hex format';
this.get('tag.errors').add('accentColor', errMessage);
this.get('tag.hasValidated').pushObject('accentColor');
}
// clear out the accent color
this.tag.set('accentColor', '');
return;
}
}
// accentColor will be null unless the user has input something
if (!newColor) {
newColor = oldColor;
}
if (newColor[0] !== '#') {
newColor = `#${newColor}`;
}
if (newColor.match(/#[0-9A-Fa-f]{6}$/)) {
if (newColor === oldColor) {
return;
}
this.tag.set('accentColor', newColor);
this.scratchTag.set('accentColor', newColor);
} else {
this.tag.errors.add('accentColor', 'The colour should be in valid hex format');
this.tag.hasValidated.pushObject('accentColor');
}
},
debounceUpdateAccentColor: task(function*(event) {
yield timeout(10);
this.updateAccentColor(event);
})
});