Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Updated color picker in signup form modal (#16971)

Browse source 
Refs https://github.com/TryGhost/Team/issues/3407

---------

Co-authored-by: Simon Backx <simon@ghost.org>
This commit is contained in:
Sanne de Vries 2023-06-09 08:55:35 +02:00 • committed by GitHub
parent 1e7b332b7f
commit e74b38ac93
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 54 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
ghost/admin/app/components/modals/newsletters/components/color-picker.hbs
View file

@ -1,7 +1,12 @@
<div class="gh-email-design-color-picker">
<div class="gh-btn-group" {{on "mouseenter" this.onMouseEnter}} {{on "mouseleave" this.onMouseLeave}}>
<p>{{this.currentColorObject.name}}</p>
<label type="button" style={{html-safe this.customColorStyle}} class="gh-btn gh-email-design-color custom {{if this.customColorSelected "gh-btn-group-selected"}}" {{on "click" this.onOpenColorPicker}}>
<div class="gh-btn-group">
{{#each this.presetColors as |color|}}
<button type="button" class="gh-btn gh-email-design-color {{color.class}} {{if (eq this.currentColorObject.value color.value) "gh-btn-group-selected"}}" {{on "click" (fn this.setCurrentColor color.value) }}>
<div style={{html-safe color.style}}></div>
</button>
{{/each}}
<label type="button" class="gh-btn gh-email-design-color custom {{if this.customColorSelected "gh-btn-group-selected"}}" {{on "click" this.onOpenColorPicker}}>
<div style={{html-safe this.customColorStyle}}></div>
<input
type="color"
value={{this.colorInputValue}}
@ -9,8 +14,5 @@
{{on "change" this.updateColorInputValue}}
/>
</label>
{{#each this.presetColors as |color|}}
<button type="button" style={{html-safe color.style}} class="gh-btn gh-email-design-color {{color.class}} {{if (eq this.currentColorObject.value color.value) "gh-btn-group-selected"}}" {{on "click" (fn this.setCurrentColor color.value) }}></button>
{{/each}}
</div>
</div>

7
ghost/admin/app/components/modals/newsletters/components/color-picker.js
View file

@ -74,10 +74,6 @@ export default class ColorPicker extends Component {
// Make sure the current color is present
if (this.customColorSelected) {
return 'background: ' + this.currentColor + ' !important;';
} else {
if (this.lastSelectedCustomColor && this.didSelectCustomColor) {
return 'background: ' + this.lastSelectedCustomColor + ' !important;';
}
}
return '';
}
@ -97,9 +93,6 @@ export default class ColorPicker extends Component {
}
get colorInputValue() {
if (this.lastSelectedCustomColor) {
return this.lastSelectedCustomColor;
}
if (!this.currentColorObject.value || !this.currentColorObject.value.startsWith('#')) {
return '#999999';
}

6
ghost/admin/app/components/modals/settings/signup-form-embed.js
View file

@ -60,6 +60,12 @@ export default class SignupFormEmbedModal extends Component {
name: 'Black',
class: '',
style: 'background: #000000 !important;'
},
{
value: this.settings.accentColor,
name: 'Accent',
class: '',
style: 'background: ' + this.settings.accentColor + ' !important;'
}
];
}

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

@ -1746,72 +1746,64 @@ p.gh-members-import-errordetail:first-of-type {
background: none;
}
.gh-email-design-color-picker .gh-btn-group p {
opacity: 1;
margin: 0;
color: var(--midgrey);
font-weight: 400;
transition: all .15s ease-in-out;
transition-delay: .03s;
}
.gh-email-design-color-picker .gh-btn-group:hover p {
opacity: 0;
transition: all .15s ease-in-out;
transition-delay: .03s;
}
.gh-btn-group .gh-email-design-color {
display: block;
opacity: 0;
opacity: 1;
position: relative;
z-index: 2;
width: 0;
height: 0;
margin: 0;
border: none;
width: 20px;
height: 20px;
margin: 0 0 0 8px;
border: 1px solid var(--lightgrey-l1);
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--lightgrey-l1);
transition: all .15s ease-in-out;
transition-delay: .03s;
}
.gh-btn-group:hover .gh-email-design-color {
opacity: 1;
width: 22px;
height: 22px;
margin: 0 0 0 6px;
transition: all .15s ease-in-out;
transition-delay: .03s;
.gh-btn-group .gh-email-design-color.gh-btn-group-selected {
outline: 2px solid var(--green);
}
.gh-email-design-color.gh-btn-group-selected {
opacity: 1;
width: 22px;
height: 22px;
margin: 0 0 0 6px;
.gh-btn-group .gh-email-design-color.gh-btn-group-selected.custom {
outline: none;
}
.gh-email-design-color.gh-btn-group-selected::before {
.gh-btn-group .gh-email-design-color > div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 999px;
z-index: 1;
}
.gh-btn-group .gh-email-design-color.custom {
cursor: pointer;
touch-action: manipulation;
}
.gh-btn-group .gh-email-design-color.gh-btn-group-selected.custom > div {
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
border: 1px solid var(--white);
}
.gh-btn-group .gh-email-design-color.custom::before {
/* Always visible, even when selected */
content: "";
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
opacity: 0;
border: 2px solid var(--green);
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: conic-gradient(yellow, red, magenta, blue, aqua, lime, yellow) !important;
border: none;
border-radius: 999px;
transition: all .15s ease-in-out;
transition-delay: .03s;
}
.gh-btn-group:hover .gh-email-design-color.gh-btn-group-selected::before {
opacity: 1;
transition: all .15s ease-in-out;
transition-delay: .03s;
}
.gh-btn-group .gh-email-design-color.transparent {
background: transparent;
box-shadow: inset 0 0 0 1px var(--lightgrey);
@ -1842,13 +1834,6 @@ p.gh-members-import-errordetail:first-of-type {
background: var(--accent-color) !important;
}
.gh-btn-group .gh-email-design-color.custom {
background: conic-gradient(yellow, red, magenta, blue, aqua, lime, yellow) !important;
display: inline-block;
cursor: pointer;
touch-action: manipulation;
}
.gh-email-design-color.custom svg {
width: 10px;
height: 10px;