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

Refined publish menu

Browse Source
This commit is contained in:
Peter Zimon 2019-11-08 11:46:38 +07:00
parent 2106f27df6
commit bd214fbf1d
5 changed files with 84 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ghost/admin/app/styles/components/publishmenu.css
View File

@ -41,12 +41,12 @@
top: 100%; top: 100%;
right: 0; right: 0;
margin: 5px 0 20px 0; margin: 5px 0 20px 0;
padding: 20px; padding: 0px;
width: 320px; width: 320px;
background-color: #fff; background-color: #fff;
background-clip: padding-box; background-clip: padding-box;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 0 1px rgba(99,114,130,0.16), 0 8px 16px rgba(27,39,51,0.08); box-shadow: 0 0 0 1px rgba(99,114,130,0.06), 0 8px 16px rgba(27,39,51,0.08);
list-style: none; list-style: none;
text-align: left; text-align: left;
text-transform: none; text-transform: none;
@ -67,21 +67,21 @@
.gh-publishmenu-heading { .gh-publishmenu-heading {
margin: 0 0 15px 0; margin: 0 0 15px 0;
padding: 20px 20px 0;
font-size: 1.8rem; font-size: 1.8rem;
line-height: 1.15em; line-height: 1.15em;
} }
.gh-publishmenu-content { .gh-publishmenu-content {
margin: 17px 0;
border-top: var(--lightgrey) 1px solid;
border-bottom: var(--lightgrey) 1px solid; border-bottom: var(--lightgrey) 1px solid;
} }
.gh-publishmenu-footer { .gh-publishmenu-footer {
margin: 15px 0 0 0;
padding: 0 20px 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
margin: 15px 0 0 0;
} }
.gh-publishmenu-button { .gh-publishmenu-button {
@ -91,7 +91,12 @@
.gh-publishmenu-radio { .gh-publishmenu-radio {
display: flex; display: flex;
margin: 25px 0; margin: 20px 0;
}
.gh-publishmenu-section {
padding: 0 20px;
border-top: var(--lightgrey) 1px solid;
} }
.gh-publishmenu-radio-button { .gh-publishmenu-radio-button {
@ -226,20 +231,22 @@
color: var(--red); color: var(--red);
} }
.gh-publishmenu-email {
margin: 15px 0;
justify-content: space-between;
align-items: center;
}
.for-checkbox .gh-publishmenu-email-checkbox { .for-checkbox .gh-publishmenu-email-checkbox {
margin-right: 0; margin-right: 0;
margin-top: -2px; margin-top: -2px;
background: var(--white); background: var(--white);
} }
.gh-publishmenu-email-label {
margin-left: 12px;
}
.gh-publishmenu-email-label.disabled { .gh-publishmenu-email-label.disabled {
pointer-events: none; pointer-events: none;
} }
.gh-publishmenu-content .for-checkbox.pe-none span { .gh-publishmenu-content .for-switch.pe-none {
background: color-mod(var(--whitegrey) l(+4%)); opacity: 0.6;
} }

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

@ -352,7 +352,8 @@ textarea {
/* Switch /* Switch
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.for-switch label { .for-switch label,
.for-switch .container {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -360,7 +361,8 @@ textarea {
height: 28px !important; height: 28px !important;
} }
.for-switch label p { .for-switch label p,
.for-switch .container p {
overflow: auto; overflow: auto;
color: var(--darkgrey); color: var(--darkgrey);
font-weight: normal; font-weight: normal;
@ -388,7 +390,8 @@ textarea {
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out; transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
} }
.for-switch label:hover input:not(:checked) + .input-toggle-component { .for-switch label:hover input:not(:checked) + .input-toggle-component,
.for-switch .container:hover input:not(:checked) + .input-toggle-component {
border-color: color-mod(var(--lightgrey) l(-10%) s(-10%)); border-color: color-mod(var(--lightgrey) l(-10%) s(-10%));
} }
@ -414,6 +417,26 @@ textarea {
transform: translateX(22px); transform: translateX(22px);
} }
.for-switch .container {
width: 38px !important;
height: 22px !important;
}
.for-switch.small .input-toggle-component {
width: 38px !important;
height: 22px !important;
}
.for-switch.small .input-toggle-component:before {
height: 16px !important;
width: 16px !important;
box-shadow: 0 0 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.1);
}
.for-switch.small input:checked + .input-toggle-component:before {
transform: translateX(16px);
}
/* Select /* Select
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

4
ghost/admin/app/templates/components/gh-editor-post-status.hbs
View File

@ -1,9 +1,9 @@
{{#if _isSaving}} {{#if _isSaving}}
Saving... Saving...
{{else if (or this.post.isPublished this.post.pastScheduledTime)}} {{else if (or this.post.isPublished this.post.pastScheduledTime)}}
Published on {{gh-format-post-time post.publishedAtUTC draft=false}} Published
{{#if this.post.email}} {{#if this.post.email}}
and sent to {{this.post.email.emailCount}} members – Sent to {{this.post.email.emailCount}} members
{{/if}} {{/if}}
{{else if this.post.isScheduled}} {{else if this.post.isScheduled}}
Scheduled Scheduled

69
ghost/admin/app/templates/components/gh-publishmenu-draft.hbs
View File

@ -1,54 +1,57 @@
<header class="gh-publishmenu-heading">Ready to publish your {{post.displayName}}?</header> <header class="gh-publishmenu-heading">Ready to publish your {{post.displayName}}?</header>
<section class="gh-publishmenu-content"> <section class="gh-publishmenu-content">
<div class="gh-publishmenu-radio {{if (eq saveType "publish") "active"}}" {{action "setSaveType" "publish" on="click"}}> <div class="gh-publishmenu-section">
<div class="gh-publishmenu-radio-button" data-test-publishmenu-published-option></div> <div class="gh-publishmenu-radio {{if (eq saveType "publish") "active"}}" {{action "setSaveType" "publish" on="click"}}>
<div class="gh-publishmenu-radio-content"> <div class="gh-publishmenu-radio-button" data-test-publishmenu-published-option></div>
<div class="gh-publishmenu-radio-label">Set it live now</div> <div class="gh-publishmenu-radio-content">
<div class="gh-publishmenu-radio-desc">Publish this {{post.displayName}} immediately</div> <div class="gh-publishmenu-radio-label">Set it live now</div>
<div class="gh-publishmenu-radio-desc">Publish this {{post.displayName}} immediately</div>
</div>
</div> </div>
</div> <div class="gh-publishmenu-radio {{if (eq saveType "schedule") "active"}}" {{action "setSaveType" "schedule" on="click"}}>
<div class="gh-publishmenu-radio {{if (eq saveType "schedule") "active"}}" {{action "setSaveType" "schedule" on="click"}}> <div class="gh-publishmenu-radio-button" data-test-publishmenu-scheduled-option></div>
<div class="gh-publishmenu-radio-button" data-test-publishmenu-scheduled-option></div> <div class="gh-publishmenu-radio-content">
<div class="gh-publishmenu-radio-content"> <div class="gh-publishmenu-radio-label">Schedule it for later</div>
<div class="gh-publishmenu-radio-label">Schedule it for later</div> {{gh-date-time-picker
{{gh-date-time-picker date=post.publishedAtBlogDate
date=post.publishedAtBlogDate time=post.publishedAtBlogTime
time=post.publishedAtBlogTime setDate=(action "setDate")
setDate=(action "setDate") setTime=(action "setTime")
setTime=(action "setTime") errors=post.errors
errors=post.errors dateErrorProperty="publishedAtBlogDate"
dateErrorProperty="publishedAtBlogDate" timeErrorProperty="publishedAtBlogTime"
timeErrorProperty="publishedAtBlogTime" minDate=_minDate
minDate=_minDate }}
}} <div class="gh-publishmenu-radio-desc">Set automatic future publish date</div>
<div class="gh-publishmenu-radio-desc">Set automatic future publish date</div> </div>
</div> </div>
</div> </div>
{{#if this.canSendEmail}} {{#if this.canSendEmail}}
<div class="gh-publishmenu-radio"> <div class="gh-publishmenu-section">
<div class="gh-publishmenu-radio gh-publishmenu-email">
{{#if this.backgroundLoader.isRunning}} {{#if this.backgroundLoader.isRunning}}
<div class="gh-loading-spinner" style="zoom: 50%"></div> <div class="gh-loading-spinner" style="zoom: 50%"></div>
{{else}} {{else}}
<div class="for-checkbox {{if disableEmailOption "pe-none"}}">
<div class="checkbox" for="email-when-published-checkbox">
<Input @checked={{this.sendEmailWhenPublished}} @type="checkbox" @id="email-when-published-checkbox" @name="email-when-published" @disabled={{disableEmailOption}} />
<span
class="input-toggle-component gh-publishmenu-email-checkbox"
{{on "click" (toggle "sendEmailWhenPublished" this)}}
></span>
</div>
</div>
<div class="gh-publishmenu-email-label {{if disableEmailOption "pe-none"}}"> <div class="gh-publishmenu-email-label {{if disableEmailOption "pe-none"}}">
<label class="gh-publishmenu-radio-label" for="email-when-published-checkbox">Email post</label> <label class="gh-publishmenu-radio-label {{unless this.memberCount "midgrey"}}" for="email-when-published-checkbox">Send by email</label>
{{#if this.memberCount}} {{#if this.memberCount}}
<div class="gh-publishmenu-radio-desc">Send post to members when published</div> <div class="gh-publishmenu-radio-desc">Deliver post to members</div>
{{else}} {{else}}
<div class="gh-publishmenu-radio-desc">You haven't got any members</div> <div class="gh-publishmenu-radio-desc">You haven't got any members</div>
{{/if}} {{/if}}
</div> </div>
<div class="for-switch small {{if disableEmailOption "pe-none"}}">
<div class="switch container" for="email-when-published-checkbox">
<Input @checked={{this.sendEmailWhenPublished}} @type="checkbox" @id="email-when-published-checkbox"
@name="email-when-published" @disabled={{disableEmailOption}} />
<span class="input-toggle-component gh-publishmenu-email-checkbox"
{{on "click" (toggle "sendEmailWhenPublished" this)}}></span>
</div>
</div>
{{/if}} {{/if}}
</div> </div>
</div>
{{/if}} {{/if}}
</section> </section>

2
ghost/admin/app/templates/components/gh-publishmenu-published.hbs
View File

@ -1,5 +1,5 @@
<header class="gh-publishmenu-heading">Update {{post.displayName}} status</header> <header class="gh-publishmenu-heading">Update {{post.displayName}} status</header>
<section class="gh-publishmenu-content"> <section class="gh-publishmenu-content gh-publishmenu-section">
<div class="gh-publishmenu-radio {{if (eq saveType "draft") "active"}}" {{action setSaveType "draft" on="click"}}> <div class="gh-publishmenu-radio {{if (eq saveType "draft") "active"}}" {{action setSaveType "draft" on="click"}}>
<div class="gh-publishmenu-radio-button" data-test-publishmenu-unpublished-option></div> <div class="gh-publishmenu-radio-button" data-test-publishmenu-unpublished-option></div>
<div class="gh-publishmenu-radio-content"> <div class="gh-publishmenu-radio-content">