accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-01-22 22:58:28 +00:00
Code Issues Releases Activity

feat: Every component except printing changed to darkmode

Browse Source
This commit is contained in:
pu-raihan 2024-03-26 13:18:31 +05:30
parent 81ba52cddf
commit e33c9a4ec7
17 changed files with 352 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -105,7 +105,7 @@ export default {
offsetY: { default: 0, type: Number },
textOffsetX: { default: 0, type: Number },
textOffsetY: { default: 0, type: Number },
darkMode: Boolean,
darkMode: { type: Boolean, default: false },
},
emits: ['change'],
computed: {

13
src/components/Controls/Select.vue
View File

@ -8,7 +8,14 @@
:class="[inputClasses, containerClasses]"
>
<select
class="appearance-none bg-transparent focus:outline-none w-11/12 cursor-pointer"
class="
appearance-none
bg-transparent
focus:outline-none
w-11/12
cursor-pointer
custom-scroll custom-scroll-thumb2
"
:class="{
'pointer-events-none': isReadOnly,
'text-gray-500': !value,
@ -22,7 +29,7 @@
value=""
disabled
selected
class="text-black dark:text-gray-25 dark:bg-gray-800"
class="text-black dark:text-gray-200 dark:bg-gray-850"
>
{{ inputPlaceholder }}
</option>
@ -30,7 +37,7 @@
v-for="option in options"
:key="option.value"
:value="option.value"
class="text-black dark:text-gray-25 dark:bg-gray-800"
class="text-black dark:text-gray-200 dark:bg-gray-850"
>
{{ option.label }}
</option>

1
src/components/Icons/24/green-check.vue
View File

@ -1,7 +1,6 @@
<template>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path fill="#FFF" d="M-589-585H611v907H-589z" />
<path
d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C23.98 5.38 18.62.02 12 0z"
fill="#92D336"

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

@ -5,7 +5,7 @@ export default {
name: 'IconBase',
props: {
active: Boolean,
darkMode: Boolean,
darkMode: { type: Boolean, default: false },
},
computed: {
lightColor(): string {
@ -26,6 +26,9 @@ export default {
: uicolors.gray['600'];
return this.active ? activeGray : passiveGray;
},
bgColor(): string {
return this.darkMode ? uicolors.gray['900'] : uicolors.gray['100'];
},
},
};
</script>

18
src/components/Loading.vue
View File

@ -8,7 +8,9 @@
<div
class="
border
dark:border-gray-800
text-gray-900
dark:text-gray-100
shadow-lg
px-3
py-3
@ -16,11 +18,15 @@
w-96
z-10
bg-white
dark:bg-gray-900
rounded-lg
"
>
<!-- Message -->
<p v-if="message?.length" class="text-base text-gray-600 pb-2">
<p
v-if="message?.length"
class="text-base text-gray-600 dark:text-gray-400 pb-2"
>
{{ message }}
</p>
@ -29,12 +35,16 @@
<!-- Loading Bar BG -->
<div
class="w-full h-3 me-2 rounded"
:class="percent >= 0 ? 'bg-gray-200' : 'bg-gray-300'"
:class="
percent >= 0
? 'bg-gray-200 dark:bg-gray-800'
: 'bg-gray-300 dark:bg-gray-700'
"
>
<!-- Loading Bar -->
<div
v-if="percent >= 0"
class="h-3 rounded bg-gray-800"
class="h-3 rounded bg-gray-800 dark:bg-gray-200"
:style="{ width: `${percent * 100}%` }"
></div>
</div>
@ -48,8 +58,10 @@
h-4
ms-auto
text-gray-600
dark:text-gray-400
cursor-pointer
hover:text-gray-800
dark:hover:text-gray-200
"
@click="closeToast"
/>

107
src/components/Sidebar.vue
View File

@ -1,6 +1,15 @@
<template>
<div
class="py-2 h-full flex justify-between flex-col bg-gray-25 dark:bg-gray-900 relative"
class="
py-2
h-full
flex
justify-between
flex-col
bg-gray-25
dark:bg-gray-900
relative
"
:class="{
'window-drag': platform !== 'Windows',
}"
@ -15,7 +24,14 @@
>
<h6
data-testid="company-name"
class="font-semibold dark:text-gray-200 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>
@ -24,7 +40,15 @@
<!-- Sidebar Items -->
<div v-for="group in groups" :key="group.label">
<div
class="px-4 flex items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-875 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 dark:bg-gray-875 border-s-4 border-gray-800 dark:border-gray-100'
@ -58,7 +82,16 @@
<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 dark:hover:bg-gray-875"
class="
text-base
h-10
ps-10
cursor-pointer
flex
items-center
hover:bg-gray-100
dark:hover:bg-gray-875
"
:class="
isItemActive(item)
? 'bg-gray-100 dark:bg-gray-875 text-gray-900 dark:text-gray-100 border-s-4 border-gray-800 dark:border-gray-100'
@ -77,7 +110,15 @@
<!-- 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 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-400 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
@ -90,7 +131,15 @@
</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"
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" />
@ -100,7 +149,15 @@
</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"
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" />
@ -109,7 +166,15 @@
<button
data-testid="change-db"
class="flex text-sm text-gray-600 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-400 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" />
@ -117,7 +182,15 @@
</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"
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" />
@ -138,7 +211,19 @@
<!-- Hide Sidebar Button -->
<button
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"
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" />
@ -172,7 +257,7 @@ export default defineComponent({
ShortcutsHelper,
},
props: {
darkMode: Boolean,
darkMode: { type: Boolean, default: false },
},
emits: ['change-db-file', 'toggle-darkmode'],
setup() {

59
src/pages/ChartOfAccounts.vue
View File

@ -10,7 +10,12 @@
<!-- Chart of Accounts -->
<div
v-if="root"
class="flex-1 flex flex-col overflow-y-auto mb-4 custom-scroll"
class="
flex-1 flex flex-col
overflow-y-auto
mb-4
custom-scroll custom-scroll-thumb1
"
>
<!-- Chart of Accounts Indented List -->
<template v-for="account in allAccounts" :key="account.name">
@ -20,16 +25,18 @@
py-2
cursor-pointer
hover:bg-gray-50
dark:hover:bg-gray-890 dark:text-gray-25
group
flex
items-center
border-b
dark:border-gray-800
flex-shrink-0
pe-4
"
:class="[
account.level !== 0 ? 'text-base' : 'text-lg',
isQuickEditOpen(account) ? 'bg-gray-200' : '',
isQuickEditOpen(account) ? 'bg-gray-200 dark:bg-gray-900' : '',
]"
:style="getItemStyle(account.level)"
@click="onClick(account)"
@ -49,7 +56,9 @@
v-if="account.isGroup"
class="
text-xs text-gray-800
dark:text-gray-400
hover:text-gray-900
dark:hover:text-gray-100
focus:outline-none
"
@click.stop="addAccount(account, 'addingAccount')"
@ -61,7 +70,9 @@
class="
ms-3
text-xs text-gray-800
dark:text-gray-400
hover:text-gray-900
dark:hover:text-gray-100
focus:outline-none
"
@click.stop="addAccount(account, 'addingGroupAccount')"
@ -72,7 +83,9 @@
class="
ms-3
text-xs text-gray-800
dark:text-gray-400
hover:text-gray-900
dark:hover:text-gray-100
focus:outline-none
"
@click.stop="deleteAccount(account)"
@ -83,7 +96,10 @@
</div>
<!-- Account Balance String -->
<p v-if="!account.isGroup" class="ms-auto text-base text-gray-800">
<p
v-if="!account.isGroup"
class="ms-auto text-base text-gray-800 dark:text-gray-400"
>
{{ getBalanceString(account) }}
</p>
</div>
@ -95,8 +111,10 @@
class="
px-4
border-b
dark:border-gray-800
cursor-pointer
hover:bg-gray-50
dark:hover:bg-gray-890
group
flex
items-center
@ -109,8 +127,12 @@
<input
:ref="account.name"
v-model="newAccountName"
class="focus:outline-none bg-transparent"
:class="{ 'text-gray-600': insertingAccount }"
class="
focus:outline-none
bg-transparent
dark:placeholder-gray-600 dark:text-gray-400
"
:class="{ 'text-gray-600 dark:text-gray-400': insertingAccount }"
:placeholder="t`New Account`"
type="text"
:disabled="insertingAccount"
@ -124,7 +146,9 @@
class="
ms-4
text-xs text-gray-800
dark:text-gray-400
hover:text-gray-900
dark:hover:text-gray-100
focus:outline-none
"
@click="
@ -138,7 +162,9 @@
class="
ms-4
text-xs text-gray-800
dark:text-gray-400
hover:text-gray-900
dark:hover:text-gray-100
focus:outline-none
"
@click="cancelAddingAccount(account)"
@ -194,6 +220,9 @@ export default defineComponent({
Button,
PageHeader,
},
props: {
darkMode: { type: Boolean, default: false },
},
setup() {
return {
languageDirection: inject(languageDirectionKey),
@ -527,36 +556,38 @@ export default defineComponent({
return !!(edit && schemaName === 'Account' && name === account.name);
},
getIconComponent(isGroup: boolean, name?: string): Component {
let lightColor = this.darkMode ? uicolors.gray[600] : uicolors.gray[400];
let darkColor = this.darkMode ? uicolors.gray[400] : uicolors.gray[700];
let icons = {
'Application of Funds (Assets)': `<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M15.333 5.333H.667A.667.667 0 000 6v9.333c0 .368.299.667.667.667h14.666a.667.667 0 00.667-.667V6a.667.667 0 00-.667-.667zM8 12.667a2 2 0 110-4 2 2 0 010 4z" fill="${uicolors.gray[700]}" fill-rule="nonzero"/>
<path d="M14 2.667V4H2V2.667h12zM11.333 0v1.333H4.667V0h6.666z" fill="${uicolors.gray[400]}"/>
<path d="M15.333 5.333H.667A.667.667 0 000 6v9.333c0 .368.299.667.667.667h14.666a.667.667 0 00.667-.667V6a.667.667 0 00-.667-.667zM8 12.667a2 2 0 110-4 2 2 0 010 4z" fill="${darkColor}" fill-rule="nonzero"/>
<path d="M14 2.667V4H2V2.667h12zM11.333 0v1.333H4.667V0h6.666z" fill="${lightColor}"/>
</g>
</svg>`,
Expenses: `<svg class="w-4 h-4" viewBox="0 0 14 16" xmlns="http://www.w3.org/2000/svg">
<path d="M13.668 0v15.333a.666.666 0 01-.666.667h-12a.666.666 0 01-.667-.667V0l2.667 2 2-2 2 2 2-2 2 2 2.666-2zM9.964 4.273H4.386l-.311 1.133h1.62c.933 0 1.474.362 1.67.963H4.373l-.298 1.053h3.324c-.175.673-.767 1.044-1.705 1.044H4.182l.008.83L7.241 13h1.556v-.072L6.01 9.514c1.751-.106 2.574-.942 2.748-2.092h.904l.298-1.053H8.75a2.375 2.375 0 00-.43-1.044l1.342.009.302-1.061z" fill="${uicolors.gray[700]}" fill-rule="evenodd"/>
<path d="M13.668 0v15.333a.666.666 0 01-.666.667h-12a.666.666 0 01-.667-.667V0l2.667 2 2-2 2 2 2-2 2 2 2.666-2zM9.964 4.273H4.386l-.311 1.133h1.62c.933 0 1.474.362 1.67.963H4.373l-.298 1.053h3.324c-.175.673-.767 1.044-1.705 1.044H4.182l.008.83L7.241 13h1.556v-.072L6.01 9.514c1.751-.106 2.574-.942 2.748-2.092h.904l.298-1.053H8.75a2.375 2.375 0 00-.43-1.044l1.342.009.302-1.061z" fill="${darkColor}" fill-rule="evenodd"/>
</svg>`,
Income: `<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M16 12.859V14c0 1.105-2.09 2-4.667 2-2.494 0-4.531-.839-4.66-1.894L6.667 14v-1.141C7.73 13.574 9.366 14 11.333 14c1.968 0 3.602-.426 4.667-1.141zm0-3.334v1.142c0 1.104-2.09 2-4.667 2-2.494 0-4.531-.839-4.66-1.894l-.006-.106V9.525c1.064.716 2.699 1.142 4.666 1.142 1.968 0 3.602-.426 4.667-1.142zm-4.667-4.192c2.578 0 4.667.896 4.667 2 0 1.105-2.09 2-4.667 2s-4.666-.895-4.666-2c0-1.104 2.089-2 4.666-2z" fill="${uicolors.gray[700]}"/>
<path d="M0 10.859C1.065 11.574 2.7 12 4.667 12l.337-.005.33-.013v1.995c-.219.014-.44.023-.667.023-2.495 0-4.532-.839-4.66-1.894L0 12v-1.141zm0-2.192V7.525c1.065.716 2.7 1.142 4.667 1.142l.337-.005.33-.013v1.995c-.219.013-.44.023-.667.023-2.495 0-4.532-.839-4.66-1.894L0 8.667V7.525zm0-4.475c1.065.715 2.7 1.141 4.667 1.141.694 0 1.345-.056 1.946-.156-.806.56-1.27 1.292-1.278 2.134-.219.013-.441.022-.668.022-2.578 0-4.667-.895-4.667-2zM4.667 0c2.577 0 4.666.895 4.666 2S7.244 4 4.667 4C2.089 4 0 3.105 0 2s2.09-2 4.667-2z" fill="${uicolors.gray[400]}"/>
<path d="M16 12.859V14c0 1.105-2.09 2-4.667 2-2.494 0-4.531-.839-4.66-1.894L6.667 14v-1.141C7.73 13.574 9.366 14 11.333 14c1.968 0 3.602-.426 4.667-1.141zm0-3.334v1.142c0 1.104-2.09 2-4.667 2-2.494 0-4.531-.839-4.66-1.894l-.006-.106V9.525c1.064.716 2.699 1.142 4.666 1.142 1.968 0 3.602-.426 4.667-1.142zm-4.667-4.192c2.578 0 4.667.896 4.667 2 0 1.105-2.09 2-4.667 2s-4.666-.895-4.666-2c0-1.104 2.089-2 4.666-2z" fill="${darkColor}"/>
<path d="M0 10.859C1.065 11.574 2.7 12 4.667 12l.337-.005.33-.013v1.995c-.219.014-.44.023-.667.023-2.495 0-4.532-.839-4.66-1.894L0 12v-1.141zm0-2.192V7.525c1.065.716 2.7 1.142 4.667 1.142l.337-.005.33-.013v1.995c-.219.013-.44.023-.667.023-2.495 0-4.532-.839-4.66-1.894L0 8.667V7.525zm0-4.475c1.065.715 2.7 1.141 4.667 1.141.694 0 1.345-.056 1.946-.156-.806.56-1.27 1.292-1.278 2.134-.219.013-.441.022-.668.022-2.578 0-4.667-.895-4.667-2zM4.667 0c2.577 0 4.666.895 4.666 2S7.244 4 4.667 4C2.089 4 0 3.105 0 2s2.09-2 4.667-2z" fill="${lightColor}"/>
</g>
</svg>`,
'Source of Funds (Liabilities)': `<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M7.332 11.36l4.666-3.734 2 1.6V.666A.667.667 0 0013.332 0h-12a.667.667 0 00-.667.667v14.666c0 .369.298.667.667.667h6v-4.64zm-4-7.36H11.3v1.333H3.332V4zm2.666 8H3.332v-1.333h2.666V12zM3.332 8.667V7.333h5.333v1.334H3.332z" fill="${uicolors.gray[700]}"/>
<path d="M15.332 12l-3.334-2.667L8.665 12v3.333c0 .369.298.667.667.667h2v-2h1.333v2h2a.667.667 0 00.667-.667V12z" fill="${uicolors.gray[400]}"/>
<path d="M7.332 11.36l4.666-3.734 2 1.6V.666A.667.667 0 0013.332 0h-12a.667.667 0 00-.667.667v14.666c0 .369.298.667.667.667h6v-4.64zm-4-7.36H11.3v1.333H3.332V4zm2.666 8H3.332v-1.333h2.666V12zM3.332 8.667V7.333h5.333v1.334H3.332z" fill="${darkColor}"/>
<path d="M15.332 12l-3.334-2.667L8.665 12v3.333c0 .369.298.667.667.667h2v-2h1.333v2h2a.667.667 0 00.667-.667V12z" fill="${lightColor}"/>
</g>
</svg>`,
};
let leaf = `<svg class="w-2 h-2" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
<circle stroke="${uicolors.gray[700]}" cx="4" cy="4" r="3.5" fill="none" fill-rule="evenodd"/>
<circle stroke="${darkColor}" cx="4" cy="4" r="3.5" fill="none" fill-rule="evenodd"/>
</svg>`;
let folder = `<svg class="w-3 h-3" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8.333 3.367L6.333.7H.667A.667.667 0 000 1.367v12a2 2 0 002 2h12a2 2 0 002-2V4.033a.667.667 0 00-.667-.666h-7z" fill="${uicolors.gray[700]}" fill-rule="evenodd"/>
<path d="M8.333 3.367L6.333.7H.667A.667.667 0 000 1.367v12a2 2 0 002 2h12a2 2 0 002-2V4.033a.667.667 0 00-.667-.666h-7z" fill="${darkColor}" fill-rule="evenodd"/>
</svg>`;
let icon = isGroup ? folder : leaf;

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

@ -77,7 +77,7 @@ export default defineComponent({
LineChart,
},
props: {
darkMode: Boolean,
darkMode: { type: Boolean, default: false },
},
extends: DashboardChartBase,
data: () => ({

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

@ -2,7 +2,17 @@
<div class="h-screen" style="width: var(--w-desk)">
<PageHeader :title="t`Dashboard`">
<div
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"
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"
@ -81,7 +91,7 @@ export default {
UnpaidInvoices,
},
props: {
darkMode: Boolean,
darkMode: { type: Boolean, default: false },
},
data() {
return { period: 'This Year' };

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

@ -78,7 +78,7 @@ export default defineComponent({
SectionHeader,
},
props: {
darkMode: Boolean,
darkMode: { type: Boolean, default: false },
},
extends: DashboardChartBase,
data: () => ({

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

@ -56,7 +56,7 @@ export default defineComponent({
BarChart,
},
props: {
darkMode: Boolean,
darkMode: { type: Boolean, default: false },
},
extends: DashboardChartBase,
data: () => ({

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

@ -68,7 +68,17 @@
:offset="15"
:show="show"
placement="top"
class="text-sm shadow-md px-2 py-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white 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">
@ -114,7 +124,7 @@ export default defineComponent({
extends: BaseDashboardChart,
props: {
schemaName: { type: String as PropType<string>, required: true },
darkMode: Boolean,
darkMode: { type: Boolean, default: false },
},
data() {
return {

70
src/pages/DatabaseSelector.vue
View File

@ -1,45 +1,45 @@
<template>
<div
class="flex-1 flex justify-center items-center bg-gray-25"
class="flex-1 flex justify-center items-center bg-gray-25 dark:bg-gray-900"
:class="{
'pointer-events-none': loadingDatabase,
'window-drag': platform !== 'Windows',
}"
>
<div
class="w-full w-form shadow-lg rounded-lg border relative bg-white"
class="w-full w-form shadow-lg rounded-lg border dark:border-gray-800 relative bg-white dark:bg-gray-875"
style="height: 700px"
>
<!-- Welcome to Frappe Books -->
<div class="px-4 py-4">
<h1 class="text-2xl font-semibold select-none">
<h1 class="text-2xl font-semibold select-none dark:text-gray-25">
{{ t`Welcome to Frappe Books` }}
</h1>
<p class="text-gray-600 text-base select-none">
<p class="text-gray-600 dark:text-gray-400 text-base select-none">
{{
t`Create a new company or select an existing one from your computer`
}}
</p>
</div>
<hr />
<hr class="dark:border-gray-800"/>
<!-- New File (Blue Icon) -->
<div
data-testid="create-new-file"
class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
:class="creatingDemo ? '' : 'hover:bg-gray-50 cursor-pointer'"
:class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
@click="newDatabase"
>
<div class="w-8 h-8 rounded-full bg-blue-500 relative flex-center">
<feather-icon name="plus" class="text-white w-5 h-5" />
<feather-icon name="plus" class="text-white dark:text-gray-900 w-5 h-5" />
</div>
<div>
<p class="font-medium">
<p class="font-medium dark:text-gray-200">
{{ t`New Company` }}
</p>
<p class="text-sm text-gray-600">
<p class="text-sm text-gray-600 dark:text-gray-400">
{{ t`Create a new company and store it on your computer` }}
</p>
</div>
@ -48,17 +48,17 @@
<!-- Existing File (Green Icon) -->
<div
class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
:class="creatingDemo ? '' : 'hover:bg-gray-50 cursor-pointer'"
:class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
@click="existingDatabase"
>
<div class="w-8 h-8 rounded-full bg-green-500 relative flex-center">
<feather-icon name="upload" class="w-4 h-4 text-white" />
<div class="w-8 h-8 rounded-full bg-green-500 dark:bg-green-600 relative flex-center">
<feather-icon name="upload" class="w-4 h-4 text-white dark:text-gray-900" />
</div>
<div>
<p class="font-medium">
<p class="font-medium dark:text-gray-200">
{{ t`Existing Company` }}
</p>
<p class="text-sm text-gray-600">
<p class="text-sm text-gray-600 dark:text-gray-400">
{{ t`Load an existing company from your computer` }}
</p>
</div>
@ -68,22 +68,22 @@
<div
v-if="!files?.length"
class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
:class="creatingDemo ? '' : 'hover:bg-gray-50 cursor-pointer'"
:class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
@click="createDemo"
>
<div class="w-8 h-8 rounded-full bg-pink-500 relative flex-center">
<div class="w-8 h-8 rounded-full bg-pink-500 dark:bg-pink-600 relative flex-center">
<feather-icon name="monitor" class="w-4 h-4 text-white" />
</div>
<div>
<p class="font-medium">
<p class="font-medium dark:text-gray-200">
{{ t`Create Demo` }}
</p>
<p class="text-sm text-gray-600">
<p class="text-sm text-gray-600 dark:text-gray-400">
{{ t`Create a demo company to try out Frappe Books` }}
</p>
</div>
</div>
<hr />
<hr class="dark:border-gray-800"/>
<!-- File List -->
<div class="overflow-y-auto" style="max-height: 340px">
@ -91,7 +91,7 @@
v-for="(file, i) in files"
:key="file.dbPath"
class="h-row-largest px-4 flex gap-4 items-center"
:class="creatingDemo ? '' : 'hover:bg-gray-50 cursor-pointer'"
:class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
:title="t`${file.companyName} stored at ${file.dbPath}`"
@click="selectFile(file)"
>
@ -103,7 +103,7 @@
flex
justify-center
items-center
bg-gray-200
bg-gray-200 dark:bg-gray-800
text-gray-500
font-semibold
flex-shrink-0
@ -114,16 +114,16 @@
</div>
<div class="w-full">
<div class="flex justify-between overflow-x-auto items-baseline">
<h2 class="font-medium">
<h2 class="font-medium dark:text-gray-200">
{{ file.companyName }}
</h2>
<p class="whitespace-nowrap text-sm text-gray-600">
<p class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
{{ formatDate(file.modified) }}
</p>
</div>
<p
class="
text-sm text-gray-600
text-sm text-gray-600 dark:text-gray-400
overflow-x-auto
no-scrollbar
whitespace-nowrap
@ -136,12 +136,12 @@
class="
ms-auto
p-2
hover:bg-red-200
hover:bg-red-200 dark:hover:bg-red-900 dark:hover:bg-opacity-40
rounded-full
w-8
h-8
text-gray-600
hover:text-red-400
text-gray-600 dark:text-gray-400
hover:text-red-400 dark:hover:text-red-200
"
@click.stop="() => deleteDb(i)"
>
@ -149,7 +149,7 @@
</button>
</div>
</div>
<hr v-if="files?.length" />
<hr v-if="files?.length" class="dark:border-gray-800"/>
<!-- Language Selector -->
<div
@ -160,7 +160,7 @@
items-center
absolute
p-4
text-gray-900
text-gray-900 dark:text-gray-100
"
style="top: 100%; transform: translateY(-100%)"
>
@ -169,8 +169,8 @@
v-if="files?.length"
class="
text-sm
bg-gray-100
hover:bg-gray-200
bg-gray-100 dark:bg-gray-890
hover:bg-gray-200 dark:hover:bg-gray-900
rounded
px-4
py-1.5
@ -198,21 +198,21 @@
<!-- Base Count Selection when Dev -->
<Modal :open-modal="openModal" @closemodal="openModal = false">
<div class="p-4 text-gray-900 w-form">
<div class="p-4 text-gray-900 dark:text-gray-100 w-form">
<h2 class="text-xl font-semibold select-none">Set Base Count</h2>
<p class="text-base mt-2">
Base Count is a lower bound on the number of entries made when
creating the dummy instance.
</p>
<div class="flex my-12 justify-center items-baseline gap-4 text-base">
<label for="basecount" class="text-gray-600">Base Count</label>
<label for="basecount" class="text-gray-600 dark:text-gray-400">Base Count</label>
<input
v-model="baseCount"
type="number"
name="basecount"
class="
bg-gray-100
focus:bg-gray-200
bg-gray-100 dark:bg-gray-875
focus:bg-gray-200 dark:focus:bg-gray-890
rounded-md
px-2
py-1

26
src/pages/Desk.vue
View File

@ -8,7 +8,13 @@ import { toggleSidebar } from 'src/utils/ui';
<!-- eslint-disable vue/require-explicit-emits -->
<Sidebar
v-show="showSidebar"
class="flex-shrink-0 border-e dark:border-gray-800 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')"
@ -43,7 +49,21 @@ 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
dark:text-gray-400
hover:bg-gray-100
dark:hover:bg-gray-900
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" />
@ -59,7 +79,7 @@ export default defineComponent({
Sidebar,
},
props: {
darkMode: Boolean,
darkMode: { type: Boolean, default: false },
},
emits: ['change-db-file', 'toggle-darkmode'],
});

39
src/pages/GetStarted.vue
View File

@ -1,13 +1,19 @@
<template>
<div class="flex flex-col overflow-y-hidden">
<PageHeader :title="t`Set Up Your Workspace`" />
<div class="flex-1 overflow-y-auto overflow-x-hidden custom-scroll">
<div
class="
flex-1
overflow-y-auto overflow-x-hidden
custom-scroll custom-scroll-thumb1
"
>
<div
v-for="section in sections"
:key="section.label"
class="p-4 border-b"
class="p-4 border-b dark:border-gray-800"
>
<h2 class="font-medium">{{ section.label }}</h2>
<h2 class="font-medium dark:text-gray-25">{{ section.label }}</h2>
<div class="flex mt-4 gap-4">
<div
v-for="item in section.items"
@ -15,7 +21,15 @@
class="w-full md:w-1/3 sm:w-1/2"
>
<div
class="flex flex-col justify-between h-40 p-4 border rounded-lg"
class="
flex flex-col
justify-between
h-40
p-4
border
dark:border-gray-800 dark:text-gray-50
rounded-lg
"
@mouseenter="() => (activeCard = item.key)"
@mouseleave="() => (activeCard = null)"
>
@ -32,7 +46,7 @@
class="w-5 h-5 mb-4"
/>
<h3 class="font-medium">{{ item.label }}</h3>
<p class="mt-2 text-sm text-gray-800">
<p class="mt-2 text-sm text-gray-800 dark:text-gray-400">
{{ item.description }}
</p>
</div>
@ -42,23 +56,19 @@
>
<Button
v-if="item.action"
class="leading-tight"
class="leading-tight text-base"
type="primary"
@click="handleAction(item)"
>
<span class="text-base text-white">
{{ t`Set Up` }}
</span>
{{ t`Set Up` }}
</Button>
<Button
v-if="item.documentation"
class="leading-tight"
class="leading-tight text-base"
:class="{ 'ms-4': item.action }"
@click="handleDocumentation(item)"
>
<span class="text-base">
{{ t`Documentation` }}
</span>
{{ t`Documentation` }}
</Button>
</div>
</div>
@ -88,6 +98,9 @@ export default defineComponent({
Button,
Icon,
},
props: {
darkMode: { type: Boolean, default: false },
},
data() {
return {
activeCard: null as string | null,

85
src/pages/ImportWizard.vue
View File

@ -56,6 +56,7 @@
w-full
gap-2
border-b
dark:border-gray-800
p-4
"
>
@ -69,7 +70,6 @@
label: fyo.schemaMap[value]?.label ?? value,
})),
}"
input-class="bg-transparent text-gray-900 text-base"
class="w-40"
:border="true"
:value="importType"
@ -83,7 +83,11 @@
<p
v-else
class="text-base ms-2"
:class="fileName ? 'text-gray-900 font-semibold' : 'text-gray-700'"
:class="
fileName
? 'text-gray-900 dark:text-gray-25 font-semibold'
: 'text-gray-700 dark:text-gray-200'
"
>
<span v-if="fileName" class="font-normal">{{ t`Selected` }} </span>
{{ helperMessage }}{{ fileName ? ',' : '' }}
@ -106,12 +110,23 @@
<!-- Assignment Row and Value Grid container -->
<div
v-if="hasImporter"
class="overflow-auto custom-scroll"
class="overflow-auto custom-scroll custom-scroll-thumb1"
style="max-height: calc(100vh - (2 * var(--h-row-largest)) - 2px)"
>
<!-- Column Assignment Row -->
<div
class="grid sticky top-0 py-4 pe-4 bg-white border-b gap-4"
class="
grid
sticky
top-0
py-4
pe-4
bg-white
dark:bg-gray-875
border-b border-e
dark:border-gray-800
gap-4
"
style="z-index: 1; width: fit-content"
:style="gridTemplateColumn"
>
@ -131,7 +146,17 @@
<!-- Values Grid -->
<div
v-if="importer.valueMatrix.length"
class="grid py-4 pe-4 bg-white gap-4"
class="
grid
py-4
pe-4
bg-white
dark:bg-gray-875
gap-4
border-e
last:border-b
dark:border-gray-800
"
style="width: fit-content"
:style="gridTemplateColumn"
>
@ -180,7 +205,11 @@
<!-- FormControl Field if Column is Assigned -->
<FormControl
v-else
:class="val.error ? 'border border-red-300 rounded-md' : ''"
:class="
val.error
? 'border border-red-300 dark:border-red-600 rounded-md'
: ''
"
:title="getFieldTitle(val)"
:df="
importer.templateFieldsMap.get(
@ -203,7 +232,15 @@
<div
v-else
class="ps-4 text-gray-700 sticky left-0 flex items-center"
class="
ps-4
text-gray-700
dark:text-gray-300
sticky
left-0
flex
items-center
"
style="height: 62.5px"
>
{{ t`No rows added. Select a file or add rows.` }}
@ -227,18 +264,20 @@
<div class="w-form">
<!-- Pick Column Header -->
<FormHeader :form-title="t`Pick Import Columns`" />
<hr />
<hr class="dark:border-gray-800" />
<!-- Pick Column Checkboxes -->
<div
v-for="[key, value] of columnPickerFieldsMap.entries()"
:key="key"
class="p-4 max-h-80 overflow-auto custom-scroll"
class="p-4 max-h-80 overflow-auto custom-scroll custom-scroll-thumb1"
>
<h2 class="text-sm font-semibold text-gray-800">
<h2 class="text-sm font-semibold text-gray-800 dark:text-gray-200">
{{ key }}
</h2>
<div class="grid grid-cols-3 border rounded mt-1">
<div
class="grid grid-cols-3 border dark:border-gray-800 rounded mt-1"
>
<div
v-for="tf of value"
:key="tf.fieldKey"
@ -261,9 +300,9 @@
</div>
<!-- Pick Column Footer -->
<hr />
<hr class="dark:border-gray-800" />
<div class="p-4 flex justify-between items-center">
<p class="text-sm text-gray-600">
<p class="text-sm text-gray-600 dark:text-gray-400">
{{ t`${numColumnsPicked} fields selected` }}
</p>
<Button type="primary" @click="showColumnPicker = false">{{
@ -278,13 +317,15 @@
<div class="w-form">
<!-- Import Completed Header -->
<FormHeader :form-title="t`Import Complete`" />
<hr />
<hr class="dark:border-gray-800" />
<!-- Success -->
<div v-if="success.length > 0">
<!-- Success Section Header -->
<div class="flex justify-between px-4 pt-4 pb-1">
<p class="text-base font-semibold">{{ t`Success` }}</p>
<p class="text-sm text-gray-600">
<p class="text-base font-semibold dark:text-gray-200">
{{ t`Success` }}
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
{{
success.length === 1
? t`${success.length} entry imported`
@ -293,7 +334,7 @@
</p>
</div>
<!-- Success Body -->
<div class="max-h-40 overflow-auto text-gray-900">
<div class="max-h-40 overflow-auto text-gray-900 dark:text-gray-50">
<div
v-for="(name, i) of success"
:key="name"
@ -306,7 +347,7 @@
</p>
</div>
</div>
<hr />
<hr class="dark:border-gray-800" />
</div>
<!-- Failed -->
@ -314,7 +355,7 @@
<!-- Failed Section Header -->
<div class="flex justify-between px-4 pt-4 pb-1">
<p class="text-base font-semibold">{{ t`Failed` }}</p>
<p class="text-sm text-gray-600">
<p class="text-sm text-gray-600 dark:text-gray-400">
{{
failed.length === 1
? t`${failed.length} entry failed`
@ -323,7 +364,7 @@
</p>
</div>
<!-- Failed Body -->
<div class="max-h-40 overflow-auto text-gray-900">
<div class="max-h-40 overflow-auto text-gray-900 dark:text-gray-50">
<div
v-for="(f, i) of failed"
:key="f.name"
@ -345,7 +386,7 @@
<!-- Fallback Div -->
<div
v-if="failed.length === 0 && success.length === 0"
class="p-4 text-base"
class="p-4 text-base dark:text-gray-200"
>
{{ t`No entries were imported.` }}
</div>
@ -964,6 +1005,6 @@ export default defineComponent({
</script>
<style scoped>
.index-cell {
@apply flex pe-4 justify-end items-center border-e bg-white sticky left-0 -my-4 text-gray-600;
@apply flex pe-4 justify-end items-center border-e last:border-b dark:border-gray-800 bg-white dark:bg-gray-875 sticky left-0 -my-4 text-gray-600 dark:text-gray-400;
}
</style>

14
src/pages/SetupWizard/SetupWizard.vue
View File

@ -7,7 +7,7 @@
<template #body>
<FormHeader
:form-title="t`Set up your organization`"
class="sticky top-0 bg-white border-b"
class="sticky top-0 bg-white dark:bg-gray-890 border-b dark:border-gray-800"
>
</FormHeader>
@ -18,7 +18,7 @@
:key="name + idx"
ref="section"
class="p-4"
:class="idx !== 0 && activeGroup.size > 1 ? 'border-t' : ''"
:class="idx !== 0 && activeGroup.size > 1 ? 'border-t dark:border-gray-800' : ''"
:show-title="activeGroup.size > 1 && name !== t`Default`"
:title="name"
:fields="fields"
@ -37,22 +37,22 @@
flex
items-center
justify-between
border-t
border-t dark:border-gray-800
flex-shrink-0
sticky
bottom-0
bg-white
bg-white dark:bg-gray-890
"
>
<p v-if="loading" class="text-base text-gray-600">
<p v-if="loading" class="text-base text-gray-600 dark:text-gray-400">
{{ t`Loading instance...` }}
</p>
<Button v-if="!loading" class="w-24" @click="cancel">{{
<Button v-if="!loading" class="w-24 border dark:border-gray-800" @click="cancel">{{
t`Cancel`
}}</Button>
<Button
v-if="fyo.store.isDevelopment && !loading"
class="w-24 ml-auto mr-4"
class="w-24 ml-auto mr-4 border dark:border-gray-800"
:disabled="loading"
@click="fill"
>{{ t`Fill` }}</Button