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: toggler removed from sidebar and added a field to enable dark mode in Settings > System > Theme

Browse Source
This commit is contained in:
pu-raihan 2024-08-20 18:17:46 +05:30
parent f15b1cfe13
commit a38073835d
11 changed files with 317 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
fyo/core/types.ts
View File

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

10
schemas/core/SystemSettings.json
View File

@ -117,6 +117,14 @@
"fieldtype": "Data",
"readOnly": true,
"hidden": true
},
{
"fieldname": "darkMode",
"label": "Dark mode",
"fieldtype": "Check",
"default": "false",
"description": "Sets the theme of the app.",
"section": "Theme"
}
],
"quickEditFields": [
@ -126,4 +134,4 @@
"displayPrecision",
"hideGetStarted"
]
}
}

11
src/App.vue
View File

@ -23,7 +23,6 @@
class="flex-1"
:darkMode="darkMode"
@change-db-file="showDbSelector"
@toggle-darkmode="toggleDMode"
/>
<DatabaseSelector
v-if="activeScreen === 'DatabaseSelector'"
@ -70,7 +69,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';
import { setDarkMode } from 'src/utils/theme';
enum Screen {
Desk = 'Desk',
@ -136,7 +135,9 @@ export default defineComponent({
},
async mounted() {
await this.setInitialScreen();
this.darkMode = fyo.config.get('darkMode') as boolean;
const { darkMode } = await fyo.doc.getDoc('SystemSettings');
setDarkMode(!!darkMode);
this.darkMode = !!darkMode;
},
methods: {
async setInitialScreen(): Promise<void> {
@ -260,10 +261,6 @@ export default defineComponent({
this.searcher = null;
this.companyName = '';
},
toggleDMode(): void {
toggleDarkMode();
this.darkMode = fyo.config.get('darkMode');
},
},
});

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

@ -1,33 +1,69 @@
<template>
<div>
<svg ref="chartSvg" :viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`" xmlns="http://www.w3.org/2000/svg">
<svg
ref="chartSvg"
:viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`"
xmlns="http://www.w3.org/2000/svg"
>
<!-- x Grid Lines -->
<path v-if="drawXGrid" :d="xGrid" :stroke="gridColor" :stroke-width="gridThickness" stroke-linecap="round"
fill="transparent" />
<path
v-if="drawXGrid"
:d="xGrid"
:stroke="gridColor"
:stroke-width="gridThickness"
stroke-linecap="round"
fill="transparent"
/>
<!-- zero line -->
<path v-if="drawZeroLine" :d="zLine" :stroke="zeroLineColor" :stroke-width="gridThickness" stroke-linecap="round"
fill="transparent" />
<path
v-if="drawZeroLine"
:d="zLine"
:stroke="zeroLineColor"
:stroke-width="gridThickness"
stroke-linecap="round"
fill="transparent"
/>
<!-- Axis -->
<path v-if="drawAxis" :d="axis" :stroke-width="axisThickness" :stroke="axisColor" fill="transparent" />
<path
v-if="drawAxis"
:d="axis"
:stroke-width="axisThickness"
:stroke="axisColor"
fill="transparent"
/>
<!-- x Labels -->
<template v-if="xLabels.length > 0">
<text v-for="(i, j) in count" :key="j + '-xlabels'" :style="fontStyle" :y="viewBoxHeight -
axisPadding +
yLabelOffset +
fontStyle.fontSize / 2 -
bottom
" :x="xs[i - 1]" text-anchor="middle">
<text
v-for="(i, j) in count"
:key="j + '-xlabels'"
:style="fontStyle"
:y="
viewBoxHeight -
axisPadding +
yLabelOffset +
fontStyle.fontSize / 2 -
bottom
"
:x="xs[i - 1]"
text-anchor="middle"
>
{{ j % skipXLabel === 0 ? formatX(xLabels[i - 1] || '') : '' }}
</text>
</template>
<!-- y Labels -->
<template v-if="yLabelDivisions > 0">
<text v-for="(i, j) in yLabelDivisions + 1" :key="j + '-ylabels'" :style="fontStyle" :y="yScalerLocation(i - 1)"
:x="axisPadding - xLabelOffset + left" text-anchor="end">
<text
v-for="(i, j) in yLabelDivisions + 1"
:key="j + '-ylabels'"
:style="fontStyle"
:y="yScalerLocation(i - 1)"
:x="axisPadding - xLabelOffset + left"
text-anchor="end"
>
{{ yScalerValue(i - 1) }}
</text>
</template>
@ -37,21 +73,64 @@
<rect x="0" y="0" :width="viewBoxWidth" :height="z" />
</clipPath>
<clipPath id="negative-rect-clip">
<rect x="0" :y="z" :width="viewBoxWidth" :height="viewBoxHeight - z" />
<rect
x="0"
:y="z"
:width="viewBoxWidth"
:height="viewBoxHeight - z"
/>
</clipPath>
</defs>
<rect v-for="(rec, i) in positiveRects" :key="i + 'prec'" :rx="radius" :ry="radius" :x="rec.x" :y="rec.y"
:width="width" :height="rec.height" :fill="rec.color" clip-path="url(#positive-rect-clip)"
@mouseenter="() => create(rec.xi, rec.yi)" @mousemove="update" @mouseleave="destroy" />
<rect
v-for="(rec, i) in positiveRects"
:key="i + 'prec'"
:rx="radius"
:ry="radius"
:x="rec.x"
:y="rec.y"
:width="width"
:height="rec.height"
:fill="rec.color"
clip-path="url(#positive-rect-clip)"
@mouseenter="() => create(rec.xi, rec.yi)"
@mousemove="update"
@mouseleave="destroy"
/>
<rect v-for="(rec, i) in negativeRects" :key="i + 'nrec'" :rx="radius" :ry="radius" :x="rec.x" :y="rec.y"
:width="width" :height="rec.height" :fill="rec.color" clip-path="url(#negative-rect-clip)"
@mouseenter="() => create(rec.xi, rec.yi)" @mousemove="update" @mouseleave="destroy" />
<rect
v-for="(rec, i) in negativeRects"
:key="i + 'nrec'"
:rx="radius"
:ry="radius"
:x="rec.x"
:y="rec.y"
:width="width"
:height="rec.height"
:fill="rec.color"
clip-path="url(#negative-rect-clip)"
@mouseenter="() => create(rec.xi, rec.yi)"
@mousemove="update"
@mouseleave="destroy"
/>
</svg>
<Tooltip ref="tooltip" :offset="15" placement="top"
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 }">
<Tooltip
ref="tooltip"
:offset="15"
placement="top"
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">
<p>
{{ xi > -1 ? formatX(xLabels[xi]) : '' }}
@ -127,7 +206,7 @@ export default {
this.padding +
this.left +
(i * (this.viewBoxWidth - this.left - 2 * this.padding)) /
(this.count - 1 || 1) // The "or" one (1) prevents accidentally dividing by 0
(this.count - 1 || 1) // The "or" one (1) prevents accidentally dividing by 0
);
},
z() {
@ -146,8 +225,9 @@ export default {
return Math.max(...this.points.flat());
},
axis() {
return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${this.viewBoxHeight - this.axisPadding - this.bottom
} H ${this.viewBoxWidth - this.axisPadding}`;
return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${
this.viewBoxHeight - this.axisPadding - this.bottom
} H ${this.viewBoxWidth - this.axisPadding}`;
},
padding() {
return this.axisPadding + this.pointsPadding;
@ -235,7 +315,7 @@ export default {
return (
((this.yLabelDivisions - i) *
(this.viewBoxHeight - this.padding * 2 - this.bottom)) /
this.yLabelDivisions +
this.yLabelDivisions +
this.padding
);
},

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

@ -1,30 +1,60 @@
<template>
<div>
<svg ref="chartSvg" :viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`" xmlns="http://www.w3.org/2000/svg"
@mousemove="update">
<svg
ref="chartSvg"
:viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`"
xmlns="http://www.w3.org/2000/svg"
@mousemove="update"
>
<!-- x Grid Lines -->
<path v-if="drawXGrid" :d="xGrid" :stroke="gridColor" :stroke-width="gridThickness" stroke-linecap="round"
fill="transparent" />
<path
v-if="drawXGrid"
:d="xGrid"
:stroke="gridColor"
:stroke-width="gridThickness"
stroke-linecap="round"
fill="transparent"
/>
<!-- Axis -->
<path v-if="drawAxis" :d="axis" :stroke-width="axisThickness" :stroke="axisColor" fill="transparent" />
<path
v-if="drawAxis"
:d="axis"
:stroke-width="axisThickness"
:stroke="axisColor"
fill="transparent"
/>
<!-- x Labels -->
<template v-if="drawLabels && xLabels.length > 0">
<text v-for="(i, j) in count" :key="j + '-xlabels'" :style="fontStyle" :y="viewBoxHeight -
axisPadding +
yLabelOffset +
fontStyle.fontSize / 2 -
bottom
" :x="xs[i - 1]" text-anchor="middle">
<text
v-for="(i, j) in count"
:key="j + '-xlabels'"
:style="fontStyle"
:y="
viewBoxHeight -
axisPadding +
yLabelOffset +
fontStyle.fontSize / 2 -
bottom
"
:x="xs[i - 1]"
text-anchor="middle"
>
{{ formatX(xLabels[i - 1] || '') }}
</text>
</template>
<!-- y Labels -->
<template v-if="drawLabels && yLabelDivisions > 0">
<text v-for="(i, j) in yLabelDivisions + 1" :key="j + '-ylabels'" :style="fontStyle" :y="yScalerLocation(i - 1)"
:x="axisPadding - xLabelOffset + left" text-anchor="end">
<text
v-for="(i, j) in yLabelDivisions + 1"
:key="j + '-ylabels'"
:style="fontStyle"
:y="yScalerLocation(i - 1)"
:x="axisPadding - xLabelOffset + left"
text-anchor="end"
>
{{ yScalerValue(i - 1) }}
</text>
</template>
@ -38,28 +68,68 @@
</linearGradient>
<mask v-for="(i, j) in num" :id="'rect-mask-' + i" :key="j + '-mask'">
<rect x="0" :y="gradY(j)" :height="viewBoxHeight - gradY(j)" width="100%" fill="url('#grad')" />
<rect
x="0"
:y="gradY(j)"
:height="viewBoxHeight - gradY(j)"
width="100%"
fill="url('#grad')"
/>
</mask>
</defs>
<g v-for="(i, j) in num" :key="j + '-gpath'">
<!-- Gradient Paths -->
<path stroke-linejoin="round" :d="getGradLine(i - 1)" :stroke-width="thickness" stroke-linecap="round"
:fill="colors[i - 1] || getRandomColor()" :mask="`url('#rect-mask-${i}')`" />
<path
stroke-linejoin="round"
:d="getGradLine(i - 1)"
:stroke-width="thickness"
stroke-linecap="round"
:fill="colors[i - 1] || getRandomColor()"
:mask="`url('#rect-mask-${i}')`"
/>
<!-- Lines -->
<path stroke-linejoin="round" :d="getLine(i - 1)" :stroke="colors[i - 1] || getRandomColor()"
:stroke-width="thickness" stroke-linecap="round" fill="transparent" />
<path
stroke-linejoin="round"
:d="getLine(i - 1)"
:stroke="colors[i - 1] || getRandomColor()"
:stroke-width="thickness"
stroke-linecap="round"
fill="transparent"
/>
</g>
<!-- Tooltip Reference -->
<circle v-if="xi > -1 && yi > -1" r="12" :cx="cx" :cy="cy" :fill="colors[yi]" style="
<circle
v-if="xi > -1 && yi > -1"
r="12"
:cx="cx"
:cy="cy"
:fill="colors[yi]"
style="
filter: brightness(115%) drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25));
" />
"
/>
</svg>
<Tooltip v-if="showTooltip" ref="tooltip" :offset="15" placement="top"
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] }">
<Tooltip
v-if="showTooltip"
ref="tooltip"
:offset="15"
placement="top"
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">
<p>
{{ xi > -1 ? formatX(xLabels[xi]) : '' }}
@ -133,7 +203,7 @@ export default {
this.padding +
this.left +
(i * (this.viewBoxWidth - this.left - 2 * this.padding)) /
(this.count - 1 || 1) // The "or" one (1) prevents accidentally dividing by 0
(this.count - 1 || 1) // The "or" one (1) prevents accidentally dividing by 0
);
},
ys() {
@ -144,7 +214,7 @@ export default {
(p) =>
this.padding +
(1 - (p - min) / (max - min)) *
(this.viewBoxHeight - 2 * this.padding - this.bottom)
(this.viewBoxHeight - 2 * this.padding - this.bottom)
)
);
},
@ -158,8 +228,9 @@ export default {
return Math.max(...this.points.flat());
},
axis() {
return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${this.viewBoxHeight - this.axisPadding - this.bottom
} H ${this.viewBoxWidth - this.axisPadding}`;
return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${
this.viewBoxHeight - this.axisPadding - this.bottom
} H ${this.viewBoxWidth - this.axisPadding}`;
},
padding() {
return this.axisPadding + this.pointsPadding;
@ -200,7 +271,7 @@ export default {
return (
((this.yLabelDivisions - i) *
(this.viewBoxHeight - this.padding * 2 - this.bottom)) /
this.yLabelDivisions +
this.yLabelDivisions +
this.padding
);
},

70
src/components/Controls/AttachImage.vue
View File

@ -1,26 +1,68 @@
<template>
<div class="relative bg-white dark:bg-gray-900 border dark:border-gray-800 flex-center overflow-hidden group" :class="{
rounded: size === 'form',
'w-20 h-20 rounded-full': size !== 'small' && size !== 'form',
'w-12 h-12 rounded-full': size === 'small',
}" :title="df?.label" :style="imageSizeStyle">
<div
class="
relative
bg-white
dark:bg-gray-900
border
dark:border-gray-800
flex-center
overflow-hidden
group
"
:class="{
rounded: size === 'form',
'w-20 h-20 rounded-full': size !== 'small' && size !== 'form',
'w-12 h-12 rounded-full': size === 'small',
}"
:title="df?.label"
:style="imageSizeStyle"
>
<img v-if="value" :src="value" />
<div v-else :class="[!isReadOnly ? 'group-hover:opacity-90' : '']">
<div v-if="letterPlaceholder"
class="flex h-full items-center justify-center text-gray-400 dark:text-gray-600 font-semibold w-full text-4xl select-none">
<div
v-if="letterPlaceholder"
class="
flex
h-full
items-center
justify-center
text-gray-400
dark:text-gray-600
font-semibold
w-full
text-4xl
select-none
"
>
{{ letterPlaceholder }}
</div>
<svg v-else class="w-6 h-6 text-gray-300 dark:text-gray-600" viewBox="0 0 24 21"
xmlns="http://www.w3.org/2000/svg">
<svg
v-else
class="w-6 h-6 text-gray-300 dark:text-gray-600"
viewBox="0 0 24 21"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 3h-4l-2-3H9L7 3H3a3 3 0 00-3 3v12a3 3 0 003 3h18a3 3 0 003-3V6a3 3 0 00-3-3zm-9 14a5 5 0 110-10 5 5 0 010 10z"
fill="currentColor" fill-rule="nonzero" />
fill="currentColor"
fill-rule="nonzero"
/>
</svg>
</div>
<div class="hidden w-full h-full absolute justify-center items-end" :class="[!isReadOnly ? 'group-hover:flex' : '']"
style="background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px)">
<button class="bg-gray-100 dark:bg-gray-800 p-0.5 rounded mb-1" @click="handleClick">
<FeatherIcon :name="shouldClear ? 'x' : 'upload'" class="w-4 h-4 text-gray-600 dark:text-gray-400" />
<div
class="hidden w-full h-full absolute justify-center items-end"
:class="[!isReadOnly ? 'group-hover:flex' : '']"
style="background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px)"
>
<button
class="bg-gray-100 dark:bg-gray-800 p-0.5 rounded mb-1"
@click="handleClick"
>
<FeatherIcon
:name="shouldClear ? 'x' : 'upload'"
class="w-4 h-4 text-gray-600 dark:text-gray-400"
/>
</button>
</div>
</div>

