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 history modal to resemble editor

Browse Source 
No ref
This commit is contained in:
Sanne de Vries 2023-04-18 12:10:51 +01:00
parent 37e13b9c90
commit 71524bf7da
2 changed files with 82 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,24 +1,71 @@
{{!-- template-lint-disable no-invalid-interactive --}}
<div class="gh-post-history">
<div class="modal-fullsettings-sidebar-labs">
<div class="modal-fullsettings-sidebar-header">
<h2 class="modal-fullsettings-heading-labs">Post history</h2>
<button
type="button" {{action "closeModal"}}
class="gh-btn-icon"
{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
{{on "mousedown" (optional this.noop)}}
>
{{svg-jar "close"}}
</button>
</div>
{{!-- {{#each this.post.post_revisions as |revision|}}
<div>{{revision.lexical}}</div>
{{/each}} --}}
</div>
<div class="gh-post-history-main">
<div>
{{{this.postDiff}}}
<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>
<div class="gh-editor-title ember-text-area gh-input ember-view">Old-school excess, star power and spectacle: Royal Opera’s Tosca reviewed</div>
{{{this.postDiff}}}
</div>
</div>
<div class="settings-menu-container">
<div class="settings-menu settings-menu-pane settings-menu-pane-main">
<div class="settings-menu-header subview">
<button
aria-label="Close meta data panel"
class="back settings-menu-header-action"
data-test-button="close-psm-subview"
type="button" {{action "closeModal"}}
{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
{{on "mousedown" (optional this.noop)}}
>
{{svg-jar "arrow-left"}}
<span class="hidden">Back</span>
</button>
<h4>Post history</h4>
</div>
<div class="settings-menu-content">
<ul class="nav-list">
<li class="nav-list-item">
<button type="button">
<span class="gh-post-history-version">17 April 2023, 10:34</span>
<span class="gh-post-history-version-meta">Jamie Larson</span>
</button>
</li>
<li class="nav-list-item">
<button type="button">
<span class="gh-post-history-version">17 April 2023, 10:34</span>
<span class="gh-post-history-version-meta">Jamie Larson</span>
</button>
</li>
<li class="nav-list-item">
<button type="button">
<span class="gh-post-history-version">17 April 2023, 10:34</span>
<span class="gh-post-history-version-meta">Jamie Larson</span>
</button>
</li>
<li class="nav-list-item">
<button type="button">
<span class="gh-post-history-version">17 April 2023, 10:34</span>
<span class="gh-post-history-version-meta">Jamie Larson</span>
</button>
</li>
<li class="nav-list-item">
<button type="button">
<span class="gh-post-history-version">17 April 2023, 10:34</span>
<span class="gh-post-history-version-meta">Jamie Larson</span>
</button>
</li>
</ul>
</div>
{{!-- {{#each this.post.post_revisions as |revision|}}
<div>{{revision.lexical}}</div>
{{/each}} --}}
</div>
</div>
</div>

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

@ -1,3 +1,5 @@
/* Modal */
.gh-post-history {
display: flex;
height: 100%;
@ -7,35 +9,27 @@
padding: 0;
}
.gh-post-history .modal-fullsettings-sidebar-labs {
height: 100%;
border-right: 1px solid var(--whitegrey-d1);
/* Sidebar */
.nav-list-item .gh-post-history-version-meta {
color: var(--midgrey);
font-weight: 400;
}
.modal-fullsettings-sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3.2rem;
border-bottom: 1px solid var(--whitegrey-d1);
}
.modal-fullsettings-sidebar-header h2 {
margin: 0;
padding: 0;
font-size: 1.75rem;
line-height: 1.375;
font-weight: 600;
}
.modal-fullsettings-sidebar-header .gh-btn-icon svg {
margin: 0;
}
/* Main content */
.gh-post-history-main {
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
}
.gh-post-history .gh-editor-title {
height: initial;
max-width: 740px;
margin: 16rem auto 0;
margin-left: auto;
margin-right: auto;
}
.gh-post-history-main .koenig-lexical del {