KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Add status color for items in availability status menu (#1380)

Browse source
This commit is contained in:
Muhsin Keloth 2020-11-04 12:23:44 +05:30 committed by GitHub
parent 074084b258
commit afa234a207
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
app/javascript/dashboard/components/layout/AvailabilityStatus.vue
View file

@ -2,9 +2,7 @@
<div class="status">
<div class="status-view">
<div
:class="
`status-view--badge status-view--badge__${currentUserAvailabilityStatus}`
"
:class="`status-badge status-badge__${currentUserAvailabilityStatus}`"
/>
<div class="status-view--title">
@ -20,7 +18,13 @@
class="dropdown-pane top"
>
<ul class="vertical dropdown menu">
<li v-for="status in availabilityStatuses" :key="status.value">
<li
v-for="status in availabilityStatuses"
:key="status.value"
class="status-items"
>
<div :class="`status-badge status-badge__${status.value}`" />
<button
class="button clear status-change--dropdown-button"
:disabled="status.disabled"
@ -112,24 +116,6 @@ export default {
display: flex;
align-items: baseline;
& &--badge {
width: $space-one;
height: $space-one;
border-radius: 50%;
&__online {
background: $success-color;
}
&__offline {
background: $color-gray;
}
&__busy {
background: $warning-color;
}
}
& &--title {
color: $color-gray;
font-size: $font-size-small;
@ -147,6 +133,11 @@ export default {
top: -130px;
}
.status-items {
display: flex;
align-items: baseline;
}
& &--change-button {
color: $color-gray;
font-size: $font-size-small;
@ -166,4 +157,22 @@ export default {
width: 100%;
}
}
.status-badge {
width: $space-one;
height: $space-one;
border-radius: 50%;
&__online {
background: $success-color;
}
&__offline {
background: $color-gray;
}
&__busy {
background: $warning-color;
}
}
</style>