49
src/components/PageHeader.vue
View File

@ -1,18 +1,43 @@
<template>
<div class="px-4 flex justify-between items-center h-row-largest flex-shrink-0 dark:bg-gray-875" :class="[
border ? 'border-b dark:border-gray-800' : '',
platform !== 'Windows' ? 'window-drag' : '',
]">
<div
class="
px-4
flex
justify-between
items-center
h-row-largest
flex-shrink-0
dark:bg-gray-875
"
:class="[
border ? 'border-b dark:border-gray-800' : '',
platform !== 'Windows' ? 'window-drag' : '',
]"
>
<Transition name="spacer">
<div v-if="!showSidebar && platform === 'Mac' && languageDirection !== 'rtl'" class="h-full"
:class="spacerClass" />
<div
v-if="!showSidebar && platform === 'Mac' && languageDirection !== 'rtl'"
class="h-full"
:class="spacerClass"
/>
</Transition>
<div class="flex items-center window-no-drag gap-4 me-auto"
:class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''">
<div
class="flex items-center window-no-drag gap-4 me-auto"
:class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''"
>
<!-- Nav Group -->
<PageHeaderNavGroup />
<h1 v-if="title" class="text-xl font-semibold select-none whitespace-nowrap dark:text-white">
<h1
v-if="title"
class="
text-xl
font-semibold
select-none
whitespace-nowrap
dark:text-white
"
>
{{ title }}
</h1>
@ -23,8 +48,10 @@
</div>
<!-- Right (regular) Slot -->
<div class="flex items-stretch window-no-drag gap-2 ms-auto"
:class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''">
<div
class="flex items-stretch window-no-drag gap-2 ms-auto"
:class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''"
>
<slot />
</div>
</div>

