accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-12-22 02:49:03 +00:00
Code Issues Releases Activity

feat: windowstitlebar, sidebar and Dashboard changed to darkmode

Browse Source
This commit is contained in:
pu-raihan 2024-03-23 20:42:55 +05:30
parent 2119c301d7
commit e131c560b9
28 changed files with 310 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
colors.json
View File

@ -11,6 +11,9 @@
"600": "#7C7C7C",
"700": "#525252",
"800": "#383838",
"850": "#282828",
"875": "#212121",
"890": "#1C1C1C",
"900": "#171717"
},
"red": {

1
fyo/core/types.ts
View File

@ -36,6 +36,7 @@ export type ConfigMap = {
lastSelectedFilePath: null | string;
language: string
deviceId: string
darkMode: boolean
};
export interface ConfigFile {

12
src/App.vue
View File

@ -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');
},
},
});

8
src/components/Button.vue
View File

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

2
src/components/Charts/BarChart.vue
View File

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

16
src/components/Charts/DonutChart.vue
View File

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

2
src/components/Charts/LineChart.vue
View File

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

36
src/components/Dropdown.vue
View File

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

32
src/components/FilterDropdown.vue
View File

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

2
src/components/Icon.vue
View File

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

29
src/components/Icons/base.vue
View File

@ -1,15 +1,30 @@
<script>
<script lang="ts">
import { uicolors } from 'src/utils/colors';
export default {
name: 'IconBase',
props: ['active'],
computed: {
lightColor() {
return this.active ? uicolors.gray['600'] : uicolors.gray['400'];
props: {
active: Boolean,
darkMode: Boolean,
},
darkColor() {
return this.active ? uicolors.gray['800'] : uicolors.gray['600'];
computed: {
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(): 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;
},
},
};

6
src/components/PageHeader.vue
View File

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

12
src/components/PageHeaderNavGroup.vue
View File

@ -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()"
>

10
src/components/Popover.vue
View File

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

31
src/components/SearchBar.vue
View File

@ -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],
}"

98
src/components/Sidebar.vue
View File

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

2
src/components/WindowsTitleBar.vue
View File

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

46
src/pages/Dashboard/Cashflow.vue
View File

@ -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() {

29
src/pages/Dashboard/Dashboard.vue
View File

@ -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' };
},

37
src/pages/Dashboard/Expenses.vue
View File

@ -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>
@ -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 },
};
});
},

17
src/pages/Dashboard/PeriodSelector.vue
View File

@ -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
src/pages/Dashboard/ProfitAndLoss.vue
View File

@ -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>
@ -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,
};
},
},

2
src/pages/Dashboard/SectionHeader.vue
View File

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

38
src/pages/Dashboard/UnpaidInvoices.vue
View File

@ -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() {

33
src/pages/Desk.vue
View File

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

4
src/renderer.ts
View File

@ -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
View 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');
}

10
tailwind.config.js
View File

@ -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')],