Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

✨ Added custom theme setting descriptions (#17024)

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

Added the ability to specify a description for a custom theme setting

---------

Co-authored-by: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
This commit is contained in:
Michael Barrett 2023-06-15 15:10:56 +01:00 • committed by GitHub
parent 4b6cfa8f28
commit 9ce4c85905
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 74 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ghost/admin/.lint-todo
View file

@ -590,3 +590,6 @@ remove|ember-template-lint|require-valid-alt-text|13|20|13|20|41dff435a7aba8088b
remove|ember-template-lint|no-invalid-interactive|3|4|3|4|1e038cea298e74d9c774ed441ca6daf50060a8ec|1685318400000|1695686400000|1700874000000|app/components/gh-editor-feature-image.hbs
add|ember-template-lint|no-invalid-interactive|3|4|3|4|6f7786d5ed3e8c09f39e3595839ee291749aeb01|1685664000000|1696032000000|1701219600000|app/components/gh-editor-feature-image.hbs
remove|ember-template-lint|no-forbidden-elements|152|20|152|20|966511a5bc154d46999a9594e3d39eb6ee5028a8|1675296000000|1685660400000|1690844400000|app/components/gh-nav-menu/main.hbs
remove|ember-template-lint|require-input-label|28|20|28|20|dc08ecbcb2f3358fe94e7e2b8f24f7ca17bf77b5|1675296000000|1685660400000|1690844400000|app/components/custom-theme-settings/color.hbs
add|ember-template-lint|require-input-label|33|16|33|16|91baa7e6ceea36e93d45f5dc9ac213cb7f1d8a59|1686700800000|1697068800000|1702256400000|app/components/custom-theme-settings/color.hbs
add|ember-template-lint|style-concatenation|3|40|3|40|ba5764956a2805ed8d72306fd9a8b8cd10a97119|1686700800000|1697068800000|1702256400000|app/components/custom-theme-settings/color.hbs

5
ghost/admin/app/components/custom-theme-settings/boolean.hbs
View file

@ -1,7 +1,7 @@
<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
<div class="flex-grow-1">
<div class="flex justify-between items-center relative">
<span class="gh-setting-title" for={{this.checkboxId}}>
<span class="gh-setting-title mb0" for={{this.checkboxId}}>
{{humanize-setting-key @setting.key}}
</span>
<div class="for-switch x-small">
@ -11,5 +11,8 @@
</label>
</div>
</div>
{{#if @setting.description}}
<div class="gh-setting-desc" style="margin-top: 1px">{{@setting.description}}</div>
{{/if}}
</div>
</div>

68
ghost/admin/app/components/custom-theme-settings/color.hbs
View file

@ -1,43 +1,43 @@
<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
<div class="flex flex-grow-1 justify-between">
<div class="flex justify-between items-center relative">
<span class="gh-setting-title" for={{this.inputId}}>
{{humanize-setting-key @setting.key}}
</span>
</div>
<div>
<div class="input-color">
<div class="{{if @setting.description "gh-setting-content" "flex flex-column justify-center"}}">
<label class="gh-setting-title" style="{{if (is-empty @setting.description) "margin-bottom: 0px"}}" for={{this.inputId}}>
{{humanize-setting-key @setting.key}}
</label>
{{#if @setting.description}}
<div class="gh-setting-desc">{{@setting.description}}</div>
{{/if}}
{{#if this.isInvalid}}
<div class="gh-setting-error {{if (is-empty @setting.description) "mt3"}}">Enter a color in hex format</div>
{{/if}}
</div>
<div class="gh-setting-action">
<div class="input-color">
<input
type="text"
id={{this.inputId}}
name={{this.inputName}}
autocorrect="off"
maxlength="6"
value={{this.colorWithoutHash}}
class="gh-input"
{{on "input" (perform this.debounceValueUpdate)}}
{{on "blur" this.updateValue}}
{{on-key "Enter" this.blurElement}}
data-test-input="accentColor"
/>
<div class="color-picker-horizontal-divider"></div>
<div
class="color-box-container"
style={{this.this.colorPickerBgStyle}}
>
<input
type="text"
id={{this.inputId}}
type="color"
name={{this.inputName}}
autocorrect="off"
maxlength="6"
value={{this.colorWithoutHash}}
class="gh-input"
class="color-picker"
value={{@setting.value}}
{{on "input" (perform this.debounceValueUpdate)}}
{{on "blur" this.updateValue}}
{{on-key "Enter" this.blurElement}}
data-test-input="accentColor"
/>
<div class="color-picker-horizontal-divider"></div>
<div
class="color-box-container"
style={{this.this.colorPickerBgStyle}}
>
<input
type="color"
name={{this.inputName}}
class="color-picker"
value={{@setting.value}}
{{on "input" (perform this.debounceValueUpdate)}}
>
</div>
</div>
{{#if this.isInvalid}}
<div class="w-100 red">Please enter a color in hex format</div>
{{/if}}
</div>
</div>
</div>

5
ghost/admin/app/components/custom-theme-settings/image.hbs
View file

@ -6,10 +6,13 @@
>
<div class="{{if @setting.value "" "flex flex-grow-1 items-center justify-between"}}">
<div class="gh-setting-content">
<div class="gh-setting-title {{if @setting.value "gh-theme-setting-title"}}">{{humanize-setting-key @setting.key}}</div>
<div class="gh-setting-title mb0 {{if @setting.value "gh-theme-setting-title"}}">{{humanize-setting-key @setting.key}}</div>
{{#each uploader.errors as |error|}}
<div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
{{/each}}
{{#if @setting.description}}
<div class="gh-setting-desc" style="margin-top: 8px">{{@setting.description}}</div>
{{/if}}
</div>
<div class="gh-setting-action gh-uploadbutton-container flex flex-column items-stretch">
{{#if uploader.isUploading}}

4
ghost/admin/app/components/custom-theme-settings/select.hbs
View file

@ -3,7 +3,6 @@
<label class="gh-setting-title gh-theme-setting-title" for={{this.selectId}}>
{{humanize-setting-key @setting.key}}
</label>
<span class="gh-select">
<select class="ember-select" name={{this.selectName}} id={{this.selectId}} {{on "change" this.setSelection}}>
{{#each @setting.options as |settingOption|}}
@ -15,5 +14,8 @@
</select>
{{svg-jar "arrow-down-small"}}
</span>
{{#if @setting.description}}
<div class="gh-setting-desc">{{@setting.description}}</div>
{{/if}}
</div>
</div>

4
ghost/admin/app/components/custom-theme-settings/text.hbs
View file

@ -3,7 +3,6 @@
<label class="gh-setting-title gh-theme-setting-title" for={{this.inputId}}>
{{humanize-setting-key @setting.key}}
</label>
<input
type="text"
class="gh-input"
@ -13,5 +12,8 @@
{{on "input" this.updateValue}}
{{on "blur" this.triggerOnChange}}
/>
{{#if @setting.description}}
<div class="gh-setting-desc">{{@setting.description}}</div>
{{/if}}
</div>
</div>

2
ghost/admin/app/components/settings/form-fields/publication-cover.hbs
View file

@ -6,7 +6,6 @@
>
<div>
<label class="gh-setting-title" for="publication-cover">Publication cover</label>
<div class="gh-setting-desc mb3">An optional large background image for your site</div>
{{#each uploader.errors as |error|}}
<div class="gh-setting-error" data-test-error="coverImage">{{or error.context error.message}}</div>
{{/each}}
@ -55,6 +54,7 @@
/>
</div>
</div>
<div class="gh-setting-desc mb3">An optional large background image for your site</div>
</div>
</GhUploader>

2
ghost/admin/app/components/settings/form-fields/site-description.hbs
View file

@ -1,7 +1,6 @@
<div ...attributes>
<div class="flex-grow-1">
<label class="gh-setting-title" for="site-description">Site description</label>
<div class="gh-setting-desc mb3">Used in your theme, meta data and search results</div>
<div class="gh-setting-action" data-test-setting="description">
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="description" class="description-container">
<input
@ -16,5 +15,6 @@
<GhErrorMessage @errors={{this.settings.errors}} @property="description"/>
</GhFormGroup>
</div>
<div class="gh-setting-desc mb3">Used in your theme, meta data and search results</div>
</div>
</div>

1
ghost/admin/app/models/custom-theme-setting.js
View file

@ -3,6 +3,7 @@ import Model, {attr} from '@ember-data/model';
export default Model.extend({
key: attr('string'),
type: attr('string'),
description: attr('string'),
options: attr(),
default: attr('string'),
value: attr(),

26
ghost/admin/app/styles/layouts/settings.css
View file

@ -193,7 +193,8 @@
}
.gh-setting-title {
margin-bottom: 2px;
display: block;
margin-bottom: 12px;
font-size: 1.5rem;
letter-spacing: 0;
line-height: 1.15em;
@ -206,19 +207,27 @@
font-weight: 500;
}
.gh-setting-title.mb0 {
margin-bottom: 0;
}
.gh-setting-desc {
line-height: 1.4em;
color: var(--middarkgrey);
letter-spacing: 0.3px;
font-size: 1.3rem;
font-weight: 400;
margin: 4px 0 12px;
margin: 8px 0 12px;
}
.gh-setting-desc.mb0 {
margin-bottom: 0;
}
.gh-setting-title + .gh-setting-desc {
margin-top: -4px;
}
.gh-setting-error {
margin-top: 1em;
line-height: 1.3em;
@ -227,6 +236,15 @@
letter-spacing: 0.3px;
}
:is(.gh-setting-title, .gh-setting-desc) + .gh-setting-error {
margin-top: -4px;
font-size: 1.3rem;
}
.gh-setting-title + .gh-setting-error {
margin-top: 8px;
}
.gh-setting-action {
flex-shrink: 0;
margin: 1px 0 0 0;
@ -2092,10 +2110,6 @@ p.theme-validation-details {
border-color: color-mod(var(--lightgrey) l(-5%) s(-10%));
}
.gh-theme-setting-title {
margin-bottom: 1rem;
}
.gh-design {
display: flex;
flex-direction: column;