antares/src/renderer/App.vue

94 lines
2.9 KiB
Vue
Raw Normal View History

2020-04-30 17:48:53 +02:00
<template>
2020-05-07 17:45:04 +02:00
<div id="wrapper">
2020-06-02 19:13:57 +02:00
<TheTitleBar />
<div id="window-content">
<TheSettingBar />
<div id="main-content" class="container">
<TheAppWelcome v-if="!connections.length" @new-conn="showNewConnModal" />
2020-06-02 19:13:57 +02:00
<div v-else 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"
/>
</div>
2020-05-14 15:21:57 +02:00
</div>
2020-06-02 19:13:57 +02:00
<TheFooter />
<TheNotificationsBoard />
<ModalNewConnection v-if="isNewConnModal" />
<ModalSettings v-if="isSettingModal" />
2020-12-04 11:19:16 +01:00
<ModalDiscardChanges v-if="isUnsavedDiscardModal" />
2020-05-07 17:45:04 +02:00
</div>
2020-04-30 17:48:53 +02:00
</div>
</template>
<script>
2020-05-12 18:27:31 +02:00
import { mapActions, mapGetters } from 'vuex';
2020-06-19 18:03:52 +02:00
import { ipcRenderer } from 'electron';
2020-04-30 17:48:53 +02:00
export default {
name: 'App',
components: {
2020-06-10 19:29:10 +02:00
TheTitleBar: () => import(/* webpackChunkName: "TheTitleBar" */'@/components/TheTitleBar'),
TheSettingBar: () => import(/* webpackChunkName: "TheSettingBar" */'@/components/TheSettingBar'),
TheFooter: () => import(/* webpackChunkName: "TheFooter" */'@/components/TheFooter'),
TheNotificationsBoard: () => import(/* webpackChunkName: "TheNotificationsBoard" */'@/components/TheNotificationsBoard'),
TheAppWelcome: () => import(/* webpackChunkName: "TheAppWelcome" */'@/components/TheAppWelcome'),
Workspace: () => import(/* webpackChunkName: "Workspace" */'@/components/Workspace'),
ModalNewConnection: () => import(/* webpackChunkName: "ModalNewConnection" */'@/components/ModalNewConnection'),
2020-12-04 11:19:16 +01:00
ModalSettings: () => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings'),
ModalDiscardChanges: () => import(/* webpackChunkName: "ModalDiscardChanges" */'@/components/ModalDiscardChanges')
2020-05-07 17:45:04 +02:00
},
data () {
2020-08-03 18:07:08 +02:00
return {};
2020-05-07 17:45:04 +02:00
},
computed: {
2020-05-12 18:27:31 +02:00
...mapGetters({
isLoading: 'application/isLoading',
2020-05-30 12:54:05 +02:00
isNewConnModal: 'application/isNewModal',
isEditModal: 'application/isEditModal',
isSettingModal: 'application/isSettingModal',
2020-12-04 11:19:16 +01:00
connections: 'connections/getConnections',
isUnsavedDiscardModal: 'workspaces/isUnsavedDiscardModal'
2020-05-08 18:02:18 +02:00
})
2020-05-07 17:45:04 +02:00
},
2020-06-19 18:03:52 +02:00
mounted () {
ipcRenderer.send('check-for-updates');
2020-06-19 18:03:52 +02:00
},
2020-05-07 17:45:04 +02:00
methods: {
2020-05-08 18:02:18 +02:00
...mapActions({
2020-05-30 12:54:05 +02:00
showNewConnModal: 'application/showNewConnModal'
2020-05-08 18:02:18 +02:00
})
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});
}
}
2020-04-30 17:48:53 +02:00
</style>