accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-09-18 18:49:01 +00:00
Code Issues Releases Activity

feat: Added custom titleBarverlay with close,minimize and maximize styles

Browse Source
This commit is contained in:
pu-raihan 2024-03-28 14:43:08 +05:30
parent 0eb63e5a1a
commit ae5697dbad
5 changed files with 169 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
main.ts
View File

@ -102,13 +102,6 @@ export class Main {
resizable: true,
};
if (!this.isMac) {
options.titleBarOverlay = {
color: '#FFFFFF',
height: 26,
};
}
if (this.isDevelopment || this.isLinux) {
Object.assign(options, { icon: this.icon });
}

36
main/preload.ts
View File

@ -27,6 +27,42 @@ const ipc = {
return ipcRenderer.send(IPC_MESSAGES.RELOAD_MAIN_WINDOW);
},
minimizeWindow() {
return ipcRenderer.send(IPC_MESSAGES.MINIMIZE_MAIN_WINDOW);
},
toggleMaximize() {
return ipcRenderer.send(IPC_MESSAGES.MAXIMIZE_MAIN_WINDOW);
},
isMaximized() {
return new Promise((resolve, reject) => {
ipcRenderer.send(IPC_MESSAGES.ISMAXIMIZED_MAIN_WINDOW);
ipcRenderer.once(
IPC_MESSAGES.ISMAXIMIZED_RESULT,
(_event, isMaximized) => {
resolve(isMaximized);
}
);
});
},
isFullscreen() {
return new Promise((resolve, reject) => {
ipcRenderer.send(IPC_MESSAGES.ISFULLSCREEN_MAIN_WINDOW);
ipcRenderer.once(
IPC_MESSAGES.ISFULLSCREEN_RESULT,
(_event, isFullscreen) => {
resolve(isFullscreen);
}
);
});
},
closeWindow() {
return ipcRenderer.send(IPC_MESSAGES.CLOSE_MAIN_WINDOW);
},
async getCreds() {
return (await ipcRenderer.invoke(IPC_ACTIONS.GET_CREDS)) as Creds;
},

22
main/registerIpcMainMessageListeners.ts
View File

@ -20,6 +20,28 @@ export default function registerIpcMainMessageListeners(main: Main) {
ipcMain.on(IPC_MESSAGES.RELOAD_MAIN_WINDOW, () => {
main.mainWindow!.reload();
});
ipcMain.on(IPC_MESSAGES.MINIMIZE_MAIN_WINDOW, () => {
main.mainWindow!.minimize();
});
ipcMain.on(IPC_MESSAGES.MAXIMIZE_MAIN_WINDOW, () => {
main.mainWindow!.isMaximized()?main.mainWindow!.unmaximize():main.mainWindow!.maximize()
});
ipcMain.on(IPC_MESSAGES.ISMAXIMIZED_MAIN_WINDOW, (event) => {
const isMaximized = main.mainWindow?.isMaximized() ?? false;
event.sender.send(IPC_MESSAGES.ISMAXIMIZED_RESULT, isMaximized);
});
ipcMain.on(IPC_MESSAGES.ISFULLSCREEN_MAIN_WINDOW, (event) => {
const isFullscreen = main.mainWindow?.isFullScreen() ?? false;
event.sender.send(IPC_MESSAGES.ISFULLSCREEN_RESULT, isFullscreen);
});
ipcMain.on(IPC_MESSAGES.CLOSE_MAIN_WINDOW, () => {
main.mainWindow!.close();
});
ipcMain.on(IPC_MESSAGES.OPEN_EXTERNAL, (_, link: string) => {
shell.openExternal(link).catch((err) => emitMainProcessError(err));

105
src/components/WindowsTitleBar.vue
View File

@ -1,12 +1,61 @@
<template>
<div
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"
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" />
<p v-if="companyName && dbPath" class="mx-auto text-sm">
{{ companyName }} - {{ dbPath }}
</p>
<div v-if="!isFullscreen" class="window-no-drag flex h-full items-center justify-end">
<div
class="
flex
items-center
px-4
h-full
hover:bg-gray-300
dark:hover:bg-gray-875
"
@click="minimizeWindow"
>
<feather-icon name="minus" class="h-4 w-4 flex-shrink-0" />
</div>
<div
class="
flex
items-center
px-4
h-full
hover:bg-gray-300
dark:hover:bg-gray-875
"
@click="toggleMaximize"
>
<feather-icon
v-if="isMax"
name="minimize"
class="h-3 w-3 flex-shrink-0"
/>
<feather-icon v-else name="square" class="h-3 w-3 flex-shrink-0" />
</div>
<div
class="flex items-center px-4 h-full hover:bg-red-600 hover:text-white"
@click="closeWindow"
>
<feather-icon name="x" class="h-4 w-4 flex-shrink-0" />
</div>
</div>
</div>
</template>
@ -20,5 +69,59 @@ export default {
dbPath: String,
companyName: String,
},
data() {
return {
isMax: Boolean,
isFullscreen: Boolean,
};
},
mounted() {
this.getIsMaximized();
this.getIsFullscreen();
window.addEventListener('resize', this.getIsFullscreen);
document.addEventListener('webkitfullscreenchange', this.getIsFullscreen);
document.addEventListener('mozfullscreenchange', this.getIsFullscreen);
document.addEventListener('fullscreenchange', this.getIsFullscreen);
document.addEventListener('MSFullscreenChange', this.getIsFullscreen);
},
destroyed() {
window.removeEventListener('resize', this.getIsFullscreen);
document.removeEventListener('webkitfullscreenchange', this.getIsFullscreen);
document.removeEventListener('mozfullscreenchange', this.getIsFullscreen);
document.removeEventListener('fullscreenchange', this.getIsFullscreen);
document.removeEventListener('MSFullscreenChange', this.getIsFullscreen);
},
methods: {
minimizeWindow() {
ipc.minimizeWindow();
},
toggleMaximize() {
ipc.toggleMaximize();
this.getIsMaximized();
},
closeWindow() {
ipc.closeWindow();
},
getIsMaximized() {
ipc
.isMaximized()
.then((result) => {
this.isMax = result;
})
.catch((error) => {
console.error(error);
});
},
getIsFullscreen() {
ipc
.isFullscreen()
.then((result) => {
this.isFullscreen = result;
})
.catch((error) => {
console.error(error);
});
},
},
};
</script>

7
utils/messages.ts
View File

@ -5,6 +5,13 @@ export enum IPC_MESSAGES {
OPEN_EXTERNAL = 'open-external',
SHOW_ITEM_IN_FOLDER = 'show-item-in-folder',
RELOAD_MAIN_WINDOW = 'reload-main-window',
MINIMIZE_MAIN_WINDOW = 'minimize-main-window',
MAXIMIZE_MAIN_WINDOW = 'maximize-main-window',
ISMAXIMIZED_MAIN_WINDOW = 'ismaximized-main-window',
ISMAXIMIZED_RESULT = 'ismaximized-result',
ISFULLSCREEN_MAIN_WINDOW = 'isfullscreen-main-window',
ISFULLSCREEN_RESULT = 'isfullscreen-result',
CLOSE_MAIN_WINDOW = 'close-main-window',
}
// ipcRenderer.invoke(...)