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

Added color-picker to tag settings

Browse source
This commit is contained in:
Sanne de Vries 2021-03-04 18:43:49 +01:00
parent 80940361fa
commit f10e133acd
2 changed files with 75 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
ghost/admin/app/components/gh-tag-settings-form.hbs
View file

@ -26,16 +26,31 @@
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="accentColor" class="gh-tag-settings-colorcontainer">
<label for="accent-color">Color</label>
<div class="input-color">
<GhTextInput
@name="accent-color"
@placeholder="abcdef"
@autocorrect="off"
@maxlength="6"
@focus-out={{action "validateAccentColor"}}
@value={{accentColor}}
<input
type="text"
placeholder="abcdef"
name="accent-color"
autocorrect="off"
maxlength="6"
value={{this.accentColor}}
class="gh-input"
{{on "input" (perform this.debounceUpdateAccentColor)}}
{{on "blur" this.updateAccentColor}}
data-test-input="accentColor"
/>
<div class="color-box" style={{this.accentColorBackgroundStyle}}></div>
<div class="color-picker-horizontal-divider"></div>
<div
class="color-box-container"
style={{this.accentColorBgStlye}}
>
<input
type="color"
name="accent-color"
class="color-picker"
value="{{this.accentColorPickerValue}}"
{{on "input" (perform this.debounceUpdateAccentColor)}}
>
</div>
</div>
</GhFormGroup>
</div>

52
ghost/admin/app/styles/layouts/tags.css
View file

@ -177,6 +177,58 @@ label.gh-tag-setting-codeheader {
width: 100%;
}
.gh-tag-settings-colorcontainer .input-color input {
position: relative;
width: 112px;
padding: 3px 4px 3px 54px;
font-size: 1.3rem;
}
.gh-tag-settings-colorcontainer .input-color::after {
left: 44px;
}
.gh-tag-settings-colorcontainer .color-picker-horizontal-divider {
position: absolute;
display: block;
content: "";
width: 1px;
top: 0;
left: 37px;
bottom: 0;
background: color-mod(var(--lightgrey) l(-5%) s(-10%));
}
.gh-tag-settings-colorcontainer .input-color input:focus + .color-picker-horizontal-divider {
top: 2px;
bottom: 2px;
}
.gh-tag-settings-colorcontainer .color-box-container {
height: 32px;
width: 32px;
position: absolute;
overflow: hidden;
top: 2px;
left: 2px;
margin: 1px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.gh-tag-settings-colorcontainer .color-box-container .color-picker {
position: absolute;
top: -10px;
left: -10px;
border: none;
outline: none;
padding: 0;
margin: 0;
width: 50px;
height: 50px;
}
.gh-tag-settings-colorcontainer {
flex-basis: 112px;
}