Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Updated color settings UI in email newsletter

Browse source 
Refs https://github.com/TryGhost/Team/issues/2830
This commit is contained in:
Sanne de Vries 2023-03-27 15:59:45 +02:00
parent 0e998c2a74
commit 7928b53fbd
4 changed files with 39 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
View file

@ -60,7 +60,7 @@
{{#if this.settings.icon}} {{#if this.settings.icon}}
<GhFormGroup class="gh-stack-item row"> <GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</label> <label class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</label>
<div class="for-switch small {{unless this.settings.icon "disabled"}}"> <div class="for-switch x-small {{unless this.settings.icon "disabled"}}">
<label class="switch" for="show-header"> <label class="switch" for="show-header">
<input <input
type="checkbox" type="checkbox"
@ -78,7 +78,7 @@
<GhFormGroup class="gh-stack-item row"> <GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Publication title</label> <label class="modal-fullsettings-title">Publication title</label>
<div class="for-switch small"> <div class="for-switch x-small">
<label class="switch" for="show-title" data-test-toggle="showHeaderTitle"> <label class="switch" for="show-title" data-test-toggle="showHeaderTitle">
<input <input
type="checkbox" type="checkbox"
@ -93,7 +93,7 @@
</GhFormGroup> </GhFormGroup>
<GhFormGroup class="gh-stack-item row"> <GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Newsletter name</label> <label class="modal-fullsettings-title">Newsletter name</label>
<div class="for-switch small"> <div class="for-switch x-small">
<label class="switch" for="show-header-name" data-test-toggle="showHeaderName"> <label class="switch" for="show-header-name" data-test-toggle="showHeaderName">
<input <input
type="checkbox" type="checkbox"
@ -123,10 +123,9 @@
<label class="modal-fullsettings-title">Background color</label> <label class="modal-fullsettings-title">Background color</label>
<div class="gh-email-design-color-picker"> <div class="gh-email-design-color-picker">
<div class="gh-btn-group"> <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> <button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
<button type="button" title="Black" class="gh-btn gh-email-design-color black"></button>
<button type="button" title="White" class="gh-btn gh-email-design-color white gh-btn-group-selected"></button>
</div> </div>
</div> </div>
</GhFormGroup> </GhFormGroup>
@ -135,17 +134,17 @@
<label class="modal-fullsettings-title">Border color</label> <label class="modal-fullsettings-title">Border color</label>
<div class="gh-email-design-color-picker"> <div class="gh-email-design-color-picker">
<div class="gh-btn-group"> <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> <button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
<button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
<button type="button" title="Black" class="gh-btn gh-email-design-color black"></button>
<button type="button" title="Transparent" class="gh-btn gh-email-design-color transparent gh-btn-group-selected"></button>
</div> </div>
</div> </div>
</GhFormGroup> </GhFormGroup>
<GhFormGroup class="gh-stack-item row"> <GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Post title</label> <label class="modal-fullsettings-title">Post title</label>
<div class="for-switch small"> <div class="for-switch x-small">
<label class="switch" for="show-post-title"> <label class="switch" for="show-post-title">
<input <input
type="checkbox" type="checkbox"
@ -180,16 +179,16 @@
<label class="modal-fullsettings-title">Heading color</label> <label class="modal-fullsettings-title">Heading color</label>
<div class="gh-email-design-color-picker"> <div class="gh-email-design-color-picker">
<div class="gh-btn-group"> <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> <button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
<button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
<button type="button" title="Auto"class="gh-btn gh-email-design-color black gh-btn-group-selected"></button>
</div> </div>
</div> </div>
</GhFormGroup> </GhFormGroup>
<GhFormGroup class="gh-stack-item row"> <GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Feature image</label> <label class="modal-fullsettings-title">Feature image</label>
<div class="for-switch small"> <div class="for-switch x-small">
<label class="switch" for="show-feature-image"> <label class="switch" for="show-feature-image">
<input <input
type="checkbox" type="checkbox"
@ -230,7 +229,7 @@
{{#if (feature "audienceFeedback")}} {{#if (feature "audienceFeedback")}}
<GhFormGroup class="gh-stack-item row"> <GhFormGroup class="gh-stack-item row">
<label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Ask your readers for feedback</label> <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Ask your readers for feedback</label>
<div class="for-switch small"> <div class="for-switch x-small">
<div class="container"> <div class="container">
<input <input
type="checkbox" type="checkbox"
@ -247,7 +246,7 @@
{{#unless (eq this.settings.commentsEnabled 'off') }} {{#unless (eq this.settings.commentsEnabled 'off') }}
<GhFormGroup class="gh-stack-item row"> <GhFormGroup class="gh-stack-item row">
<label for="comments-link" class="modal-fullsettings-title" data-test-toggle="showCommentCta">Add a link to your comments</label> <label for="comments-link" class="modal-fullsettings-title" data-test-toggle="showCommentCta">Add a link to your comments</label>
<div class="for-switch small"> <div class="for-switch x-small">
<div class="container"> <div class="container">
<input <input
type="checkbox" type="checkbox"
@ -263,7 +262,7 @@
<GhFormGroup class="gh-stack-item row"> <GhFormGroup class="gh-stack-item row">
<label for="latest-posts" class="modal-fullsettings-title" data-test-toggle="showLatestPosts">Share your latest posts</label> <label for="latest-posts" class="modal-fullsettings-title" data-test-toggle="showLatestPosts">Share your latest posts</label>
<div class="for-switch small"> <div class="for-switch x-small">
<div class="container"> <div class="container">
<input <input
type="checkbox" type="checkbox"
@ -278,7 +277,7 @@
<GhFormGroup class="gh-stack-item row"> <GhFormGroup class="gh-stack-item row">
<label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="showSubscriptionDetails">Show subscription details</label> <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="showSubscriptionDetails">Show subscription details</label>
<div class="for-switch small"> <div class="for-switch x-small">
<div class="container"> <div class="container">
<input <input
type="checkbox" type="checkbox"

30
ghost/admin/app/styles/layouts/members.css
View file

@ -1737,29 +1737,27 @@ p.gh-members-import-errordetail:first-of-type {
/* -------------------------------------------------------- */ /* -------------------------------------------------------- */
.gh-btn-group .gh-email-design-color { .gh-btn-group .gh-email-design-color {
display: none;
position: relative; position: relative;
z-index: 2;
width: 22px; width: 22px;
height: 22px; height: 22px;
border: 1px solid var(--lightgrey); margin: 0 0 0 5px;
border: 1px solid transparent;
border-radius: 999px; border-radius: 999px;
margin-left: 4px;
} }
.gh-email-design-color.gh-btn-group-selected::after { .gh-btn-group:hover .gh-email-design-color {
position: absolute; display: block;
content: ""; }
.gh-email-design-color.gh-btn-group-selected {
display: block; display: block;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border: 2px solid var(--green);
border-radius: 999px;
} }
.gh-email-design-color.transparent { .gh-email-design-color.transparent {
background: transparent; background: transparent;
border: 1px solid var(--midlightgrey-l2); border: 1px solid var(--lightgrey);
} }
.gh-email-design-color.transparent::before { .gh-email-design-color.transparent::before {
@ -1768,6 +1766,7 @@ p.gh-members-import-errordetail:first-of-type {
top: 3px; top: 3px;
left: 3px; left: 3px;
right: 0; right: 0;
z-index: 1;
border-bottom: 1px solid var(--red); border-bottom: 1px solid var(--red);
width: 100%; width: 100%;
transform: rotate(45deg); transform: rotate(45deg);
@ -1776,10 +1775,7 @@ p.gh-members-import-errordetail:first-of-type {
.gh-email-design-color.white { .gh-email-design-color.white {
background: var(--white) !important; background: var(--white) !important;
} border: 1px solid var(--lightgrey-l1);
.gh-email-design-color.grey {
background: var(--lightgrey) !important;
} }
.gh-email-design-color.black { .gh-email-design-color.black {
@ -1791,7 +1787,7 @@ p.gh-members-import-errordetail:first-of-type {
} }
.gh-email-design-color.custom { .gh-email-design-color.custom {
background: transparent; background: var(--white-30) !important;
border: 1px solid var(--lightgrey); border: 1px solid var(--lightgrey);
} }

2
ghost/admin/app/styles/layouts/settings.css
View file

@ -1190,7 +1190,7 @@ body:not([data-user-is-dragging]) .gh-newsletter-card-draggable:hover .grab-news
} }
.modal-fullsettings-form-labs.email-design .gh-stack-item { .modal-fullsettings-form-labs.email-design .gh-stack-item {
margin: 10px 0; margin: 12px 0;
} }

9
ghost/admin/app/styles/patterns/forms.css
View file

@ -534,10 +534,19 @@ textarea {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
display: inline-block; display: inline-block;
}
.for-switch label:not(.x-small .switch),
.for-switch .container {
width: 50px !important; width: 50px !important;
height: 28px !important; height: 28px !important;
} }
.for-switch.x-small label {
width: 34px !important;
height: 20px !important;
}
.for-switch label p, .for-switch label p,
.for-switch .container p { .for-switch .container p {
overflow: auto; overflow: auto;