Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-25 02:31:59 -05:00
Code Issues Activity

Updated navigation between editor, publish, preview and update states

Browse source 
Refs https://github.com/TryGhost/Team/issues/1621
This commit is contained in:
Sanne de Vries 2022-05-12 14:03:16 +01:00
parent 4b596e47c5
commit 288ba328d7
8 changed files with 65 additions and 39 deletions
ghost/admin/app
components/editor-labs
modals
preview.hbspublish-flow.hbsupdate-flow.hbs
publish-management.hbs
styles
app-dark.css
components
publishmenu.css
layouts
editor.css
templates
editor.hbs

12
ghost/admin/app/components/editor-labs/modals/preview.hbs
View file

@ -17,14 +17,22 @@
<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>
<div>
<div class="flex">
<button
type="button"
class="gh-btn gh-btn-editor darkgrey gh-publish-trigger"
{{on "click" @close}}
>
<span>Preview</span>
</button>
<button
type="button"
class="gh-btn gh-btn-editor darkgrey gh-publishmenu-trigger"
class="gh-btn gh-btn-editor darkgrey gh-publish-trigger"
{{on "click" @data.togglePreviewPublish}}
>
<span>Publish</span>
</button>
<div class="settings-menu-toggle-spacer"></div>
</div>
</header>

22
ghost/admin/app/components/editor-labs/modals/publish-flow.hbs
View file

