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

feat(UI): active tab animation

This commit is contained in:
Fabio Di Stasio 2021-06-28 18:34:39 +02:00
parent 0110756204
commit 978a7c5f5b
8 changed files with 78 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/renderer/components/ModalEditConnection.vue
View File

@ -15,18 +15,18 @@
<div class="panel-nav">
<ul class="tab tab-block">
<li
class="tab-item"
class="tab-item c-hand"
:class="{'active': selectedTab === 'general'}"
@click="selectTab('general')"
>
<a class="c-hand">{{ $t('word.general') }}</a>
<a class="tab-link">{{ $t('word.general') }}</a>
</li>
<li
class="tab-item"
class="tab-item c-hand"
:class="{'active': selectedTab === 'ssl'}"
@click="selectTab('ssl')"
>
<a class="c-hand">{{ $t('word.ssl') }}</a>
<a class="tab-link">{{ $t('word.ssl') }}</a>
</li>
</ul>
</div>

8
src/renderer/components/ModalNewConnection.vue
View File

@ -16,18 +16,18 @@
<div class="panel-nav">
<ul class="tab tab-block">
<li
class="tab-item"
class="tab-item c-hand"
:class="{'active': selectedTab === 'general'}"
@click="selectTab('general')"
>
<a class="c-hand">{{ $t('word.general') }}</a>
<a class="tab-link">{{ $t('word.general') }}</a>
</li>
<li
class="tab-item"
class="tab-item c-hand"
:class="{'active': selectedTab === 'ssl'}"
@click="selectTab('ssl')"
>
<a class="c-hand">{{ $t('word.ssl') }}</a>
<a class="tab-link">{{ $t('word.ssl') }}</a>
</li>
</ul>
</div>

20
src/renderer/components/ModalSettings.vue
View File

@ -16,40 +16,40 @@
<div class="panel-nav">
<ul class="tab tab-block">
<li
class="tab-item"
class="tab-item c-hand"
:class="{'active': selectedTab === 'general'}"
@click="selectTab('general')"
>
<a class="c-hand">{{ $t('word.general') }}</a>
<a class="tab-link">{{ $t('word.general') }}</a>
</li>
<li
class="tab-item"
class="tab-item c-hand"
:class="{'active': selectedTab === 'themes'}"
@click="selectTab('themes')"
>
<a class="c-hand">{{ $t('word.themes') }}</a>
<a class="tab-link">{{ $t('word.themes') }}</a>
</li>
<li
v-if="updateStatus !== 'disabled'"
class="tab-item"
class="tab-item c-hand"
:class="{'active': selectedTab === 'update'}"
@click="selectTab('update')"
>
<a class="c-hand" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
<a class="tab-link" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
</li>
<li
class="tab-item"
class="tab-item c-hand"
:class="{'active': selectedTab === 'changelog'}"
@click="selectTab('changelog')"
>
<a class="c-hand">{{ $t('word.changelog') }}</a>
<a class="tab-link">{{ $t('word.changelog') }}</a>
</li>
<li
class="tab-item"
class="tab-item c-hand"
:class="{'active': selectedTab === 'about'}"
@click="selectTab('about')"
>
<a class="c-hand">{{ $t('word.about') }}</a>
<a class="tab-link">{{ $t('word.about') }}</a>
</li>
</ul>
</div>

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

@ -182,6 +182,21 @@ export default {
&.selected {
opacity: 1;
&::before {
height: $settingbar-width;
}
}
&::before {
content: '';
height: 0;
width: 3px;
transition: height 0.2s;
background-color: $primary-color;
position: absolute;
left: 0;
border-radius: $border-radius;
}
.settingbar-element-icon {

39
src/renderer/components/WorkspaceQueryTab.vue
View File

@ -31,6 +31,27 @@
<span>{{ $t('word.run') }}</span>
<i class="mdi mdi-24px mdi-play" />
</button>
<button
class="btn btn-dark btn-sm"
:disabled="!query || isQuering"
title="CTRL+F8"
@click="beautify()"
>
<span>{{ $t('word.format') }}</span>
<i class="mdi mdi-24px mdi-brush pl-1" />
</button>
<button
class="btn btn-link btn-sm"
:disabled="!query || isQuering"
title="CTRL+W"
@click="clear()"
>
<span>{{ $t('word.clear') }}</span>
<i class="mdi mdi-24px mdi-delete-sweep pl-1" />
</button>
<div class="divider-vert py-3" />
<div class="dropdown export-dropdown pr-2">
<button
:disabled="!results.length || isQuering"
@ -50,24 +71,6 @@
</li>
</ul>
</div>
<button
class="btn btn-dark btn-sm"
:disabled="!query || isQuering"
title="CTRL+F8"
@click="beautify()"
>
<span>{{ $t('word.format') }}</span>
<i class="mdi mdi-24px mdi-brush pl-1" />
</button>
<button
class="btn btn-link btn-sm"
:disabled="!query || isQuering"
title="CTRL+W"
@click="clear()"
>
<span>{{ $t('word.clear') }}</span>
<i class="mdi mdi-24px mdi-delete-sweep pl-1" />
</button>
</div>
<div class="workspace-query-info">
<div

24
src/renderer/scss/main.scss
View File

@ -132,6 +132,30 @@ body {
.tab {
.tab-item {
position: relative;
display: flex;
justify-content: center;
&.active {
.tab-link {
border-color: transparent;
}
&::after {
width: 100%;
}
}
&::after {
content: "";
height: 2px;
width: 0;
transition: width 0.2s;
background-color: $primary-color;
position: absolute;
bottom: 0;
}
.btn-clear {
margin-top: -0.1rem;
font-size: 0.6rem;

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

@ -363,26 +363,6 @@
margin: 0;
.settingbar-element {
height: $settingbar-width;
width: 100%;
margin: 0;
border-left: 3px solid transparent;
opacity: 0.5;
transition: opacity 0.2s;
display: flex;
align-content: center;
justify-content: center;
flex-direction: column;
&:hover {
opacity: 1;
}
&.selected {
border-left-color: $body-font-color-dark;
opacity: 1;
}
.settingbar-element-icon {
&.badge::after {
bottom: -10px;

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

@ -147,26 +147,6 @@
margin: 0;
.settingbar-element {
height: $settingbar-width;
width: 100%;
margin: 0;
border-left: 3px solid transparent;
opacity: 0.5;
transition: opacity 0.2s;
display: flex;
align-content: center;
justify-content: center;
flex-direction: column;
&:hover {
opacity: 1;
}
&.selected {
border-left-color: $body-font-color-dark;
opacity: 1;
}
.settingbar-element-icon {
&.badge::after {
bottom: -10px;