Updated newsletter modal sidebar layout

https://github.com/TryGhost/Team/issues/1525
This commit is contained in:
Sanne de Vries 2022-04-18 17:10:11 +01:00
parent ef1411ae29
commit 9271fa581b
2 changed files with 45 additions and 26 deletions

View File

@ -1,31 +1,15 @@
<div class="modal-content">
<div class="modal-body modal-fullsettings">
<div class="flex items-center justify-between w-100 modal-fullsettings-topbar">
<h2 class="modal-fullsettings-heading">
{{if @data.newsletter.isNew "Add" "Edit"}} newsletter
</h2>
<div class="flex items-center">
<button class="gh-btn mr3" type="button" {{on "click" @close}}>
<span>Cancel</span>
</button>
<GhTaskButton
@buttonText="Save and close"
@successText="Saved"
@task={{this.saveTask}}
@idleClass="gh-btn-primary"
@class="gh-btn gh-btn-icon"
{{on-key "cmd+s" this.saveViaKeyboard priority=1}}
data-test-button="save-newsletter"
/>
</div>
</div>
<div class="modal-fullsettings-body">
<div class="modal-fullsettings-sidebar with-footer">
<div class="gh-btn-group">
<button type="button" class="gh-btn gh-btn-icon {{if (eq this.tab "settings") "gh-btn-group-selected"}}" {{on "click" (fn this.changeTab "settings")}}><span>Settings</span></button>
<button type="button" class="gh-btn gh-btn-icon {{if (eq this.tab "design") "gh-btn-group-selected"}}" {{on "click" (fn this.changeTab "design")}}><span>Design</span></button>
<div class="modal-fullsettings-body gh-newsletters-labs">
<div class="modal-fullsettings-sidebar">
<div class="flex items-center justify-between">
<h2 class="modal-fullsettings-heading">
{{if @data.newsletter.isNew "Create" "Edit"}} newsletter
</h2>
<div class="gh-btn-group">
<button type="button" class="gh-btn gh-btn-icon {{if (eq this.tab "settings") "gh-btn-group-selected"}}" {{on "click" (fn this.changeTab "settings")}}><span>Settings</span></button>
<button type="button" class="gh-btn gh-btn-icon {{if (eq this.tab "design") "gh-btn-group-selected"}}" {{on "click" (fn this.changeTab "design")}}><span>Design</span></button>
</div>
</div>
{{#if (eq this.tab "settings")}}
@ -36,6 +20,21 @@
</div>
<div class="modal-fullsettings-main">
<div class="modal-fullsettings-main-topbar">
<button class="gh-btn mr3" type="button" {{on "click" @close}}>
<span>Cancel</span>
</button>
<GhTaskButton
@buttonText="Save and close"
@successText="Saved"
@task={{this.saveTask}}
@idleClass="gh-btn-primary"
@class="gh-btn gh-btn-icon"
{{on-key "cmd+s" this.saveViaKeyboard priority=1}}
data-test-button="save-newsletter"
/>
</div>
<Modals::EditNewsletter::Preview @newsletter={{@data.newsletter}} />
</div>
</div>

View File

@ -1053,6 +1053,26 @@
stroke-width: 3;
}
.gh-newsletters-labs .gh-members-emailsettings-footer {
margin-top: auto;
margin-bottom: 0;
}
.gh-newsletters-labs .modal-fullsettings-section.divider-top {
margin-top: 4rem;
padding-top: 4rem;
}
.modal-fullsettings-main-topbar {
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
width: 100%;
height: 66px;
padding: 2.4rem;
}
/* Code injection
/* ---------------------------------------------------------- */