2020-05-08 18:02:18 +02:00
|
|
|
<template>
|
2020-05-14 15:21:57 +02:00
|
|
|
<div id="settingbar">
|
2022-07-02 15:30:36 +02:00
|
|
|
<div ref="sidebarConnections" class="settingbar-top-elements">
|
2020-05-23 13:32:14 +02:00
|
|
|
<SettingBarContext
|
2020-05-22 19:32:55 +02:00
|
|
|
v-if="isContext"
|
|
|
|
:context-event="contextEvent"
|
2020-05-23 13:32:14 +02:00
|
|
|
:context-connection="contextConnection"
|
2020-08-12 18:11:48 +02:00
|
|
|
@close-context="isContext = false"
|
2020-05-23 13:32:14 +02:00
|
|
|
/>
|
2020-05-08 18:02:18 +02:00
|
|
|
<ul class="settingbar-elements">
|
2022-11-21 20:19:02 +01:00
|
|
|
<SettingBarConnections
|
|
|
|
v-model="connectionsArr"
|
|
|
|
@context="contextMenu"
|
|
|
|
/>
|
2022-07-02 15:30:36 +02:00
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="settingbar-middle-elements">
|
|
|
|
<ul class="settingbar-elements">
|
|
|
|
<li
|
|
|
|
v-if="isScrollable"
|
2022-11-28 15:11:29 +01:00
|
|
|
v-tooltip="{
|
|
|
|
strategy: 'fixed',
|
|
|
|
placement: 'right',
|
|
|
|
content: t('message.allConnections')
|
|
|
|
}"
|
2022-08-11 11:14:43 +02:00
|
|
|
class="settingbar-element btn btn-link"
|
2022-07-02 15:30:36 +02:00
|
|
|
@click="emit('show-connections-modal')"
|
|
|
|
>
|
2022-11-24 16:40:04 +01:00
|
|
|
<div class="settingbar-element-icon-wrapper">
|
|
|
|
<i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" />
|
|
|
|
</div>
|
2022-06-30 18:20:14 +02:00
|
|
|
</li>
|
2020-05-08 18:02:18 +02:00
|
|
|
<li
|
2022-11-28 15:11:29 +01:00
|
|
|
v-tooltip="{
|
|
|
|
strategy: 'fixed',
|
|
|
|
placement: 'right',
|
|
|
|
content: t('message.addConnection')
|
|
|
|
}"
|
2022-08-11 11:14:43 +02:00
|
|
|
class="settingbar-element btn btn-link"
|
|
|
|
:class="{ 'selected': 'NEW' === selectedWorkspace }"
|
2021-07-08 17:43:33 +02:00
|
|
|
@click="selectWorkspace('NEW')"
|
2020-05-08 18:02:18 +02:00
|
|
|
>
|
2022-11-24 16:40:04 +01:00
|
|
|
<div class="settingbar-element-icon-wrapper">
|
|
|
|
<i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
|
|
|
|
</div>
|
2020-05-08 18:02:18 +02:00
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="settingbar-bottom-elements">
|
|
|
|
<ul class="settingbar-elements">
|
2022-07-04 15:10:40 +02:00
|
|
|
<li
|
|
|
|
v-if="!disableScratchpad"
|
2022-11-28 15:11:29 +01:00
|
|
|
v-tooltip="{
|
|
|
|
strategy: 'fixed',
|
|
|
|
placement: 'right',
|
|
|
|
content: t('word.scratchpad')
|
|
|
|
}"
|
2022-08-11 11:14:43 +02:00
|
|
|
class="settingbar-element btn btn-link"
|
2022-07-04 15:10:40 +02:00
|
|
|
@click="showScratchpad"
|
|
|
|
>
|
2021-04-03 11:21:58 +02:00
|
|
|
<i class="settingbar-element-icon mdi mdi-24px mdi-notebook-edit-outline text-light" />
|
|
|
|
</li>
|
2022-08-11 11:14:43 +02:00
|
|
|
<li
|
2022-11-28 15:11:29 +01:00
|
|
|
v-tooltip="{
|
|
|
|
strategy: 'fixed',
|
|
|
|
placement: 'right',
|
|
|
|
content: t('word.settings')
|
|
|
|
}"
|
2022-08-11 11:14:43 +02:00
|
|
|
class="settingbar-element btn btn-link"
|
|
|
|
@click="showSettingModal('general')"
|
|
|
|
>
|
|
|
|
<i
|
|
|
|
class="settingbar-element-icon mdi mdi-24px mdi-cog text-light"
|
|
|
|
:class="{ ' badge badge-update': hasUpdates }"
|
|
|
|
/>
|
2020-05-08 18:02:18 +02:00
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2022-05-14 11:15:42 +02:00
|
|
|
<script setup lang="ts">
|
2022-06-30 18:20:14 +02:00
|
|
|
import { ref, Ref, computed, watch } from 'vue';
|
2022-05-14 11:15:42 +02:00
|
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
import { useApplicationStore } from '@/stores/application';
|
2022-11-21 20:19:02 +01:00
|
|
|
import { useConnectionsStore, SidebarElement } from '@/stores/connections';
|
2022-05-14 11:15:42 +02:00
|
|
|
import { useWorkspacesStore } from '@/stores/workspaces';
|
2022-07-04 15:10:40 +02:00
|
|
|
import { useSettingsStore } from '@/stores/settings';
|
2022-05-14 11:15:42 +02:00
|
|
|
import SettingBarContext from '@/components/SettingBarContext.vue';
|
2022-11-21 20:19:02 +01:00
|
|
|
import SettingBarConnections from '@/components/SettingBarConnections.vue';
|
2022-08-11 11:14:43 +02:00
|
|
|
import { useElementBounding } from '@vueuse/core';
|
2022-08-05 17:03:16 +02:00
|
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
|
|
|
|
const { t } = useI18n();
|
2022-11-26 11:21:47 +01:00
|
|
|
localStorage.setItem('opened-folders', '[]');
|
2022-05-14 11:15:42 +02:00
|
|
|
|
|
|
|
const applicationStore = useApplicationStore();
|
|
|
|
const connectionsStore = useConnectionsStore();
|
|
|
|
const workspacesStore = useWorkspacesStore();
|
2022-07-04 15:10:40 +02:00
|
|
|
const settingsStore = useSettingsStore();
|
2022-05-14 11:15:42 +02:00
|
|
|
|
|
|
|
const { updateStatus } = storeToRefs(applicationStore);
|
|
|
|
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
2022-11-29 18:18:56 +01:00
|
|
|
const { connectionsOrder } = storeToRefs(connectionsStore);
|
2022-07-04 15:10:40 +02:00
|
|
|
const { disableScratchpad } = storeToRefs(settingsStore);
|
2022-05-14 11:15:42 +02:00
|
|
|
|
|
|
|
const { showSettingModal, showScratchpad } = applicationStore;
|
2022-11-29 18:18:56 +01:00
|
|
|
const { updateConnectionsOrder, initConnectionsOrder } = connectionsStore;
|
2022-11-21 20:19:02 +01:00
|
|
|
const { selectWorkspace } = workspacesStore;
|
2022-05-14 11:15:42 +02:00
|
|
|
|
2022-07-02 15:30:36 +02:00
|
|
|
const emit = defineEmits(['show-connections-modal']);
|
|
|
|
|
|
|
|
const sidebarConnections: Ref<HTMLDivElement> = ref(null);
|
2022-05-14 11:15:42 +02:00
|
|
|
const isContext: Ref<boolean> = ref(false);
|
2022-07-02 15:30:36 +02:00
|
|
|
const isScrollable: Ref<boolean> = ref(false);
|
2022-05-17 19:11:31 +02:00
|
|
|
const contextEvent: Ref<MouseEvent> = ref(null);
|
2022-11-21 20:19:02 +01:00
|
|
|
const contextConnection: Ref<SidebarElement> = ref(null);
|
2022-07-02 15:30:36 +02:00
|
|
|
const sidebarConnectionsHeight = ref(useElementBounding(sidebarConnections)?.height);
|
2022-05-14 11:15:42 +02:00
|
|
|
|
2022-11-21 20:19:02 +01:00
|
|
|
const connectionsArr = computed({
|
|
|
|
get: () => connectionsOrder.value,
|
|
|
|
set: (value: SidebarElement[]) => {
|
|
|
|
updateConnectionsOrder(value);
|
2022-05-14 11:15:42 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
const hasUpdates = computed(() => ['available', 'downloading', 'downloaded', 'link'].includes(updateStatus.value));
|
|
|
|
|
2022-11-21 20:19:02 +01:00
|
|
|
const contextMenu = (event: MouseEvent, connection: SidebarElement) => {
|
2022-05-14 11:15:42 +02:00
|
|
|
contextEvent.value = event;
|
|
|
|
contextConnection.value = connection;
|
|
|
|
isContext.value = true;
|
|
|
|
};
|
|
|
|
|
2022-07-02 15:30:36 +02:00
|
|
|
watch(sidebarConnectionsHeight, (value) => {
|
|
|
|
isScrollable.value = value < sidebarConnections.value.scrollHeight;
|
|
|
|
});
|
|
|
|
|
2022-07-04 12:27:04 +02:00
|
|
|
watch(selectedWorkspace, (newVal, oldVal) => {
|
|
|
|
if (newVal !== oldVal) {
|
|
|
|
setTimeout(() => {
|
|
|
|
const element = document.querySelector<HTMLElement>('.settingbar-element.selected');
|
|
|
|
if (element) {
|
|
|
|
element.setAttribute('tabindex', '-1');
|
|
|
|
element.focus();
|
|
|
|
element.removeAttribute('tabindex');
|
|
|
|
}
|
|
|
|
}, 150);
|
|
|
|
}
|
|
|
|
});
|
2022-11-29 18:18:56 +01:00
|
|
|
|
|
|
|
if (!connectionsArr.value.length)
|
|
|
|
initConnectionsOrder();
|
2022-05-14 11:15:42 +02:00
|
|
|
</script>
|
|
|
|
|
2020-05-08 18:02:18 +02:00
|
|
|
<style lang="scss">
|
2022-08-11 11:14:43 +02:00
|
|
|
#settingbar {
|
|
|
|
width: $settingbar-width;
|
|
|
|
height: calc(100vh - #{$excluding-size});
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
// justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
padding: 0;
|
|
|
|
z-index: 9;
|
|
|
|
|
|
|
|
.settingbar-top-elements {
|
2020-07-31 18:16:28 +02:00
|
|
|
overflow-x: hidden;
|
|
|
|
overflow-y: overlay;
|
2022-07-02 15:30:36 +02:00
|
|
|
// max-height: calc((100vh - 3.5rem) - #{$excluding-size});
|
2020-07-31 18:16:28 +02:00
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
2022-08-11 11:14:43 +02:00
|
|
|
width: 3px;
|
2020-06-05 21:00:15 +02:00
|
|
|
}
|
2022-08-11 11:14:43 +02:00
|
|
|
}
|
2020-06-05 21:00:15 +02:00
|
|
|
|
2022-08-11 11:14:43 +02:00
|
|
|
.settingbar-bottom-elements {
|
2020-07-31 18:16:28 +02:00
|
|
|
z-index: 1;
|
2022-07-02 15:30:36 +02:00
|
|
|
margin-top: auto;
|
2022-08-11 11:14:43 +02:00
|
|
|
}
|
2020-06-05 21:00:15 +02:00
|
|
|
|
2022-08-11 11:14:43 +02:00
|
|
|
.settingbar-elements {
|
2020-07-31 18:16:28 +02:00
|
|
|
list-style: none;
|
|
|
|
text-align: center;
|
|
|
|
width: $settingbar-width;
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
|
2022-11-24 16:40:04 +01:00
|
|
|
li {
|
|
|
|
margin: 0;
|
2022-12-01 15:38:19 +01:00
|
|
|
background: $bg-color-light-dark;
|
2022-12-02 09:38:40 +01:00
|
|
|
|
|
|
|
&.ghost {
|
|
|
|
border-radius: $border-radius;
|
|
|
|
|
|
|
|
.settingbar-element {
|
|
|
|
&.selected::before {
|
|
|
|
height: 0;
|
|
|
|
width: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2022-11-24 16:40:04 +01:00
|
|
|
}
|
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
.settingbar-element {
|
2022-08-11 11:14:43 +02:00
|
|
|
height: $settingbar-width;
|
|
|
|
width: 100%;
|
|
|
|
margin: 0;
|
|
|
|
opacity: 0.6;
|
|
|
|
transition: opacity 0.2s;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2022-11-24 16:40:04 +01:00
|
|
|
justify-content: center;
|
2022-08-11 11:14:43 +02:00
|
|
|
border-radius: 0;
|
|
|
|
padding: 0;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.selected {
|
|
|
|
opacity: 1;
|
|
|
|
|
|
|
|
&::before {
|
2022-11-24 16:40:04 +01:00
|
|
|
height: calc(#{$settingbar-width} - 0.4rem);
|
2022-08-11 11:14:43 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
content: "";
|
|
|
|
height: 0;
|
|
|
|
width: 3px;
|
|
|
|
transition: height 0.2s;
|
2022-11-24 16:40:04 +01:00
|
|
|
background-color: rgba($color: #fff, $alpha: 0.8);
|
2022-08-11 11:14:43 +02:00
|
|
|
border-radius: $border-radius;
|
|
|
|
}
|
|
|
|
|
2022-11-24 16:40:04 +01:00
|
|
|
.settingbar-element-icon-wrapper{
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
width: 100%;
|
2022-08-11 11:14:43 +02:00
|
|
|
|
2022-11-24 16:40:04 +01:00
|
|
|
.settingbar-element-icon {
|
|
|
|
&.badge::after {
|
|
|
|
top: 10px;
|
|
|
|
right: -6px;
|
|
|
|
position: absolute;
|
|
|
|
}
|
2022-08-11 11:14:43 +02:00
|
|
|
|
2022-11-24 16:40:04 +01:00
|
|
|
&.badge-update::after {
|
|
|
|
bottom: initial;
|
|
|
|
}
|
2022-08-11 11:14:43 +02:00
|
|
|
}
|
|
|
|
|
2022-11-24 16:40:04 +01:00
|
|
|
.settingbar-element-name {
|
|
|
|
font-size: 65%;
|
|
|
|
max-width: 90%;
|
|
|
|
font-style: normal;
|
|
|
|
display: block;
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
width: calc($settingbar-width - 15px);
|
|
|
|
line-height: 1.1;
|
|
|
|
color: rgba($body-font-color-dark, 0.8);
|
|
|
|
text-align: center;
|
|
|
|
}
|
2021-07-15 18:31:44 +02:00
|
|
|
|
2022-11-24 16:40:04 +01:00
|
|
|
.settingbar-element-pin {// <- Dead
|
|
|
|
margin: 0 auto;
|
2022-08-11 11:14:43 +02:00
|
|
|
|
2022-11-24 16:40:04 +01:00
|
|
|
&::before {
|
|
|
|
font: normal normal normal 14px/1 "Material Design Icons";
|
|
|
|
content: "\F0403";
|
|
|
|
color: $body-font-color-dark;
|
|
|
|
transform: rotate(45deg);
|
|
|
|
opacity: 0.25;
|
|
|
|
top: -8px;
|
|
|
|
left: -10px;
|
|
|
|
position: absolute;
|
|
|
|
}
|
2022-08-11 11:14:43 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-05-08 18:02:18 +02:00
|
|
|
</style>
|