LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Add support for dark mode in dashboard (#7460)

Browse Source 
- 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
2023-07-06 00:43:32 +05:30
committed by GitHub
parent 71837bedf9
commit 3054a4cb59
64 changed files with 390 additions and 854 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
View File

@@ -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>