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

Updated design for new fixed post settings menu

Browse Source
This commit is contained in:
Sanne de Vries 2021-06-22 20:51:26 +02:00
parent c078b639c2
commit f15bce5c2d
7 changed files with 79 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ghost/admin/app/components/gh-post-settings-menu-labs.hbs
View File

@ -1,10 +1,10 @@
<div class="settings-menu-container-labs {{if (and this.isViewingSubview (not (eq this.subview "email-settings"))) "settings-menu-container-labs-wide"}}">
<div id="entry-controls">
<div class="settings-menu settings-menu-pane settings-menu-pane-main">
<div class="settings-menu-header">
<div class="settings-menu-header labs">
<h4>{{capitalize this.post.displayName}} settings</h4>
</div>
<div class="settings-menu-content">
<div class="settings-menu-content labs">
{{#unless (feature "featureImageMeta")}}
<GhImageUploaderWithPreview
@image={{this.post.featureImage}}
@ -23,7 +23,7 @@
<a class="post-view-link" target="_blank" href="{{this.post.url}}">
View {{this.post.displayName}} {{svg-jar "external"}}
</a>
{{else}}
{{else if this.post.isScheduled}}
<a class="post-view-link" target="_blank" href="{{this.post.previewUrl}}">
Preview {{svg-jar "external"}}
</a>
@ -178,13 +178,13 @@
<div class="settings-menu settings-menu-pane {{unless (eq this.subview "email-settings") "settings-menu-pane-wide"}}">
<div class="active">
{{#if (eq this.subview "meta-data")}}
<div class="settings-menu-header subview">
<div class="settings-menu-header subview labs">
<button aria-label="Back" {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
<h4>Meta data</h4>
<div style="width:23px;"></div>
</div>
<div class="settings-menu-content">
<div class="settings-menu-content labs">
<form {{action "discardEnter" on="submit"}}>
<GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="metaTitle">
<label for="meta-title">Meta title</label>
@ -250,13 +250,13 @@
{{/if}}
{{#if (eq this.subview "twitter-data")}}
<div class="settings-menu-header subview">
<div class="settings-menu-header subview labs">
<button aria-label="Back" {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
<h4>Twitter card</h4>
<div style="width:23px;"></div>
</div>
<div class="settings-menu-content">
<div class="settings-menu-content labs">
<form {{action "discardEnter" on="submit"}}>
<GhImageUploaderWithPreview
@ -327,13 +327,13 @@
{{/if}}
{{#if (eq this.subview "facebook-data")}}
<div class="settings-menu-header subview">
<div class="settings-menu-header subview labs">
<button aria-label="Back" {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
<h4>Facebook card</h4>
<div style="width:23px;"></div>
</div>
<div class="settings-menu-content">
<div class="settings-menu-content labs">
<form {{action "discardEnter" on="submit"}}>
<GhImageUploaderWithPreview
@image={{this.post.ogImage}}
@ -395,13 +395,13 @@
{{/if}}
{{#if (eq this.subview "codeinjection")}}
<div class="settings-menu-header subview">
<div class="settings-menu-header subview labs">
<button aria-label="Back" {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
<h4>Code injection</h4>
<div style="width:23px;"></div>
</div>
<div class="settings-menu-content settings-menu-content-codeinjection">
<div class="settings-menu-content labs settings-menu-content-codeinjection">
<form {{action "discardEnter" on="submit"}}>
<GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="codeinjectionHead">
<label for="codeinjection-head">{{capitalize this.post.displayName}} header <code>\{{ghost_head}}</code></label>

8
ghost/admin/app/components/gh-post-settings-menu/email.hbs
View File

@ -1,16 +1,16 @@
<div class="settings-menu-header subview">
<div class="settings-menu-header subview {{if (feature "psmRedesign") "labs"}}">
<button {{on "click" this.close}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
<h4>Email newsletter</h4>
<div style="width:23px;"></div>
</div>
<div class="settings-menu-content settings-menu-email">
<div class="settings-menu-content settings-menu-email {{if (feature "psmRedesign") "labs"}}">
{{#if this.post.email.isSuccess}}
{{!-- Mail has already been sent --}}
<div class="ba b--whitegrey bg-white br3">
<div class="flex pa5 pt4 pb4 items-center bb b--whitegrey">
<div class="w16 flex flex-column items-center">
<span class="db mr4 mt3">{{svg-jar "send-email" class="w7 h7 stroke-darkgrey"}}</span>
<span class="db mr4 mt2">{{svg-jar "send-email" class="w6 h6 stroke-midlightgrey"}}</span>
</div>
<div class="flex flex-column justify-center">
<p class="ma0 pa0 midgrey">Post was sent by email to</p>
@ -32,7 +32,7 @@
</table>
</div>
<div class="pa5 pt3 pb3">
<p class="ma0 pa0"><button {{on "click" this.toggleEmailPreview}} class="blue">View sent email</button></p>
<p class="ma0 pa0"><button {{on "click" this.toggleEmailPreview}} class="green">View sent email</button></p>
</div>
</div>
{{else if (or this.retryEmail.isRunning this.post.email.isFailure)}}

53
ghost/admin/app/styles/components/settings-menu.css
View File

@ -381,13 +381,12 @@
/* LABS ----------------------------------------------------------------------*/
.settings-menu-container-labs {
min-width: 380px;
z-index: 999;
height: 100vh;
padding-top: 21px;
border-left: 1px solid var(--lightgrey);
min-width: 380px;
overflow-x: visible;
overflow-y: auto;
z-index: 999;
border-left: 1px solid var(--whitegrey-d1);
}
.settings-menu-container-labs-wide {
@ -398,8 +397,9 @@
.settings-menu-toggle-labs {
position: absolute;
top: 31px;
right: 0;
right: 24px;
z-index: 9999;
margin-right: 0 !important;
}
.settings-menu-toggle-spacer-labs {
@ -411,11 +411,11 @@
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 380px;
overflow: auto;
opacity: 1;
width: 380px;
min-width: 380px;
background-color: white;
opacity: 1;
}
.settings-menu-container-labs-wide .settings-menu-pane {
@ -429,3 +429,40 @@
right: auto;
bottom: auto;
}
.settings-menu-header.labs {
position: fixed;
z-index: 1;
width: 100%;
max-width: 364px;
padding: 36px 24px 24px;
background: var(--white);
}
.settings-menu-content.labs {
padding: 104px 24px 24px;
}
.settings-menu-header.subview.labs {
z-index: 2;
width: 100%;
max-width: 484px;
}
.settings-menu-header.subview.labs .back {
padding: 2px 15px 0 !important;
}
.settings-menu-header.subview.labs .back svg {
width: 12px;
height: 12px;
}
.settings-menu-header.subview.labs h4 {
width: 100%;
text-align: left;
}
.gh-publishmenu-labs {
margin-right: 8px;
}

12
ghost/admin/app/styles/layouts/editor.css
View File

@ -99,7 +99,11 @@
top: -1px;
right: 0;
font-size: 1.3rem;
color: var(--green);
color: var(--midgrey);
}
.post-view-link:hover {
color: var(--darkgrey);
}
.post-view-link svg {
@ -108,7 +112,11 @@
height: 12px;
vertical-align: middle;
margin-bottom: 2px;
fill: var(--green);
fill: var(--midgrey);
}
.post-view-link:hover svg {
fill: var(--darkgrey);
}

1
ghost/admin/app/styles/layouts/main.css
View File

@ -1445,7 +1445,6 @@
height: 16px;
width: 16px;
margin-right: 0;
margin-top: 1px;
}
.gh-actions-cog svg path {

1
ghost/admin/app/styles/patterns/forms.css
View File

@ -144,7 +144,6 @@ input {
position: absolute;
top: 50%;
left: 10px;
z-index: 2;
width: 14px;
height: 14px;
fill: color-mod(var(--lightgrey) l(-15%) s(-10%));

9
ghost/admin/app/templates/editor.hbs
View File

@ -43,6 +43,15 @@
@runningText="Saving"
@class="gh-btn gh-btn-blue gh-btn-icon contributor-save-button"
data-test-contributor-save=true />
{{else if (feature "psmRedesign")}}
<div class="gh-publishmenu-labs">
<GhPublishmenu
@post={{this.post}}
@postStatus={{this.post.status}}
@saveTask={{this.saveTask}}
@setSaveType={{action "setSaveType"}}
@onOpen={{action "cancelAutosave"}} />
</div>
{{else}}
<div>
<GhPublishmenu