fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

feat(UI): active tab animation

Browse Source
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
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