From bc82289d54550a93300fe66d7a660aa70db2fd23 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Mon, 16 Aug 2021 19:44:55 +0200
Subject: [PATCH] perf(UI): visual improvements of tables

---
 README.md                                     |  2 +-
 src/renderer/components/ModalFakerRows.vue    |  2 +-
 .../components/ModalProcessesListRow.vue      |  3 +-
 src/renderer/components/Workspace.vue         | 10 ++---
 .../components/WorkspaceTabPropsTableRow.vue  | 41 +++++++++++--------
 .../components/WorkspaceTabQueryTableRow.vue  | 10 +++--
 src/renderer/scss/_fake-tables.scss           |  1 +
 src/renderer/scss/_table-keys.scss            |  2 +-
 src/renderer/scss/main.scss                   |  2 +-
 src/renderer/scss/themes/dark-theme.scss      | 32 +++++++++++----
 src/renderer/scss/themes/light-theme.scss     | 24 +++++++++--
 11 files changed, 88 insertions(+), 41 deletions(-)

diff --git a/README.md b/README.md
index 2b1fd0cb..dc32f34e 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 # Antares SQL Client
 
-![GitHub package.json version](https://img.shields.io/github/package-json/v/fabio286/antares) [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Ffabio286%2Fantares%2Fbadge&style=flat)](https://actions-badge.atrox.dev/fabio286/antares/goto) ![GitHub All Releases](https://img.shields.io/github/downloads/fabio286/antares/total) ![GitHub](https://img.shields.io/github/license/fabio286/antares) [![antares](https://snapcraft.io/antares/badge.svg)](https://snapcraft.io/antares) [![antares](https://snapcraft.io/antares/trending.svg?name=0)](https://snapcraft.io/antares) [![Twitter Follow](https://img.shields.io/twitter/follow/AntaresSQL?style=social)](https://twitter.com/AntaresSQL) [![Plant a Tree](https://raw.githubusercontent.com/Fabio286/treedom-badge/master/svg/plant-a-tree.svg)](https://www.treedom.net/en/user/fabio-di-stasio/event/antares-for-the-planet)
+![GitHub package.json version](https://img.shields.io/github/package-json/v/fabio286/antares) ![GitHub](https://img.shields.io/github/license/fabio286/antares) [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Ffabio286%2Fantares%2Fbadge&style=flat)](https://actions-badge.atrox.dev/fabio286/antares/goto) [![antares](https://snapcraft.io/antares/badge.svg)](https://snapcraft.io/antares) [![antares](https://snapcraft.io/antares/trending.svg?name=0)](https://snapcraft.io/antares) [![Twitter Follow](https://img.shields.io/twitter/follow/AntaresSQL?style=social)](https://twitter.com/AntaresSQL) [![Plant a Tree](https://raw.githubusercontent.com/Fabio286/treedom-badge/master/svg/plant-a-tree.svg)](https://www.treedom.net/en/user/fabio-di-stasio/event/antares-for-the-planet)
 
 Antares is an SQL client based on [Electron.js](https://github.com/electron/electron) and [Vue.js](https://github.com/vuejs/vue) that aims to become a useful tool, especially for developers.  
 Our target is to support as many databases as possible, and all major operating systems, including the ARM versions.  
diff --git a/src/renderer/components/ModalFakerRows.vue b/src/renderer/components/ModalFakerRows.vue
index a0e6a987..e12dbaff 100644
--- a/src/renderer/components/ModalFakerRows.vue
+++ b/src/renderer/components/ModalFakerRows.vue
@@ -251,7 +251,7 @@ export default {
          if (field.default === 'NULL') fieldDefault = null;
          else {
             if ([...NUMBER, ...FLOAT].includes(field.type))
-               fieldDefault = Number.isNaN(+field.default) ? null : +field.default;
+               fieldDefault = !field.default || Number.isNaN(+field.default.replaceAll('\'', '')) ? null : +field.default.replaceAll('\'', '');
             else if ([...TEXT, ...LONG_TEXT].includes(field.type)) {
                fieldDefault = field.default
                   ? field.default.includes('\'')
diff --git a/src/renderer/components/ModalProcessesListRow.vue b/src/renderer/components/ModalProcessesListRow.vue
index 29b78f13..f9f1d1ad 100644
--- a/src/renderer/components/ModalProcessesListRow.vue
+++ b/src/renderer/components/ModalProcessesListRow.vue
@@ -11,7 +11,7 @@
          <template v-if="cKey !== '_id'">
             <span
                v-if="!isInlineEditor[cKey]"
-               class="cell-content px-2"
+               class="cell-content"
                :class="`${isNull(col)} type-${typeof col === 'number' ? 'int' : 'varchar'}`"
                @dblclick="dblClick(cKey)"
             >{{ col | cutText }}</span>
@@ -126,6 +126,7 @@ export default {
 
 .cell-content {
   display: block;
+  padding: 0 0.2rem;
   min-height: 0.8rem;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
index 0add3112..8953ca62 100644
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@@ -619,7 +619,7 @@ export default {
       .th {
         position: sticky;
         top: 0;
-        border: 1px solid;
+        border: 2px solid;
         border-left: none;
         border-bottom-width: 2px;
         padding: 0;
@@ -628,15 +628,15 @@ export default {
         z-index: 1;
 
         > div {
-          padding: 0.1rem 0.4rem;
+          padding: 0.1rem 0.2rem;
           min-width: -webkit-fill-available;
         }
       }
 
       .td {
-        border-right: 1px solid;
-        border-bottom: 1px solid;
-        padding: 0 0.4rem;
+        border-right: 2px solid;
+        border-bottom: 2px solid;
+        padding: 0 0.2rem;
         text-overflow: ellipsis;
         max-width: 200px;
         white-space: nowrap;
diff --git a/src/renderer/components/WorkspaceTabPropsTableRow.vue b/src/renderer/components/WorkspaceTabPropsTableRow.vue
index af55643a..97397765 100644
--- a/src/renderer/components/WorkspaceTabPropsTableRow.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableRow.vue
@@ -1,12 +1,12 @@
 <template>
    <div class="tr" @contextmenu.prevent="$emit('contextmenu', $event, localRow._id)">
-      <div class="td" tabindex="0">
+      <div class="td p-0" tabindex="0">
          <div :class="customizations.sortableFields ? 'row-draggable' : 'text-center'">
             <i v-if="customizations.sortableFields" class="mdi mdi-drag-horizontal row-draggable-icon" />
             {{ localRow.order }}
          </div>
       </div>
-      <div class="td" tabindex="0">
+      <div class="td p-0" tabindex="0">
          <div class="text-center">
             <i
                v-for="(index, i) in indexes"
@@ -23,7 +23,7 @@
             />
          </div>
       </div>
-      <div class="td" tabindex="0">
+      <div class="td p-0" tabindex="0">
          <span
             v-if="!isInlineEditor.name"
             class="cell-content"
@@ -37,12 +37,12 @@
             v-model="editingContent"
             type="text"
             autofocus
-            class="editable-field px-2"
+            class="editable-field form-input input-sm px-1"
             @blur="editOFF"
          >
       </div>
       <div
-         class="td text-uppercase"
+         class="td p-0 text-uppercase"
          tabindex="0"
       >
          <span
@@ -57,7 +57,7 @@
             v-else
             ref="editField"
             v-model="editingContent"
-            class="form-select editable-field small-select text-uppercase"
+            class="form-select editable-field pl-1 pr-4 small-select text-uppercase"
             @blur="editOFF"
          >
             <option v-if="!isInDataTypes">
@@ -81,7 +81,7 @@
       </div>
       <div
          v-if="customizations.tableArray"
-         class="td"
+         class="td p-0"
          tabindex="0"
       >
          <label class="form-checkbox">
@@ -89,7 +89,7 @@
             <i class="form-icon" />
          </label>
       </div>
-      <div class="td type-int" tabindex="0">
+      <div class="td p-0 type-int" tabindex="0">
          <template v-if="fieldType.length">
             <span
                v-if="!isInlineEditor.length"
@@ -109,7 +109,7 @@
                v-model="editingContent"
                type="text"
                autofocus
-               class="editable-field px-2"
+               class="editable-field form-input input-sm px-1"
                @blur="editOFF"
             >
             <input
@@ -118,14 +118,14 @@
                v-model="editingContent"
                type="number"
                autofocus
-               class="editable-field px-2"
+               class="editable-field form-input input-sm px-1"
                @blur="editOFF"
             >
          </template>
       </div>
       <div
          v-if="customizations.unsigned"
-         class="td"
+         class="td p-0"
          tabindex="0"
       >
          <label class="form-checkbox">
@@ -139,7 +139,7 @@
       </div>
       <div
          v-if="customizations.nullable"
-         class="td"
+         class="td p-0"
          tabindex="0"
       >
          <label class="form-checkbox">
@@ -153,7 +153,7 @@
       </div>
       <div
          v-if="customizations.zerofill"
-         class="td"
+         class="td p-0"
          tabindex="0"
       >
          <label class="form-checkbox">
@@ -165,14 +165,14 @@
             <i class="form-icon" />
          </label>
       </div>
-      <div class="td" tabindex="0">
+      <div class="td p-0" tabindex="0">
          <span class="cell-content" @dblclick="editON($event, localRow.default, 'default')">
             {{ fieldDefault }}
          </span>
       </div>
       <div
          v-if="customizations.comment"
-         class="td type-varchar"
+         class="td p-0 type-varchar"
          tabindex="0"
       >
          <span
@@ -188,13 +188,13 @@
             v-model="editingContent"
             type="text"
             autofocus
-            class="editable-field px-2"
+            class="editable-field form-input input-sm px-1"
             @blur="editOFF"
          >
       </div>
       <div
          v-if="customizations.collation"
-         class="td"
+         class="td p-0"
          tabindex="0"
       >
          <template v-if="fieldType.collation">
@@ -209,7 +209,7 @@
                v-else
                ref="editField"
                v-model="editingContent"
-               class="form-select small-select editable-field"
+               class="form-select small-select pl-1 pr-4 editable-field"
                @blur="editOFF"
             >
                <option
@@ -575,12 +575,16 @@ export default {
   position: absolute;
   left: 0;
   right: 0;
+  max-height: 21px;
+  border-radius: 3px;
+  font-size: 0.7rem;
 }
 
 .row-draggable {
   position: relative;
   text-align: right;
   padding-left: 28px;
+  padding-right: 2px;
   cursor: grab;
 
   .row-draggable-icon {
@@ -609,6 +613,7 @@ export default {
 
 .cell-content {
   display: block;
+  padding: 0 0.2rem;
   min-height: 0.8rem;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/src/renderer/components/WorkspaceTabQueryTableRow.vue b/src/renderer/components/WorkspaceTabQueryTableRow.vue
index 8110c598..462a7edc 100644
--- a/src/renderer/components/WorkspaceTabQueryTableRow.vue
+++ b/src/renderer/components/WorkspaceTabQueryTableRow.vue
@@ -11,7 +11,7 @@
          <template v-if="cKey !== '_id'">
             <span
                v-if="!isInlineEditor[cKey] && fields[cKey]"
-               class="cell-content px-2"
+               class="cell-content"
                :class="`${isNull(col)} ${typeClass(fields[cKey].type)}`"
                @dblclick="editON($event, col, cKey)"
             >{{ col | typeFormat(fields[cKey].type.toLowerCase(), fields[cKey].length) | cutText }}</span>
@@ -31,7 +31,7 @@
                   v-mask="inputProps.mask"
                   :type="inputProps.type"
                   autofocus
-                  class="editable-field px-2"
+                  class="editable-field form-input input-sm px-1"
                   @blur="editOFF"
                >
                <select
@@ -59,7 +59,7 @@
                   v-model="editingContent"
                   :type="inputProps.type"
                   autofocus
-                  class="editable-field px-2"
+                  class="editable-field form-input input-sm px-1"
                   @blur="editOFF"
                >
             </template>
@@ -528,6 +528,9 @@ export default {
   border: none;
   line-height: 1;
   width: 100%;
+  max-height: 21px;
+  border-radius: 3px;
+  font-size: 0.7rem;
   position: absolute;
   left: 0;
   right: 0;
@@ -535,6 +538,7 @@ export default {
 
 .cell-content {
   display: block;
+  padding: 0 0.2rem;
   min-height: 0.8rem;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/src/renderer/scss/_fake-tables.scss b/src/renderer/scss/_fake-tables.scss
index f462c98b..36cdc7aa 100644
--- a/src/renderer/scss/_fake-tables.scss
+++ b/src/renderer/scss/_fake-tables.scss
@@ -29,6 +29,7 @@
   .th {
     padding: $unit-3 $unit-2;
     display: table-cell;
+    border-radius: 3px;
   }
 
   .th {
diff --git a/src/renderer/scss/_table-keys.scss b/src/renderer/scss/_table-keys.scss
index a6137867..b87ce74c 100644
--- a/src/renderer/scss/_table-keys.scss
+++ b/src/renderer/scss/_table-keys.scss
@@ -17,7 +17,7 @@
   &.key-mul,
   &.key-INDEX,
   &.key-KEY {
-    color: palegreen;
+    color: limegreen;
   }
 
   &.key-FULLTEXT {
diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
index 2dd929b4..2db64eb2 100644
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -209,7 +209,7 @@ option:checked {
   cursor: pointer;
 
   &.small-select {
-    height: 1rem;
+    height: 21px;
     font-size: 0.7rem;
     padding: 1px 0.4rem 0;
   }
diff --git a/src/renderer/scss/themes/dark-theme.scss b/src/renderer/scss/themes/dark-theme.scss
index fcf9780c..96a8d8c0 100644
--- a/src/renderer/scss/themes/dark-theme.scss
+++ b/src/renderer/scss/themes/dark-theme.scss
@@ -20,6 +20,11 @@
     }
   }
 
+  option,
+  optgroup {
+    background-color: $bg-color-gray;
+  }
+
   // Override Spectre.css
   .menu {
     background: $bg-color-light-dark;
@@ -179,16 +184,29 @@
     .workspace-query-results {
       .table {
         .th {
-          background: $bg-color-dark;
-          border-color: $bg-color-light-dark;
+          border-color: darken($bg-color-light-gray, 80%);
+          background-color: $body-bg-dark;
         }
 
-        .td {
-          border-color: $bg-color-light-dark;
+        .tr {
+          background-color: darken($bg-color-light-gray, 80%);
 
-          &:focus {
-            box-shadow: inset 0 0 0 1px $body-font-color-dark;
-            background: rgba($color: #000, $alpha: 0.3);
+          .td:first-child {
+            border-left: 2px solid $body-bg-dark;
+          }
+
+          .td {
+            border-color: $body-bg-dark;
+
+            &:focus {
+              box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
+              background-color: rgba($color: #000, $alpha: 0.3);
+            }
+
+            .editable-field {
+              box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
+              background-color: rgba($color: #000, $alpha: 0.3);
+            }
           }
         }
       }
diff --git a/src/renderer/scss/themes/light-theme.scss b/src/renderer/scss/themes/light-theme.scss
index eba79eed..6fa9ec42 100644
--- a/src/renderer/scss/themes/light-theme.scss
+++ b/src/renderer/scss/themes/light-theme.scss
@@ -216,11 +216,29 @@
       .table {
         .th {
           background: $body-bg;
-          border-color: rgba($bg-color-light-dark, 0.5);
+          border-color: lighten($bg-color-light-gray, 2%);
         }
 
-        .td {
-          border-color: rgba($bg-color-light-dark, 0.5);
+        .tr {
+          background-color: lighten($bg-color-light-gray, 2%);
+
+          .td:first-child {
+            border-left: 2px solid $body-bg;
+          }
+
+          .td {
+            border-color: $body-bg;
+
+            &:focus {
+              box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
+              background-color: $body-font-color-dark;
+            }
+
+            .editable-field {
+              box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
+              background-color: $body-font-color-dark;
+            }
+          }
         }
       }
     }