From 0626f6f775a3c822ffb7e0486e5c76e93356605a Mon Sep 17 00:00:00 2001
From: Fabio <fabio286@gmail.com>
Date: Sun, 18 Oct 2020 10:27:02 +0200
Subject: [PATCH] refactor(render): improved buttons style

---
 src/renderer/components/TheFooter.vue         |  2 +-
 .../WorkspaceExploreBarDatabase.vue           |  7 ++++--
 src/renderer/components/WorkspaceQueryTab.vue |  4 ++--
 .../components/WorkspaceQueryTable.vue        | 10 ++-------
 src/renderer/components/WorkspaceTableTab.vue |  6 ++---
 src/renderer/scss/main.scss                   | 22 ++++++++++++++-----
 6 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/renderer/components/TheFooter.vue b/src/renderer/components/TheFooter.vue
index 33cc205e..0ed03a24 100644
--- a/src/renderer/components/TheFooter.vue
+++ b/src/renderer/components/TheFooter.vue
@@ -2,7 +2,7 @@
    <div id="footer" class="text-light">
       <div class="footer-left-elements">
          <ul class="footer-elements">
-            <li class="footer-element">
+            <li class="footer-element" :title="$t('word.version')">
                <i class="mdi mdi-18px mdi-memory mr-1" />
                <small>{{ appVersion }}</small>
             </li>
diff --git a/src/renderer/components/WorkspaceExploreBarDatabase.vue b/src/renderer/components/WorkspaceExploreBarDatabase.vue
index 001ea223..b6a17427 100644
--- a/src/renderer/components/WorkspaceExploreBarDatabase.vue
+++ b/src/renderer/components/WorkspaceExploreBarDatabase.vue
@@ -1,7 +1,7 @@
 <template>
    <details class="accordion workspace-explorebar-database">
       <summary
-         class="accordion-header database-name pb-0"
+         class="accordion-header database-name"
          :class="{'text-bold': breadcrumbs.schema === database.name}"
          @click="changeBreadcrumbs({schema: database.name, table: null})"
          @contextmenu.prevent="showDatabaseContext($event, database.name)"
@@ -57,6 +57,9 @@ export default {
             if (curr.size > acc) acc = curr.size;
             return acc;
          }, 0);
+      },
+      totalSize () {
+         return this.database.tables.reduce((acc, curr) => acc + curr.size, 0);
       }
    },
    methods: {
@@ -139,7 +142,7 @@ export default {
     display: flex;
     align-items: center;
     height: 100%;
-    opacity: 0.15;
+    opacity: 0.2;
     transition: opacity 0.2s;
 
     &:hover {
diff --git a/src/renderer/components/WorkspaceQueryTab.vue b/src/renderer/components/WorkspaceQueryTab.vue
index c0003709..f2fd2d32 100644
--- a/src/renderer/components/WorkspaceQueryTab.vue
+++ b/src/renderer/components/WorkspaceQueryTab.vue
@@ -5,14 +5,14 @@
          <div class="workspace-query-runner-footer">
             <div class="workspace-query-buttons">
                <button
-                  class="btn btn-link btn-sm"
+                  class="btn btn-primary btn-sm"
                   :class="{'loading':isQuering}"
                   :disabled="!query"
                   title="F9"
                   @click="runQuery(query)"
                >
                   <span>{{ $t('word.run') }}</span>
-                  <i class="mdi mdi-24px mdi-play text-success" />
+                  <i class="mdi mdi-24px mdi-play" />
                </button>
             </div>
             <div class="workspace-query-info">
diff --git a/src/renderer/components/WorkspaceQueryTable.vue b/src/renderer/components/WorkspaceQueryTable.vue
index 392ec84a..4b3242c8 100644
--- a/src/renderer/components/WorkspaceQueryTable.vue
+++ b/src/renderer/components/WorkspaceQueryTable.vue
@@ -29,7 +29,7 @@
                   v-for="(field, index) in fields"
                   :key="index"
                   class="th c-hand"
-                  :title="field.comment ? field.comment : false"
+                  :title="`${field.type} ${fieldLength(field) ? `(${fieldLength(field)})` : ''}`"
                >
                   <div ref="columnResize" class="column-resizable">
                      <div class="table-column-title" @click="sort(field.name)">
@@ -39,7 +39,7 @@
                            :class="`key-${field.key}`"
                            :title="keyName(field.key)"
                         />
-                        <span :title="`${field.type} ${fieldLength(field) ? `(${fieldLength(field)})` : ''}`">{{ field.alias || field.name }}</span>
+                        <span>{{ field.alias || field.name }}</span>
                         <i
                            v-if="currentSort === field.name || currentSort === `${field.table}.${field.name}`"
                            class="mdi sort-icon"
@@ -93,12 +93,6 @@ export default {
       WorkspaceQueryTableRow,
       TableContext
    },
-   filters: {
-      wrapNumber (num) {
-         if (!num) return '';
-         return `(${num})`;
-      }
-   },
    props: {
       results: Array,
       tabUid: [String, Number],
diff --git a/src/renderer/components/WorkspaceTableTab.vue b/src/renderer/components/WorkspaceTableTab.vue
index 083a33ae..e84f7d0e 100644
--- a/src/renderer/components/WorkspaceTableTab.vue
+++ b/src/renderer/components/WorkspaceTableTab.vue
@@ -6,7 +6,7 @@
                <div class="dropdown">
                   <div class="btn-group">
                      <button
-                        class="btn btn-link btn-sm mr-0 pr-1"
+                        class="btn btn-dark btn-sm mr-0 pr-1"
                         :class="{'loading':isQuering}"
                         title="F5"
                         @click="reloadTable"
@@ -15,7 +15,7 @@
                         <i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh ml-1" />
                         <i v-else class="mdi mdi-24px mdi-history mdi-flip-h ml-1" />
                      </button>
-                     <div class="btn btn-link btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
+                     <div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
                         <i class="mdi mdi-24px mdi-menu-down" />
                      </div>
                      <div class="menu px-3">
@@ -33,7 +33,7 @@
                   </div>
                </div>
                <button
-                  class="btn btn-link btn-sm"
+                  class="btn btn-dark btn-sm"
                   @click="showAddModal"
                >
                   <span>{{ $t('word.add') }}</span>
diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
index 0f492d55..2b9cdae6 100644
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -19,12 +19,24 @@ body {
 @include padding-variant(3, $unit-3);
 @include padding-variant(4, $unit-4);
 
-.btn.btn-gray {
-  color: #fff;
-  background: $bg-color-gray;
+.btn {
+  &.btn-gray {
+    color: #fff;
+    background: $bg-color-gray;
 
-  &:hover {
-    background: $bg-color;
+    &:hover {
+      background: $bg-color;
+    }
+  }
+
+  &.btn-dark {
+    color: #fff;
+    background: $bg-color-light;
+    border-color: $bg-color-light;
+
+    &:hover {
+      background: $bg-color-gray;
+    }
   }
 }