FIX: category badges css refactoring/fixes
This commit fixes multiple css issues with category badges in select-kit and outside of select-kit. It also contains refactoring of components impacted by those changes.
This commit is contained in:
Joffrey JAFFEUX
GitHub
parent
9c66473c4c
commit
3a7d2da633
|
|
@ -67,9 +67,9 @@ export function categoryBadgeHTML(category, opts) {
|
|||
let categoryName = escapeExpression(get(category, 'name'));
|
||||
|
||||
if (restricted) {
|
||||
html += iconHTML('lock') + " " + categoryName;
|
||||
html += `${iconHTML('lock')}<span>${categoryName}</span>`;
|
||||
} else {
|
||||
html += categoryName;
|
||||
html += `<span>${categoryName}</span>`;
|
||||
}
|
||||
html += "</span>";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import SelectedNameComponent from "select-kit/components/multi-select/selected-name";
|
||||
import computed from "ember-addons/ember-computed-decorators";
|
||||
|
||||
export default SelectedNameComponent.extend({
|
||||
classNames: "selected-color",
|
||||
layoutName: "select-kit/templates/components/multi-select/selected-color",
|
||||
|
||||
didRender() {
|
||||
const name = this.get("name");
|
||||
this.$(".color-preview").css("background", `#${name}`.htmlSafe());
|
||||
@computed("name")
|
||||
footerContent(name) {
|
||||
return `<span class="color-preview" style="background:#${name}"></span>`.htmlSafe();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<span class="name">
|
||||
<div class="body">
|
||||
<span class="delete-icon" {{action deselect computedContent bubbles=false}}>
|
||||
{{d-icon "times"}}
|
||||
</span>
|
||||
|
||||
{{badge}}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<div class="selected-color-wrapper">
|
||||
<span class="name">
|
||||
{{#unless isLocked}}
|
||||
<span class="delete-icon" {{action deselect computedContent bubbles=false}}>
|
||||
{{d-icon "times"}}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
#{{{label}}}
|
||||
</span>
|
||||
|
||||
<span class="color-preview"></span>
|
||||
</div>
|
||||
|
|
@ -1,13 +1,19 @@
|
|||
{{#if isLocked}}
|
||||
{{#if headerContent}}<div class="header">{{headerContent}}</div>{{/if}}
|
||||
|
||||
<div class="body">
|
||||
{{#if isLocked}}
|
||||
<span class="delete-icon">
|
||||
{{d-icon "lock"}}
|
||||
</span>
|
||||
{{else}}
|
||||
{{else}}
|
||||
<span class="locked-icon" {{action deselect computedContent bubbles=false}}>
|
||||
{{d-icon "times"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
<span class="name">
|
||||
<span class="name">
|
||||
{{{label}}}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{#if footerContent}}<div class="footer">{{footerContent}}</div>{{/if}}
|
||||
|
|
|
|||
|
|
@ -19,22 +19,27 @@
|
|||
font-size: 0.857em;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.badge-category {
|
||||
.d-icon {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&.bar { //bar category style
|
||||
line-height: 1.25;
|
||||
margin-right: 5px;
|
||||
display: inline-flex;
|
||||
|
||||
span.badge-category {
|
||||
color: $primary;
|
||||
padding: 3px;
|
||||
vertical-align: text-top;
|
||||
margin-top: -2px; //vertical alignment fix
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.extra-info-wrapper & {
|
||||
color: $header-primary;
|
||||
|
|
@ -57,15 +62,11 @@
|
|||
}
|
||||
|
||||
&.bullet { //bullet category style
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
margin-right: 5px;
|
||||
font-size: .857em;
|
||||
line-height: 15px;
|
||||
|
||||
span.badge-category {
|
||||
color: $primary;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
|
|
@ -103,12 +104,10 @@
|
|||
|
||||
|
||||
&.box { //box category style (apply custom widths to the wrapper, not the children)
|
||||
line-height: 1.5;
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
padding: 2px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
|
|
@ -132,7 +131,6 @@
|
|||
&.badge-category {
|
||||
position: relative;
|
||||
padding: 0 5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -228,6 +226,7 @@
|
|||
width: 100%;
|
||||
line-height: 1;
|
||||
vertical-align: text-top;
|
||||
padding: 0;
|
||||
span.badge-category {
|
||||
max-width: 100px;
|
||||
padding: 5px;
|
||||
|
|
|
|||
|
|
@ -25,13 +25,6 @@
|
|||
color: $primary;
|
||||
}
|
||||
|
||||
.category-status {
|
||||
color: $primary;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.category-desc {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 1 1 auto;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
.select-kit {
|
||||
.category-row {
|
||||
.category-status {
|
||||
display: flex;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
.select-kit, .select-kit-box {
|
||||
&.category-selector {
|
||||
.selected-name {
|
||||
.badge-wrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: inherit;
|
||||
&.box {
|
||||
margin: 2px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,12 +119,12 @@
|
|||
height: 5px;
|
||||
margin: 0 2px 2px 2px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-name {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
color: $primary;
|
||||
cursor: default;
|
||||
border: 1px solid $primary-medium;
|
||||
|
|
@ -136,30 +136,35 @@
|
|||
background-color: $primary-low;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
flex: 0 1 auto;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
padding: 0 5px;
|
||||
line-height: 18px;
|
||||
.footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.is-highlighted {
|
||||
box-shadow: 0 0 2px $danger, 0 1px 0 rgba(0,0,0,0.05);
|
||||
}
|
||||
.body {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.locked-icon, .delete-icon {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
display: inline-flex;
|
||||
height: 21px;
|
||||
width: 21px;
|
||||
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
|
|
@ -167,6 +172,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
&.is-highlighted {
|
||||
box-shadow: 0 0 2px $danger, 0 1px 0 rgba(0,0,0,0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue