Updated publish settings page design
Refs https://github.com/TryGhost/Team/issues/1544
This commit is contained in:
Sanne de Vries
parent
18de96c940
commit
7697896c70
|
|
@ -29,16 +29,16 @@ export class PublishOptions {
|
|||
return [{
|
||||
value: 'publish+send',
|
||||
label: 'Publish and email',
|
||||
display: 'published and sent',
|
||||
display: 'Publish and email',
|
||||
disabled: this.emailDisabled
|
||||
}, {
|
||||
value: 'publish',
|
||||
label: 'Publish only',
|
||||
display: 'published'
|
||||
display: 'Publish on site'
|
||||
}, {
|
||||
value: 'send',
|
||||
label: 'Email only',
|
||||
display: 'sent',
|
||||
display: 'Send email',
|
||||
disabled: this.emailDisabled
|
||||
}];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,62 +6,65 @@
|
|||
</header>
|
||||
|
||||
<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">
|
||||
<span class="gh-publish-setting">Right now</span>
|
||||
|
||||
, this {{@data.publishOptions.post.displayName}} will be
|
||||
|
||||
<div class="gh-publish-setting">
|
||||
{{svg-jar "send-email"}}
|
||||
{{#if @data.publishOptions.emailUnavailable}}
|
||||
published
|
||||
publish
|
||||
{{else}}
|
||||
<GhBasicDropdown
|
||||
class="gh-publish-setting"
|
||||
@verticalPosition="below"
|
||||
@horizintalPosition="right"
|
||||
@renderInPlace={{true}}
|
||||
as |dd|
|
||||
>
|
||||
<dd.Trigger>
|
||||
<span>{{@data.publishOptions.selectedPublishTypeOption.display}}</span>
|
||||
</dd.Trigger>
|
||||
<dd.Content class="gh-publish-setting-dropdown">
|
||||
<fieldset>
|
||||
{{#each @data.publishOptions.publishTypeOptions as |option|}}
|
||||
<div class="radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
name="publish-type"
|
||||
id="publish-type-{{option.value}}"
|
||||
value={{option.value}}
|
||||
checked={{eq option.value @data.publishOptions.publishType}}
|
||||
disabled={{option.disabled}}
|
||||
{{on "change" this.publishTypeChanged}}
|
||||
>
|
||||
<label for="publish-type-{{option.value}}">{{option.label}}</label>
|
||||
</div>
|
||||
{{/each}}
|
||||
</fieldset>
|
||||
</dd.Content>
|
||||
</GhBasicDropdown>
|
||||
<GhBasicDropdown
|
||||
class="gh-publish-setting-trigger"
|
||||
@verticalPosition="below"
|
||||
@horizintalPosition="right"
|
||||
@renderInPlace={{true}}
|
||||
as |dd|
|
||||
>
|
||||
<dd.Trigger>
|
||||
{{@data.publishOptions.selectedPublishTypeOption.display}}
|
||||
</dd.Trigger>
|
||||
<dd.Content class="gh-publish-setting-dropdown">
|
||||
<fieldset>
|
||||
{{#each @data.publishOptions.publishTypeOptions as |option|}}
|
||||
<div class="radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
name="publish-type"
|
||||
id="publish-type-{{option.value}}"
|
||||
value={{option.value}}
|
||||
checked={{eq option.value @data.publishOptions.publishType}}
|
||||
disabled={{option.disabled}}
|
||||
{{on "change" this.publishTypeChanged}}
|
||||
>
|
||||
<label for="publish-type-{{option.value}}">{{option.label}}</label>
|
||||
</div>
|
||||
{{/each}}
|
||||
</fieldset>
|
||||
</dd.Content>
|
||||
</GhBasicDropdown>
|
||||
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if (eq @data.publishOptions.publishType "publish")}}
|
||||
on your site.
|
||||
{{else}}
|
||||
to
|
||||
<span class="gh-publish-setting">all subscribers</span>
|
||||
|
||||
of
|
||||
|
||||
{{#if @data.publishOptions.onlyDefaultNewsletter}}
|
||||
your site.
|
||||
{{else}}
|
||||
<span class="gh-publish-setting">The Weekly Roundup</span>.
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{#unless (eq @data.publishOptions.publishType "publish")}}
|
||||
<div class="gh-publish-setting">
|
||||
{{svg-jar "member"}}
|
||||
<div class="gh-publish-setting-trigger">
|
||||
235
|
||||
{{#unless @data.publishOptions.onlyDefaultNewsletter}}
|
||||
<span class="gh-publish-setting-trigger">
|
||||
Charts of the Week
|
||||
</span>
|
||||
{{/unless}}
|
||||
subscribers
|
||||
</div>
|
||||
</div>
|
||||
{{/unless}}
|
||||
|
||||
<div class="gh-publish-setting">
|
||||
{{svg-jar "clock"}}
|
||||
<div class="gh-publish-setting-trigger">Right now</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -455,36 +455,60 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 740px;
|
||||
width: 640px;
|
||||
margin: 0 auto 8rem;
|
||||
padding-top: 11vw;
|
||||
}
|
||||
|
||||
.gh-publish-title {
|
||||
margin-bottom: 3.6rem;
|
||||
margin-bottom: 4.6rem;
|
||||
color: var(--black);
|
||||
font-size: 3.2rem;
|
||||
font-size: 3.6rem;
|
||||
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 {
|
||||
margin-bottom: 4.8rem;
|
||||
color: var(--black);
|
||||
font-size: 2.3rem;
|
||||
font-weight: 400;
|
||||
line-height: 2em;
|
||||
margin-bottom: 6rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gh-publish-setting {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 38px;
|
||||
padding: 0 8px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 601 B After Width: | Height: | Size: 346 B |
|
|
@ -1,3 +1 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/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>
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 656 B |
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 478 B After Width: | Height: | Size: 318 B |
Loading…
Reference in New Issue