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

Merge branch 'master' of https://github.com/antares-sql/antares into custom-shortcuts

This commit is contained in:
Fabio Di Stasio 2022-08-11 11:22:25 +02:00
parent c22413fde9 48877534d1
commit 75c5a34095
7 changed files with 158 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md
View File

@ -2,6 +2,13 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
### [0.5.14](https://github.com/antares-sql/antares/compare/v0.5.13...v0.5.14) (2022-08-09)
### Bug Fixes
* unable to open settingbar context menu ([44eb507](https://github.com/antares-sql/antares/commit/44eb507a12bad028a4fa8a8bb0f6442a3e8dde91))
### [0.5.13](https://github.com/antares-sql/antares/compare/v0.5.12...v0.5.13) (2022-08-09)

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "antares",
"version": "0.5.13",
"version": "0.5.14",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "antares",
"version": "0.5.13",
"version": "0.5.14",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "antares",
"productName": "Antares",
"version": "0.5.13",
"version": "0.5.14",
"description": "A modern, fast and productivity driven SQL client with a focus in UX.",
"license": "MIT",
"repository": "https://github.com/antares-sql/antares.git",

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

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

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

@ -24,7 +24,7 @@ $unknown-color: gray;
/* Sizes */
$border-radius: 0.3rem;
$titlebar-height: 1.5rem;
$settingbar-width: 3rem;
$settingbar-width: 3.5rem;
$explorebar-width: 14rem;
$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 {
color: $body-font-color-dark;
background: $body-bg-dark;
@ -7,10 +9,10 @@
}
::-webkit-scrollbar-thumb {
background: rgba($color: #fff, $alpha: 0.5);
background: rgba($color: #fff, $alpha: 50%);
&:hover {
background: rgba($color: #fff, $alpha: 1);
background: rgba($color: #fff, $alpha: 100%);
}
}
@ -25,7 +27,7 @@
background-color: $bg-color-gray;
}
// Override Spectre.css
/* Override Spectre.css */
.menu {
background: $bg-color-light-dark;
@ -79,7 +81,7 @@
.modal {
.modal-overlay,
&.active .modal-overlay {
background: rgba(255, 255, 255, 0.15);
background: rgb(255 255 255 / 15%);
}
.modal-container,
@ -100,7 +102,7 @@
.form-select,
.form-input,
.form-select:not([multiple]):not([size]),
.form-select:not([multiple], [size]),
.form-checkbox .form-icon,
.form-radio .form-icon {
border-color: $bg-color-light-dark;
@ -108,6 +110,10 @@
color: $body-font-color-dark;
}
.form-select:not([multiple], [size]) {
background-color: $bg-color-gray !important;
}
.form-input.is-error,
.form-select.is-error {
background-color: $bg-color-gray;
@ -117,7 +123,7 @@
background: $bg-color-gray;
}
.form-select:not([multiple]):not([size]):focus {
.form-select:not([multiple], [size]):focus {
border-color: $primary-color;
}
@ -161,7 +167,7 @@
color: rgba($body-font-color-dark, 0.7);
}
// Antares
/* Antares */
.workspace {
.workspace-explorebar {
background: $bg-color-gray;
@ -191,7 +197,7 @@
&:hover,
&.selected {
color: $body-font-color-dark;
background: rgba($color: #fff, $alpha: 0.05);
background: rgba($color: #fff, $alpha: 5%);
}
}
}
@ -238,12 +244,12 @@
&:focus,
&.selected {
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 {
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 {
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 bottom, black 50%, white 50%);
background-blend-mode: normal, difference, normal;
@ -385,7 +391,7 @@
.titlebar-element {
&:hover {
opacity: 1;
background: rgba($color: #fff, $alpha: 0.1);
background: rgba($color: #fff, $alpha: 10%);
}
&.close-button:hover {
@ -430,14 +436,7 @@
.settingbar-element {
.settingbar-element-icon {
&.badge::after {
bottom: -10px;
right: 0;
position: absolute;
}
&.badge-update::after {
bottom: initial;
background: $primary-color;
}
}
@ -447,7 +446,7 @@
.ex-tooltip {
.ex-tooltip-content {
background: rgba(48, 55, 66, 0.95);
background: rgb(48 55 66 / 95%);
color: #fff;
}
}
@ -460,7 +459,7 @@
.footer-element {
&.footer-link {
&: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 {
::-webkit-scrollbar-track {
background: #fff;
}
::-webkit-scrollbar-thumb {
background: rgba($color: $bg-color-light-dark, $alpha: 0.5);
background: rgba($color: $bg-color-light-dark, $alpha: 50%);
&: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 {
&:hover {
color: $body-font-color;
background: rgba($color: #000, $alpha: 0.1);
background: rgba($color: #000, $alpha: 10%);
}
}
}
@ -148,7 +149,7 @@
.titlebar-element {
&:hover {
opacity: 1;
background: rgba($color: rgb(172, 172, 172), $alpha: 0.3);
background: rgba($color: rgb(172 172 172), $alpha: 30%);
}
&.close-button:hover {
@ -193,14 +194,7 @@
.settingbar-element {
.settingbar-element-icon {
&.badge::after {
bottom: -10px;
right: 0;
position: absolute;
}
&.badge-update::after {
bottom: initial;
background: $primary-color;
}
}
@ -210,7 +204,7 @@
.ex-tooltip {
.ex-tooltip-content {
background: rgba(48, 55, 66, 0.95);
background: rgb(48 55 66 / 95%);
color: #fff;
}
}
@ -228,7 +222,7 @@
.menu-item {
&:hover,
&.selected {
background: rgba($color: #000, $alpha: 0.05);
background: rgba($color: #000, $alpha: 5%);
}
}
@ -365,7 +359,7 @@
.footer-element {
&.footer-link {
&:hover {
background: rgba($color: #fff, $alpha: 0.1);
background: rgba($color: #fff, $alpha: 10%);
}
}
}