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

Updated publish settings page design

Browse Source 
Refs https://github.com/TryGhost/Team/issues/1544
This commit is contained in:
Sanne de Vries 2022-04-27 10:08:40 +01:00
parent a5de8c76d6
commit 75a51d6a8f
6 changed files with 97 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ghost/admin/app/components/editor-labs/publish-management.js
View File

@ -29,16 +29,16 @@ export class PublishOptions {
return [{ return [{
value: 'publish+send', value: 'publish+send',
label: 'Publish and email', label: 'Publish and email',
display: 'published and sent', display: 'Publish and email',
disabled: this.emailDisabled disabled: this.emailDisabled
}, { }, {
value: 'publish', value: 'publish',
label: 'Publish only', label: 'Publish only',
display: 'published' display: 'Publish on site'
}, { }, {
value: 'send', value: 'send',
label: 'Email only', label: 'Email only',
display: 'sent', display: 'Send email',
disabled: this.emailDisabled disabled: this.emailDisabled
}]; }];
} }

101
ghost/admin/app/components/modals/editor-labs/publish-flow.hbs
View File

@ -6,62 +6,65 @@
</header> </header>
<div class="gh-publish-settings-container"> <div class="gh-publish-settings-container">
<div class="gh-publish-title">Ready?</div> <div class="gh-publish-title"><span>Another masterpiece.</span> Ready to share it with the world?</div>
<div class="gh-publish-settings"> <div class="gh-publish-settings">
<span class="gh-publish-setting">Right now</span> <div class="gh-publish-setting">
{{svg-jar "send-email"}}
, this {{@data.publishOptions.post.displayName}} will be
{{#if @data.publishOptions.emailUnavailable}} {{#if @data.publishOptions.emailUnavailable}}
published publish
{{else}} {{else}}
<GhBasicDropdown <GhBasicDropdown
class="gh-publish-setting" class="gh-publish-setting-trigger"
@verticalPosition="below" @verticalPosition="below"
@horizintalPosition="right" @horizintalPosition="right"
@renderInPlace={{true}} @renderInPlace={{true}}
as |dd| as |dd|
> >
<dd.Trigger> <dd.Trigger>
<span>{{@data.publishOptions.selectedPublishTypeOption.display}}</span> {{@data.publishOptions.selectedPublishTypeOption.display}}
</dd.Trigger> </dd.Trigger>
<dd.Content class="gh-publish-setting-dropdown"> <dd.Content class="gh-publish-setting-dropdown">
<fieldset> <fieldset>
{{#each @data.publishOptions.publishTypeOptions as |option|}} {{#each @data.publishOptions.publishTypeOptions as |option|}}
<div class="radio-button"> <div class="radio-button">
<input <input
type="radio" type="radio"
name="publish-type" name="publish-type"
id="publish-type-{{option.value}}" id="publish-type-{{option.value}}"
value={{option.value}} value={{option.value}}
checked={{eq option.value @data.publishOptions.publishType}} checked={{eq option.value @data.publishOptions.publishType}}
disabled={{option.disabled}} disabled={{option.disabled}}
{{on "change" this.publishTypeChanged}} {{on "change" this.publishTypeChanged}}
> >
<label for="publish-type-{{option.value}}">{{option.label}}</label> <label for="publish-type-{{option.value}}">{{option.label}}</label>
</div> </div>
{{/each}} {{/each}}
</fieldset> </fieldset>
</dd.Content> </dd.Content>
</GhBasicDropdown> </GhBasicDropdown>
{{/if}} {{/if}}
</div>
{{#if (eq @data.publishOptions.publishType "publish")}} {{#unless (eq @data.publishOptions.publishType "publish")}}
on your site. <div class="gh-publish-setting">
{{else}} {{svg-jar "member"}}
to <div class="gh-publish-setting-trigger">
<span class="gh-publish-setting">all subscribers</span> 235
{{#unless @data.publishOptions.onlyDefaultNewsletter}}
of <span class="gh-publish-setting-trigger">
Charts of the Week
{{#if @data.publishOptions.onlyDefaultNewsletter}} </span>
your site. {{/unless}}
{{else}} subscribers
<span class="gh-publish-setting">The Weekly Roundup</span>. </div>
{{/if}} </div>
{{/if}} {{/unless}}
<div class="gh-publish-setting">
{{svg-jar "clock"}}
<div class="gh-publish-setting-trigger">Right now</div>
</div>
</div> </div>

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

@ -455,36 +455,60 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 740px; width: 640px;
margin: 0 auto 8rem; margin: 0 auto 8rem;
padding-top: 11vw; padding-top: 11vw;
} }
.gh-publish-title { .gh-publish-title {
margin-bottom: 3.6rem; margin-bottom: 4.6rem;
color: var(--black); color: var(--black);
font-size: 3.2rem; font-size: 3.6rem;
font-weight: 700; font-weight: 700;
line-height: 1.3em;
}
.gh-publish-title span {
background: linear-gradient(135deg,#34b743 5%,#24db39);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.gh-publish-settings { .gh-publish-settings {
margin-bottom: 4.8rem; margin-bottom: 6rem;
color: var(--black); width: 100%;
font-size: 2.3rem;
font-weight: 400;
line-height: 2em;
} }
.gh-publish-setting { .gh-publish-setting {
display: inline-flex; display: flex;
align-items: center; align-items: center;
height: 38px; margin-bottom: 1.6rem;
padding: 0 8px; }
font-weight: 600;
white-space: nowrap; .gh-publish-setting svg {
width: 2rem;
height: 2rem;
margin-right: 1.6rem;
}
.gh-publish-setting svg path {
stroke: var(--black);
stroke-width: 2px;
}
.gh-publish-setting-trigger {
width: max-content;
border-bottom: 1.5px solid var(--black);
color: var(--black);
font-size: 2rem;
font-weight: 500;
line-height: 1.35em;
cursor: pointer; cursor: pointer;
background: var(--whitegrey-l1); }
border-radius: var(--border-radius);
.gh-publish-setting span {
border-bottom: 0;
font-weight: 700;
} }
.gh-publish-setting input[type="radio"]:disabled + label { .gh-publish-setting input[type="radio"]:disabled + label {

2
ghost/admin/public/assets/icons/clock.svg
View File

@ -1 +1 @@
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M15 12h-3v-5c0-.276-.224-.5-.5-.5s-.5.224-.5.5v5.5c0 .276.224.5.5.5h3.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zM19.5 0h-15c-2.481 0-4.5 2.019-4.5 4.5v15c0 2.481 2.019 4.5 4.5 4.5h15c2.481 0 4.5-2.019 4.5-4.5v-15c0-2.481-2.019-4.5-4.5-4.5zm3.5 19.5c0 1.93-1.57 3.5-3.5 3.5h-15c-1.93 0-3.5-1.57-3.5-3.5v-15c0-1.93 1.57-3.5 3.5-3.5h15c1.93 0 3.5 1.57 3.5 3.5v15zM12 3c-4.962 0-9 4.038-9 9s4.038 9 9 9 9-4.038 9-9-4.038-9-9-9zm0 17c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/></g></svg> <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 6v6h6" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 601 B

After

Width:  |  Height:  |  Size: 346 B

4
ghost/admin/public/assets/icons/member.svg
View File

@ -1,3 +1 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 20.908a3.99 3.99 0 0 0-2.934-3.856C17.172 16.535 14.586 16 12 16c-2.586 0-5.172.535-7.066 1.052A3.99 3.99 0 0 0 2 20.908V23h20v-2.092ZM12 13c.722 0 1.438-.155 2.105-.457a5.496 5.496 0 0 0 1.784-1.3 6.062 6.062 0 0 0 1.192-1.947A6.477 6.477 0 0 0 17.5 7c0-.788-.142-1.568-.419-2.296a6.063 6.063 0 0 0-1.192-1.947c-.51-.557-1.117-.999-1.784-1.3A5.105 5.105 0 0 0 12 1c-1.459 0-2.858.632-3.89 1.757C7.08 3.883 6.5 5.41 6.5 7c0 1.591.58 3.117 1.61 4.243C9.143 12.368 10.542 13 12 13Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.87319 7.05072C7.87319 4.53743 9.91062 2.5 12.4239 2.5C14.9372 2.5 16.9746 4.53743 16.9746 7.05072C16.9746 9.56402 14.9372 11.6014 12.4239 11.6014C9.91062 11.6014 7.87319 9.56402 7.87319 7.05072ZM12.4239 1C9.08219 1 6.37319 3.709 6.37319 7.05072C6.37319 10.3924 9.08219 13.1014 12.4239 13.1014C15.7656 13.1014 18.4746 10.3924 18.4746 7.05072C18.4746 3.709 15.7656 1 12.4239 1ZM6.82086 17.3498C8.30688 15.8638 10.3224 15.029 12.4239 15.029C14.5255 15.029 16.5409 15.8638 18.027 17.3498C19.513 18.8359 20.3478 20.8513 20.3478 22.9529C20.3478 23.3671 20.6836 23.7029 21.0978 23.7029C21.512 23.7029 21.8478 23.3671 21.8478 22.9529C21.8478 20.4535 20.855 18.0565 19.0876 16.2892C17.3203 14.5219 14.9233 13.529 12.4239 13.529C9.92454 13.529 7.52753 14.5219 5.7602 16.2892C3.99287 18.0565 3 20.4535 3 22.9529C3 23.3671 3.33579 23.7029 3.75 23.7029C4.16421 23.7029 4.5 23.3671 4.5 22.9529C4.5 20.8513 5.33484 18.8359 6.82086 17.3498Z" fill="black"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 656 B

2
ghost/admin/public/assets/icons/send-email.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style></defs><title>send-email</title><path class="a" d="M2.759 15.629a1.664 1.664 0 0 1-.882-3.075L20.36 1a1.663 1.663 0 0 1 2.516 1.72l-3.6 19.173a1.664 1.664 0 0 1-2.966.691l-5.21-6.955z"/><path class="a" d="M11.1 15.629H8.6V20.8a1.663 1.663 0 0 0 2.6 1.374l3.178-2.166zM11.099 15.629l11.08-14.59"/></svg> <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.954 2.045 9.41 14.591M21.04 1.686a1 1 0 0 1 1.274 1.274l-6.676 19.074a1 1 0 0 1-1.792.2L9.2 14.8l-7.434-4.646a1 1 0 0 1 .2-1.792L21.04 1.686Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 478 B

After

Width:  |  Height:  |  Size: 318 B