mirror of
https://github.com/frappe/books.git
synced 2024-12-22 02:49:03 +00:00
feat: windowstitlebar, sidebar and Dashboard changed to darkmode
This commit is contained in:
pu-raihan
parent
2119c301d7
commit
e131c560b9
@ -11,6 +11,9 @@
|
||||
"600": "#7C7C7C",
|
||||
"700": "#525252",
|
||||
"800": "#383838",
|
||||
"850": "#282828",
|
||||
"875": "#212121",
|
||||
"890": "#1C1C1C",
|
||||
"900": "#171717"
|
||||
},
|
||||
"red": {
|
||||
|
||||
@ -36,6 +36,7 @@ export type ConfigMap = {
|
||||
lastSelectedFilePath: null | string;
|
||||
language: string
|
||||
deviceId: string
|
||||
darkMode: boolean
|
||||
};
|
||||
|
||||
export interface ConfigFile {
|
||||
|
||||
12
src/App.vue
12
src/App.vue
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
id="app"
|
||||
class="h-screen flex flex-col font-sans overflow-hidden antialiased"
|
||||
class="dark:bg-gray-900 h-screen flex flex-col font-sans overflow-hidden antialiased"
|
||||
:dir="languageDirection"
|
||||
:language="language"
|
||||
>
|
||||
@ -14,7 +14,9 @@
|
||||
<Desk
|
||||
v-if="activeScreen === 'Desk'"
|
||||
class="flex-1"
|
||||
:darkMode="darkMode"
|
||||
@change-db-file="showDbSelector"
|
||||
@toggle-darkmode="toggleDMode"
|
||||
/>
|
||||
<DatabaseSelector
|
||||
v-if="activeScreen === 'DatabaseSelector'"
|
||||
@ -61,6 +63,7 @@ import { Search } from './utils/search';
|
||||
import { Shortcuts } from './utils/shortcuts';
|
||||
import { routeTo } from './utils/ui';
|
||||
import { useKeys } from './utils/vueUtils';
|
||||
import { toggleDarkMode } from 'src/utils/theme';
|
||||
|
||||
enum Screen {
|
||||
Desk = 'Desk',
|
||||
@ -106,10 +109,12 @@ export default defineComponent({
|
||||
activeScreen: null,
|
||||
dbPath: '',
|
||||
companyName: '',
|
||||
darkMode: false,
|
||||
} as {
|
||||
activeScreen: null | Screen;
|
||||
dbPath: string;
|
||||
companyName: string;
|
||||
darkMode: boolean | undefined;
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -124,6 +129,7 @@ export default defineComponent({
|
||||
},
|
||||
async mounted() {
|
||||
await this.setInitialScreen();
|
||||
this.darkMode = fyo.config.get('darkMode') as boolean;
|
||||
},
|
||||
methods: {
|
||||
async setInitialScreen(): Promise<void> {
|
||||
@ -247,6 +253,10 @@ export default defineComponent({
|
||||
this.searcher = null;
|
||||
this.companyName = '';
|
||||
},
|
||||
async toggleDMode(): Promise<void> {
|
||||
toggleDarkMode();
|
||||
this.darkMode = fyo.config.get('darkMode');
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -39,10 +39,10 @@ export default defineComponent({
|
||||
_class() {
|
||||
return {
|
||||
'opacity-50 cursor-not-allowed pointer-events-none': this.disabled,
|
||||
'text-white': this.type === 'primary',
|
||||
'bg-black': this.type === 'primary' && this.background,
|
||||
'text-gray-700': this.type !== 'primary',
|
||||
'bg-gray-200': this.type !== 'primary' && this.background,
|
||||
'text-white dark:text-black': this.type === 'primary',
|
||||
'bg-black dark:bg-gray-400': this.type === 'primary' && this.background,
|
||||
'text-gray-700 dark:text-gray-200': this.type !== 'primary',
|
||||
'bg-gray-200 dark:bg-gray-900': this.type !== 'primary' && this.background,
|
||||
'h-8': this.background,
|
||||
'px-3': this.padding && this.icon,
|
||||
'px-6': this.padding && !this.icon,
|
||||
|
||||
@ -118,7 +118,7 @@
|
||||
ref="tooltip"
|
||||
:offset="15"
|
||||
placement="top"
|
||||
class="text-sm shadow-md px-2 py-1 bg-white text-gray-900 border-s-4"
|
||||
class="text-sm shadow-md px-2 py-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-200 border-s-4"
|
||||
:style="{ borderColor: activeColor }"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
:key="i"
|
||||
clip-path="url(#donut-hole)"
|
||||
:d="getArcPath(cx, cy, radius, start_, theta)"
|
||||
:stroke="sectors[i].color"
|
||||
:stroke="getSectorColor(i)"
|
||||
:stroke-width="thickness + (active === i ? 4 : 0)"
|
||||
:style="{ transformOrigin: `${cx}px ${cy}px` }"
|
||||
class="sector"
|
||||
@ -57,7 +57,11 @@
|
||||
:x="cx"
|
||||
:y="cy"
|
||||
text-anchor="middle"
|
||||
style="font-size: 6px; font-weight: bold; fill: #415668"
|
||||
:style="{
|
||||
fontSize: '6px',
|
||||
fontWeight: 'bold',
|
||||
fill: darkMode ? '#FFFFFF' : '#415668',
|
||||
}"
|
||||
>
|
||||
{{
|
||||
valueFormatter(
|
||||
@ -101,6 +105,7 @@ export default {
|
||||
offsetY: { default: 0, type: Number },
|
||||
textOffsetX: { default: 0, type: Number },
|
||||
textOffsetY: { default: 0, type: Number },
|
||||
darkMode: Boolean,
|
||||
},
|
||||
emits: ['change'],
|
||||
computed: {
|
||||
@ -150,6 +155,13 @@ export default {
|
||||
|
||||
return `M ${startX} ${startY} A ${r} ${r} 0 ${largeArcFlag} ${sweepFlag} ${endX} ${endY}`;
|
||||
},
|
||||
getSectorColor(index) {
|
||||
if (this.darkMode) {
|
||||
return this.sectors[index].color.darkColor;
|
||||
} else {
|
||||
return this.sectors[index].color.color;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -117,7 +117,7 @@
|
||||
ref="tooltip"
|
||||
:offset="15"
|
||||
placement="top"
|
||||
class="text-sm shadow-md px-2 py-1 bg-white text-gray-900 border-s-4"
|
||||
class="text-sm shadow-md px-2 py-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-200 border-s-4"
|
||||
:style="{ borderColor: colors[yi] }"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
|
||||
@ -15,14 +15,19 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="bg-white rounded w-full min-w-40 overflow-hidden">
|
||||
<div
|
||||
class="bg-white dark:bg-gray-850 dark:text-white rounded w-full min-w-40 overflow-hidden"
|
||||
>
|
||||
<div class="p-1 max-h-64 overflow-auto custom-scroll text-sm">
|
||||
<div v-if="isLoading" class="p-2 text-gray-600 italic">
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="p-2 text-gray-600 dark:text-gray-400 italic"
|
||||
>
|
||||
{{ t`Loading...` }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="dropdownItems.length === 0"
|
||||
class="p-2 text-gray-600 italic"
|
||||
class="p-2 text-gray-600 dark:text-gray-400 italic"
|
||||
>
|
||||
{{ getEmptyMessage() }}
|
||||
</div>
|
||||
@ -34,31 +39,18 @@
|
||||
>
|
||||
<div
|
||||
v-if="d.isGroup"
|
||||
class="
|
||||
px-2
|
||||
pt-3
|
||||
pb-1
|
||||
text-xs
|
||||
uppercase
|
||||
text-gray-700
|
||||
font-semibold
|
||||
tracking-wider
|
||||
"
|
||||
class="px-2 pt-3 pb-1 text-xs uppercase text-gray-700 dark:text-gray-400 font-semibold tracking-wider"
|
||||
>
|
||||
{{ d.label }}
|
||||
</div>
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
block
|
||||
p-2
|
||||
rounded-md
|
||||
mt-1
|
||||
first:mt-0
|
||||
cursor-pointer
|
||||
truncate
|
||||
class="block p-2 rounded-md mt-1 first:mt-0 cursor-pointer truncate"
|
||||
:class="
|
||||
index === highlightedIndex
|
||||
? 'bg-gray-100 dark:bg-gray-875'
|
||||
: ''
|
||||
"
|
||||
:class="index === highlightedIndex ? 'bg-gray-100' : ''"
|
||||
@mouseenter="highlightedIndex = index"
|
||||
@mousedown.prevent
|
||||
@click="selectItem(d)"
|
||||
|
||||
@ -7,7 +7,11 @@
|
||||
<template #target="{ togglePopover }">
|
||||
<Button :icon="true" @click="togglePopover()">
|
||||
<span class="flex items-center">
|
||||
<Icon name="filter" size="12" class="stroke-current text-gray-700" />
|
||||
<Icon
|
||||
name="filter"
|
||||
size="12"
|
||||
class="stroke-current text-gray-700 dark:text-gray-400"
|
||||
/>
|
||||
<span class="ms-1">
|
||||
<template v-if="activeFilterCount > 0">
|
||||
{{ filterAppliedMessage }}
|
||||
@ -30,18 +34,7 @@
|
||||
class="flex items-center justify-between text-base gap-2"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
cursor-pointer
|
||||
w-4
|
||||
h-4
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
text-gray-600
|
||||
hover:text-gray-800
|
||||
rounded-md
|
||||
group
|
||||
"
|
||||
class="cursor-pointer w-4 h-4 flex items-center justify-center text-gray-600 hover:text-gray-800 rounded-md group"
|
||||
>
|
||||
<span class="hidden group-hover:inline-block">
|
||||
<feather-icon
|
||||
@ -106,16 +99,7 @@
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
text-base
|
||||
border-t
|
||||
p-2
|
||||
flex
|
||||
items-center
|
||||
text-gray-600
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
"
|
||||
class="text-base border-t p-2 flex items-center text-gray-600 cursor-pointer hover:bg-gray-100"
|
||||
@click="addNewFilter"
|
||||
>
|
||||
<feather-icon name="plus" class="w-4 h-4" />
|
||||
@ -149,7 +133,7 @@ const conditions = [
|
||||
{ label: t`Is Not Empty`, value: 'is not null' },
|
||||
] as const;
|
||||
|
||||
type Condition = typeof conditions[number]['value'];
|
||||
type Condition = (typeof conditions)[number]['value'];
|
||||
|
||||
type Filter = {
|
||||
fieldname: string;
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
:is="iconComponent"
|
||||
:class="iconClasses"
|
||||
:active="active"
|
||||
:darkMode="darkMode"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -26,6 +27,7 @@ export default {
|
||||
props: {
|
||||
name: { type: String, required: true },
|
||||
active: { type: Boolean, default: false },
|
||||
darkMode: { type: Boolean, default: false },
|
||||
size: {
|
||||
type: String,
|
||||
required: true,
|
||||
|
||||
@ -1,15 +1,30 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { uicolors } from 'src/utils/colors';
|
||||
|
||||
export default {
|
||||
name: 'IconBase',
|
||||
props: ['active'],
|
||||
props: {
|
||||
active: Boolean,
|
||||
darkMode: Boolean,
|
||||
},
|
||||
computed: {
|
||||
lightColor() {
|
||||
return this.active ? uicolors.gray['600'] : uicolors.gray['400'];
|
||||
lightColor(): string {
|
||||
const activeGray = this.darkMode
|
||||
? uicolors.gray['500']
|
||||
: uicolors.gray['600'];
|
||||
const passiveGray = this.darkMode
|
||||
? uicolors.gray['700']
|
||||
: uicolors.gray['400'];
|
||||
return this.active ? activeGray : passiveGray;
|
||||
},
|
||||
darkColor() {
|
||||
return this.active ? uicolors.gray['800'] : uicolors.gray['600'];
|
||||
darkColor(): string {
|
||||
const activeGray = this.darkMode
|
||||
? uicolors.gray['200']
|
||||
: uicolors.gray['800'];
|
||||
const passiveGray = this.darkMode
|
||||
? uicolors.gray['500']
|
||||
: uicolors.gray['600'];
|
||||
return this.active ? activeGray : passiveGray;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
class="px-4 flex justify-between items-center h-row-largest flex-shrink-0"
|
||||
class="px-4 flex justify-between items-center h-row-largest flex-shrink-0 dark:bg-gray-875"
|
||||
:class="[
|
||||
border ? 'border-b' : '',
|
||||
border ? 'border-b dark:border-gray-800' : '',
|
||||
platform !== 'Windows' ? 'window-drag' : '',
|
||||
]"
|
||||
>
|
||||
@ -22,7 +22,7 @@
|
||||
<PageHeaderNavGroup />
|
||||
<h1
|
||||
v-if="title"
|
||||
class="text-xl font-semibold select-none whitespace-nowrap"
|
||||
class="text-xl font-semibold select-none whitespace-nowrap dark:text-white"
|
||||
>
|
||||
{{ title }}
|
||||
</h1>
|
||||
|
||||
@ -4,9 +4,11 @@
|
||||
<!-- Back Button -->
|
||||
<a
|
||||
ref="backlink"
|
||||
class="nav-link border-l border-r border-white"
|
||||
class="nav-link border-l border-r border-white dark:border-gray-850 dark:bg-gray-900"
|
||||
:class="
|
||||
historyState.back ? 'text-gray-700 cursor-pointer' : 'text-gray-400'
|
||||
historyState.back
|
||||
? 'text-gray-700 dark:text-gray-300 cursor-pointer'
|
||||
: 'text-gray-400 dark:text-gray-700'
|
||||
"
|
||||
@click="$router.back()"
|
||||
>
|
||||
@ -14,9 +16,11 @@
|
||||
</a>
|
||||
<!-- Forward Button -->
|
||||
<a
|
||||
class="nav-link rounded-md rounded-l-none"
|
||||
class="nav-link rounded-md rounded-l-none dark:bg-gray-900"
|
||||
:class="
|
||||
historyState.forward ? 'text-gray-700 cursor-pointer' : 'text-gray-400'
|
||||
historyState.forward
|
||||
? 'text-gray-700 dark:text-gray-400 cursor-pointer'
|
||||
: 'text-gray-400 dark:text-gray-700'
|
||||
"
|
||||
@click="$router.forward()"
|
||||
>
|
||||
|
||||
@ -12,15 +12,7 @@
|
||||
v-show="isOpen"
|
||||
ref="popover"
|
||||
:class="popoverClass"
|
||||
class="
|
||||
bg-white
|
||||
rounded-md
|
||||
border
|
||||
shadow-lg
|
||||
popover-container
|
||||
relative
|
||||
z-10
|
||||
"
|
||||
class="bg-white dark:bg-gray-850 rounded-md border dark:border-gray-875 shadow-lg popover-container relative z-10"
|
||||
:style="{ 'transition-delay': `${isOpen ? entryDelay : exitDelay}ms` }"
|
||||
>
|
||||
<slot name="content" :toggle-popover="togglePopover"></slot>
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Search Bar Button -->
|
||||
<Button class="px-3 py-2 rounded-r-none" :padding="false" @click="open">
|
||||
<feather-icon name="search" class="w-4 h-4 text-gray-700" />
|
||||
<Button
|
||||
class="px-3 py-2 rounded-r-none dark:bg-gray-900"
|
||||
:padding="false"
|
||||
@click="open"
|
||||
>
|
||||
<feather-icon
|
||||
name="search"
|
||||
class="w-4 h-4 text-gray-700 dark:text-gray-300"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -22,16 +29,7 @@
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
:placeholder="t`Type to search...`"
|
||||
class="
|
||||
bg-gray-100
|
||||
text-2xl
|
||||
focus:outline-none
|
||||
w-full
|
||||
placeholder-gray-500
|
||||
text-gray-900
|
||||
rounded-md
|
||||
p-3
|
||||
"
|
||||
class="bg-gray-100 text-2xl focus:outline-none w-full placeholder-gray-500 text-gray-900 rounded-md p-3"
|
||||
@keydown.up="up"
|
||||
@keydown.down="down"
|
||||
@keydown.enter="() => select()"
|
||||
@ -129,14 +127,7 @@
|
||||
<button
|
||||
v-for="sf in schemaFilters"
|
||||
:key="sf.value"
|
||||
class="
|
||||
border
|
||||
px-1
|
||||
py-0.5
|
||||
rounded-lg
|
||||
border-blue-100
|
||||
whitespace-nowrap
|
||||
"
|
||||
class="border px-1 py-0.5 rounded-lg border-blue-100 whitespace-nowrap"
|
||||
:class="{
|
||||
'bg-blue-100': searcher?.filters.schemaFilters[sf.value],
|
||||
}"
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div
|
||||
class="py-2 h-full flex justify-between flex-col bg-gray-25 relative"
|
||||
class="py-2 h-full flex justify-between flex-col bg-gray-25 dark:bg-gray-900 relative"
|
||||
:class="{
|
||||
'window-drag': platform !== 'Windows',
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<!-- Company name and DB Switcher -->
|
||||
<!-- Company name -->
|
||||
<div
|
||||
class="px-4 flex flex-row items-center justify-between mb-4"
|
||||
:class="
|
||||
@ -15,13 +15,7 @@
|
||||
>
|
||||
<h6
|
||||
data-testid="company-name"
|
||||
class="
|
||||
font-semibold
|
||||
whitespace-nowrap
|
||||
overflow-auto
|
||||
no-scrollbar
|
||||
select-none
|
||||
"
|
||||
class="font-semibold dark:text-gray-200 whitespace-nowrap overflow-auto no-scrollbar select-none"
|
||||
>
|
||||
{{ companyName }}
|
||||
</h6>
|
||||
@ -30,10 +24,10 @@
|
||||
<!-- Sidebar Items -->
|
||||
<div v-for="group in groups" :key="group.label">
|
||||
<div
|
||||
class="px-4 flex items-center cursor-pointer hover:bg-gray-100 h-10"
|
||||
class="px-4 flex items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-875 h-10"
|
||||
:class="
|
||||
isGroupActive(group) && !group.items
|
||||
? 'bg-gray-100 border-s-4 border-gray-800'
|
||||
? 'bg-gray-100 dark:bg-gray-875 border-s-4 border-gray-800 dark:border-gray-100'
|
||||
: ''
|
||||
"
|
||||
@click="routeToSidebarItem(group)"
|
||||
@ -44,11 +38,16 @@
|
||||
:size="group.iconSize || '18'"
|
||||
:height="group.iconHeight ?? 0"
|
||||
:active="!!isGroupActive(group)"
|
||||
:darkMode="darkMode"
|
||||
:class="isGroupActive(group) && !group.items ? '-ms-1' : ''"
|
||||
/>
|
||||
<div
|
||||
class="ms-2 text-lg text-gray-700"
|
||||
:class="isGroupActive(group) && !group.items && 'text-gray-900'"
|
||||
:class="
|
||||
isGroupActive(group) && !group.items
|
||||
? 'text-gray-900 dark:text-gray-25'
|
||||
: 'dark:text-gray-300'
|
||||
"
|
||||
>
|
||||
{{ group.label }}
|
||||
</div>
|
||||
@ -59,19 +58,11 @@
|
||||
<div
|
||||
v-for="item in group.items"
|
||||
:key="item.label"
|
||||
class="
|
||||
text-base
|
||||
h-10
|
||||
ps-10
|
||||
cursor-pointer
|
||||
flex
|
||||
items-center
|
||||
hover:bg-gray-100
|
||||
"
|
||||
class="text-base h-10 ps-10 cursor-pointer flex items-center hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
:class="
|
||||
isItemActive(item)
|
||||
? 'bg-gray-100 text-gray-900 border-s-4 border-gray-800'
|
||||
: 'text-gray-700'
|
||||
? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 border-s-4 border-gray-800 dark:border-gray-100'
|
||||
: 'text-gray-700 dark:text-gray-400'
|
||||
"
|
||||
@click="routeToSidebarItem(item)"
|
||||
>
|
||||
@ -83,16 +74,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Issue and App Version -->
|
||||
<!-- Report Issue, DB Switcher and Darkmode Switcher -->
|
||||
<div class="window-no-drag flex flex-col gap-2 py-2 px-4">
|
||||
<button
|
||||
class="
|
||||
flex
|
||||
text-sm text-gray-600
|
||||
hover:text-gray-800
|
||||
gap-1
|
||||
items-center
|
||||
"
|
||||
class="flex text-sm text-gray-600 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-400 gap-1 items-center"
|
||||
@click="$emit('toggle-darkmode')"
|
||||
>
|
||||
<feather-icon :name="darkMode?'sun':'moon'" class="h-4 w-4 flex-shrink-0" />
|
||||
<p>
|
||||
{{ t`Dark Mode` }}
|
||||
</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex text-sm text-gray-600 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-400 gap-1 items-center"
|
||||
@click="openDocumentation"
|
||||
>
|
||||
<feather-icon name="help-circle" class="h-4 w-4 flex-shrink-0" />
|
||||
@ -102,13 +97,7 @@
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="
|
||||
flex
|
||||
text-sm text-gray-600
|
||||
hover:text-gray-800
|
||||
gap-1
|
||||
items-center
|
||||
"
|
||||
class="flex text-sm text-gray-600 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-400 gap-1 items-center"
|
||||
@click="viewShortcuts = true"
|
||||
>
|
||||
<feather-icon name="command" class="h-4 w-4 flex-shrink-0" />
|
||||
@ -117,13 +106,7 @@
|
||||
|
||||
<button
|
||||
data-testid="change-db"
|
||||
class="
|
||||
flex
|
||||
text-sm text-gray-600
|
||||
hover:text-gray-800
|
||||
gap-1
|
||||
items-center
|
||||
"
|
||||
class="flex text-sm text-gray-600 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-400 gap-1 items-center"
|
||||
@click="$emit('change-db-file')"
|
||||
>
|
||||
<feather-icon name="database" class="h-4 w-4 flex-shrink-0" />
|
||||
@ -131,13 +114,7 @@
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="
|
||||
flex
|
||||
text-sm text-gray-600
|
||||
hover:text-gray-800
|
||||
gap-1
|
||||
items-center
|
||||
"
|
||||
class="flex text-sm text-gray-600 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-400 gap-1 items-center"
|
||||
@click="() => reportIssue()"
|
||||
>
|
||||
<feather-icon name="flag" class="h-4 w-4 flex-shrink-0" />
|
||||
@ -158,17 +135,7 @@
|
||||
|
||||
<!-- Hide Sidebar Button -->
|
||||
<button
|
||||
class="
|
||||
absolute
|
||||
bottom-0
|
||||
end-0
|
||||
text-gray-600
|
||||
hover:bg-gray-100
|
||||
rounded
|
||||
p-1
|
||||
m-4
|
||||
rtl-rotate-180
|
||||
"
|
||||
class="absolute bottom-0 end-0 text-gray-600 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-875 rounded p-1 m-4 rtl-rotate-180"
|
||||
@click="() => toggleSidebar()"
|
||||
>
|
||||
<feather-icon name="chevrons-left" class="w-4 h-4" />
|
||||
@ -201,7 +168,10 @@ export default defineComponent({
|
||||
Modal,
|
||||
ShortcutsHelper,
|
||||
},
|
||||
emits: ['change-db-file'],
|
||||
props: {
|
||||
darkMode: Boolean,
|
||||
},
|
||||
emits: ['change-db-file', 'toggle-darkmode'],
|
||||
setup() {
|
||||
return {
|
||||
languageDirection: inject(languageDirectionKey),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="window-drag flex items-center border-b text-gray-900 border-gray-100"
|
||||
class="window-drag flex items-center border-b dark:bg-gray-900 text-gray-900 dark:text-gray-100 border-gray-100 dark:border-gray-800"
|
||||
style="height: 28px"
|
||||
>
|
||||
<Fb class="ms-2" />
|
||||
|
||||
@ -2,20 +2,26 @@
|
||||
<div>
|
||||
<!-- Title and Period Selector -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="font-semibold text-base">{{ t`Cashflow` }}</div>
|
||||
<div class="font-semibold text-base dark:text-white">
|
||||
{{ t`Cashflow` }}
|
||||
</div>
|
||||
|
||||
<!-- Chart Legend -->
|
||||
<div v-if="hasData" class="flex text-base gap-8">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 rounded-sm inline-block bg-blue-500" />
|
||||
<span class="text-gray-900">{{ t`Inflow` }}</span>
|
||||
<span
|
||||
class="w-3 h-3 rounded-sm inline-block bg-blue-500 dark:bg-blue-600"
|
||||
/>
|
||||
<span class="text-gray-900 dark:text-gray-25">{{ t`Inflow` }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 rounded-sm inline-block bg-pink-500" />
|
||||
<span class="text-gray-900">{{ t`Outflow` }}</span>
|
||||
<span
|
||||
class="w-3 h-3 rounded-sm inline-block bg-pink-500 dark:bg-pink-600"
|
||||
/>
|
||||
<span class="text-gray-900 dark:text-gray-25">{{ t`Outflow` }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="w-16 h-5 bg-gray-200 rounded" />
|
||||
<div v-else class="w-16 h-5 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
|
||||
<PeriodSelector
|
||||
v-if="hasData"
|
||||
@ -23,7 +29,7 @@
|
||||
:options="periodOptions"
|
||||
@change="(value) => (period = value)"
|
||||
/>
|
||||
<div v-else class="w-20 h-5 bg-gray-200 rounded" />
|
||||
<div v-else class="w-20 h-5 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
</div>
|
||||
|
||||
<!-- Line Chart -->
|
||||
@ -32,6 +38,8 @@
|
||||
class="mt-4"
|
||||
:aspect-ratio="4.15"
|
||||
:colors="chartData.colors"
|
||||
:gridColor="chartData.gridColor"
|
||||
:fontColor="chartData.fontColor"
|
||||
:points="chartData.points"
|
||||
:x-labels="chartData.xLabels"
|
||||
:format="chartData.format"
|
||||
@ -68,6 +76,9 @@ export default defineComponent({
|
||||
PeriodSelector,
|
||||
LineChart,
|
||||
},
|
||||
props: {
|
||||
darkMode: Boolean,
|
||||
},
|
||||
extends: DashboardChartBase,
|
||||
data: () => ({
|
||||
data: [] as { inflow: number; outflow: number; yearmonth: string }[],
|
||||
@ -78,10 +89,16 @@ export default defineComponent({
|
||||
computed: {
|
||||
chartData() {
|
||||
let data = this.data;
|
||||
let colors = [uicolors.blue['500'], uicolors.pink['500']];
|
||||
let colors = [
|
||||
uicolors.blue[this.darkMode ? '600' : '500'],
|
||||
uicolors.pink[this.darkMode ? '600' : '500'],
|
||||
];
|
||||
if (!this.hasData) {
|
||||
data = dummyData;
|
||||
colors = [uicolors.gray['200'], uicolors.gray['100']];
|
||||
colors = [
|
||||
this.darkMode ? uicolors.gray['700'] : uicolors.gray['200'],
|
||||
this.darkMode ? uicolors.gray['800'] : uicolors.gray['100'],
|
||||
];
|
||||
}
|
||||
|
||||
const xLabels = data.map((cf) => cf.yearmonth);
|
||||
@ -91,7 +108,16 @@ export default defineComponent({
|
||||
|
||||
const format = (value: number) => fyo.format(value ?? 0, 'Currency');
|
||||
const yMax = getYMax(points);
|
||||
return { points, xLabels, colors, format, yMax, formatX: formatXLabels };
|
||||
return {
|
||||
points,
|
||||
xLabels,
|
||||
colors,
|
||||
format,
|
||||
yMax,
|
||||
formatX: formatXLabels,
|
||||
gridColor: this.darkMode ? 'rgba(200, 200, 200, 0.2)' : undefined,
|
||||
fontColor: this.darkMode ? uicolors.gray['400'] : undefined,
|
||||
};
|
||||
},
|
||||
},
|
||||
async activated() {
|
||||
|
||||
@ -2,14 +2,7 @@
|
||||
<div class="h-screen" style="width: var(--w-desk)">
|
||||
<PageHeader :title="t`Dashboard`">
|
||||
<div
|
||||
class="
|
||||
border
|
||||
rounded
|
||||
bg-gray-50
|
||||
focus-within:bg-gray-100
|
||||
flex
|
||||
items-center
|
||||
"
|
||||
class="border dark:border-gray-900 rounded bg-gray-50 dark:bg-gray-890 focus-within:bg-gray-100 dark:focus-within:bg-gray-900 flex items-center"
|
||||
>
|
||||
<PeriodSelector
|
||||
class="px-3"
|
||||
@ -21,43 +14,48 @@
|
||||
</PageHeader>
|
||||
|
||||
<div
|
||||
class="no-scrollbar overflow-auto"
|
||||
class="no-scrollbar overflow-auto dark:bg-gray-875"
|
||||
style="height: calc(100vh - var(--h-row-largest) - 1px)"
|
||||
>
|
||||
<div style="min-width: var(--w-desk-fixed)" class="overflow-auto">
|
||||
<Cashflow
|
||||
class="p-4"
|
||||
:common-period="period"
|
||||
:darkMode="darkMode"
|
||||
@period-change="handlePeriodChange"
|
||||
/>
|
||||
<hr />
|
||||
<hr class="dark:border-gray-800" />
|
||||
<div class="flex w-full">
|
||||
<UnpaidInvoices
|
||||
:schema-name="'SalesInvoice'"
|
||||
:common-period="period"
|
||||
class="border-e"
|
||||
:darkMode="darkMode"
|
||||
class="border-e dark:border-gray-800"
|
||||
@period-change="handlePeriodChange"
|
||||
/>
|
||||
<UnpaidInvoices
|
||||
:schema-name="'PurchaseInvoice'"
|
||||
:common-period="period"
|
||||
:darkMode="darkMode"
|
||||
@period-change="handlePeriodChange"
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
<hr class="dark:border-gray-800" />
|
||||
<div class="flex">
|
||||
<ProfitAndLoss
|
||||
class="w-full p-4 border-e"
|
||||
class="w-full p-4 border-e dark:border-gray-800"
|
||||
:common-period="period"
|
||||
:darkMode="darkMode"
|
||||
@period-change="handlePeriodChange"
|
||||
/>
|
||||
<Expenses
|
||||
class="w-full p-4"
|
||||
:common-period="period"
|
||||
:darkMode="darkMode"
|
||||
@period-change="handlePeriodChange"
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
<hr class="dark:border-gray-800" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -82,6 +80,9 @@ export default {
|
||||
PeriodSelector,
|
||||
UnpaidInvoices,
|
||||
},
|
||||
props: {
|
||||
darkMode: Boolean,
|
||||
},
|
||||
data() {
|
||||
return { period: 'This Year' };
|
||||
},
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
<div v-show="hasData" class="flex relative">
|
||||
<!-- Chart Legend -->
|
||||
<div class="w-1/2 flex flex-col gap-4 justify-center">
|
||||
<div class="w-1/2 flex flex-col gap-4 justify-center dark:text-gray-25">
|
||||
<!-- Ledgend Item -->
|
||||
<div
|
||||
v-for="(d, i) in expenses"
|
||||
@ -36,6 +36,7 @@
|
||||
:text-offset-x="6.5"
|
||||
:value-formatter="(value: number) => fyo.format(value, 'Currency')"
|
||||
:total-label="t`Total Spending`"
|
||||
:darkMode="darkMode"
|
||||
@change="(value: number) => (active = value)"
|
||||
/>
|
||||
</div>
|
||||
@ -45,7 +46,7 @@
|
||||
v-if="expenses.length === 0"
|
||||
class="flex-1 w-full h-full flex-center my-20"
|
||||
>
|
||||
<span class="text-base text-gray-600">
|
||||
<span class="text-base text-gray-600 dark:text-gray-500">
|
||||
{{ t`No expenses in this period` }}
|
||||
</span>
|
||||
</div>
|
||||
@ -64,8 +65,8 @@ import PeriodSelector from './PeriodSelector.vue';
|
||||
import SectionHeader from './SectionHeader.vue';
|
||||
|
||||
// Linting broken in this file cause of `extends: ...`
|
||||
/*
|
||||
eslint-disable @typescript-eslint/no-unsafe-argument,
|
||||
/*
|
||||
eslint-disable @typescript-eslint/no-unsafe-argument,
|
||||
@typescript-eslint/no-unsafe-return,
|
||||
@typescript-eslint/restrict-plus-operands
|
||||
*/
|
||||
@ -76,14 +77,17 @@ export default defineComponent({
|
||||
PeriodSelector,
|
||||
SectionHeader,
|
||||
},
|
||||
props: {
|
||||
darkMode: Boolean,
|
||||
},
|
||||
extends: DashboardChartBase,
|
||||
data: () => ({
|
||||
active: null as null | number,
|
||||
expenses: [] as {
|
||||
account: string;
|
||||
total: number;
|
||||
color: string;
|
||||
class: string;
|
||||
color: { color: string; darkColor: string };
|
||||
class: { class: string; darkClass: string };
|
||||
}[],
|
||||
}),
|
||||
computed: {
|
||||
@ -93,7 +97,11 @@ export default defineComponent({
|
||||
hasData(): boolean {
|
||||
return this.expenses.length > 0;
|
||||
},
|
||||
sectors(): { color: string; label: string; value: number }[] {
|
||||
sectors(): {
|
||||
color: { color: string; darkColor: string };
|
||||
label: string;
|
||||
value: number;
|
||||
}[] {
|
||||
return this.expenses.map(({ account, color, total }) => ({
|
||||
color,
|
||||
label: truncate(account, { length: 21 }),
|
||||
@ -111,7 +119,6 @@ export default defineComponent({
|
||||
fromDate.toISO(),
|
||||
toDate.toISO()
|
||||
);
|
||||
|
||||
const shades = [
|
||||
{ class: 'bg-pink-500', hex: uicolors.pink['500'] },
|
||||
{ class: 'bg-pink-400', hex: uicolors.pink['400'] },
|
||||
@ -120,13 +127,25 @@ export default defineComponent({
|
||||
{ class: 'bg-pink-100', hex: uicolors.pink['100'] },
|
||||
];
|
||||
|
||||
const darkshades = [
|
||||
{ class: 'bg-pink-600', hex: uicolors.pink['600'] },
|
||||
{ class: 'bg-pink-500', hex: uicolors.pink['500'] },
|
||||
{ class: 'bg-pink-400', hex: uicolors.pink['400'] },
|
||||
{ class: 'bg-pink-300', hex: uicolors.pink['300'] },
|
||||
{
|
||||
class: 'bg-pink-200 dark:bg-opacity-80',
|
||||
hex: uicolors.pink['200'] + 'CC',
|
||||
},
|
||||
];
|
||||
|
||||
this.expenses = topExpenses
|
||||
.filter((e) => e.total > 0)
|
||||
.map((d, i) => {
|
||||
return {
|
||||
...d,
|
||||
color: shades[i].hex,
|
||||
class: shades[i].class,
|
||||
account: d.account,
|
||||
total: d.total,
|
||||
color: { color: shades[i].hex, darkColor: darkshades[i].hex },
|
||||
class: { class: shades[i].class, darkClass: darkshades[i].class },
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
@ -9,19 +9,12 @@
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
text-sm
|
||||
flex
|
||||
focus:outline-none
|
||||
hover:text-gray-800
|
||||
focus:text-gray-800
|
||||
items-center
|
||||
py-1
|
||||
rounded-md
|
||||
leading-relaxed
|
||||
cursor-pointer
|
||||
class="text-sm flex focus:outline-none hover:text-gray-800 dark:hover:text-gray-100 focus:text-gray-800 dark:focus:text-gray-100 items-center py-1 rounded-md leading-relaxed cursor-pointer"
|
||||
:class="
|
||||
!value
|
||||
? 'text-gray-600 dark:text-gray-500'
|
||||
: 'text-gray-900 dark:text-gray-300'
|
||||
"
|
||||
:class="!value ? 'text-gray-600' : 'text-gray-900'"
|
||||
tabindex="0"
|
||||
@click="toggleDropdown()"
|
||||
@keydown.down="highlightItemDown"
|
||||
|
||||
@ -15,6 +15,8 @@
|
||||
class="mt-4"
|
||||
:aspect-ratio="2.05"
|
||||
:colors="chartData.colors"
|
||||
:gridColor="chartData.gridColor"
|
||||
:fontColor="chartData.fontColor"
|
||||
:points="chartData.points"
|
||||
:x-labels="chartData.xLabels"
|
||||
:format="chartData.format"
|
||||
@ -23,7 +25,7 @@
|
||||
:y-min="chartData.yMin"
|
||||
/>
|
||||
<div v-else class="flex-1 w-full h-full flex-center my-20">
|
||||
<span class="text-base text-gray-600">
|
||||
<span class="text-base text-gray-600 dark:text-gray-500">
|
||||
{{ t`No transactions yet` }}
|
||||
</span>
|
||||
</div>
|
||||
@ -42,8 +44,8 @@ import SectionHeader from './SectionHeader.vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
// Linting broken in this file cause of `extends: ...`
|
||||
/*
|
||||
eslint-disable @typescript-eslint/no-unsafe-argument,
|
||||
/*
|
||||
eslint-disable @typescript-eslint/no-unsafe-argument,
|
||||
@typescript-eslint/no-unsafe-return
|
||||
*/
|
||||
export default defineComponent({
|
||||
@ -53,6 +55,9 @@ export default defineComponent({
|
||||
SectionHeader,
|
||||
BarChart,
|
||||
},
|
||||
props: {
|
||||
darkMode: Boolean,
|
||||
},
|
||||
extends: DashboardChartBase,
|
||||
data: () => ({
|
||||
data: [] as { yearmonth: string; balance: number }[],
|
||||
@ -63,7 +68,10 @@ export default defineComponent({
|
||||
chartData() {
|
||||
const points = [this.data.map((d) => d.balance)];
|
||||
const colors = [
|
||||
{ positive: uicolors.blue['500'], negative: uicolors.pink['500'] },
|
||||
{
|
||||
positive: uicolors.blue[this.darkMode ? '600' : '500'],
|
||||
negative: uicolors.pink[this.darkMode ? '600' : '500'],
|
||||
},
|
||||
];
|
||||
const format = (value: number) => fyo.format(value ?? 0, 'Currency');
|
||||
const yMax = getYMax(points);
|
||||
@ -76,6 +84,9 @@ export default defineComponent({
|
||||
yMax,
|
||||
yMin,
|
||||
formatX: formatXLabels,
|
||||
gridColor: this.darkMode ? 'rgba(200, 200, 200, 0.2)' : undefined,
|
||||
fontColor: this.darkMode ? uicolors.gray['400'] : undefined,
|
||||
zeroLineColor: this.darkMode ? uicolors.gray['400'] : undefined,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex items-baseline justify-between">
|
||||
<div class="flex items-baseline justify-between dark:text-white">
|
||||
<span class="font-semibold text-base"><slot name="title"></slot></span>
|
||||
<slot name="action"></slot>
|
||||
</div>
|
||||
|
||||
@ -14,34 +14,38 @@
|
||||
<div class="flex justify-between">
|
||||
<!-- Paid -->
|
||||
<div
|
||||
class="text-sm font-medium"
|
||||
class="text-sm font-medium dark:text-gray-25"
|
||||
:class="{
|
||||
'bg-gray-200 text-gray-200 rounded': !count,
|
||||
'bg-gray-200 dark:bg-gray-700 text-gray-200 dark:text-gray-700 rounded':
|
||||
!count,
|
||||
'cursor-pointer': paidCount > 0,
|
||||
}"
|
||||
:title="paidCount > 0 ? t`View Paid Invoices` : ''"
|
||||
@click="() => routeToInvoices('paid')"
|
||||
>
|
||||
{{ fyo.format(paid, 'Currency') }}
|
||||
<span :class="{ 'text-gray-900 font-normal': count }">{{
|
||||
t`Paid`
|
||||
}}</span>
|
||||
<span
|
||||
:class="{ 'text-gray-900 dark:text-gray-200 font-normal': count }"
|
||||
>{{ t`Paid` }}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Unpaid -->
|
||||
<div
|
||||
class="text-sm font-medium"
|
||||
class="text-sm font-medium dark:text-gray-25"
|
||||
:class="{
|
||||
'bg-gray-200 text-gray-200 rounded': !count,
|
||||
'bg-gray-200 dark:bg-gray-700 text-gray-200 dark:text-gray-700 rounded':
|
||||
!count,
|
||||
'cursor-pointer': unpaidCount > 0,
|
||||
}"
|
||||
:title="unpaidCount > 0 ? t`View Unpaid Invoices` : ''"
|
||||
@click="() => routeToInvoices('unpaid')"
|
||||
>
|
||||
{{ fyo.format(unpaid, 'Currency') }}
|
||||
<span :class="{ 'text-gray-900 font-normal': count }">{{
|
||||
t`Unpaid`
|
||||
}}</span>
|
||||
<span
|
||||
:class="{ 'text-gray-900 dark:text-gray-200 font-normal': count }"
|
||||
>{{ t`Unpaid` }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -64,7 +68,7 @@
|
||||
:offset="15"
|
||||
:show="show"
|
||||
placement="top"
|
||||
class="text-sm shadow-md px-2 py-1 bg-white text-gray-900 border-s-4"
|
||||
class="text-sm shadow-md px-2 py-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white border-s-4"
|
||||
:style="{ borderColor: colors }"
|
||||
>
|
||||
<div class="flex justify-between gap-4">
|
||||
@ -110,6 +114,7 @@ export default defineComponent({
|
||||
extends: BaseDashboardChart,
|
||||
props: {
|
||||
schemaName: { type: String as PropType<string>, required: true },
|
||||
darkMode: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -144,25 +149,24 @@ export default defineComponent({
|
||||
if (this.schemaName === ModelNameEnum.SalesInvoice) {
|
||||
return 'blue';
|
||||
}
|
||||
|
||||
return 'pink';
|
||||
},
|
||||
colors(): string {
|
||||
return uicolors[this.color]['500'];
|
||||
return uicolors[this.color][this.darkMode ? '600' : '500'];
|
||||
},
|
||||
paidColor(): string {
|
||||
if (!this.hasData) {
|
||||
return 'bg-gray-400';
|
||||
return this.darkMode ? 'bg-gray-700' : 'bg-gray-400';
|
||||
}
|
||||
|
||||
return `bg-${this.color}-500`;
|
||||
return `bg-${this.color}-${this.darkMode ? '600' : '500'}`;
|
||||
},
|
||||
unpaidColor(): string {
|
||||
if (!this.hasData) {
|
||||
return 'bg-gray-200';
|
||||
return `bg-gray-${this.darkMode ? '800' : '200'}`;
|
||||
}
|
||||
|
||||
return `bg-${this.color}-200`;
|
||||
return `bg-${this.color}-${this.darkMode ? '700 bg-opacity-20' : '200'}`;
|
||||
},
|
||||
},
|
||||
async activated() {
|
||||
|
||||
@ -8,15 +8,22 @@ import { toggleSidebar } from 'src/utils/ui';
|
||||
<!-- eslint-disable vue/require-explicit-emits -->
|
||||
<Sidebar
|
||||
v-show="showSidebar"
|
||||
class="flex-shrink-0 border-e whitespace-nowrap w-sidebar"
|
||||
class="flex-shrink-0 border-e dark:border-gray-800 whitespace-nowrap w-sidebar"
|
||||
:darkMode="darkMode"
|
||||
@change-db-file="$emit('change-db-file')"
|
||||
@toggle-darkmode="$emit('toggle-darkmode')"
|
||||
/>
|
||||
</Transition>
|
||||
|
||||
<div class="flex flex-1 overflow-y-hidden bg-white">
|
||||
<div class="flex flex-1 overflow-y-hidden bg-white dark:bg-gray-875">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive>
|
||||
<component :is="Component" :key="$route.path" class="flex-1" />
|
||||
<component
|
||||
:is="Component"
|
||||
:key="$route.path"
|
||||
:darkMode="darkMode"
|
||||
class="flex-1"
|
||||
/>
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
|
||||
@ -26,6 +33,7 @@ import { toggleSidebar } from 'src/utils/ui';
|
||||
<component
|
||||
:is="Component"
|
||||
:key="route.query.schemaName + route.query.name"
|
||||
:darkMode="darkMode"
|
||||
/>
|
||||
</div>
|
||||
</Transition>
|
||||
@ -35,19 +43,7 @@ import { toggleSidebar } from 'src/utils/ui';
|
||||
<!-- Show Sidebar Button -->
|
||||
<button
|
||||
v-show="!showSidebar"
|
||||
class="
|
||||
absolute
|
||||
bottom-0
|
||||
start-0
|
||||
text-gray-600
|
||||
bg-gray-100
|
||||
rounded
|
||||
rtl-rotate-180
|
||||
p-1
|
||||
m-4
|
||||
opacity-0
|
||||
hover:opacity-100 hover:shadow-md
|
||||
"
|
||||
class="absolute bottom-0 start-0 text-gray-600 bg-gray-100 rounded rtl-rotate-180 p-1 m-4 opacity-0 hover:opacity-100 hover:shadow-md"
|
||||
@click="() => toggleSidebar()"
|
||||
>
|
||||
<feather-icon name="chevrons-right" class="w-4 h-4" />
|
||||
@ -62,7 +58,10 @@ export default defineComponent({
|
||||
components: {
|
||||
Sidebar,
|
||||
},
|
||||
emits: ['change-db-file'],
|
||||
props: {
|
||||
darkMode: Boolean,
|
||||
},
|
||||
emits: ['change-db-file', 'toggle-darkmode'],
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -11,6 +11,7 @@ import registerIpcRendererListeners from './renderer/registerIpcRendererListener
|
||||
import router from './router';
|
||||
import { stringifyCircular } from './utils';
|
||||
import { setLanguageMap } from './utils/language';
|
||||
import { setDarkMode } from './utils/theme';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
(async () => {
|
||||
@ -20,6 +21,9 @@ import { setLanguageMap } from './utils/language';
|
||||
}
|
||||
fyo.store.language = language || 'English';
|
||||
|
||||
const darkMode = fyo.config.get('darkMode') as boolean;
|
||||
setDarkMode(darkMode);
|
||||
|
||||
registerIpcRendererListeners();
|
||||
const { isDevelopment, platform, version } = await ipc.getEnv();
|
||||
|
||||
|
||||
20
src/utils/theme.ts
Normal file
20
src/utils/theme.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { fyo } from 'src/initFyo';
|
||||
|
||||
export async function toggleDarkMode(): Promise<void> {
|
||||
const darkMode = fyo.config.get('darkMode');
|
||||
if (darkMode) {
|
||||
document.documentElement.classList.remove('dark');
|
||||
fyo.config.set('darkMode', false);
|
||||
return;
|
||||
}
|
||||
document.documentElement.classList.add('dark');
|
||||
fyo.config.set('darkMode', true);
|
||||
}
|
||||
|
||||
export function setDarkMode(darkMode: boolean): void {
|
||||
if (darkMode) {
|
||||
document.documentElement.classList.add('dark');
|
||||
return;
|
||||
}
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
@ -4,6 +4,7 @@ const colors = JSON.parse(
|
||||
);
|
||||
|
||||
module.exports = {
|
||||
darkMode: 'class',
|
||||
purge: false,
|
||||
theme: {
|
||||
fontFamily: {
|
||||
@ -66,7 +67,14 @@ module.exports = {
|
||||
},
|
||||
variants: {
|
||||
margin: ['responsive', 'first', 'last', 'hover', 'focus'],
|
||||
backgroundColor: ['responsive', 'first', 'hover', 'focus', 'focus-within'],
|
||||
backgroundColor: [
|
||||
'responsive',
|
||||
'first',
|
||||
'hover',
|
||||
'focus',
|
||||
'focus-within',
|
||||
'dark',
|
||||
],
|
||||
display: ['group-hover'],
|
||||
},
|
||||
plugins: [require('tailwindcss-rtl')],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user