0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00

Updated diff toggle in post history modal

This commit is contained in:
Sanne de Vries 2023-04-19 17:56:06 +01:00
parent ce3f2221a0
commit e6f9fce99a
3 changed files with 56 additions and 16 deletions

View file

@ -33,25 +33,25 @@
</div> </div>
<div class="settings-menu-container"> <div class="settings-menu-container">
<div class="settings-menu settings-menu-pane settings-menu-pane-main"> <div class="settings-menu settings-menu-pane settings-menu-pane-main">
<div class="settings-menu-header subview"> <div class="settings-menu-header-wrapper">
<button <div class="settings-menu-header subview">
aria-label="Close meta data panel" <button
class="back settings-menu-header-action" aria-label="Close meta data panel"
data-test-button="close-psm-subview" class="back settings-menu-header-action"
type="button" {{action "closeModal"}} data-test-button="close-psm-subview"
{{on "mousedown" (optional this.noop)}} type="button" {{action "closeModal"}}
> {{on "mousedown" (optional this.noop)}}
{{svg-jar "arrow-left"}} >
<span class="hidden">Back</span> {{svg-jar "arrow-left"}}
</button> <span class="hidden">Back</span>
<h4>Post history</h4> </button>
</div> <h4>Post history</h4>
<div class="settings-menu-content"> </div>
<ul class="nav-list"> <ul class="nav-list">
<li class="nav-list-item"> <li class="nav-list-item compare-versions">
<div class="for-switch x-small"> <div class="for-switch x-small">
<label class="switch"> <label class="switch">
<span>Show changes to previous version</span> <span>Compare with previous version</span>
<span class="gh-toggle-featured"> <span class="gh-toggle-featured">
<input {{on "click" (fn this.toggleDifferences '')}} type="checkbox" checked={{this.showDifferences}}> <input {{on "click" (fn this.toggleDifferences '')}} type="checkbox" checked={{this.showDifferences}}>
<span class="input-toggle-component"></span> <span class="input-toggle-component"></span>
@ -59,6 +59,10 @@
</label> </label>
</div> </div>
</li> </li>
</ul>
</div>
<div class="settings-menu-content">
<ul class="nav-list">
{{#each this.revisionList as |revision index|}} {{#each this.revisionList as |revision index|}}
<li class="nav-list-item {{if revision.selected "selected" ""}}"> <li class="nav-list-item {{if revision.selected "selected" ""}}">
<button type="button" {{action "handleClick" index}}> <button type="button" {{action "handleClick" index}}>

View file

@ -11,6 +11,38 @@
/* Sidebar */ /* Sidebar */
.gh-post-history .settings-menu-header-wrapper {
position: fixed;
width: 100%;
max-width: 420px;
z-index: 3;
background: var(--white);
box-shadow: rgba(0, 0, 0, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 12px 16px -16px;
}
.gh-post-history .settings-menu-header.subview {
position: relative;
max-width: 420px;
}
.settings-menu-header-wrapper .nav-list {
margin: 0;
}
.nav-list-item.compare-versions:hover {
background: var(--white);
}
.gh-post-history .settings-menu-header-wrapper .gh-toggle-featured {
position: relative;
width: 34px;
height: 20px;
}
.gh-post-history .settings-menu-content {
padding: 144px 0 0;
}
.gh-post-history .nav-list-item.active { .gh-post-history .nav-list-item.active {
background: var(--whitegrey-l2); background: var(--whitegrey-l2);
} }

View file

@ -18,6 +18,10 @@
cursor: pointer; cursor: pointer;
} }
.nav-list-item.selected {
background: var(--whitegrey-l2);
}
.nav-list-item:first-of-type { .nav-list-item:first-of-type {
border-top: 1px solid var(--whitegrey-d1); border-top: 1px solid var(--whitegrey-d1);
} }