mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Added support for text
custom theme settings
refs https://github.com/TryGhost/Team/issues/1109 - added basic `<CustomThemeSettings::Text>` component that is displayed for any custom theme settings with the type `'text'`
This commit is contained in:
parent
f4596a0add
commit
0b267098ea
3 changed files with 39 additions and 0 deletions
17
ghost/admin/app/components/custom-theme-settings/text.hbs
Normal file
17
ghost/admin/app/components/custom-theme-settings/text.hbs
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first"}}">
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<label class="gh-setting-title gh-theme-setting-title" for={{this.inputId}}>
|
||||||
|
{{humanize-setting-key @setting.key}}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="gh-input"
|
||||||
|
value={{@setting.value}}
|
||||||
|
id={{this.inputId}}
|
||||||
|
name={{this.inputName}}
|
||||||
|
{{on "input" this.updateValue}}
|
||||||
|
{{on "blur" this.triggerOnChange}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
19
ghost/admin/app/components/custom-theme-settings/text.js
Normal file
19
ghost/admin/app/components/custom-theme-settings/text.js
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import Component from '@glimmer/component';
|
||||||
|
import {action} from '@ember/object';
|
||||||
|
import {camelize} from '@ember/string';
|
||||||
|
import {guidFor} from '@ember/object/internals';
|
||||||
|
|
||||||
|
export default class CustomThemeSettingsTextComponent extends Component {
|
||||||
|
inputId = `input-${guidFor(this)}`;
|
||||||
|
inputName = camelize(this.args.setting.key);
|
||||||
|
|
||||||
|
@action
|
||||||
|
updateValue(event) {
|
||||||
|
this.args.setting.set('value', event.target.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
triggerOnChange() {
|
||||||
|
this.args.onChange?.();
|
||||||
|
}
|
||||||
|
}
|
|
@ -10,6 +10,9 @@
|
||||||
{{#if (eq setting.type "color")}}
|
{{#if (eq setting.type "color")}}
|
||||||
<CustomThemeSettings::Color @setting={{setting}} @index={{index}} @onChange={{@updatePreview}} />
|
<CustomThemeSettings::Color @setting={{setting}} @index={{index}} @onChange={{@updatePreview}} />
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
{{#if (eq setting.type "text")}}
|
||||||
|
<CustomThemeSettings::Text @setting={{setting}} @index={{index}} @onChange={{@updatePreview}} />
|
||||||
|
{{/if}}
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
Loading…
Add table
Reference in a new issue