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

Added UI for changing newsletter colors to email settings

Browse Source 
Refs https://github.com/TryGhost/Team/issues/2830
This commit is contained in:
Sanne de Vries 2023-03-27 13:15:51 +02:00
parent a65dc2de61
commit 11656ea696
2 changed files with 102 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
View File

@ -119,6 +119,30 @@
{{#liquid-if isOpen class="show-overflow"}}
<div class="modal-fullsettings-tab-expanded">
<div class="gh-stack">
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Background color</label>
<div class="gh-email-design-color-picker">
<div class="gh-btn-group">
<button type="button" title="White" class="gh-btn gh-email-design-color white gh-btn-group-selected"></button>
<button type="button" title="Grey" class="gh-btn gh-email-design-color grey"></button>
<button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
<button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
</div>
</div>
</GhFormGroup>
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Border color</label>
<div class="gh-email-design-color-picker">
<div class="gh-btn-group">
<button type="button" title="Transparent" class="gh-btn gh-email-design-color transparent gh-btn-group-selected"></button>
<button type="button" title="Black" class="gh-btn gh-email-design-color black"></button>
<button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
<button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
</div>
</div>
</GhFormGroup>
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Post title</label>
<div class="for-switch small">
@ -137,6 +161,7 @@
{{#if @newsletter.showPostTitleSection}}
<GhFormGroup class="gh-stack-item">
<label class="modal-fullsettings-title">Post title style</label>
<div class="gh-email-design-typography-wrapper header">
<div class="modal-fullsettings-radiogroup gh-email-design-typography" data-test-input="titleFontCategory">
<GhFontSelector
@ -151,6 +176,17 @@
</div>
</GhFormGroup>
{{/if}}
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Heading color</label>
<div class="gh-email-design-color-picker">
<div class="gh-btn-group">
<button type="button" title="Black"class="gh-btn gh-email-design-color black gh-btn-group-selected"></button>
<button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
<button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
</div>
</div>
</GhFormGroup>
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Feature image</label>
<div class="for-switch small">

66
ghost/admin/app/styles/layouts/members.css
View File

@ -1735,6 +1735,72 @@ p.gh-members-import-errordetail:first-of-type {
/* Email newsletter design settings
/* -------------------------------------------------------- */
.gh-btn-group .gh-email-design-color {
position: relative;
width: 22px;
height: 22px;
border: 1px solid var(--lightgrey);
border-radius: 999px;
margin-left: 4px;
}
.gh-email-design-color.gh-btn-group-selected::after {
position: absolute;
content: "";
display: block;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border: 2px solid var(--green);
border-radius: 999px;
}
.gh-email-design-color.transparent {
background: transparent;
border: 1px solid var(--midlightgrey-l2);
}
.gh-email-design-color.transparent::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
right: 0;
border-bottom: 1px solid var(--red);
width: 100%;
transform: rotate(45deg);
transform-origin: left;
}
.gh-email-design-color.white {
background: var(--white) !important;
}
.gh-email-design-color.grey {
background: var(--lightgrey) !important;
}
.gh-email-design-color.black {
background: var(--black) !important;
}
.gh-email-design-color.accent {
background: var(--accent-color) !important;
}
.gh-email-design-color.custom {
background: transparent;
border: 1px solid var(--lightgrey);
}
.gh-email-design-color.custom svg {
width: 10px;
height: 10px;
color: var(--black);
}
.gh-email-design-alignment {
display: flex;
justify-content: space-between;