2020-04-30 17:48:53 +02:00
|
|
|
<template>
|
2022-03-22 16:13:44 +01:00
|
|
|
<div id="wrapper" :class="[`theme-${applicationTheme}`, !disableBlur || 'no-blur']">
|
2020-06-02 19:13:57 +02:00
|
|
|
<TheTitleBar />
|
|
|
|
<div id="window-content">
|
2022-07-02 15:30:36 +02:00
|
|
|
<TheSettingBar @show-connections-modal="isAllConnectionsModal = true" />
|
2020-06-02 19:13:57 +02:00
|
|
|
<div id="main-content" class="container">
|
2021-07-08 17:43:33 +02:00
|
|
|
<div class="columns col-gapless">
|
2020-06-03 20:56:44 +02:00
|
|
|
<Workspace
|
2020-06-02 19:13:57 +02:00
|
|
|
v-for="connection in connections"
|
|
|
|
:key="connection.uid"
|
|
|
|
:connection="connection"
|
|
|
|
/>
|
2022-03-24 17:34:24 +01:00
|
|
|
<div class="connection-panel-wrapper">
|
|
|
|
<WorkspaceAddConnectionPanel v-if="selectedWorkspace === 'NEW'" />
|
|
|
|
</div>
|
2020-06-02 19:13:57 +02:00
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
<TheFooter />
|
|
|
|
<TheNotificationsBoard />
|
|
|
|
<TheScratchpad v-if="isScratchpad" />
|
|
|
|
<ModalSettings v-if="isSettingModal" />
|
|
|
|
<BaseTextEditor class="d-none" value="" />
|
2020-05-14 15:21:57 +02:00
|
|
|
</div>
|
2020-05-07 17:45:04 +02:00
|
|
|
</div>
|
2022-07-02 15:30:36 +02:00
|
|
|
<ModalAllConnections v-if="isAllConnectionsModal" @close="isAllConnectionsModal = false" />
|
2020-04-30 17:48:53 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2022-07-02 15:30:36 +02:00
|
|
|
<script setup lang="ts">
|
2022-07-13 18:25:42 +02:00
|
|
|
import { defineAsyncComponent, onMounted, Ref, ref } from 'vue';
|
2022-04-27 18:23:48 +02:00
|
|
|
import { storeToRefs } from 'pinia';
|
2021-04-26 10:07:47 +02:00
|
|
|
import { ipcRenderer } from 'electron';
|
2022-07-02 15:30:36 +02:00
|
|
|
import { useI18n } from 'vue-i18n';
|
2021-04-26 10:07:47 +02:00
|
|
|
import { Menu, getCurrentWindow } from '@electron/remote';
|
2022-04-27 18:23:48 +02:00
|
|
|
import { useApplicationStore } from '@/stores/application';
|
2022-04-30 00:47:37 +02:00
|
|
|
import { useConnectionsStore } from '@/stores/connections';
|
|
|
|
import { useSettingsStore } from '@/stores/settings';
|
|
|
|
import { useWorkspacesStore } from '@/stores/workspaces';
|
2022-06-23 23:11:43 +02:00
|
|
|
import TheSettingBar from '@/components/TheSettingBar.vue';
|
2020-04-30 17:48:53 +02:00
|
|
|
|
2022-07-02 15:30:36 +02:00
|
|
|
const { t } = useI18n();
|
|
|
|
|
|
|
|
const TheTitleBar = defineAsyncComponent(() => import(/* webpackChunkName: "TheTitleBar" */'@/components/TheTitleBar.vue'));
|
|
|
|
const TheFooter = defineAsyncComponent(() => import(/* webpackChunkName: "TheFooter" */'@/components/TheFooter.vue'));
|
|
|
|
const TheNotificationsBoard = defineAsyncComponent(() => import(/* webpackChunkName: "TheNotificationsBoard" */'@/components/TheNotificationsBoard.vue'));
|
|
|
|
const Workspace = defineAsyncComponent(() => import(/* webpackChunkName: "Workspace" */'@/components/Workspace.vue'));
|
|
|
|
const WorkspaceAddConnectionPanel = defineAsyncComponent(() => import(/* webpackChunkName: "WorkspaceAddConnectionPanel" */'@/components/WorkspaceAddConnectionPanel.vue'));
|
|
|
|
const ModalSettings = defineAsyncComponent(() => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings.vue'));
|
|
|
|
const ModalAllConnections = defineAsyncComponent(() => import(/* webpackChunkName: "ModalAllConnections" */'@/components/ModalAllConnections.vue'));
|
|
|
|
const TheScratchpad = defineAsyncComponent(() => import(/* webpackChunkName: "TheScratchpad" */'@/components/TheScratchpad.vue'));
|
|
|
|
const BaseTextEditor = defineAsyncComponent(() => import(/* webpackChunkName: "BaseTextEditor" */'@/components/BaseTextEditor.vue'));
|
|
|
|
|
|
|
|
const applicationStore = useApplicationStore();
|
|
|
|
const connectionsStore = useConnectionsStore();
|
|
|
|
const settingsStore = useSettingsStore();
|
|
|
|
const workspacesStore = useWorkspacesStore();
|
|
|
|
|
|
|
|
const {
|
|
|
|
isSettingModal,
|
|
|
|
isScratchpad
|
|
|
|
} = storeToRefs(applicationStore);
|
|
|
|
const { connections } = storeToRefs(connectionsStore);
|
|
|
|
const { applicationTheme, disableBlur } = storeToRefs(settingsStore);
|
|
|
|
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
|
|
|
|
|
|
|
const { checkVersionUpdate } = applicationStore;
|
|
|
|
const { changeApplicationTheme } = settingsStore;
|
|
|
|
|
|
|
|
const isAllConnectionsModal: Ref<boolean> = ref(false);
|
|
|
|
|
2022-07-13 18:25:42 +02:00
|
|
|
ipcRenderer.on('open-connections-modal', () => {
|
|
|
|
isAllConnectionsModal.value = true;
|
|
|
|
});
|
2022-07-04 15:10:40 +02:00
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
setTimeout(() => {
|
|
|
|
changeApplicationTheme(applicationTheme.value);// Forces persistentStore to save on file and mail process
|
|
|
|
}, 1000);
|
2022-07-04 12:42:33 +02:00
|
|
|
});
|
|
|
|
|
2022-07-02 15:30:36 +02:00
|
|
|
onMounted(() => {
|
|
|
|
ipcRenderer.send('check-for-updates');
|
|
|
|
checkVersionUpdate();
|
|
|
|
|
|
|
|
const InputMenu = Menu.buildFromTemplate([
|
|
|
|
{
|
|
|
|
label: t('word.cut'),
|
|
|
|
role: 'cut'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: t('word.copy'),
|
|
|
|
role: 'copy'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: t('word.paste'),
|
|
|
|
role: 'paste'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'separator'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: t('message.selectAll'),
|
|
|
|
role: 'selectAll'
|
|
|
|
}
|
|
|
|
]);
|
|
|
|
|
|
|
|
document.body.addEventListener('contextmenu', (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
|
|
let node: any = e.target;
|
|
|
|
|
|
|
|
while (node) {
|
|
|
|
if (node.nodeName.match(/^(input|textarea)$/i) || node.isContentEditable) {
|
|
|
|
InputMenu.popup({ window: getCurrentWindow() });
|
|
|
|
break;
|
2021-02-21 21:24:25 +01:00
|
|
|
}
|
2022-07-02 15:30:36 +02:00
|
|
|
node = node.parentNode;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
2020-04-30 17:48:53 +02:00
|
|
|
</script>
|
|
|
|
|
2020-05-14 15:21:57 +02:00
|
|
|
<style lang="scss">
|
2020-08-03 18:07:08 +02:00
|
|
|
html,
|
|
|
|
body {
|
|
|
|
height: 100%;
|
|
|
|
}
|
2020-05-08 18:02:18 +02:00
|
|
|
|
2020-08-03 18:07:08 +02:00
|
|
|
#wrapper {
|
|
|
|
height: 100vh;
|
|
|
|
position: relative;
|
|
|
|
}
|
2020-05-08 18:02:18 +02:00
|
|
|
|
2020-08-03 18:07:08 +02:00
|
|
|
#window-content {
|
|
|
|
display: flex;
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
2020-06-02 19:13:57 +02:00
|
|
|
|
2020-08-03 18:07:08 +02:00
|
|
|
#main-content {
|
|
|
|
padding: 0;
|
|
|
|
justify-content: flex-start;
|
|
|
|
height: calc(100vh - #{$excluding-size});
|
|
|
|
width: calc(100% - #{$settingbar-width});
|
2020-05-14 15:21:57 +02:00
|
|
|
|
2020-08-03 18:07:08 +02:00
|
|
|
> .columns {
|
|
|
|
height: calc(100vh - #{$footer-height});
|
|
|
|
}
|
2022-03-24 17:34:24 +01:00
|
|
|
|
2022-06-05 17:57:44 +02:00
|
|
|
.connection-panel-wrapper {
|
2022-03-24 17:34:24 +01:00
|
|
|
height: calc(100vh - #{$excluding-size});
|
|
|
|
width: 100%;
|
2022-07-16 12:01:37 +02:00
|
|
|
padding-top: 2rem;
|
2022-03-24 17:34:24 +01:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
2022-07-16 12:01:37 +02:00
|
|
|
align-items: center;
|
2022-03-24 17:34:24 +01:00
|
|
|
overflow: auto;
|
2022-06-05 17:57:44 +02:00
|
|
|
}
|
2020-08-03 18:07:08 +02:00
|
|
|
}
|
2020-04-30 17:48:53 +02:00
|
|
|
</style>
|