IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-29 04:03:57 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Category colorpicker restyle

Browse Source
This commit is contained in:
Kris 2018-10-04 15:47:14 -04:00
parent 3faa022c6f
commit ab1e5732d7
6 changed files with 91 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/chosen-sprite.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 716 B

14
app/assets/javascripts/discourse/templates/components/edit-category-general.hbs
View File

@ -44,15 +44,19 @@
<div class='input-prepend input-append' style="margin-top: 10px;">
<span class='color-title'>{{i18n 'category.background_color'}}:</span>
<span class='add-on'>#</span>{{text-field value=category.color placeholderKey="category.color_placeholder" maxlength="6"}}
{{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
<div class="colorpicker-wrapper">
<span class='add-on'>#</span>{{text-field value=category.color placeholderKey="category.color_placeholder" maxlength="6"}}
{{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
</div>
</div>
<div class='input-prepend input-append'>
<span class='color-title'>{{i18n 'category.foreground_color'}}:</span>
<span class='add-on'>#</span>{{text-field value=category.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
{{color-picker colors=foregroundColors value=category.text_color id='edit-text-color'}}
</div>
<div class="colorpicker-wrapper">
<span class='add-on'>#</span>{{text-field value=category.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
{{color-picker colors=foregroundColors value=category.text_color id='edit-text-color'}}
</div>
</div>
</div>
</section>
{{/unless}}

50
app/assets/stylesheets/common/base/colorpicker.scss
View File

@ -2,29 +2,49 @@
.category-color-editor {
input {
width: 70px;
margin-right: 10px;
width: 5.5em;
margin-right: 1em;
}
.color-title {
display: inline-block;
width: 120px;
display: block;
margin: 1em 0 0.25em;
}
.colorpicker-wrapper {
display: flex;
align-items: center;
input,
.add-on {
align-self: flex-start;
margin-bottom: 0.125em;
}
}
.colors-container {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
max-width: 240px;
display: inline-flex;
flex-wrap: wrap;
.colorpicker {
border: 1px solid $primary-low;
margin-right: 2px;
width: 16px;
height: 16px;
font-size: 0.286em;
&.used-color {
background: image-url("chosen-sprite.png") -19px 13px;
position: relative;
margin: 0 0.125em 0.25em;
border: 1px solid $primary-medium;
width: 1.25em;
height: 1.2em;
padding: 0;
flex: 0 0 auto;
&.used-color:before {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: fontawesome;
content: "\f00c";
height: 100%;
width: calc(1.25em - 2px);
color: rgba($secondary, 0.75);
}
}
}

46
app/assets/stylesheets/common/base/discourse.scss
View File

@ -211,6 +211,52 @@ input {
}
}
.input {
&-prepend,
&-append {
margin-bottom: 5px;
input[class*="span"] {
display: inline-block;
}
input,
select {
position: relative;
margin-bottom: 0;
vertical-align: middle;
border-radius: 0;
&:focus {
z-index: z("base") + 1;
}
}
.add-on {
display: inline-flex;
align-items: center;
width: auto;
padding: 0 0.5em;
height: 28px;
background-color: $primary-low;
border: 1px solid $primary-medium;
}
.add-on,
.btn {
&:first-child {
margin-right: -1px;
}
&:last-child {
margin-left: -1px;
border-radius: 0 3px 3px 0;
}
}
}
&-prepend {
.add-on,
.btn {
margin-right: -1px;
}
}
}
textarea {
height: auto;
background-color: $secondary;

1
app/assets/stylesheets/common/base/modal.scss
View File

@ -103,6 +103,7 @@
background-color: $secondary;
background-clip: padding-box;
box-shadow: shadow("modal");
padding: 1px;
@media screen and (min-width: 475px) {
min-width: 475px;

95
app/assets/stylesheets/desktop/discourse.scss
View File

@ -124,101 +124,6 @@ input {
&-xxlarge {
width: 530px;
}
&-prepend,
&-append {
margin-bottom: 5px;
input[class*="span"] {
display: inline-block;
}
input,
select {
position: relative;
margin-bottom: 0;
vertical-align: middle;
&:focus {
z-index: z("base") + 1;
}
}
.add-on {
display: inline-block;
width: auto;
height: 18px;
min-width: 16px;
padding: 4px 5px;
font-weight: normal;
line-height: $line-height-medium;
text-align: center;
vertical-align: middle;
background-color: $secondary;
border: 1px solid $primary-low;
}
.add-on,
.btn {
margin-left: -1px;
border-radius: 0;
}
.active {
background-color: $danger-medium;
border-color: $danger;
}
}
&-prepend {
.add-on,
.btn {
margin-right: -1px;
&:first-child {
border-radius: 3px 0 0 3px;
}
}
}
&-append {
input,
select {
border-radius: 3px 0 0 3px;
}
.add-on,
.btn {
&:last-child {
border-radius: 0 3px 3px 0;
}
}
}
}
.input-prepend.input-append {
input,
select {
border-radius: 0;
background-color: $primary-low;
border-color: $primary-low;
}
.add-on,
.btn {
&:first-child {
margin-right: -1px;
border-radius: 3px 0 0 3px;
}
}
.add-on,
.btn {
&:last-child {
margin-left: -1px;
border-radius: 0 3px 3px 0;
}
}
}
.controls-dropdown {