chore: Add color variants to label component (#2226)
* Chore: Adds color variants to label * Move component to UI folder
This commit is contained in:
Nithin David Thomas
GitHub
parent
b30ecb27a6
commit
381c358ffd
6 changed files with 159 additions and 94 deletions
|
|
@ -380,8 +380,8 @@ $form-button-radius: $global-radius;
|
|||
// 20. Label
|
||||
// ---------
|
||||
|
||||
$label-background: lighten($primary-color, 40%);
|
||||
$label-color: $primary-color;
|
||||
$label-background: $primary-color;
|
||||
$label-color: $white;
|
||||
$label-color-alt: $black;
|
||||
$label-palette: $foundation-palette;
|
||||
$label-font-size: $font-size-mini;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import Code from './Code';
|
|||
import ColorPicker from './widgets/ColorPicker';
|
||||
import DeleteModal from './widgets/modal/DeleteModal.vue';
|
||||
import Input from './widgets/forms/Input.vue';
|
||||
import Label from './widgets/Label.vue';
|
||||
import Label from './ui/Label';
|
||||
import LoadingState from './widgets/LoadingState';
|
||||
import Modal from './Modal';
|
||||
import ModalHeader from './ModalHeader';
|
||||
|
|
|
|||
148
app/javascript/dashboard/components/ui/Label.vue
Normal file
148
app/javascript/dashboard/components/ui/Label.vue
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<div :class="labelClass" :style="labelStyle" :title="description">
|
||||
<i v-if="icon" class="label--icon" :class="icon" @click="onClick" />
|
||||
<span v-if="!href">{{ title }}</span>
|
||||
<a v-else :href="href" :style="anchorStyle">{{ title }}</a>
|
||||
<i v-if="showClose" class="close--icon ion-close" @click="onClick" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getContrastingTextColor } from 'shared/helpers/ColorHelper';
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
href: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
colorScheme: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
textColor() {
|
||||
return getContrastingTextColor(this.bgColor);
|
||||
},
|
||||
labelClass() {
|
||||
return `label ${this.colorScheme} ${this.small ? 'small' : ''}`;
|
||||
},
|
||||
labelStyle() {
|
||||
if (this.bgColor) {
|
||||
return { background: this.bgColor, color: this.textColor };
|
||||
}
|
||||
return {};
|
||||
},
|
||||
anchorStyle() {
|
||||
if (this.bgColor) {
|
||||
return { color: this.textColor };
|
||||
}
|
||||
return {};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click', this.title);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~dashboard/assets/scss/variables';
|
||||
|
||||
.label {
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-right: var(--space-smaller);
|
||||
margin-bottom: var(--space-smaller);
|
||||
|
||||
&.small {
|
||||
font-size: var(--font-size-micro);
|
||||
}
|
||||
|
||||
.label--icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
.label--icon,
|
||||
.close--icon {
|
||||
font-size: var(--font-size-micro);
|
||||
}
|
||||
|
||||
&.small .label--icon,
|
||||
&.small .close--icon {
|
||||
font-size: var(--font-size-nano);
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: var(--font-size-mini);
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Schemes */
|
||||
&.primary {
|
||||
background: var(--w-100);
|
||||
color: var(--w-900);
|
||||
border: 1px solid var(--w-200);
|
||||
a {
|
||||
color: var(--w-900);
|
||||
}
|
||||
}
|
||||
&.secondary {
|
||||
background: var(--s-100);
|
||||
color: var(--s-900);
|
||||
border: 1px solid var(--s-200);
|
||||
a {
|
||||
color: var(--s-900);
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
background: var(--g-100);
|
||||
color: var(--g-900);
|
||||
border: 1px solid var(--g-200);
|
||||
a {
|
||||
color: var(--g-900);
|
||||
}
|
||||
}
|
||||
&.alert {
|
||||
background: var(--r-100);
|
||||
color: var(--r-900);
|
||||
border: 1px solid var(--r-200);
|
||||
a {
|
||||
color: var(--r-900);
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
background: var(--y-100);
|
||||
color: var(--y-900);
|
||||
border: 1px solid var(--y-300);
|
||||
a {
|
||||
color: var(--y-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,6 +9,12 @@ export default {
|
|||
type: 'text',
|
||||
},
|
||||
},
|
||||
colorScheme: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['primary', 'secondary', 'success', 'alert', 'warning'],
|
||||
},
|
||||
},
|
||||
description: {
|
||||
defaultValue: 'label',
|
||||
control: {
|
||||
|
|
@ -32,7 +38,7 @@ export default {
|
|||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
showIcon: {
|
||||
showClose: {
|
||||
defaultValue: false,
|
||||
control: {
|
||||
type: 'boolean',
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
:class="labelClass"
|
||||
:style="{ background: bgColor, color: textColor }"
|
||||
:title="description"
|
||||
>
|
||||
<span v-if="!href">{{ title }}</span>
|
||||
<a v-else :href="href" :style="{ color: textColor }">{{ title }}</a>
|
||||
<i v-if="showIcon" class="label--icon" :class="icon" @click="onClick" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getContrastingTextColor } from 'shared/helpers/ColorHelper';
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
href: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#1f93ff',
|
||||
},
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'ion-close',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
textColor() {
|
||||
return getContrastingTextColor(this.bgColor);
|
||||
},
|
||||
labelClass() {
|
||||
return `label ${this.small ? 'small' : ''}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click', this.title);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~dashboard/assets/scss/variables';
|
||||
|
||||
.label {
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-right: var(--space-smaller);
|
||||
margin-bottom: var(--space-smaller);
|
||||
|
||||
&.small {
|
||||
font-size: var(--font-size-micro);
|
||||
|
||||
.label--icon {
|
||||
font-size: var(--font-size-nano);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label--icon {
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-micro);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
:title="label.title"
|
||||
:description="label.description"
|
||||
:bg-color="label.color"
|
||||
:show-icon="true"
|
||||
:show-close="true"
|
||||
@click="onRemove"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -44,7 +44,6 @@
|
|||
:title="label.title"
|
||||
:description="label.description"
|
||||
:bg-color="label.color"
|
||||
:show-icon="true"
|
||||
icon="ion-plus"
|
||||
@click="onAdd"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue