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

Updated post settings menu

Browse Source 
No ref
This commit is contained in:
Sanne de Vries 2023-04-19 13:07:51 +01:00
parent 7969399cdf
commit 6e20d7704e
7 changed files with 183 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
ghost/admin/app/components/gh-post-settings-menu.hbs
View File

@ -110,7 +110,7 @@
</GhFormGroup>
{{#unless this.session.user.isAuthorOrContributor}}
<GhFormGroup class="for-select" @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="authors" data-test-input="authors">
<GhFormGroup class="for-select mb8" @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="authors" data-test-input="authors">
<label for="author-list">Authors</label>
<GhPsmAuthorsInput @selectedAuthors={{this.post.authors}} @updateAuthors={{action "changeAuthors"}} @triggerId="author-list" />
<GhErrorMessage @errors={{this.post.errors}} @property="authors" data-test-error="authors" />
@ -120,42 +120,42 @@
<GhPsmTemplateSelect
@post={{this.post}}
@onTemplateSelect={{action (mut this.post.customTemplate)}} />
<div class="settings-menu-post-actions">
{{#unless this.session.user.isAuthorOrContributor}}
<div class="form-group for-checkbox">
<label class="checkbox" for="featured" {{action "toggleFeatured" bubbles="false"}}>
<input
type="checkbox"
checked={{this.post.featured}}
class="gh-input post-settings-featured"
onclick={{action (mut this.post.featured) value="target.checked"}}
data-test-checkbox="featured"
>
<span class="input-toggle-component"></span>
<p>Feature this {{this.post.displayName}}</p>
</label>
</div>
{{/unless}}
{{#unless this.post.isNew}}
<button type="button" class="settings-menu-delete-button" {{action "deletePostInternal"}}>
<span>{{svg-jar "trash"}} Delete {{this.post.displayName}}</span>
</button>
{{/unless}}
</div>
</section>
<ul class="nav-list">
{{#if (feature 'postHistory')}}
{{#if this.post.lexical}}
<li class="nav-list-item">
<button type="button" {{on "click" this.openPostHistory}} data-test-toggle="post-history">
<span>{{svg-jar "history" class="history"}} Post history</span>
</button>
{{svg-jar "arrow-right" class="arrow-right"}}
</li>
{{/if}}
{{#unless this.session.user.isAuthorOrContributor}}
<li class="nav-list-item">
<div class="for-switch x-small">
<label class="switch" for="featured" {{action "toggleFeatured" bubbles="false"}}>
<span>
{{#if this.post.featured}}
{{svg-jar "star-fill" class="feature"}}
{{else}}
{{svg-jar "star" class="feature"}}
{{/if}}
Feature this {{this.post.displayName}}
</span>
<span class="gh-toggle-featured">
<input
type="checkbox"
checked={{this.post.featured}}
class="gh-input post-settings-featured"
onclick={{action (mut this.post.featured) value="target.checked"}}
data-test-checkbox="featured"
>
<span class="input-toggle-component"></span>
</span>
</label>
</div>
</li>
{{/unless}}
{{#if (and (feature 'postHistory') this.post.lexical)}}
<li class="nav-list-item">
<button type="button" {{on "click" this.openPostHistory}} data-test-toggle="post-history">
<span>{{svg-jar "history" class="history"}} Post history</span>
</button>
{{svg-jar "arrow-right" class="arrow-right"}}
</li>
{{/if}}
<li class="nav-list-item">
<button type="button" {{action "showSubview" "codeinjection"}} data-test-button="codeinjection">
@ -183,6 +183,13 @@
</li>
</ul>
</form>
{{#unless this.post.isNew}}
<div class="settings-menu-delete-button">
<button type="button" class="gh-btn gh-btn-outline gh-btn-icon gh-btn-fullwidth" {{action "deletePostInternal"}}>
<span>{{svg-jar "trash"}} Delete {{this.post.displayName}}</span>
</button>
</div>
{{/unless}}
</div>{{! .settings-menu-content }}
</div>{{! .post-settings-menu }}

44
ghost/admin/app/components/modal-post-history.hbs
View File

@ -1,18 +1,29 @@
{{!-- template-lint-disable no-invalid-interactive --}}
<div class="gh-post-history">
{{!-- <div class="read-only-banner">
<span>You are viewing a revision from <strong>17 April 2023, 10:34</strong>.</span>
<a href="#">Roll back to this version &rarr;</a>
</div> --}}
<div class="gh-post-history-main">
{{#if this.diffHtml}}
{{{this.diffHtml}}}
{{else}}
Loading...
{{/if}}
<div class="gh-post-history-hidden-lexical previous">
<div class="gh-editor-title">{{this.previousTitle}}</div>
<KoenigLexicalEditor @lexical={{this.previousLexical}} @cardConfig={{this.cardConfig}} />
</div>
<div class="gh-post-history-hidden-lexical current">
<div class="gh-editor-title">{{this.currentTitle}}</div>
<KoenigLexicalEditor @lexical={{this.currentLexical}} @cardConfig={{this.cardConfig}}/>
<div class="gh-koenig-editor-pane flex flex-column mih-100">
<div class="gh-editor-feature-image-container">
<div class="gh-editor-feature-image-dropzone"></div>
<div class="flex flex-row items-center invisible">
<button type="button" class="gh-editor-feature-image-add-button">{{svg-jar "plus"}}<span>Add feature image</span></button>
<button type="button" class="gh-editor-feature-image-unsplash">{{svg-jar "unsplash"}}</button>
</div>
</div>
{{#if this.diffHtml}}
{{{this.diffHtml}}}
{{/if}}
<div class="gh-post-history-hidden-lexical previous">
<div class="gh-editor-title">{{this.previousTitle}}</div>
<KoenigLexicalEditor @lexical={{this.previousLexical}} @cardConfig={{this.cardConfig}} />
</div>
<div class="gh-post-history-hidden-lexical current">
<div class="gh-editor-title">{{this.currentTitle}}</div>
<KoenigLexicalEditor @lexical={{this.currentLexical}} @cardConfig={{this.cardConfig}}/>
</div>
</div>
</div>
<div class="settings-menu-container">
@ -36,11 +47,14 @@
<li class="nav-list-item">
<button type="button">
<div class="flex items-center">
<span class="gh-post-history-version">{{moment-from-now revision.createdAt}}</span>
<span class="gh-post-history-version-wordcount">
<span class="gh-post-history-version">{{capitalize-first-letter (moment-from-now revision.createdAt)}}</span>
{{!-- <span class="gh-post-history-version-wordcount">
<span class="added">+275</span>
<span class="subtracted">-73</span>
</span>
</span> --}}
{{!-- <button class="gh-btn gh-btn-text gh-post-history-version-restore">
<span>Restore</span>
</button> --}}
</div>
<span class="gh-post-history-version-meta">{{revision.author.name}}</span>
</button>

55
ghost/admin/app/styles/components/settings-menu.css
View File

@ -310,32 +310,55 @@
font-weight: 500;
}
li.nav-list-item .switch {
position: relative;
display: flex;
justify-content: space-between;
width: 100% !important;
padding: 2rem 2.4rem;
}
li.nav-list-item .for-switch.x-small label {
width: initial;
height: initial !important;
}
.settings-menu-content .gh-toggle-featured {
position: relative;
width: 34px;
height: 20px;
}
.settings-menu-delete-button {
background: transparent;
box-shadow: none;
border: none;
margin: 3.2rem 2.4rem 2.4rem;
}
.settings-menu-delete-button button,
.settings-menu-delete-button button:hover,
.settings-menu-delete-button button:active,
.settings-menu-delete-button button:focus {
border: 1px solid var(--red);
}
.settings-menu-delete-button button span {
height: 40px;
line-height: 40px;
color: var(--red);
}
.settings-menu-delete-button:hover {
box-shadow: none;
background: none;
color: color-mod(var(--red) lightness(-10%));
}
.settings-menu-delete-button span {
display: flex;
align-items: center;
font-size: inherit;
padding: 0;
font-size: 1.3rem;
font-weight: 500;
.settings-menu-delete-button button:hover span {
color: var(--red-d1);
}
.settings-menu-delete-button svg {
width: 1.6rem;
height: 1.6rem;
margin: 0 .8rem 2px 0;
color: var(--red);
}
.settings-menu-delete-button button:hover svg {
color: var(--red-d1);
}
.post-setting-custom-excerpt {

60
ghost/admin/app/styles/layouts/post-history.css
View File

@ -11,6 +11,10 @@
/* Sidebar */
.gh-post-history .nav-list-item.active {
background: var(--whitegrey-l2);
}
.nav-list-item .gh-post-history-version {
margin-bottom: 2px;
}
@ -33,7 +37,7 @@
border-radius: var(--border-radius);
}
.nav-list-item .gh-post-history-version-wordcount {
/* .nav-list-item .gh-post-history-version-wordcount {
color: var(--green-d1);
margin-left: auto;
}
@ -41,6 +45,17 @@
.nav-list-item .gh-post-history-version-wordcount .subtracted {
color: var(--red-d1);
margin-left: .8rem;
} */
.nav-list-item .gh-post-history-version-restore {
margin-left: auto;
padding: 0;
}
.nav-list-item .gh-post-history-version-restore span {
color: var(--red);
font-size: 1.35rem;
font-weight: 400;
}
@ -53,6 +68,32 @@
overflow: auto;
}
/* .gh-post-history .read-only-banner {
position: absolute;
top: 20px;
left: 0;
right: 420px;
z-index: 999;
display: flex;
justify-content: space-between;
width: 100%;
max-width: 788px;
margin: 0 auto;
padding: 16px 24px;
background: var(--white);
border: 1px solid var(--whitegrey-d1);
color: var(--black);
font-weight: 500;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow-m);
}
.gh-post-history .read-only-banner a {
margin-left: auto;
color: var(--black);
text-decoration: underline;
} */
.gh-post-history .gh-editor-title {
height: initial;
max-width: 740px;
@ -61,12 +102,27 @@
color: rgba(21, 23, 26, 0.4);
}
.gh-post-history-main .koenig-lexical h1,
.gh-post-history-main .koenig-lexical h2,
.gh-post-history-main .koenig-lexical h3,
.gh-post-history-main .koenig-lexical h4,
.gh-post-history-main .koenig-lexical h5,
.gh-post-history-main .koenig-lexical p {
color: rgba(21, 23, 26, 0.4);
}
.gh-post-history-main .koenig-lexical a:not(.gh-post-history-main .koenig-lexical del a):not(.gh-post-history-main .koenig-lexical ins a) {
opacity: .4;
}
.gh-post-history-main .koenig-lexical del {
color: var(--red) !important;
color: var(--red-d1) !important;
}
.gh-post-history-main .koenig-lexical ins {
color: var(--black) !important;
text-decoration: none !important;
background-color: rgba(48, 207, 67, 0.15) !important;
}
.gh-post-history-hidden-lexical {

4
ghost/admin/app/styles/patterns/buttons.css
View File

@ -373,6 +373,10 @@ svg.gh-btn-icon-right {
color: var(--green);
}
.gh-btn-fullwidth {
width: 100%;
}
/*
/* Button Variations

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

@ -132,6 +132,10 @@ input[type=number] {
margin-bottom: 0;
}
.form-group.mb8 {
margin-bottom: 3.2rem;
}
@media (max-width: 550px) {
.form-group {
max-width: 100%;

12
ghost/admin/app/styles/patterns/navlist.css
View File

@ -42,8 +42,8 @@
li.nav-list-item svg {
margin: 0 1rem 0 0;
height: 1.4rem;
width: 1.4rem;
height: 1.6rem;
width: 1.6rem;
}
li.nav-list-item svg path:not(li.nav-list-item .history path) {
@ -51,8 +51,12 @@ li.nav-list-item svg path:not(li.nav-list-item .history path) {
}
li.nav-list-item .history {
width: 1.6rem;
height: 1.6rem;
width: 1.8rem;
height: 1.8rem;
}
li.nav-list-item.delete {
color: var(--red);
}
li.nav-list-item .arrow-right {