Updated buttons and styles in editor, post-preview modal and launch-site wizard

No ref

- Updated all buttons in the editor header
- Updated buttons in publish menu
- Updated back-button in post-preview
- Updated icons for launch-site wizard
- Updated Stripe-info box in launch-site wizard
This commit is contained in:
Sanne de Vries 2021-02-08 10:13:26 +01:00
parent f4766d1920
commit 47abad1837
17 changed files with 157 additions and 134 deletions

View File

@ -42,29 +42,31 @@
</div>
<div class="gh-setting-desc"><a href="javascript:void(0)" {{on "click" @skipStep}}>Skip</a> if you don't want to offer paid subscriptions.</div>
{{else}}
<div class="gh-stack-item gh-setting">
<div class="w-100">
{{!-- Stripe already configured --}}
{{#if this.settings.stripeConnectAccountId}}
<div class="gh-stack-item gh-setting flex-wrap">
{{!-- Stripe already configured --}}
{{#if this.settings.stripeConnectAccountId}}
<div>
<h4 class="gh-setting-title">Already connected to Stripe</h4>
<p class="gh-setting-desc pa0 ma0">
<p class="gh-setting-desc mt2">
Connected to <a href="https://dashboard.stripe.com/{{this.settings.stripeConnectAccountId}}" target="_blank">{{this.settings.stripeConnectDisplayName}}</a>
{{#unless this.settings.stripeConnectLivemode}}
<span class="gh-members-connect-testmodelabel">Test mode</span>
{{/unless}}
</p>
{{#if this.hasActiveStripeSubscriptions}}
<p class="red ma0 pa0 f8 nudge-bottom--2">
Cannot disconnect while there are members with active Stripe subscriptions.
</p>
{{else}}
<div class="gh-setting-action">
<button type="button" class="gh-btn" {{on "click" (perform this.openDisconnectStripeConnectModalTask)}}><span>Disconnect</span></button>
</div>
{{/if}}
{{!-- Stripe not yet configured --}}
</div>
{{#if this.hasActiveStripeSubscriptions}}
<p class="red ma0 pa0 f8 nudge-bottom--2">
Cannot disconnect while there are members with active Stripe subscriptions.
</p>
{{else}}
<div class="gh-setting-action">
<button type="button" class="gh-btn" {{on "click" (perform this.openDisconnectStripeConnectModalTask)}}><span>Disconnect</span></button>
</div>
{{/if}}
{{!-- Stripe not yet configured --}}
{{else}}
<div class="w-100">
<div class="gh-setting-title">Generate secure key</div>
<div class="flex items-center mb4 justify-between mt2">
<a href="{{this.stripeConnectAuthUrl}}" class="stripe-connect" target="_blank" rel="noopener noreferrer"><span>Connect with Stripe</span></a>
@ -87,21 +89,22 @@
{{#if this.stripeConnectError}}<p class="mb0 mt2 f8 red">{{this.stripeConnectError}}</p>{{/if}}
</div>
<div class="gh-setting-desc mt4"><a href="javascript:void(0)" {{on "click" @skipStep}}>Skip</a> if you don't want to offer paid subscriptions.</div>
{{/if}}
</div>
</div>
{{/if}}
</div>
{{/if}}
</div>
<div class="gh-launch-wizard-nav-buttons">
<button type="button" class="gh-btn gh-btn-icon-grey gh-btn-large w-30" {{on "click" @backStep}}><span>{{svg-jar "arrow-left-tail"}}</span></button>
<button type="button" class="gh-btn gh-btn-outline gh-btn-icon-dark gh-btn-large w-30" {{on "click" @backStep}}><span>{{svg-jar "arrow-left-tail"}}</span></button>
<GhTaskButton
@buttonText="Save and continue"
@task={{this.saveAndContinueTask}}
@runningText="Saving"
@class="w-70 ml4 right gh-btn gh-btn-black gh-btn-large gh-btn-icon"
@class="w-70 ml4 right gh-btn gh-btn-black gh-btn-large gh-btn-icon-right"
data-test-button="wizard-next"
/>
>
<span>{{if this.settings.stripeConnectAccountId "Continue" "Save and continue"}}{{svg-jar "arrow-right-tail"}}</span>
</GhTaskButton>
</div>
</div>

View File

@ -156,7 +156,7 @@
</div>
<div class="gh-launch-wizard-nav-buttons">
<button type="button" class="gh-btn gh-btn-black gh-btn-icon-right gh-btn-large w-100" {{on "click" @nextStep}} data-test-button="wizard-next"><span>Next step {{svg-jar "arrow-right-tail"}}</span></button>
<button type="button" class="gh-btn gh-btn-black gh-btn-icon-right gh-btn-large w-100" {{on "click" @nextStep}} data-test-button="wizard-next"><span>Next step{{svg-jar "arrow-right-tail"}}</span></button>
</div>
</section>
</div>

View File

@ -5,7 +5,7 @@
<p>You can further customise your site in Settings.</p>
</div>
<div class="gh-launch-wizard-nav-buttons">
<button type="button" class="gh-btn gh-btn-icon-grey gh-btn-large w-30" {{on "click" @backStep}}><span>{{svg-jar "arrow-left-tail"}}</span></button>
<button type="button" class="gh-btn gh-btn-outline gh-btn-icon-dark gh-btn-large w-30" {{on "click" @backStep}}><span>{{svg-jar "arrow-left-tail"}}</span></button>
<GhTaskButton
@task={{this.finaliseTask}}
@buttonText="Launch your site!"

View File

@ -117,7 +117,7 @@
</div>
<div class="gh-launch-wizard-nav-buttons">
<button type="button" class="gh-btn gh-btn-icon-grey gh-btn-large w-30" {{on "click" @backStep}}><span>{{svg-jar "arrow-left-tail"}}</span></button>
<button type="button" class="gh-btn gh-btn-outline gh-btn-icon-dark gh-btn-large w-30" {{on "click" @backStep}}><span>{{svg-jar "arrow-left-tail"}}</span></button>
{{!-- TODO: reset "failed" state automatically --}}
<GhTaskButton

View File

@ -1,5 +1,5 @@
<BasicDropdown @verticalPosition="below" @onOpen={{action "open"}} @onClose={{action "close"}} as |dd|>
<dd.Trigger class="gh-btn gh-btn-outline gh-publishmenu-trigger">
<dd.Trigger class="gh-btn gh-btn-black gh-publishmenu-trigger">
<span data-test-publishmenu-trigger>{{this.triggerText}} {{svg-jar "arrow-down"}}</span>
</dd.Trigger>
@ -41,7 +41,7 @@
or cancel the task when the post status updates and switches components
--}}
<footer class="gh-publishmenu-footer">
<button class="gh-btn gh-btn-outline gh-btn-link" {{on "click" (action dd.actions.close)}} data-test-publishmenu-cancel>
<button class="gh-btn gh-btn-outline" {{on "click" (action dd.actions.close)}} data-test-publishmenu-cancel>
<span>Cancel</span>
</button>
<GhTaskButton
@ -50,7 +50,7 @@
@taskArgs={{hash dropdown=dd}}
@successText={{this.successText}}
@runningText={{this.runningText}}
@class="gh-btn gh-btn-blue gh-publishmenu-button gh-btn-icon"
@class="gh-btn gh-btn-black gh-publishmenu-button gh-btn-icon"
data-test-publishmenu-save=true
/>
</footer>

View File

@ -1,18 +1,19 @@
<div class="flex flex-column h-100">
<header class="modal-header gh-post-preview-header gh-post-preview-header-border" data-test-modal="preview-email">
<div>
<button class="blue link" title="Close" {{on "click" this.close}}>
{{svg-jar "arrow-left" class="w3 fill-blue mr1 nudge-right--2 nudge-top--1"}}
Back
<button class="gh-editor-back-button" title="Close" {{on "click" this.close}}>
<span>{{svg-jar "arrow-left"}} Back</span>
</button>
</div>
<div class="gh-contentfilter gh-btn-group gh-post-preview-btn-group" style="display:flex;flex-grow:1;justify-content:center">
<button type="button" class="gh-btn {{if (eq this.tab "browser") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "browser")}}><span>{{svg-jar "desktop"}}</span></button>
<button type="button" class="gh-btn {{if (eq this.tab "mobile") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "mobile")}}><span>{{svg-jar "mobile-phone"}}</span></button>
{{#if @model.post.isPost}}
<button type="button" class="gh-btn {{if (eq this.tab "email") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "email")}}><span>{{svg-jar "email-unread"}}</span></button>
{{/if}}
<button type="button" class="gh-btn {{if (eq this.tab "social") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "social")}}><span>{{svg-jar "social-share"}}</span></button>
<div class="gh-post-preview-btn-group">
<div class="gh-contentfilter gh-btn-group">
<button type="button" class="gh-btn {{if (eq this.tab "browser") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "browser")}}><span>{{svg-jar "desktop"}}</span></button>
<button type="button" class="gh-btn {{if (eq this.tab "mobile") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "mobile")}}><span>{{svg-jar "mobile-phone"}}</span></button>
{{#if @model.post.isPost}}
<button type="button" class="gh-btn {{if (eq this.tab "email") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "email")}}><span>{{svg-jar "email-unread"}}</span></button>
{{/if}}
<button type="button" class="gh-btn {{if (eq this.tab "social") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "social")}}><span>{{svg-jar "twitter"}}</span></button>
</div>
</div>
<GhPublishmenu

View File

@ -2,17 +2,7 @@
/* ---------------------------------------------------------- */
.gh-publishmenu-trigger {
color: var(--blue);
border: none;
cursor: pointer;
text-shadow: none;
background: none;
box-shadow: none;
}
.gh-publishmenu-trigger:hover {
background: none;
box-shadow: none;
}
.gh-publishmenu-trigger svg {
@ -21,8 +11,8 @@
}
.gh-publishmenu-trigger svg path {
stroke: var(--blue);
stroke-width: 1px;
stroke: var(--white);
stroke-width: 4px;
}
.gh-publishmenu-trigger:focus {
@ -33,7 +23,6 @@
position: relative;
z-index: 1000;
display: flex;
align-items: center;
}
.gh-publishmenu-dropdown {

View File

@ -64,7 +64,6 @@
position: relative;
z-index: 1000;
display: inline-block;
padding: 10px;
color: var(--midgrey);
line-height: 0;
transition: all 0.15s ease-out 0s;
@ -371,6 +370,52 @@
border: none !important;
}
.gh-editor-back-button {
height: 33px;
margin-right: 8px;
padding: 5px 12px 6px;
outline: none;
border: none;
color: var(--darkgrey);
font-size: 1.35rem;
font-weight: 500;
letter-spacing: 0.2px;
white-space: nowrap;
background: var(--white);
border-radius: 3px;
transition: all 0.25s ease;
}
.gh-editor-back-button:hover {
color: var(--darkgrey);
cursor: pointer;
background: var(--whitegrey);
}
.gh-editor-back-button span {
display: flex;
justify-content: center;
align-items: center;
}
.gh-editor-back-button svg {
width: .8em;
height: .8em;
margin-right: .5em;
padding-top: 2px;
fill: var(--darkgrey);
}
.gh-editor-post-status {
display: flex;
align-items: center;
padding: 0 12px;
font-size: 1.35rem;
font-weight: 400;
color: var(--midgrey-l2);
letter-spacing: .2px;
}
.gh-editor-wordcount {
position: fixed;
bottom: 0;

View File

@ -69,13 +69,9 @@
/* Connect Stripe settings */
.gh-launch-wizard-stripe-info {
width: 100%;
padding: 12px;
border: 1px solid var(--whitegrey);
border-radius: 4px;
box-shadow:
0 0 1px rgba(0,0,0,.12),
0 1px 6px rgba(0,0,0,.03),
0 6px 10px -8px rgba(0,0,0,.1);
padding: 24px 16px;
background: var(--whitegrey-l1);
border-radius: 2px;
}
.gh-launch-wizard-stripe-connect-token {

View File

@ -25,40 +25,23 @@
margin-right: auto;
}
.gh-post-preview-header .gh-btn-group {
flex: 1;
}
.gh-post-preview-header-border {
border-bottom: 1px solid var(--whitegrey);
}
.gh-post-preview-btn-group {
display: flex;
flex-grow: 1;
justify-content: center;
}
.gh-post-preview-btn-group button {
width: 64px;
}
.gh-post-preview-btn-group button span {
height: 40px;
border: 1px solid var(--whitegrey);
border-radius: 0;
}
.gh-post-preview-btn-group button:first-of-type span {
border-right: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.gh-post-preview-btn-group button:nth-of-type(2) span,
.gh-post-preview-btn-group button:nth-of-type(3) span {
border-right: none;
border-left: none;
}
.gh-post-preview-btn-group button:last-of-type span {
border-left: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-radius: 3px;
}
.gh-post-preview-mode svg {

View File

@ -51,6 +51,16 @@
background: var(--whitegrey-d1);
}
.gh-btn svg {
display: inline-block;
vertical-align: middle;
}
.gh-btn-large svg {
width: 16px;
height: 16px;
}
/* When disabled */
.gh-btn.disabled,
.gh-btn[disabled],
@ -60,11 +70,6 @@ fieldset[disabled] .gh-btn {
pointer-events: none;
}
.gh-btn svg {
display: inline-block;
vertical-align: middle;
}
/* Primary button
/* ---------------------------------------------------------- */
.gh-btn-primary,
@ -80,6 +85,9 @@ fieldset[disabled] .gh-btn {
background: color-mod(var(--black) l(-20%)) !important;
}
.gh-btn-black svg {
fill: var(--white);
}
/* Blue button
/* ---------------------------------------------------------- */
@ -167,6 +175,10 @@ fieldset[disabled] .gh-btn {
border-color: color-mod(var(--lightgrey-l1) l(-8%));
}
.gh-btn-outline svg {
fill: var(--black);
}
/* When clicked or focused with keyboard */
.gh-btn-outline:active,
.gh-btn-outline:focus {
@ -280,16 +292,6 @@ svg.gh-btn-icon-right {
margin: 0;
}
.gh-btn-icon-grey svg {
width: 16px;
height: auto;
fill: var(--midgrey);
}
.gh-btn-icon-grey svg path {
stroke: var(--midgrey);
}
.gh-btn-text,
.gh-btn-text:hover {
display: flex;

View File

@ -7,15 +7,17 @@
<header class="gh-editor-header br2 pe-none {{editor.headerClass}} {{if this.infoMessage "bg-white"}}">
<div class="flex items-center pe-auto">
{{#if this.ui.isFullScreen}}
<div class="{{ui-text "ts"}} h9 br b--lightgrey pl3 pr4 flex items-center br2 br--left {{unless this.infoMessage "bg-white"}}">
<LinkTo @route={{pluralize this.post.displayName }} @classNames="blue link fw4 flex items-center" data-test-link={{pluralize this.post.displayName}}>
{{svg-jar "arrow-left" class="w3 fill-blue mr1 nudge-right--2"}}
{{capitalize (pluralize this.post.displayName)}}
<div class="ml3 flex items-center {{unless this.infoMessage "bg-white"}}">
<LinkTo @route={{pluralize this.post.displayName }} @classNames="gh-editor-back-button" data-test-link={{pluralize this.post.displayName}}>
<span>
{{svg-jar "arrow-left"}}
{{capitalize (pluralize this.post.displayName)}}
</span>
</LinkTo>
</div>
{{/if}}
<div class="flex items-center pl4 pr4 f8 nudge-left--1 h9 br2 br--right {{unless this.infoMessage "bg-white"}}">
<span class="fw4 midgrey-l2">
<div class="gh-editor-post-status {{unless this.infoMessage "bg-white"}}">
<span>
<GhEditorPostStatus
@post={{this.post}}
@isSaving={{or this.autosave.isRunning this.saveTasks.isRunning}}
@ -36,10 +38,14 @@
</div>
{{/if}}
<section class="view-actions br2 {{unless this.infoMessage "bg-white"}}" style="pointer-events: auto">
<section class="flex {{unless this.infoMessage "bg-white"}}" style="pointer-events: auto">
{{#unless this.post.isNew}}
{{#if this.post.isDraft}}
<button type="button" class="blue link f8 fw4 tracked-1 mr1 pl3 pr4 br b--lightgrey hover-darkgrey" {{on "click" (action "togglePostPreviewModal")}}>Preview {{this.post.displayName}}</button>
<div>
<button type="button" class="gh-contentfilter-menu-trigger mr3" {{on "click" (action "togglePostPreviewModal")}}>
<span>Preview</span>
</button>
</div>
{{/if}}
{{#if this.session.user.isContributor}}
@ -49,20 +55,24 @@
@class="gh-btn gh-btn-blue gh-btn-icon contributor-save-button"
data-test-contributor-save=true />
{{else}}
<GhPublishmenu
@post={{this.post}}
@postStatus={{this.post.status}}
@saveTask={{this.save}}
@setSaveType={{action "setSaveType"}}
@onOpen={{action "cancelAutosave"}}
@backgroundTask={{this.backgroundLoader}}
@memberCount={{this.memberCount}} />
<div>
<GhPublishmenu
@post={{this.post}}
@postStatus={{this.post.status}}
@saveTask={{this.save}}
@setSaveType={{action "setSaveType"}}
@onOpen={{action "cancelAutosave"}}
@backgroundTask={{this.backgroundLoader}}
@memberCount={{this.memberCount}} />
</div>
{{/if}}
{{/unless}}
<button type="button" class="post-settings" title="Settings" {{action "openSettingsMenu" target=this.ui}} data-test-psm-trigger>
{{svg-jar "settings"}}
</button>
<div>
<button type="button" class="gh-btn gh-btn-icon only-has-icon gh-actions-cog ml3" title="Settings" data-test-button="psm-toggle" {{action "openSettingsMenu" target=this.ui}} data-test-psm-trigger>
<span>{{svg-jar "settings"}}</span>
</button>
</div>
</section>
</header>

View File

@ -4,7 +4,7 @@
<div class="ttu gh-launch-wizard-step-indicator">{{this.currentStep.position}}</div>
<h2>{{this.currentStep.title}}</h2>
</div>
<button type="button" class="close gh-btn" title="Close" {{on "click" this.close}} data-test-button="close-wizard">
<button type="button" class="close gh-btn gh-btn-outline" title="Close" {{on "click" this.close}} data-test-button="close-wizard">
<span>Save and exit</span>
</button>
</div>

View File

@ -1,4 +1,4 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12c0-.576-.439-1.043-.98-1.043H.98c-.541 0-.98.467-.98 1.043 0 .576.439 1.043.98 1.043h22.04c.541 0 .98-.467.98-1.043z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.958.306a.938.938 0 00-1.385 0L.287 11.262a1.092 1.092 0 000 1.476l10.286 10.956a.938.938 0 001.385 0 1.092 1.092 0 000-1.475L2.365 12l9.593-10.219a1.092 1.092 0 000-1.475z"/>
</svg>
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M.75 8a.75.75 0 01.75-.75h12.857a.75.75 0 110 1.5H1.5A.75.75 0 01.75 8z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.03 1.47a.75.75 0 010 1.06L2.56 8l5.47 5.47a.75.75 0 11-1.06 1.06l-6-6a.75.75 0 010-1.06l6-6a.75.75 0 011.06 0z"/>
</svg>

Before

Width:  |  Height:  |  Size: 490 B

After

Width:  |  Height:  |  Size: 376 B

View File

@ -1,9 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<path fill="#010101" d="M37.802,46.247L12.376,24L37.801,1.753c0.416-0.364,0.458-0.996,0.094-1.411
c-0.364-0.417-0.994-0.459-1.411-0.095l-26.286,23C9.982,23.438,9.857,23.712,9.857,24s0.125,0.562,0.342,0.753l26.286,23
C36.675,47.919,36.91,48,37.143,48c0.278,0,0.555-0.115,0.753-0.342C38.26,47.243,38.218,46.611,37.802,46.247z"/>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path d="M12.05 1.303a1 1 0 01-.02 1.414L6.597 8l5.433 5.283a1 1 0 01-1.394 1.434L4.756 9a1.4 1.4 0 01-.423-1 1.39 1.39 0 01.423-1l5.88-5.717a1 1 0 011.414.02z"/>
</svg>

Before

Width:  |  Height:  |  Size: 809 B

After

Width:  |  Height:  |  Size: 239 B

View File

@ -1,4 +1,4 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M.75 12.5c0-.576.439-1.043.98-1.043h22.04c.541 0 .98.467.98 1.043 0 .576-.439 1.043-.98 1.043H1.73c-.541 0-.98-.467-.98-1.043z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.792.806a.938.938 0 011.385 0l10.286 10.956a1.092 1.092 0 010 1.476L14.177 24.194a.938.938 0 01-1.385 0 1.092 1.092 0 010-1.475L22.385 12.5 12.792 2.281a1.092 1.092 0 010-1.475z"/>
</svg>
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M.75 8a.75.75 0 01.75-.75h12.857a.75.75 0 110 1.5H1.5A.75.75 0 01.75 8z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.827 1.47a.75.75 0 011.06 0l6 6a.75.75 0 010 1.06l-6 6a.75.75 0 01-1.06-1.06L13.297 8l-5.47-5.47a.75.75 0 010-1.06z"/>
</svg>

Before

Width:  |  Height:  |  Size: 499 B

After

Width:  |  Height:  |  Size: 380 B

View File

@ -558,7 +558,7 @@ describe('Acceptance: Editor', function () {
expect(currentURL(), 'currentURL')
.to.equal('/editor/post/1');
await click('button.post-settings');
await click('[data-test-button="psm-toggle"]');
let tokens = findAll('[data-test-input="authors"] .ember-power-select-multiple-option');