TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 03:44:29 +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%;
right: 0;
margin: 5px 0 20px 0;
padding: 20px;
padding: 0px;
width: 320px;
background-color: #fff;
background-clip: padding-box;
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;
text-align: left;
text-transform: none;
@ -67,21 +67,21 @@
.gh-publishmenu-heading {
margin: 0 0 15px 0;
padding: 20px 20px 0;
font-size: 1.8rem;
line-height: 1.15em;
}
.gh-publishmenu-content {
margin: 17px 0;
border-top: var(--lightgrey) 1px solid;
border-bottom: var(--lightgrey) 1px solid;
}
.gh-publishmenu-footer {
margin: 15px 0 0 0;
padding: 0 20px 20px;
display: flex;
align-items: center;
justify-content: flex-end;
margin: 15px 0 0 0;
}
.gh-publishmenu-button {
@ -91,7 +91,12 @@
.gh-publishmenu-radio {
display: flex;
margin: 25px 0;
margin: 20px 0;
}
.gh-publishmenu-section {
padding: 0 20px;
border-top: var(--lightgrey) 1px solid;
}
.gh-publishmenu-radio-button {
@ -226,20 +231,22 @@
color: var(--red);
}
.gh-publishmenu-email {
margin: 15px 0;
justify-content: space-between;
align-items: center;
}
.for-checkbox .gh-publishmenu-email-checkbox {
margin-right: 0;
margin-top: -2px;
background: var(--white);
}
.gh-publishmenu-email-label {
margin-left: 12px;
}
.gh-publishmenu-email-label.disabled {
pointer-events: none;
}
.gh-publishmenu-content .for-checkbox.pe-none span {
background: color-mod(var(--whitegrey) l(+4%));
.gh-publishmenu-content .for-switch.pe-none {
opacity: 0.6;
}

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

@ -352,7 +352,8 @@ textarea {
/* Switch
/* ---------------------------------------------------------- */
.for-switch label {
.for-switch label,
.for-switch .container {
cursor: pointer;
position: relative;
display: inline-block;
@ -360,7 +361,8 @@ textarea {
height: 28px !important;
}
.for-switch label p {
.for-switch label p,
.for-switch .container p {
overflow: auto;
color: var(--darkgrey);
font-weight: normal;
@ -388,7 +390,8 @@ textarea {
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%));
}
@ -414,6 +417,26 @@ textarea {
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
/* ---------------------------------------------------------- */

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

@ -1,9 +1,9 @@
{{#if _isSaving}}
Saving...
{{else if (or this.post.isPublished this.post.pastScheduledTime)}}
Published on {{gh-format-post-time post.publishedAtUTC draft=false}}
Published
{{#if this.post.email}}
and sent to {{this.post.email.emailCount}} members
– Sent to {{this.post.email.emailCount}} members
{{/if}}
{{else if this.post.isScheduled}}
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>
<section class="gh-publishmenu-content">
<div class="gh-publishmenu-radio {{if (eq saveType "publish") "active"}}" {{action "setSaveType" "publish" on="click"}}>
<div class="gh-publishmenu-radio-button" data-test-publishmenu-published-option></div>
<div class="gh-publishmenu-radio-content">
<div class="gh-publishmenu-radio-label">Set it live now</div>
<div class="gh-publishmenu-radio-desc">Publish this {{post.displayName}} immediately</div>
<div class="gh-publishmenu-section">
<div class="gh-publishmenu-radio {{if (eq saveType "publish") "active"}}" {{action "setSaveType" "publish" on="click"}}>
<div class="gh-publishmenu-radio-button" data-test-publishmenu-published-option></div>
<div class="gh-publishmenu-radio-content">
<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 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-content">
<div class="gh-publishmenu-radio-label">Schedule it for later</div>
{{gh-date-time-picker
date=post.publishedAtBlogDate
time=post.publishedAtBlogTime
setDate=(action "setDate")
setTime=(action "setTime")
errors=post.errors
dateErrorProperty="publishedAtBlogDate"
timeErrorProperty="publishedAtBlogTime"
minDate=_minDate
}}
<div class="gh-publishmenu-radio-desc">Set automatic future publish date</div>
<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-content">
<div class="gh-publishmenu-radio-label">Schedule it for later</div>
{{gh-date-time-picker
date=post.publishedAtBlogDate
time=post.publishedAtBlogTime
setDate=(action "setDate")
setTime=(action "setTime")
errors=post.errors
dateErrorProperty="publishedAtBlogDate"
timeErrorProperty="publishedAtBlogTime"
minDate=_minDate
}}
<div class="gh-publishmenu-radio-desc">Set automatic future publish date</div>
</div>
</div>
</div>
{{#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}}
<div class="gh-loading-spinner" style="zoom: 50%"></div>
{{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"}}">
<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}}
<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}}
<div class="gh-publishmenu-radio-desc">You haven't got any members</div>
{{/if}}
</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}}
</div>
</div>
{{/if}}
</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>
<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-button" data-test-publishmenu-unpublished-option></div>
<div class="gh-publishmenu-radio-content">