feat: Add support for dark mode in dashboard (#7460)
- Add config for TailwindCSS - Enable HMR - Add a config in LocalStorage for Dark Mode Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese
@@ -1,25 +1,29 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="showShowCurrentAccountContext"
|
||||
class="account-context--group"
|
||||
class="rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
|
||||
@mouseover="setShowSwitch"
|
||||
@mouseleave="resetShowSwitch"
|
||||
>
|
||||
{{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
|
||||
<p class="account-context--name text-ellipsis">
|
||||
<p class="text-ellipsis font-medium mb-0">
|
||||
{{ account.name }}
|
||||
</p>
|
||||
<transition name="fade">
|
||||
<div v-if="showSwitchButton" class="account-context--switch-group">
|
||||
<woot-button
|
||||
variant="clear"
|
||||
size="tiny"
|
||||
icon="arrow-swap"
|
||||
class="switch-button"
|
||||
@click="$emit('toggle-accounts')"
|
||||
>
|
||||
{{ $t('SIDEBAR.SWITCH') }}
|
||||
</woot-button>
|
||||
<div
|
||||
v-if="showSwitchButton"
|
||||
class="bg-gradient-to-r rtl:bg-gradient-to-l from-transparent via-white dark:via-slate-700 to-white dark:to-slate-700 flex items-center h-full justify-end absolute top-0 right-0 w-full"
|
||||
>
|
||||
<div class="my-0 mx-2">
|
||||
<woot-button
|
||||
variant="clear"
|
||||
size="tiny"
|
||||
icon="arrow-swap"
|
||||
@click="$emit('toggle-accounts')"
|
||||
>
|
||||
{{ $t('SIDEBAR.SWITCH') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
@@ -51,51 +55,6 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.account-context--group {
|
||||
border-radius: var(--border-radius-normal);
|
||||
border: 1px solid var(--color-border);
|
||||
font-size: var(--font-size-mini);
|
||||
padding: var(--space-small);
|
||||
margin: var(--space-small) var(--space-small) 0 var(--space-small);
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: var(--b-100);
|
||||
}
|
||||
|
||||
.account-context--name {
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-button {
|
||||
margin: 0 var(--space-small);
|
||||
}
|
||||
|
||||
.account-context--switch-group {
|
||||
--overlay-shadow: linear-gradient(
|
||||
to right,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 1) 50%
|
||||
);
|
||||
|
||||
align-items: center;
|
||||
background-image: var(--overlay-shadow);
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: var(--border-radius-normal);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: var(--border-radius-normal);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: flex-end;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 300ms ease;
|
||||
|
||||
@@ -2,31 +2,38 @@
|
||||
<woot-modal
|
||||
:show="showAccountModal"
|
||||
:on-close="() => $emit('close-account-modal')"
|
||||
class="account-selector--modal"
|
||||
>
|
||||
<woot-modal-header
|
||||
:header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
|
||||
:header-content="$t('SIDEBAR_ITEMS.SELECTOR_SUBTITLE')"
|
||||
/>
|
||||
<div class="account-selector--wrap">
|
||||
<div class="px-8 pt-4 pb-8">
|
||||
<div
|
||||
v-for="account in currentUser.accounts"
|
||||
:key="account.id"
|
||||
class="account-selector"
|
||||
class="pt-0 pb-0"
|
||||
>
|
||||
<button
|
||||
class="button expanded clear link"
|
||||
class="flex justify-between items-center expanded clear link cursor-pointer px-4 py-3 w-full rounded-lg hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
|
||||
@click="onChangeAccount(account.id)"
|
||||
>
|
||||
<span class="button__content">
|
||||
<label :for="account.name" class="account-details--wrap">
|
||||
<div class="account--name">{{ account.name }}</div>
|
||||
<div class="account--role">{{ account.role }}</div>
|
||||
<span class="w-full">
|
||||
<label :for="account.name" class="text-left rtl:text-right">
|
||||
<div
|
||||
class="text-slate-700 text-lg dark:text-slate-100 font-medium hover:underline-offset-4 leading-5"
|
||||
>
|
||||
{{ account.name }}
|
||||
</div>
|
||||
<div
|
||||
class="text-slate-500 text-xs dark:text-slate-500 font-medium hover:underline-offset-4"
|
||||
>
|
||||
{{ account.role }}
|
||||
</div>
|
||||
</label>
|
||||
</span>
|
||||
<fluent-icon
|
||||
v-show="account.id === accountId"
|
||||
class="selected--account"
|
||||
class="text-slate-800 dark:text-slate-100"
|
||||
icon="checkmark-circle"
|
||||
type="solid"
|
||||
size="24"
|
||||
@@ -74,32 +81,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.account-selector--wrap {
|
||||
margin-top: var(--space-normal);
|
||||
}
|
||||
.account-selector {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-one) var(--space-normal);
|
||||
.account-details--wrap {
|
||||
text-align: left;
|
||||
.account--name {
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.account--role {
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-mini);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="logo">
|
||||
<div class="w-8 h-8">
|
||||
<router-link :to="dashboardPath" replace>
|
||||
<img :src="source" :alt="name" />
|
||||
</router-link>
|
||||
@@ -30,17 +30,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
$logo-size: 32px;
|
||||
|
||||
.logo {
|
||||
padding: var(--space-normal);
|
||||
|
||||
img {
|
||||
width: $logo-size;
|
||||
height: $logo-size;
|
||||
object-fit: cover;
|
||||
object-position: left center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,15 +1,25 @@
|
||||
<template>
|
||||
<div class="notifications-link">
|
||||
<woot-button
|
||||
class-names="notifications-link--button"
|
||||
variant="clear"
|
||||
color-scheme="secondary"
|
||||
:class="{ 'is-active': isNotificationPanelActive }"
|
||||
<div class="mb-4">
|
||||
<button
|
||||
class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800 dark:hover:text-slate-100 hover:text-slate-600 relative"
|
||||
:class="{
|
||||
'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50': isNotificationPanelActive,
|
||||
}"
|
||||
@click="openNotificationPanel"
|
||||
>
|
||||
<fluent-icon icon="alert" />
|
||||
<span v-if="unreadCount" class="badge warning">{{ unreadCount }}</span>
|
||||
</woot-button>
|
||||
<fluent-icon
|
||||
icon="alert"
|
||||
:class="{
|
||||
'text-woot-500': isNotificationPanelActive,
|
||||
}"
|
||||
/>
|
||||
<span
|
||||
v-if="unreadCount"
|
||||
class="text-black-900 bg-yellow-300 absolute -top-0.5 -right-1 p-1 text-xxs min-w-[1rem] rounded-full"
|
||||
>
|
||||
{{ unreadCount }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -43,37 +53,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.notifications-link {
|
||||
margin-bottom: var(--space-small);
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: var(--space-minus-smaller);
|
||||
top: var(--space-minus-smaller);
|
||||
}
|
||||
.notifications-link--button {
|
||||
display: flex;
|
||||
position: relative;
|
||||
border-radius: var(--border-radius-large);
|
||||
border: 1px solid transparent;
|
||||
color: var(--s-600);
|
||||
margin: var(--space-small) 0;
|
||||
|
||||
&:hover {
|
||||
background: var(--w-50);
|
||||
color: var(--s-600);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--w-500);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: var(--w-50);
|
||||
color: var(--w-500);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
:class="{ 'dropdown-pane--open': show }"
|
||||
>
|
||||
<availability-status />
|
||||
<li class="divider" />
|
||||
<woot-dropdown-menu>
|
||||
<woot-dropdown-item v-if="showChangeAccountOption">
|
||||
<woot-button
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
<template>
|
||||
<div class="primary--sidebar">
|
||||
<logo
|
||||
:source="logoSource"
|
||||
:name="installationName"
|
||||
:account-id="accountId"
|
||||
/>
|
||||
<nav class="menu vertical">
|
||||
<div
|
||||
class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-700 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<logo
|
||||
:source="logoSource"
|
||||
:name="installationName"
|
||||
:account-id="accountId"
|
||||
class="m-4 mb-10"
|
||||
/>
|
||||
<primary-nav-item
|
||||
v-for="menuItem in menuItems"
|
||||
:key="menuItem.toState"
|
||||
@@ -14,8 +17,8 @@
|
||||
:to="menuItem.toState"
|
||||
:is-child-menu-active="menuItem.key === activeMenuItem"
|
||||
/>
|
||||
</nav>
|
||||
<div class="menu vertical user-menu">
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-end pb-6">
|
||||
<primary-nav-item
|
||||
v-if="!isACustomBrandedInstance"
|
||||
icon="book-open-globe"
|
||||
@@ -101,27 +104,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.primary--sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--space-jumbo);
|
||||
border-right: 1px solid var(--s-50);
|
||||
box-sizing: content-box;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.menu {
|
||||
align-items: center;
|
||||
margin-top: var(--space-medium);
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: var(--space-normal);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,15 +3,28 @@
|
||||
<a
|
||||
v-tooltip.right="$t(`SIDEBAR.${name}`)"
|
||||
:href="href"
|
||||
class="button clear button--only-icon menu-item"
|
||||
:class="{ 'is-active': isActive || isChildMenuActive }"
|
||||
class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800 dark:hover:text-slate-100 hover:text-slate-600 relative"
|
||||
:class="{
|
||||
'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
|
||||
isActive || isChildMenuActive,
|
||||
}"
|
||||
:rel="openInNewPage ? 'noopener noreferrer nofollow' : undefined"
|
||||
:target="openInNewPage ? '_blank' : undefined"
|
||||
@click="navigate"
|
||||
>
|
||||
<fluent-icon :icon="icon" />
|
||||
<span class="show-for-sr">{{ name }}</span>
|
||||
<span v-if="count" class="badge warning">{{ count }}</span>
|
||||
<fluent-icon
|
||||
:icon="icon"
|
||||
:class="{
|
||||
'text-woot-500': isActive || isChildMenuActive,
|
||||
}"
|
||||
/>
|
||||
<span class="sr-only">{{ name }}</span>
|
||||
<span
|
||||
v-if="count"
|
||||
class="text-black-900 bg-yellow-500 absolute -top-1 -right-1"
|
||||
>
|
||||
{{ count }}
|
||||
</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</template>
|
||||
@@ -45,40 +58,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.button {
|
||||
margin: var(--space-small) 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
border-radius: var(--border-radius-large);
|
||||
border: 1px solid transparent;
|
||||
color: var(--s-600);
|
||||
|
||||
&:hover {
|
||||
background: var(--w-25);
|
||||
color: var(--s-600);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--w-500);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: var(--w-50);
|
||||
color: var(--w-500);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: var(--font-size-default);
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: var(--space-minus-smaller);
|
||||
top: var(--space-minus-smaller);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
<template>
|
||||
<div v-if="hasSecondaryMenu" class="main-nav secondary-menu">
|
||||
<div
|
||||
v-if="hasSecondaryMenu"
|
||||
class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
|
||||
>
|
||||
<account-context @toggle-accounts="toggleAccountModal" />
|
||||
<transition-group name="menu-list" tag="ul" class="menu vertical">
|
||||
<transition-group
|
||||
name="menu-list"
|
||||
tag="ul"
|
||||
class="pt-2 list-none ml-0 mb-0"
|
||||
>
|
||||
<secondary-nav-item
|
||||
v-for="menuItem in accessibleMenuItems"
|
||||
:key="menuItem.toState"
|
||||
@@ -249,27 +256,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '~dashboard/assets/scss/woot';
|
||||
|
||||
.secondary-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--white);
|
||||
border-right: 1px solid var(--s-50);
|
||||
height: 100%;
|
||||
width: 12.5rem;
|
||||
flex-shrink: 0;
|
||||
overflow-y: hidden;
|
||||
position: unset;
|
||||
|
||||
&:hover {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.menu {
|
||||
padding: var(--space-small);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,38 +5,69 @@
|
||||
custom
|
||||
active-class="active"
|
||||
>
|
||||
<li :class="{ active: isActive }">
|
||||
<li
|
||||
class="font-medium h-7 my-1 hover:bg-slate-25 hover:text-bg-50 flex items-center px-2 rounded-md dark:hover:bg-slate-800"
|
||||
:class="{
|
||||
'bg-woot-25 dark:bg-slate-800': isActive,
|
||||
'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
|
||||
}"
|
||||
@click="navigate"
|
||||
>
|
||||
<a
|
||||
:href="href"
|
||||
class="button clear menu-item text-truncate"
|
||||
:class="{ 'is-active': isActive, 'text-truncate': shouldTruncate }"
|
||||
@click="navigate"
|
||||
class="inline-flex text-left max-w-full w-full items-center"
|
||||
>
|
||||
<span v-if="icon" class="badge--icon">
|
||||
<fluent-icon class="inbox-icon" :icon="icon" size="12" />
|
||||
<span
|
||||
v-if="icon"
|
||||
class="inline-flex items-center justify-center w-4 rounded-sm bg-slate-100 dark:bg-slate-700 p-0.5 mr-1.5 rtl:mr-0 rtl:ml-1.5"
|
||||
>
|
||||
<fluent-icon
|
||||
class="text-xxs text-slate-600 dark:text-slate-200"
|
||||
:class="{
|
||||
'text-woot-500 dark:text-woot-500': isActive,
|
||||
}"
|
||||
:icon="icon"
|
||||
size="12"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="labelColor"
|
||||
class="badge--label"
|
||||
class="inline-flex rounded-sm bg-slate-100 h-3 w-3.5 mr-1.5 rtl:mr-0 rtl:ml-1.5 border border-slate-50 dark:border-slate-900"
|
||||
:style="{ backgroundColor: labelColor }"
|
||||
/>
|
||||
<span
|
||||
:title="menuTitle"
|
||||
class="menu-label button__content"
|
||||
:class="{ 'text-truncate': shouldTruncate }"
|
||||
<div
|
||||
class="items-center flex overflow-hidden whitespace-nowrap text-ellipsis w-full justify-between"
|
||||
>
|
||||
{{ label }}
|
||||
<span v-if="showChildCount" class="count-view">
|
||||
<span
|
||||
:title="menuTitle"
|
||||
class="text-sm text-slate-600 dark:text-slate-100"
|
||||
:class="{
|
||||
'text-woot-500 dark:text-woot-500': isActive,
|
||||
'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
|
||||
}"
|
||||
>
|
||||
{{ label }}
|
||||
</span>
|
||||
<span
|
||||
v-if="showChildCount"
|
||||
class="bg-slate-50 dark:bg-slate-700 rounded text-xxs font-medium mx-1 py-0 px-1"
|
||||
:class="
|
||||
isCountZero
|
||||
? `text-slate-300 dark:text-slate-600`
|
||||
: `text-slate-600 dark:text-slate-50`
|
||||
"
|
||||
>
|
||||
{{ childItemCount }}
|
||||
</span>
|
||||
</span>
|
||||
<span v-if="count" class="badge" :class="{ secondary: !isActive }">
|
||||
{{ count }}
|
||||
</span>
|
||||
<span v-if="warningIcon" class="badge--icon">
|
||||
</div>
|
||||
<span
|
||||
v-if="warningIcon"
|
||||
class="inline-flex rounded-sm mr-1 bg-slate-100"
|
||||
>
|
||||
<fluent-icon
|
||||
v-tooltip.top-end="$t('SIDEBAR.FACEBOOK_REAUTHORIZE')"
|
||||
class="inbox-icon"
|
||||
class="text-xxs"
|
||||
:icon="warningIcon"
|
||||
size="12"
|
||||
/>
|
||||
@@ -72,10 +103,6 @@ export default {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
count: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
showChildCount: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@@ -89,96 +116,12 @@ export default {
|
||||
showIcon() {
|
||||
return { 'text-truncate': this.shouldTruncate };
|
||||
},
|
||||
isCountZero() {
|
||||
return this.childItemCount === 0;
|
||||
},
|
||||
menuTitle() {
|
||||
return this.shouldTruncate ? this.label : '';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
$badge-size: var(--space-normal);
|
||||
$label-badge-size: var(--space-slab);
|
||||
|
||||
.button {
|
||||
margin: var(--space-small) 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: inline-flex;
|
||||
color: var(--s-600);
|
||||
font-weight: var(--font-weight-medium);
|
||||
width: 100%;
|
||||
height: var(--space-medium);
|
||||
padding: var(--space-smaller) var(--space-smaller);
|
||||
margin: var(--space-smaller) 0;
|
||||
text-align: left;
|
||||
line-height: 1.2;
|
||||
|
||||
&:hover {
|
||||
background: var(--s-25);
|
||||
color: var(--s-600);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--w-300);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: var(--w-25);
|
||||
color: var(--w-500);
|
||||
border-color: var(--w-25);
|
||||
}
|
||||
&.is-active .count-view {
|
||||
background: var(--w-75);
|
||||
color: var(--w-500);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.inbox-icon {
|
||||
font-size: var(--font-size-nano);
|
||||
}
|
||||
|
||||
.badge--label,
|
||||
.badge--icon {
|
||||
display: inline-flex;
|
||||
border-radius: var(--border-radius-small);
|
||||
margin-right: var(--space-smaller);
|
||||
background: var(--s-100);
|
||||
}
|
||||
|
||||
.badge--icon {
|
||||
align-items: center;
|
||||
height: $badge-size;
|
||||
justify-content: center;
|
||||
min-width: $badge-size;
|
||||
}
|
||||
|
||||
.badge--label {
|
||||
height: $label-badge-size;
|
||||
min-width: $label-badge-size;
|
||||
margin-left: var(--space-smaller);
|
||||
border: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.badge.secondary {
|
||||
min-width: unset;
|
||||
background: var(--s-75);
|
||||
color: var(--s-600);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.count-view {
|
||||
background: var(--s-50);
|
||||
border-radius: var(--border-radius-normal);
|
||||
color: var(--s-600);
|
||||
font-size: var(--font-size-micro);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-left: var(--space-smaller);
|
||||
padding: var(--space-zero) var(--space-smaller);
|
||||
line-height: var(--font-size-small);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,46 +1,41 @@
|
||||
<template>
|
||||
<li v-show="isMenuItemVisible" class="sidebar-item">
|
||||
<div v-if="hasSubMenu" class="secondary-menu--wrap">
|
||||
<span class="secondary-menu--header fs-small">
|
||||
<li v-show="isMenuItemVisible" class="mt-1">
|
||||
<div v-if="hasSubMenu" class="flex justify-between">
|
||||
<span
|
||||
class="text-sm text-slate-700 dark:text-slate-200 font-semibold my-2 px-2 pt-1"
|
||||
>
|
||||
{{ $t(`SIDEBAR.${menuItem.label}`) }}
|
||||
</span>
|
||||
<div v-if="menuItem.showNewButton" class="submenu-icons">
|
||||
<woot-button
|
||||
size="tiny"
|
||||
variant="clear"
|
||||
color-scheme="secondary"
|
||||
icon="add"
|
||||
class="submenu-icon"
|
||||
@click="onClickOpen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<router-link
|
||||
v-else
|
||||
class="secondary-menu--title secondary-menu--link fs-small"
|
||||
class="rounded-lg leading-4 font-medium flex items-center p-2 m-0 text-sm text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
|
||||
:class="computedClass"
|
||||
:to="menuItem && menuItem.toState"
|
||||
>
|
||||
<fluent-icon
|
||||
:icon="menuItem.icon"
|
||||
class="secondary-menu--icon"
|
||||
class="min-w-[1rem] mr-2 rtl:mr-0 rtl:ml-2"
|
||||
size="14"
|
||||
/>
|
||||
{{ $t(`SIDEBAR.${menuItem.label}`) }}
|
||||
<span v-if="showChildCount(menuItem.count)" class="count-view">
|
||||
<span
|
||||
v-if="showChildCount(menuItem.count)"
|
||||
class="rounded-xl text-xxs font-medium mx-1 py-0 px-1"
|
||||
>
|
||||
{{ `${menuItem.count}` }}
|
||||
</span>
|
||||
<span
|
||||
v-if="menuItem.beta"
|
||||
data-view-component="true"
|
||||
label="Beta"
|
||||
class="beta"
|
||||
class="px-1 mx-1 inline-block font-medium leading-4 border border-green-400 text-green-500 rounded-lg text-xxs"
|
||||
>
|
||||
{{ $t('SIDEBAR.BETA') }}
|
||||
</span>
|
||||
</router-link>
|
||||
|
||||
<ul v-if="hasSubMenu" class="nested vertical menu">
|
||||
<ul v-if="hasSubMenu" class="list-none ml-0 mb-0">
|
||||
<secondary-child-nav-item
|
||||
v-for="child in menuItem.children"
|
||||
:key="child.id"
|
||||
@@ -55,21 +50,21 @@
|
||||
/>
|
||||
<router-link
|
||||
v-if="showItem(menuItem)"
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
v-slot="{ href, navigate }"
|
||||
:to="menuItem.toState"
|
||||
custom
|
||||
>
|
||||
<li class="menu-item--new">
|
||||
<a
|
||||
:href="href"
|
||||
class="button small link clear secondary"
|
||||
:class="{ 'is-active': isActive }"
|
||||
@click="e => newLinkClick(e, navigate)"
|
||||
>
|
||||
<fluent-icon icon="add" size="16" />
|
||||
<span class="button__content">
|
||||
<li class="pl-1">
|
||||
<a :href="href">
|
||||
<woot-button
|
||||
size="tiny"
|
||||
variant="clear"
|
||||
color-scheme="secondary"
|
||||
icon="add"
|
||||
@click="e => newLinkClick(e, navigate)"
|
||||
>
|
||||
{{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
|
||||
</span>
|
||||
</woot-button>
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
@@ -178,7 +173,7 @@ export default {
|
||||
this.isUnattended ||
|
||||
this.isCurrentRoute
|
||||
) {
|
||||
return 'is-active';
|
||||
return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500';
|
||||
}
|
||||
if (this.hasSubMenu) {
|
||||
if (
|
||||
@@ -187,12 +182,12 @@ export default {
|
||||
this.isIntegrationsSettings ||
|
||||
this.isApplicationsSettings
|
||||
) {
|
||||
return 'is-active';
|
||||
return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500';
|
||||
}
|
||||
return ' ';
|
||||
return 'hover:text-slate-700 dark:hover:text-slate-100';
|
||||
}
|
||||
|
||||
return '';
|
||||
return 'hover:text-slate-700 dark:hover:text-slate-100';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
@@ -233,132 +228,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.sidebar-item {
|
||||
margin: var(--space-smaller) 0 0;
|
||||
}
|
||||
|
||||
.secondary-menu--wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--space-small);
|
||||
}
|
||||
|
||||
.secondary-menu--header {
|
||||
color: var(--s-700);
|
||||
display: flex;
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--space-normal);
|
||||
margin: var(--space-small) 0;
|
||||
padding: 0 var(--space-small);
|
||||
}
|
||||
.secondary-menu--title {
|
||||
color: var(--s-600);
|
||||
display: flex;
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: var(--space-normal);
|
||||
margin: var(--space-small) 0;
|
||||
padding: 0 var(--space-small);
|
||||
}
|
||||
|
||||
.secondary-menu--link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: var(--space-small);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border-radius: var(--border-radius-normal);
|
||||
color: var(--s-700);
|
||||
|
||||
&:hover {
|
||||
background: var(--s-25);
|
||||
color: var(--s-600);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--w-300);
|
||||
}
|
||||
|
||||
&.router-link-exact-active,
|
||||
&.is-active {
|
||||
background: var(--w-25);
|
||||
color: var(--w-500);
|
||||
border-color: var(--w-25);
|
||||
}
|
||||
|
||||
&.is-active .count-view {
|
||||
background: var(--w-75);
|
||||
color: var(--w-600);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-menu--icon {
|
||||
margin-right: var(--space-smaller);
|
||||
min-width: var(--space-normal);
|
||||
}
|
||||
|
||||
.sub-menu-link {
|
||||
color: var(--s-600);
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label-color--display {
|
||||
border-radius: var(--space-smaller);
|
||||
height: var(--space-normal);
|
||||
margin-right: var(--space-small);
|
||||
min-width: var(--space-normal);
|
||||
width: var(--space-normal);
|
||||
}
|
||||
|
||||
.inbox-icon {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.sidebar-item .menu-item--new {
|
||||
padding: var(--space-small) 0;
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
color: var(--s-500);
|
||||
}
|
||||
}
|
||||
|
||||
.beta {
|
||||
padding-right: var(--space-smaller) !important;
|
||||
padding-left: var(--space-smaller) !important;
|
||||
margin: 0 var(--space-smaller) !important;
|
||||
display: inline-block;
|
||||
font-size: var(--font-size-micro);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 14px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2em;
|
||||
color: var(--g-800);
|
||||
border-color: var(--g-700);
|
||||
}
|
||||
|
||||
.count-view {
|
||||
background: var(--s-50);
|
||||
border-radius: var(--border-radius-normal);
|
||||
color: var(--s-600);
|
||||
font-size: var(--font-size-micro);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin: 0 var(--space-smaller);
|
||||
padding: var(--space-zero) var(--space-smaller);
|
||||
}
|
||||
|
||||
.submenu-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.submenu-icon {
|
||||
padding: 0;
|
||||
margin-left: var(--space-small);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user