@ -5,13 +5,21 @@
</button>
{{#unless this.isComplete}}
<button
type="button"
class="gh-btn gh-btn-editor darkgrey gh-publishmenu-trigger"
{{on "click" @data.togglePreviewPublish}}
>
<span>Preview</span>
</button>
<div class="flex">
<div>
<button
type="button"
class="gh-btn gh-editor-preview-trigger"
{{on "click" @data.togglePreviewPublish}}
>
<span>Preview</span>
</button>
</div>
<button class="gh-btn gh-btn-editor darkgrey gh-publish-trigger active" title="Close" type="button" {{on "click" @close}}>
<span>Publish</span>
</button>
<div class="settings-menu-toggle-spacer"></div>
</div>
{{/unless}}
</header>

6
ghost/admin/app/components/editor-labs/modals/update-flow.hbs
View file

@ -3,6 +3,12 @@
<button class="gh-publish-back-button" title="Close" type="button" {{on "click" @close}}>
<span>{{svg-jar "arrow-left"}} Editor</span>
</button>
<div class="flex">
<button class="gh-btn gh-btn-editor darkgrey gh-publish-trigger active" title="Close" type="button" {{on "click" @close}}>
<span>Update</span>
</button>
<div class="settings-menu-toggle-spacer"></div>
</div>
</header>
{{#let @data.publishOptions.post as |post|}}

6
ghost/admin/app/components/editor-labs/publish-management.hbs
View file

@ -7,7 +7,7 @@
<button
type="button"
class="gh-btn gh-btn-editor darkgrey gh-publishmenu-trigger"
class="gh-btn gh-btn-editor darkgrey gh-publish-trigger"
{{on "click" this.openPublishFlow}}
{{on-key "cmd+shift+p"}}
disabled={{this.publishOptions.isLoading}}
@ -20,7 +20,7 @@
<GhTaskButton
@task={{this.saveTask}}
@runningText="Saving..."
@class="gh-btn gh-btn-editor gh-publishmenu-trigger"
@class="gh-btn gh-btn-editor gh-publish-trigger"
@idleClass="green"
@runningClass="midlightgrey"
@successClass="midlightgrey"
@ -32,7 +32,7 @@
<button
type="button"
class="gh-btn gh-btn-editor darkgrey gh-publishmenu-trigger"
class="gh-btn gh-btn-editor darkgrey gh-publish-trigger"
{{on "click" this.openUpdateFlow}}
data-test-button="update-flow"
>

4
ghost/admin/app/styles/app-dark.css
View file

@ -344,12 +344,12 @@ input:focus,
background: var(--dark-main-bg-color) !important;
}
.gh-publishmenu-trigger {
.gh-publish-trigger {
color: var(--blue);
border: none !important;
}
.gh-publishmenu-trigger svg path {
.gh-publish-trigger svg path {
stroke-width: 2px;
}

24
ghost/admin/app/styles/components/publishmenu.css
View file

@ -1,25 +1,26 @@
/* Publish Menu
/* ---------------------------------------------------------- */
.gh-publishmenu-trigger {
.gh-publish-trigger {
height: max-content;
cursor: pointer;
}
.gh-publishmenu-trigger svg {
.gh-publish-trigger svg {
height: 8px;
width: 8px;
}
.gh-publishmenu-trigger svg path {
.gh-publish-trigger svg path {
stroke: var(--darkgrey);
stroke-width: 2px;
}
.gh-publishmenu-trigger:focus {
.gh-publish-trigger:focus {
outline: 0;
}
.gh-publishmenu {
position: relative;
z-index: 1000;
@ -450,14 +451,14 @@
.gh-publish-header {
position: absolute;
top: 0;
left: 4.2rem;
width: calc(100% - 4.2rem * 2);
right: 0;
left: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
height: 36px;
height: 34px;
padding: 0;
margin: 30px 0;
margin: 30px;
z-index: 799;
}
@ -480,8 +481,8 @@
}
.gh-publish-back-button {
height: 33px;
padding: 5px 12px 6px;
height: 34px;
padding: 0 12px;
outline: none;
border: none;
background: var(--white);
@ -489,6 +490,7 @@
font-size: 1.35rem;
font-weight: 500;
letter-spacing: 0.2px;
line-height: 34px;
white-space: nowrap;
cursor: pointer;
border-radius: var(--border-radius);

16
ghost/admin/app/styles/layouts/editor.css
View file

@ -312,7 +312,7 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: 36px;
height: 34px;
padding: 0;
margin: 30px;
z-index: 799;
@ -348,6 +348,10 @@
background: var(--whitegrey) !important;
}
.gh-btn-editor.active {
background: var(--whitegrey) !important;
}
.gh-btn-editor.green span {
color: var(--green);
}
@ -564,15 +568,16 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
}
.gh-editor-back-button {
height: 33px;
height: 34px;
margin-right: 8px;
padding: 5px 12px 6px;
padding: 0 12px;
outline: none;
border: none;
color: var(--darkgrey);
font-size: 1.35rem;
font-weight: 500;
letter-spacing: 0.2px;
line-height: 34px;
white-space: nowrap;
background: var(--white);
border-radius: 3px;
@ -607,7 +612,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
}
.gh-editor-post-status {
height: 33px;
height: 34px;
display: flex;
align-items: center;
padding: 0 12px;
@ -615,6 +620,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
font-weight: 400;
color: var(--midgrey-l2);
letter-spacing: .2px;
line-height: 34px;
background: var(--white);
border-radius: 3px;
}
@ -623,7 +629,6 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
background: var(--white);
font-size: 1.35rem;
font-weight: 500;
color: var(--green-d1) !important;
margin-right: 8px;
outline: none;
border: none;
@ -633,7 +638,6 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
.gh-editor-preview-trigger:hover {
cursor: pointer;
color: var(--green-d1);
background: var(--whitegrey);
}

14
ghost/admin/app/templates/editor.hbs
View file

@ -8,14 +8,12 @@
<header class="gh-editor-header br2 pe-none">
<div class="flex items-center pe-auto h-100">
{{#if this.ui.isFullScreen}}
<div class="ml3 mobile flex items-center">
<LinkTo @route={{pluralize this.post.displayName }} class="gh-editor-back-button" data-test-link={{pluralize this.post.displayName}}>
<span>
{{svg-jar "arrow-left"}}
{{capitalize (pluralize this.post.displayName)}}
</span>
</LinkTo>
</div>
<LinkTo @route={{pluralize this.post.displayName }} class="gh-editor-back-button" data-test-link={{pluralize this.post.displayName}}>
<span>
{{svg-jar "arrow-left"}}
{{capitalize (pluralize this.post.displayName)}}
</span>
</LinkTo>
{{/if}}
<div class="gh-editor-post-status">
<span>