accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-11-09 23:30:56 +00:00
Code Issues Releases Activity

refactor: mounting behaviour for toasts and app

Browse Source
This commit is contained in:
18alantom 2022-02-10 17:02:55 +05:30
parent a2ff952b4a
commit aba83950fb
6 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@ -11,7 +11,6 @@
<noscript>
<strong>We're sorry but Frappe Books doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- built files will replace body.innerHTML -->
</body>
</html>

10
src/components/Toast.vue
View File

@ -17,7 +17,7 @@
:style="{ opacity }"
v-if="show"
>
<feather-icon :name="iconName" class="w-6 h-6 mr-3" :class="iconColor" />
<FeatherIcon :name="iconName" class="w-6 h-6 mr-3" :class="iconColor" />
<div @click="actionClicked" :class="actionText ? 'cursor-pointer' : ''">
<p class="text-base">{{ message }}</p>
<button
@ -36,8 +36,12 @@
</template>
<script>
import { getColorClass } from '../colors';
import FeatherIcon from './FeatherIcon.vue';
export default {
components: {
FeatherIcon,
},
data() {
return {
opacity: 0,
@ -77,10 +81,6 @@ export default {
},
},
mounted() {
const mountTarget = document.createElement('div');
mountTarget.id = 'toast-target';
this.$el.parentElement.append(mountTarget);
setTimeout(() => {
this.opacity = 1;
}, 50);

1
src/index.html
View File

@ -12,6 +12,5 @@
<% } %>
</head>
<body>
<div id="app"></div>
</body>
</html>

2
src/main.js
View File

@ -84,7 +84,7 @@ import { showToast, stringifyCircular } from './utils';
console.error(err, vm, info);
};
app.mount('#app');
app.mount('body');
})();
function registerIpcRendererListeners() {

4
src/pages/Desk.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="flex overflow-hidden">
<Sidebar
class="w-44 flex-shrink-0"
class="w-48 flex-shrink-0"
@change-db-file="$emit('change-db-file')"
/>
<div class="flex flex-1 overflow-y-hidden bg-white">
@ -26,7 +26,7 @@
<div
id="toast-container"
class="absolute bottom-0 flex flex-col items-center mb-3"
style="width: calc(100% - 11rem)"
style="width: calc(100% - 12rem)"
>
<div id="toast-target" />
</div>

23
src/utils.js
View File

@ -5,7 +5,7 @@ import { ipcRenderer } from 'electron';
import frappe, { t } from 'frappe';
import { isPesa } from 'frappe/utils';
import lodash from 'lodash';
import { createApp } from 'vue';
import { createApp, h } from 'vue';
import { handleErrorWithDialog } from './errorHandling';
import { IPC_ACTIONS, IPC_MESSAGES } from './messages';
@ -335,13 +335,24 @@ export async function getSavePath(name, extention) {
return { canceled, filePath };
}
function replaceAndAppendMount(app, replaceId) {
const fragment = document.createDocumentFragment();
const target = document.getElementById(replaceId);
const parent = target.parentElement;
const clone = target.cloneNode();
app.mount(fragment);
target.replaceWith(fragment);
parent.append(clone);
}
export function showToast(props) {
createApp({
el: '#toast-target',
render(createElement) {
return createElement(Toast, { props });
const toast = createApp({
render() {
return h(Toast, { ...props });
},
});
replaceAndAppendMount(toast, 'toast-target');
}
export function titleCase(phrase) {
@ -444,6 +455,8 @@ export function stringifyCircular(
});
}
window.showToast = showToast;
export function checkForUpdates(force = false) {
ipcRenderer.invoke(IPC_ACTIONS.CHECK_FOR_UPDATES, force);
}