23
src/components/Sidebar.vue
View File

@ -107,29 +107,8 @@
</div>
</div>
<!-- Report Issue, DB Switcher and Darkmode Switcher -->
<!-- Report Issue and DB Switcher -->
<div class="window-no-drag flex flex-col gap-2 py-2 px-4">
<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="$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

3
src/pages/Desk.vue
View File

@ -17,7 +17,6 @@ import { toggleSidebar } from 'src/utils/ui';
"
:darkMode="darkMode"
@change-db-file="$emit('change-db-file')"
@toggle-darkmode="$emit('toggle-darkmode')"
/>
</Transition>
@ -89,7 +88,7 @@ export default defineComponent({
props: {
darkMode: { type: Boolean, default: false },
},
emits: ['change-db-file', 'toggle-darkmode'],
emits: ['change-db-file'],
});
</script>

3
src/renderer.ts
View File

@ -11,7 +11,6 @@ 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 () => {
@ -21,8 +20,6 @@ import { setDarkMode } from './utils/theme';
}
fyo.store.language = language || 'English';
setDarkMode();
registerIpcRendererListeners();
const { isDevelopment, platform, version } = await ipc.getEnv();

22
src/utils/theme.ts
View File

@ -1,24 +1,4 @@
import { fyo } from 'src/initFyo';
export function toggleDarkMode(): 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(): void {
let darkMode = fyo.config.get('darkMode');
/* Fetching system theme */
if (darkMode === undefined) {
darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
fyo.config.set('darkMode', darkMode);
}
export function setDarkMode(darkMode: boolean): void {
if (darkMode) {
document.documentElement.classList.add('dark');
return;