fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

feat(UI): connection name on left bar, closes #382 #414

This commit is contained in:
Fabio Di Stasio 2022-08-11 11:14:43 +02:00
parent 77ab8d8a03
commit 48877534d1
4 changed files with 148 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

246
src/renderer/components/TheSettingBar.vue
View File

@ -14,17 +14,20 @@
@start="isDragging = true" @start="isDragging = true"
@end="dragStop" @end="dragStop"
> >
<template #item="{element}"> <template #item="{ element }">
<li <li
:draggable="true" :draggable="true"
class="settingbar-element btn btn-link ex-tooltip" class="settingbar-element btn btn-link"
:class="{'selected': element.uid === selectedWorkspace}" :class="{ 'selected': element.uid === selectedWorkspace }"
:title="getConnectionName(element.uid)"
@click.stop="selectWorkspace(element.uid)" @click.stop="selectWorkspace(element.uid)"
@contextmenu.prevent="contextMenu($event, element)" @contextmenu.prevent="contextMenu($event, element)"
@mouseover.self="tooltipPosition"
> >
<i class="settingbar-element-icon dbi" :class="[`dbi-${element.client}`, getStatusBadge(element.uid), (pinnedConnections.has(element.uid) ? 'settingbar-element-pin' : false)]" /> <i
<span v-if="!isDragging && !isScrolling" class="ex-tooltip-content">{{ getConnectionName(element.uid) }}</span> class="settingbar-element-icon dbi"
:class="[`dbi-${element.client}`, getStatusBadge(element.uid), (pinnedConnections.has(element.uid) ? 'settingbar-element-pin' : false)]"
/>
<small class="settingbar-element-name">{{ getConnectionName(element.uid) }}</small>
</li> </li>
</template> </template>
</Draggable> </Draggable>
@ -34,14 +37,17 @@
<li <li
v-for="connection in unpinnedConnectionsArr" v-for="connection in unpinnedConnectionsArr"
:key="connection.uid" :key="connection.uid"
class="settingbar-element btn btn-link ex-tooltip" class="settingbar-element btn btn-link"
:class="{'selected': connection.uid === selectedWorkspace}" :class="{ 'selected': connection.uid === selectedWorkspace }"
:title="getConnectionName(connection.uid)"
@click.stop="selectWorkspace(connection.uid)" @click.stop="selectWorkspace(connection.uid)"
@contextmenu.prevent="contextMenu($event, connection)" @contextmenu.prevent="contextMenu($event, connection)"
@mouseover.self="tooltipPosition"
> >
<i class="settingbar-element-icon dbi" :class="[`dbi-${connection.client}`, getStatusBadge(connection.uid)]" /> <i
<span v-if="!isDragging && !isScrolling" class="ex-tooltip-content">{{ getConnectionName(connection.uid) }}</span> class="settingbar-element-icon dbi"
:class="[`dbi-${connection.client}`, getStatusBadge(connection.uid)]"
/>
<small class="settingbar-element-name">{{ getConnectionName(connection.uid) }}</small>
</li> </li>
</ul> </ul>
</div> </div>
@ -50,21 +56,19 @@
<ul class="settingbar-elements"> <ul class="settingbar-elements">
<li <li
v-if="isScrollable" v-if="isScrollable"
class="settingbar-element btn btn-link ex-tooltip" class="settingbar-element btn btn-link"
:title="t('message.allConnections')"
@click="emit('show-connections-modal')" @click="emit('show-connections-modal')"
@mouseover.self="tooltipPosition"
> >
<i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" /> <i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" />
<span class="ex-tooltip-content">{{ t('message.allConnections') }} (Shift+CTRL+Space)</span>
</li> </li>
<li <li
class="settingbar-element btn btn-link ex-tooltip" class="settingbar-element btn btn-link"
:class="{'selected': 'NEW' === selectedWorkspace}" :class="{ 'selected': 'NEW' === selectedWorkspace }"
:title="t('message.addConnection')"
@click="selectWorkspace('NEW')" @click="selectWorkspace('NEW')"
@mouseover.self="tooltipPosition"
> >
<i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" /> <i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
<span class="ex-tooltip-content">{{ t('message.addConnection') }}</span>
</li> </li>
</ul> </ul>
</div> </div>
@ -73,15 +77,21 @@
<ul class="settingbar-elements"> <ul class="settingbar-elements">
<li <li
v-if="!disableScratchpad" v-if="!disableScratchpad"
class="settingbar-element btn btn-link ex-tooltip" class="settingbar-element btn btn-link"
:title="t('word.scratchpad')"
@click="showScratchpad" @click="showScratchpad"
> >
<i class="settingbar-element-icon mdi mdi-24px mdi-notebook-edit-outline text-light" /> <i class="settingbar-element-icon mdi mdi-24px mdi-notebook-edit-outline text-light" />
<span class="ex-tooltip-content">{{ t('word.scratchpad') }}</span>
</li> </li>
<li class="settingbar-element btn btn-link ex-tooltip" @click="showSettingModal('general')"> <li
<i class="settingbar-element-icon mdi mdi-24px mdi-cog text-light" :class="{' badge badge-update': hasUpdates}" /> class="settingbar-element btn btn-link"
<span class="ex-tooltip-content">{{ t('word.settings') }}</span> :title="t('word.settings')"
@click="showSettingModal('general')"
>
<i
class="settingbar-element-icon mdi mdi-24px mdi-cog text-light"
:class="{ ' badge badge-update': hasUpdates }"
/>
</li> </li>
</ul> </ul>
</div> </div>
@ -98,7 +108,7 @@ import { useSettingsStore } from '@/stores/settings';
import * as Draggable from 'vuedraggable'; import * as Draggable from 'vuedraggable';
import SettingBarContext from '@/components/SettingBarContext.vue'; import SettingBarContext from '@/components/SettingBarContext.vue';
import { ConnectionParams } from 'common/interfaces/antares'; import { ConnectionParams } from 'common/interfaces/antares';
import { useElementBounding, useScroll } from '@vueuse/core'; import { useElementBounding } from '@vueuse/core';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const { t } = useI18n(); const { t } = useI18n();
@ -125,7 +135,6 @@ const sidebarConnections: Ref<HTMLDivElement> = ref(null);
const isContext: Ref<boolean> = ref(false); const isContext: Ref<boolean> = ref(false);
const isDragging: Ref<boolean> = ref(false); const isDragging: Ref<boolean> = ref(false);
const isScrollable: Ref<boolean> = ref(false); const isScrollable: Ref<boolean> = ref(false);
const isScrolling = ref(useScroll(sidebarConnections)?.isScrolling);
const contextEvent: Ref<MouseEvent> = ref(null); const contextEvent: Ref<MouseEvent> = ref(null);
const contextConnection: Ref<ConnectionParams> = ref(null); const contextConnection: Ref<ConnectionParams> = ref(null);
const sidebarConnectionsHeight = ref(useElementBounding(sidebarConnections)?.height); const sidebarConnectionsHeight = ref(useElementBounding(sidebarConnections)?.height);
@ -240,32 +249,32 @@ watch(selectedWorkspace, (newVal, oldVal) => {
</script> </script>
<style lang="scss"> <style lang="scss">
#settingbar { #settingbar {
width: $settingbar-width; width: $settingbar-width;
height: calc(100vh - #{$excluding-size}); height: calc(100vh - #{$excluding-size});
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// justify-content: space-between; // justify-content: space-between;
align-items: center; align-items: center;
padding: 0; padding: 0;
z-index: 9; z-index: 9;
.settingbar-top-elements { .settingbar-top-elements {
overflow-x: hidden; overflow-x: hidden;
overflow-y: overlay; overflow-y: overlay;
// max-height: calc((100vh - 3.5rem) - #{$excluding-size}); // max-height: calc((100vh - 3.5rem) - #{$excluding-size});
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 3px; width: 3px;
} }
} }
.settingbar-bottom-elements { .settingbar-bottom-elements {
z-index: 1; z-index: 1;
margin-top: auto; margin-top: auto;
} }
.settingbar-elements { .settingbar-elements {
list-style: none; list-style: none;
text-align: center; text-align: center;
width: $settingbar-width; width: $settingbar-width;
@ -273,101 +282,84 @@ watch(selectedWorkspace, (newVal, oldVal) => {
margin: 0; margin: 0;
.settingbar-element { .settingbar-element {
height: $settingbar-width; height: $settingbar-width;
width: 100%; width: 100%;
margin: 0; margin: 0;
opacity: 0.5; opacity: 0.6;
transition: opacity 0.2s; transition: opacity 0.2s;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
border-radius: 0; border-radius: 0;
padding: 0; padding: 0;
position: relative;
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
&.selected { &.selected {
opacity: 1; opacity: 1;
&::before { &::before {
height: $settingbar-width; height: $settingbar-width;
} }
} }
&::before { &::before {
content: ""; content: "";
height: 0; height: 0;
width: 3px; width: 3px;
transition: height 0.2s; transition: height 0.2s;
background-color: $primary-color; background-color: $primary-color;
border-radius: $border-radius; border-radius: $border-radius;
} }
.settingbar-element-icon { .settingbar-element-icon {
margin: 0 auto; margin: 0 auto;
&.badge::after { &.badge::after {
bottom: -10px; top: 5px;
right: 0; right: -4px;
position: absolute;
}
&.badge-update::after {
bottom: initial;
}
}
.settingbar-element-name {
font-size: 65%;
bottom: 5px;
left: 7px;
position: absolute; position: absolute;
} font-style: normal;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: calc($settingbar-width - 15px);
text-align: left;
line-height: 1.1;
color: rgba($body-font-color-dark, 0.8);
}
&.badge-update::after { .settingbar-element-pin {
bottom: initial; margin: 0 auto;
}
}
.settingbar-element-pin { &::before {
margin: 0 auto; font: normal normal normal 14px/1 "Material Design Icons";
content: "\F0403";
&::before { color: $body-font-color-dark;
font: normal normal normal 14px/1 "Material Design Icons"; transform: rotate(45deg);
content: "\F0403"; opacity: 0.25;
color: $body-font-color-dark; top: -8px;
transform: rotate(45deg); left: -10px;
opacity: 0.25; position: absolute;
bottom: -8px; }
left: -4px; }
position: absolute;
}
}
} }
} }
} }
.ex-tooltip {// Because both overflow-x: visible and overflow-y:auto are evil!!!
.ex-tooltip-content {
z-index: 999;
visibility: hidden;
opacity: 0;
display: block;
position: absolute;
text-align: center;
margin: 0 0 0 calc(#{$settingbar-width} - 5px);
left: 0;
padding: 0.2rem 0.4rem;
font-size: 0.7rem;
background: rgba(48, 55, 66, 0.95);
border-radius: $border-radius;
color: #fff;
max-width: 320px;
pointer-events: none;
text-overflow: ellipsis;
overflow: hidden;
transition: opacity 0.2s;
}
&.sortable-chosen {
.ex-tooltip-content {
opacity: 0 !important;
}
}
&:hover:not(.selected) .ex-tooltip-content {
visibility: visible;
opacity: 1;
}
}
</style> </style>

2
src/renderer/scss/_variables.scss
View File

@ -24,7 +24,7 @@ $unknown-color: gray;
/* Sizes */ /* Sizes */
$border-radius: 0.3rem; $border-radius: 0.3rem;
$titlebar-height: 1.5rem; $titlebar-height: 1.5rem;
$settingbar-width: 3rem; $settingbar-width: 3.5rem;
$explorebar-width: 14rem; $explorebar-width: 14rem;
$footer-height: 1.5rem; $footer-height: 1.5rem;

41
src/renderer/scss/themes/dark-theme.scss
View File

@ -1,3 +1,5 @@
/* stylelint-disable selector-class-pattern */
/* stylelint-disable function-no-unknown */
.theme-dark { .theme-dark {
color: $body-font-color-dark; color: $body-font-color-dark;
background: $body-bg-dark; background: $body-bg-dark;
@ -7,10 +9,10 @@
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba($color: #fff, $alpha: 0.5); background: rgba($color: #fff, $alpha: 50%);
&:hover { &:hover {
background: rgba($color: #fff, $alpha: 1); background: rgba($color: #fff, $alpha: 100%);
} }
} }
@ -25,7 +27,7 @@
background-color: $bg-color-gray; background-color: $bg-color-gray;
} }
// Override Spectre.css /* Override Spectre.css */
.menu { .menu {
background: $bg-color-light-dark; background: $bg-color-light-dark;
@ -79,7 +81,7 @@
.modal { .modal {
.modal-overlay, .modal-overlay,
&.active .modal-overlay { &.active .modal-overlay {
background: rgba(255, 255, 255, 0.15); background: rgb(255 255 255 / 15%);
} }
.modal-container, .modal-container,
@ -100,7 +102,7 @@
.form-select, .form-select,
.form-input, .form-input,
.form-select:not([multiple]):not([size]), .form-select:not([multiple], [size]),
.form-checkbox .form-icon, .form-checkbox .form-icon,
.form-radio .form-icon { .form-radio .form-icon {
border-color: $bg-color-light-dark; border-color: $bg-color-light-dark;
@ -108,6 +110,10 @@
color: $body-font-color-dark; color: $body-font-color-dark;
} }
.form-select:not([multiple], [size]) {
background-color: $bg-color-gray !important;
}
.form-input.is-error, .form-input.is-error,
.form-select.is-error { .form-select.is-error {
background-color: $bg-color-gray; background-color: $bg-color-gray;
@ -117,7 +123,7 @@
background: $bg-color-gray; background: $bg-color-gray;
} }
.form-select:not([multiple]):not([size]):focus { .form-select:not([multiple], [size]):focus {
border-color: $primary-color; border-color: $primary-color;
} }
@ -161,7 +167,7 @@
color: rgba($body-font-color-dark, 0.7); color: rgba($body-font-color-dark, 0.7);
} }
// Antares /* Antares */
.workspace { .workspace {
.workspace-explorebar { .workspace-explorebar {
background: $bg-color-gray; background: $bg-color-gray;
@ -191,7 +197,7 @@
&:hover, &:hover,
&.selected { &.selected {
color: $body-font-color-dark; color: $body-font-color-dark;
background: rgba($color: #fff, $alpha: 0.05); background: rgba($color: #fff, $alpha: 5%);
} }
} }
} }
@ -238,12 +244,12 @@
&:focus, &:focus,
&.selected { &.selected {
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%); box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
background-color: rgba($color: #000, $alpha: 0.3); background-color: rgba($color: #000, $alpha: 30%);
} }
.editable-field { .editable-field {
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%); box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
background-color: rgba($color: #000, $alpha: 0.3); background-color: rgba($color: #000, $alpha: 30%);
} }
} }
} }
@ -264,7 +270,7 @@
.bg-checkered { .bg-checkered {
background-image: background-image:
linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)), linear-gradient(to right, rgb(192 192 192 / 75%), rgb(192 192 192 / 75%)),
linear-gradient(to right, black 50%, white 50%), linear-gradient(to right, black 50%, white 50%),
linear-gradient(to bottom, black 50%, white 50%); linear-gradient(to bottom, black 50%, white 50%);
background-blend-mode: normal, difference, normal; background-blend-mode: normal, difference, normal;
@ -385,7 +391,7 @@
.titlebar-element { .titlebar-element {
&:hover { &:hover {
opacity: 1; opacity: 1;
background: rgba($color: #fff, $alpha: 0.1); background: rgba($color: #fff, $alpha: 10%);
} }
&.close-button:hover { &.close-button:hover {
@ -430,14 +436,7 @@
.settingbar-element { .settingbar-element {
.settingbar-element-icon { .settingbar-element-icon {
&.badge::after {
bottom: -10px;
right: 0;
position: absolute;
}
&.badge-update::after { &.badge-update::after {
bottom: initial;
background: $primary-color; background: $primary-color;
} }
} }
@ -447,7 +446,7 @@
.ex-tooltip { .ex-tooltip {
.ex-tooltip-content { .ex-tooltip-content {
background: rgba(48, 55, 66, 0.95); background: rgb(48 55 66 / 95%);
color: #fff; color: #fff;
} }
} }
@ -460,7 +459,7 @@
.footer-element { .footer-element {
&.footer-link { &.footer-link {
&:hover { &:hover {
background: rgba($color: #fff, $alpha: 0.1); background: rgba($color: #fff, $alpha: 10%);
} }
} }
} }

22
src/renderer/scss/themes/light-theme.scss
View File

@ -1,13 +1,14 @@
/* stylelint-disable function-no-unknown */
.theme-light { .theme-light {
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: #fff; background: #fff;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba($color: $bg-color-light-dark, $alpha: 0.5); background: rgba($color: $bg-color-light-dark, $alpha: 50%);
&:hover { &:hover {
background: rgba($color: $bg-color-light-dark, $alpha: 1); background: rgba($color: $bg-color-light-dark, $alpha: 100%);
} }
} }
@ -38,7 +39,7 @@
.menu-item a { .menu-item a {
&:hover { &:hover {
color: $body-font-color; color: $body-font-color;
background: rgba($color: #000, $alpha: 0.1); background: rgba($color: #000, $alpha: 10%);
} }
} }
} }
@ -148,7 +149,7 @@
.titlebar-element { .titlebar-element {
&:hover { &:hover {
opacity: 1; opacity: 1;
background: rgba($color: rgb(172, 172, 172), $alpha: 0.3); background: rgba($color: rgb(172 172 172), $alpha: 30%);
} }
&.close-button:hover { &.close-button:hover {
@ -193,14 +194,7 @@
.settingbar-element { .settingbar-element {
.settingbar-element-icon { .settingbar-element-icon {
&.badge::after {
bottom: -10px;
right: 0;
position: absolute;
}
&.badge-update::after { &.badge-update::after {
bottom: initial;
background: $primary-color; background: $primary-color;
} }
} }
@ -210,7 +204,7 @@
.ex-tooltip { .ex-tooltip {
.ex-tooltip-content { .ex-tooltip-content {
background: rgba(48, 55, 66, 0.95); background: rgb(48 55 66 / 95%);
color: #fff; color: #fff;
} }
} }
@ -228,7 +222,7 @@
.menu-item { .menu-item {
&:hover, &:hover,
&.selected { &.selected {
background: rgba($color: #000, $alpha: 0.05); background: rgba($color: #000, $alpha: 5%);
} }
} }
@ -365,7 +359,7 @@
.footer-element { .footer-element {
&.footer-link { &.footer-link {
&:hover { &:hover {
background: rgba($color: #fff, $alpha: 0.1); background: rgba($color: #fff, $alpha: 10%);
} }
} }
} }