From 978a7c5f5b314f2ba4067c86471755fdcc341b3f Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Mon, 28 Jun 2021 18:34:39 +0200
Subject: [PATCH] feat(UI): active tab animation

---
 .../components/ModalEditConnection.vue        |  8 ++--
 .../components/ModalNewConnection.vue         |  8 ++--
 src/renderer/components/ModalSettings.vue     | 20 +++++-----
 src/renderer/components/TheSettingBar.vue     | 15 +++++++
 src/renderer/components/WorkspaceQueryTab.vue | 39 ++++++++++---------
 src/renderer/scss/main.scss                   | 24 ++++++++++++
 src/renderer/scss/themes/dark-theme.scss      | 20 ----------
 src/renderer/scss/themes/light-theme.scss     | 20 ----------
 8 files changed, 78 insertions(+), 76 deletions(-)

diff --git a/src/renderer/components/ModalEditConnection.vue b/src/renderer/components/ModalEditConnection.vue
index 6a2a5f5e..4501d338 100644
--- a/src/renderer/components/ModalEditConnection.vue
+++ b/src/renderer/components/ModalEditConnection.vue
@@ -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>
diff --git a/src/renderer/components/ModalNewConnection.vue b/src/renderer/components/ModalNewConnection.vue
index a186983f..3f1b5159 100644
--- a/src/renderer/components/ModalNewConnection.vue
+++ b/src/renderer/components/ModalNewConnection.vue
@@ -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>
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index 9971e0ea..4373d145 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -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>
diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
index 650c7e13..d10b39d6 100644
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -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 {
diff --git a/src/renderer/components/WorkspaceQueryTab.vue b/src/renderer/components/WorkspaceQueryTab.vue
index 24faf6db..1008a47f 100644
--- a/src/renderer/components/WorkspaceQueryTab.vue
+++ b/src/renderer/components/WorkspaceQueryTab.vue
@@ -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
diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
index 7fa00f3e..4b6dbee5 100644
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -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;
diff --git a/src/renderer/scss/themes/dark-theme.scss b/src/renderer/scss/themes/dark-theme.scss
index bb43bd7f..5a01623f 100644
--- a/src/renderer/scss/themes/dark-theme.scss
+++ b/src/renderer/scss/themes/dark-theme.scss
@@ -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;
diff --git a/src/renderer/scss/themes/light-theme.scss b/src/renderer/scss/themes/light-theme.scss
index 920045a3..bd37dbf7 100644
--- a/src/renderer/scss/themes/light-theme.scss
+++ b/src/renderer/scss/themes/light-theme.scss
@@ -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;