TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 12:21:36 +03:00
Code Issues Projects Releases Wiki Activity

Updated general and custom theme settings design

Browse Source
This commit is contained in:
Sanne de Vries 2021-10-19 16:26:27 +02:00
parent 7e28e2f173
commit 7534dbc7a6
8 changed files with 55 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ghost/admin/app/components/custom-theme-settings/boolean.hbs
View File

@ -1,10 +1,10 @@
<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first"}}">
<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 gh-theme-setting-title" for={{this.checkboxId}}>
<span class="gh-setting-title" for={{this.checkboxId}}>
{{humanize-setting-key @setting.key}}
</span>
<div class="for-switch small">
<div class="for-switch x-small">
<label for={{this.checkboxId}} class="switch">
<input type="checkbox" class="gh-input" id={{this.checkboxId}} checked={{@setting.value}} {{on "input" this.toggleValue}}>
<span class="input-toggle-component mt1"></span>

8
ghost/admin/app/components/custom-theme-settings/color.hbs
View File

@ -1,11 +1,11 @@
<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first"}}">
<div class="flex-grow-1">
<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 gh-theme-setting-title" for={{this.inputId}}>
<span class="gh-setting-title" for={{this.inputId}}>
{{humanize-setting-key @setting.key}}
</span>
</div>
<div class="form-group">
<div>
<div class="input-color">
<input
type="text"

46
ghost/admin/app/components/custom-theme-settings/image.hbs
View File

@ -1,32 +1,34 @@
<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first"}}">
<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
<GhUploader
@extensions={{this.imageExtensions}}
@onComplete={{this.imageUploaded}}
as |uploader|
>
<div class="gh-setting-content">
<div class="gh-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}}
</div>
<div class="gh-setting-action gh-uploadbutton-container flex flex-column items-stretch">
{{#if uploader.isUploading}}
{{uploader.progressBar}}
{{else if @setting.value}}
<div class="gh-branding-image-container largeimg justify-start">
<img class="blog-cover" src={{@setting.value}} {{on "click" uploader.triggerFileDialog}}>
<button type="button" class="gh-setting-action-largeimg-delete" {{on "click" (fn this.updateValue null)}} data-test-delete-image="icon">
{{svg-jar "trash" class="w4 h4 fill-white"}}
<div class="{{if @setting.value "" "flex 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>
{{#each uploader.errors as |error|}}
<div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
{{/each}}
</div>
<div class="gh-setting-action gh-uploadbutton-container flex flex-column items-stretch">
{{#if uploader.isUploading}}
{{uploader.progressBar}}
{{else if @setting.value}}
<div class="gh-branding-image-container largeimg justify-start">
<img class="blog-cover" src={{@setting.value}} {{on "click" uploader.triggerFileDialog}}>
<button type="button" class="gh-setting-action-largeimg-delete" {{on "click" (fn this.updateValue null)}} data-test-delete-image="icon">
{{svg-jar "trash" class="w4 h4 fill-white"}}
</button>
</div>
{{else}}
<button type="button" class="gh-btn gh-btn-white self-start" {{on "click" uploader.triggerFileDialog}} data-test-image-upload-btn="icon">
<span>Upload</span>
</button>
{{/if}}
<div style="display:none">
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} @onInsert={{uploader.registerFileInput}} data-test-file-input="icon" />
</div>
{{else}}
<button type="button" class="gh-btn self-start" {{on "click" uploader.triggerFileDialog}} data-test-image-upload-btn="icon">
<span>Upload image</span>
</button>
{{/if}}
<div style="display:none">
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} @onInsert={{uploader.registerFileInput}} data-test-file-input="icon" />
</div>
</div>
</GhUploader>

2
ghost/admin/app/components/custom-theme-settings/select.hbs
View File

@ -1,4 +1,4 @@
<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first"}}">
<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
<div class="flex-grow-1">
<label class="gh-setting-title gh-theme-setting-title" for={{this.selectId}}>
{{humanize-setting-key @setting.key}}

2
ghost/admin/app/components/custom-theme-settings/text.hbs
View File

@ -1,4 +1,4 @@
<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first"}}">
<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
<div class="flex-grow-1">
<label class="gh-setting-title gh-theme-setting-title" for={{this.inputId}}>
{{humanize-setting-key @setting.key}}

2
ghost/admin/app/components/gh-nav-menu.hbs
View File

@ -1,4 +1,4 @@
<nav class="gh-nav" ...attributes>
<nav class="gh-nav {{if this.ui.contextualNavMenu "gh-nav-contextual"}}" ...attributes>
{{#if this.ui.contextualNavMenu}}
{{component (concat "gh-nav-menu/" ui.contextualNavMenu)}}
{{else}}

4
ghost/admin/app/components/settings/design/general-settings-form.hbs
View File

@ -90,7 +90,7 @@
</button>
</div>
{{else}}
<button type="button" class="gh-btn self-center" {{on "click" triggerFileDialog}} data-test-image-upload-btn="icon">
<button type="button" class="gh-btn gh-btn-white self-center" {{on "click" triggerFileDialog}} data-test-image-upload-btn="icon">
<span>Upload icon</span>
</button>
{{/if}}
@ -125,7 +125,7 @@
</button>
</div>
{{else}}
<button type="button" class="gh-btn self-start" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="logo">
<button type="button" class="gh-btn gh-btn-white self-start" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="logo">
<span>Upload logo</span>
</button>
{{/if}}

21
ghost/admin/app/styles/layouts/settings.css
View File

@ -170,7 +170,7 @@
}
.gh-setting-first .description-container-labs {
margin-bottom: 12px;
margin-bottom: 0;
}
.gh-setting-last {
@ -1371,6 +1371,11 @@ p.theme-validation-details {
/* Design (Labs)
/* ---------------------------------------------------- */
.gh-nav-contextual {
flex: 0 0 400px;
}
.gh-nav-header {
height: 100px;
padding: 32px 32px 16px;
@ -1504,13 +1509,19 @@ p.theme-validation-details {
}
.gh-nav-design-settings {
padding: 24px var(--mainmenu-padding) 32px calc(var(--mainmenu-padding) + 7px);
padding: 32px var(--mainmenu-padding) 16px calc(var(--mainmenu-padding) + 7px);
background: var(--mainmenu-color-hover-bg);
border-radius: var(--border-radius);
}
.gh-nav-design .gh-stack-item {
flex-direction: column;
}
.gh-nav-design .gh-setting {
padding: 12px 0;
}
.gh-nav-design .gh-setting-title {
font-size: 1.45rem;
font-weight: 500;
@ -1580,6 +1591,12 @@ p.theme-validation-details {
margin: 0;
}
.gh-nav-design .for-switch label {
width: 34px !important;
height: 22px !important;
margin: 0;
}
.gh-theme-setting-title {
margin-bottom: 1rem;
}