Skip to content

Commit

Permalink
feat(UI): active tab animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Fabio286
Fabio286 committed Jun 28, 2021
1 parent 0110756 commit 978a7c5
Show file tree
Hide file tree
Showing 8 changed files with 78 additions and 76 deletions.
8 changes: 4 additions & 4 deletions src/renderer/components/ModalEditConnection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/renderer/components/ModalNewConnection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
20 changes: 10 additions & 10 deletions src/renderer/components/ModalSettings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
15 changes: 15 additions & 0 deletions src/renderer/components/TheSettingBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
39 changes: 21 additions & 18 deletions src/renderer/components/WorkspaceQueryTab.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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
Expand Down
24 changes: 24 additions & 0 deletions src/renderer/scss/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
20 changes: 0 additions & 20 deletions src/renderer/scss/themes/dark-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
20 changes: 0 additions & 20 deletions src/renderer/scss/themes/light-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 978a7c5

Please sign in to comment.