Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Updated design settings side nav

Browse source
This commit is contained in:
Sanne de Vries 2021-10-20 11:14:26 +02:00
parent 65bfc5e7b9
commit 53ac7d2f6d
5 changed files with 66 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,7 @@
@onComplete={{this.imageUploaded}} @onComplete={{this.imageUploaded}}
as |uploader| as |uploader|
> >
<div class="{{if @setting.value "" "flex items-center justify-between"}}"> <div class="{{if @setting.value "" "flex flex-grow-1 items-center justify-between"}}">
<div class="gh-setting-content"> <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 {{if @setting.value "gh-theme-setting-title"}}">{{humanize-setting-key @setting.key}}</div>
{{#each uploader.errors as |error|}} {{#each uploader.errors as |error|}}

4
ghost/admin/app/components/gh-nav-menu/design.hbs
View file

@ -7,8 +7,8 @@
<LinkTo @route="settings.design" class="gh-nav-menu-title" @current-when="settings.design.index" {{on "click" this.closeAllSections}}>Site design</LinkTo> <LinkTo @route="settings.design" class="gh-nav-menu-title" @current-when="settings.design.index" {{on "click" this.closeAllSections}}>Site design</LinkTo>
{{#let (eq this.openSection "brand") as |isOpen|}} {{#let (eq this.openSection "brand") as |isOpen|}}
<button class="gh-nav-design-tab {{if isOpen "active"}}" type="button" {{on "click" (fn this.toggleSection "brand")}}> <button class="gh-nav-design-tab {{if isOpen "active"}}" type="button" {{on "click" (fn this.toggleSection "brand")}}>
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-down-stroke" "arrow-right-stroke")}}</span>
{{svg-jar "paintbrush"}}Brand {{svg-jar "paintbrush"}}Brand
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
</button> </button>
{{#liquid-if isOpen}} {{#liquid-if isOpen}}
<div class="gh-nav-design-settings"> <div class="gh-nav-design-settings">
@ -22,8 +22,8 @@
{{#each this.customThemeSettings.settingGroups as |group|}} {{#each this.customThemeSettings.settingGroups as |group|}}
{{#let (eq this.openSection group.key) as |isOpen|}} {{#let (eq this.openSection group.key) as |isOpen|}}
<button class="gh-nav-design-tab {{if isOpen "active"}}" type="button" {{on "click" (fn this.toggleSection group.key)}}> <button class="gh-nav-design-tab {{if isOpen "active"}}" type="button" {{on "click" (fn this.toggleSection group.key)}}>
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-down-stroke" "arrow-right-stroke")}}</span>
{{svg-jar group.icon}} {{group.name}} {{svg-jar group.icon}} {{group.name}}
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
</button> </button>
{{#liquid-if isOpen}} {{#liquid-if isOpen}}

46
ghost/admin/app/components/settings/design/general-settings-form.hbs
View file

@ -107,33 +107,33 @@
@onComplete={{fn this.imageUploaded "logo"}} @onComplete={{fn this.imageUploaded "logo"}}
as |uploader| as |uploader|
> >
<div> <div>
<div class="gh-setting-title">Publication logo</div> <div class="gh-setting-title">Publication logo</div>
<div class="gh-setting-desc mb3">The primary logo, should be transparent and at least 600x72px</div> <div class="gh-setting-desc mb3">The primary logo, should be transparent and at least 600x72px</div>
<div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column"> <div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column">
{{#each uploader.errors as |error|}} {{#each uploader.errors as |error|}}
<div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div> <div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div>
{{/each}} {{/each}}
{{#if uploader.isUploading}} {{#if uploader.isUploading}}
{{uploader.progressBar}} {{uploader.progressBar}}
{{else if this.settings.logo}} {{else if this.settings.logo}}
<div class="gh-branding-image-container largeimg justify-center transparent-bg"> <div class="gh-branding-image-container largeimg justify-center transparent-bg">
<img class="blog-logo" src="{{this.settings.logo}}" {{on "click" this.triggerFileDialog}} alt="logo" data-test-logo-img> <img class="blog-logo" src="{{this.settings.logo}}" {{on "click" this.triggerFileDialog}} alt="logo" data-test-logo-img>
<button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.updateSetting "logo" null)}} data-test-delete-image="logo"> <button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.updateSetting "logo" null)}} data-test-delete-image="logo">
{{svg-jar "trash" class="w4 h4 fill-white"}} {{svg-jar "trash" class="w4 h4 fill-white"}}
</button>
</div>
{{else}}
<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> </button>
{{/if}}
<div style="display:none">
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="logo" />
</div> </div>
{{else}}
<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}}
<div style="display:none">
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="logo" />
</div> </div>
</div> </div>
</div>
</GhUploader> </GhUploader>
</div> </div>
@ -161,7 +161,7 @@
</button> </button>
</div> </div>
{{else}} {{else}}
<button type="button" class="gh-btn self-start" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="coverImage"> <button type="button" class="gh-btn gh-btn-white self-start" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="coverImage">
<span>Upload cover</span> <span>Upload cover</span>
</button> </button>
{{/if}} {{/if}}

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

@ -1373,7 +1373,7 @@ p.theme-validation-details {
/* ---------------------------------------------------- */ /* ---------------------------------------------------- */
.gh-nav-contextual { .gh-nav-contextual {
flex: 0 0 400px; flex: 0 0 420px;
} }
.gh-nav-header { .gh-nav-header {
@ -1421,12 +1421,13 @@ p.theme-validation-details {
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
margin-bottom: 4px; margin: 0 16px 4px 16px;
padding: 8px var(--mainmenu-padding) 8px calc(var(--mainmenu-padding) + 7px); padding: 8px 16px;
color: var(--black); color: var(--black);
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 500; font-weight: 500;
line-height: 1.3em; line-height: 1.3em;
border-radius: var(--border-radius);
} }
.gh-nav-design .gh-nav-menu-title:hover { .gh-nav-design .gh-nav-menu-title:hover {
@ -1440,16 +1441,16 @@ p.theme-validation-details {
.gh-nav-design-tab { .gh-nav-design-tab {
display: flex; display: flex;
flex-grow: 1;
position: relative; position: relative;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
width: 100%; margin: 0 16px;
margin: 0; padding: 7px 16px;
padding: 7px var(--mainmenu-padding) 7px calc(var(--mainmenu-padding) + 7px);
color: var(--darkgrey-l1); color: var(--darkgrey-l1);
font-weight: 400; font-weight: 400;
font-size: 1.45rem; font-size: 1.45rem;
border-radius: 0; border-radius: var(--border-radius);
transition: none; transition: none;
} }
@ -1460,6 +1461,8 @@ p.theme-validation-details {
.gh-nav-design-tab.active { .gh-nav-design-tab.active {
color: var(--black); color: var(--black);
font-weight: 600; font-weight: 600;
background: var(--mainmenu-color-hover-bg);
border-radius: var(--border-radius) var(--border-radius) 0 0;
} }
.gh-nav-bottom .gh-nav-design-tab { .gh-nav-bottom .gh-nav-design-tab {
@ -1485,15 +1488,27 @@ p.theme-validation-details {
font-weight: 400 !important; font-weight: 400 !important;
} }
.gh-nav-design .gh-nav-list {
display: flex;
flex-direction: column;
}
.gh-nav-design .gh-nav-list .active svg { .gh-nav-design .gh-nav-list .active svg {
fill: none; fill: none;
} }
.gh-nav-design .gh-nav-button-expand { .gh-nav-design .gh-nav-button-expand {
top: auto; position: relative;
top: inherit;
left: inherit;
margin-left: auto;
padding-top: 3px; padding-top: 3px;
} }
.gh-nav-design .gh-nav-button-expand svg {
margin-right: 0;
}
.gh-nav-design .gh-nav-bottom { .gh-nav-design .gh-nav-bottom {
padding: 40px 0; padding: 40px 0;
} }
@ -1509,13 +1524,10 @@ p.theme-validation-details {
} }
.gh-nav-design-settings { .gh-nav-design-settings {
padding: 32px var(--mainmenu-padding) 16px calc(var(--mainmenu-padding) + 7px); margin: 0 16px;
padding: 24px 16px 16px;
background: var(--mainmenu-color-hover-bg); background: var(--mainmenu-color-hover-bg);
border-radius: var(--border-radius); border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.gh-nav-design .gh-stack-item {
flex-direction: column;
} }
.gh-nav-design .gh-setting { .gh-nav-design .gh-setting {
@ -1632,6 +1644,17 @@ p.theme-validation-details {
padding-bottom: 0; padding-bottom: 0;
} }
.gh-advanced svg {
width: auto;
height: 6px;
margin-right: .6em;
fill: var(--darkgrey);
}
.gh-advanced svg path {
stroke: var(--darkgrey);
}
.gh-themes-container-labs { .gh-themes-container-labs {
margin-bottom: 40px; margin-bottom: 40px;
background: var(--main-color-content-greybg); background: var(--main-color-content-greybg);
@ -1781,18 +1804,15 @@ p.theme-validation-details {
.gh-theme-directory-footer-container { .gh-theme-directory-footer-container {
width: 100%; width: 100%;
background: var(--main-color-content-greybg); border-top: 1px solid var(--main-color-area-divider)
} }
.gh-theme-directory-footer { .gh-theme-directory-footer {
display: block; display: block;
max-width: var(--main-layout-content-maxwidth); padding: 58px var(--main-layout-content-sidepadding);
margin: 0 auto;
padding: var(--main-layout-content-sidepadding) 48px;
color: var(--darkgrey-l1); color: var(--darkgrey-l1);
font-size: 1.6rem; font-size: 1.6rem;
background: var(--main-color-content-greybg);
} }
.gh-theme-directory-footer .link { .gh-theme-directory-footer .link {

2
ghost/admin/app/templates/settings/design/change-theme.hbs
View file

@ -2,7 +2,7 @@
<GhCanvasHeader class="gh-canvas-header"> <GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>Themes</h2> <h2 class="gh-canvas-title" data-test-screen-title>Themes</h2>
<section class="view-actions"> <section class="view-actions">
<button type="button" class="mr4 gh-btn {{if this.showAdvanced "gh-btn-green"}}" {{on "click" this.toggleAdvanced}}><span>Advanced</span></button> <button type="button" class="mr4 gh-btn gh-advanced " {{on "click" this.toggleAdvanced}}><span>{{svg-jar (if this.showAdvanced "arrow-up-small" "arrow-down-small")}}Advanced</span></button>
<button type="button" class="gh-btn gh-btn-primary" {{on "click" this.startThemeUpload}}><span>Upload theme</span></button> <button type="button" class="gh-btn gh-btn-primary" {{on "click" this.startThemeUpload}}><span>Upload theme</span></button>
</section> </section>
</GhCanvasHeader> </GhCanvasHeader>