2020-06-02 19:13:57 +02:00
|
|
|
<template>
|
|
|
|
<div id="titlebar">
|
|
|
|
<div class="titlebar-resizer" />
|
|
|
|
<div class="titlebar-elements">
|
|
|
|
<img class="titlebar-logo" :src="require('@/images/logo.svg').default">
|
|
|
|
</div>
|
2020-08-11 09:11:26 +02:00
|
|
|
<div class="titlebar-elements titlebar-title">
|
2020-08-05 13:53:30 +02:00
|
|
|
{{ windowTitle }}
|
2020-06-02 19:13:57 +02:00
|
|
|
</div>
|
|
|
|
<div class="titlebar-elements">
|
|
|
|
<div
|
|
|
|
v-if="isDevelopment"
|
|
|
|
class="titlebar-element"
|
|
|
|
@click="openDevTools"
|
|
|
|
>
|
2020-08-12 10:48:18 +02:00
|
|
|
<i class="mdi mdi-24px mdi-code-tags" />
|
2020-06-02 19:13:57 +02:00
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
v-if="isDevelopment"
|
|
|
|
class="titlebar-element"
|
|
|
|
@click="reload"
|
|
|
|
>
|
2020-08-12 10:48:18 +02:00
|
|
|
<i class="mdi mdi-24px mdi-refresh" />
|
2020-06-02 19:13:57 +02:00
|
|
|
</div>
|
|
|
|
<div class="titlebar-element" @click="minimizeApp">
|
2020-08-12 10:48:18 +02:00
|
|
|
<i class="mdi mdi-24px mdi-minus" />
|
2020-06-02 19:13:57 +02:00
|
|
|
</div>
|
|
|
|
<div class="titlebar-element" @click="toggleFullScreen">
|
2020-08-12 10:48:18 +02:00
|
|
|
<i v-if="isMaximized" class="mdi mdi-24px mdi-fullscreen-exit" />
|
|
|
|
<i v-else class="mdi mdi-24px mdi-fullscreen" />
|
2020-06-02 19:13:57 +02:00
|
|
|
</div>
|
|
|
|
<div class="titlebar-element close-button" @click="closeApp">
|
2020-08-12 10:48:18 +02:00
|
|
|
<i class="mdi mdi-24px mdi-close" />
|
2020-06-02 19:13:57 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-04-26 10:07:47 +02:00
|
|
|
import { ipcRenderer } from 'electron';
|
|
|
|
import { getCurrentWindow } from '@electron/remote';
|
2020-08-05 13:53:30 +02:00
|
|
|
import { mapGetters } from 'vuex';
|
2020-06-02 19:13:57 +02:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'TheTitleBar',
|
|
|
|
data () {
|
|
|
|
return {
|
2021-04-26 10:07:47 +02:00
|
|
|
w: getCurrentWindow(),
|
|
|
|
isMaximized: getCurrentWindow().isMaximized(),
|
2020-06-02 19:13:57 +02:00
|
|
|
isDevelopment: process.env.NODE_ENV === 'development'
|
|
|
|
};
|
|
|
|
},
|
2020-08-05 13:53:30 +02:00
|
|
|
computed: {
|
|
|
|
...mapGetters({
|
|
|
|
getConnectionName: 'connections/getConnectionName',
|
|
|
|
selectedWorkspace: 'workspaces/getSelected',
|
|
|
|
getWorkspace: 'workspaces/getWorkspace'
|
|
|
|
}),
|
|
|
|
windowTitle () {
|
|
|
|
if (!this.selectedWorkspace) return '';
|
2021-07-08 17:43:33 +02:00
|
|
|
if (this.selectedWorkspace === 'NEW') return this.$t('message.createNewConnection');
|
2020-08-05 13:53:30 +02:00
|
|
|
|
|
|
|
const connectionName = this.getConnectionName(this.selectedWorkspace);
|
|
|
|
const workspace = this.getWorkspace(this.selectedWorkspace);
|
|
|
|
const breadcrumbs = Object.values(workspace.breadcrumbs).filter(breadcrumb => breadcrumb);
|
|
|
|
|
|
|
|
return [connectionName, ...breadcrumbs].join(' • ');
|
|
|
|
}
|
|
|
|
},
|
2020-06-02 19:13:57 +02:00
|
|
|
created () {
|
|
|
|
window.addEventListener('resize', this.onResize);
|
|
|
|
},
|
|
|
|
destroyed () {
|
|
|
|
window.removeEventListener('resize', this.onResize);
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
closeApp () {
|
2020-08-18 18:03:59 +02:00
|
|
|
ipcRenderer.send('close-app');
|
2020-06-02 19:13:57 +02:00
|
|
|
},
|
|
|
|
minimizeApp () {
|
|
|
|
this.w.minimize();
|
|
|
|
},
|
|
|
|
toggleFullScreen () {
|
|
|
|
if (this.isMaximized)
|
|
|
|
this.w.unmaximize();
|
|
|
|
else
|
|
|
|
this.w.maximize();
|
|
|
|
},
|
|
|
|
openDevTools () {
|
|
|
|
this.w.openDevTools();
|
|
|
|
},
|
|
|
|
reload () {
|
|
|
|
this.w.reload();
|
|
|
|
},
|
|
|
|
onResize () {
|
|
|
|
this.isMaximized = this.w.isMaximized();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2020-07-31 18:16:28 +02:00
|
|
|
#titlebar {
|
|
|
|
display: flex;
|
|
|
|
position: relative;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
height: $titlebar-height;
|
|
|
|
-webkit-app-region: drag;
|
|
|
|
user-select: none;
|
|
|
|
z-index: 9999;
|
|
|
|
|
|
|
|
.titlebar-resizer {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 4px;
|
|
|
|
z-index: 999;
|
|
|
|
-webkit-app-region: no-drag;
|
|
|
|
}
|
|
|
|
|
|
|
|
.titlebar-elements {
|
2020-06-02 19:13:57 +02:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
2020-08-11 09:11:26 +02:00
|
|
|
&.titlebar-title {
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
text-align: center;
|
|
|
|
display: block;
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
.titlebar-logo {
|
|
|
|
height: $titlebar-height;
|
2021-04-30 14:14:01 +02:00
|
|
|
padding: 0.3rem 0.4rem;
|
2020-06-02 19:13:57 +02:00
|
|
|
}
|
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
.titlebar-element {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
height: $titlebar-height;
|
|
|
|
line-height: 0;
|
|
|
|
padding: 0 0.7rem;
|
|
|
|
opacity: 0.7;
|
|
|
|
transition: opacity 0.2s;
|
|
|
|
-webkit-app-region: no-drag;
|
2020-06-02 19:13:57 +02:00
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
&:hover {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2020-06-02 19:13:57 +02:00
|
|
|
}
|
2020-07-31 18:16:28 +02:00
|
|
|
}
|
|
|
|
}
|
2020-06-02 19:13:57 +02:00
|
|
|
</style>
|