From 128a6cd9e8a37d4fccd190fd14342c5055d7bb9a Mon Sep 17 00:00:00 2001
From: Fabio <fabio286@gmail.com>
Date: Wed, 12 Aug 2020 18:11:48 +0200
Subject: [PATCH] style: UI improvements

---
 src/renderer/components/BaseConfirmModal.vue            | 2 +-
 src/renderer/components/BaseContextMenu.vue             | 4 ++--
 src/renderer/components/ModalAskCredentials.vue         | 6 ++++--
 src/renderer/components/ModalEditConnection.vue         | 6 ++++--
 src/renderer/components/ModalNewConnection.vue          | 6 ++++--
 src/renderer/components/ModalSettings.vue               | 9 ++++++---
 src/renderer/components/SettingBarContext.vue           | 6 ++++--
 src/renderer/components/TheNotificationsBoard.vue       | 2 +-
 src/renderer/components/TheSettingBar.vue               | 2 +-
 src/renderer/components/WorkspaceExploreBarDatabase.vue | 9 +++++++--
 src/renderer/components/WorkspaceQueryTable.vue         | 2 +-
 src/renderer/components/WorkspaceQueryTableContext.vue  | 8 +++++---
 12 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/src/renderer/components/BaseConfirmModal.vue b/src/renderer/components/BaseConfirmModal.vue
index e1776b89..101b41a0 100644
--- a/src/renderer/components/BaseConfirmModal.vue
+++ b/src/renderer/components/BaseConfirmModal.vue
@@ -2,7 +2,7 @@
    <div class="modal active" :class="modalSizeClass">
       <a class="modal-overlay" @click="hideModal" />
       <div class="modal-container">
-         <div v-if="hasHeader" class="modal-header">
+         <div v-if="hasHeader" class="modal-header pl-2">
             <div class="modal-title h6">
                <slot name="header" />
             </div>
diff --git a/src/renderer/components/BaseContextMenu.vue b/src/renderer/components/BaseContextMenu.vue
index b417a813..2a958080 100644
--- a/src/renderer/components/BaseContextMenu.vue
+++ b/src/renderer/components/BaseContextMenu.vue
@@ -31,7 +31,7 @@ export default {
    },
    methods: {
       close () {
-         this.$emit('closeContext');
+         this.$emit('close-context');
       }
    }
 };
@@ -57,7 +57,7 @@ export default {
     .context-container {
       min-width: 100px;
       max-width: 150px;
-      z-index: 1;
+      z-index: 10;
       box-shadow: 0 0 1px 0 #000;
       padding: 0;
       background: #1d1d1d;
diff --git a/src/renderer/components/ModalAskCredentials.vue b/src/renderer/components/ModalAskCredentials.vue
index 41ea61ff..b5e2d388 100644
--- a/src/renderer/components/ModalAskCredentials.vue
+++ b/src/renderer/components/ModalAskCredentials.vue
@@ -2,9 +2,11 @@
    <div class="modal active modal-sm">
       <a class="modal-overlay" />
       <div class="modal-container p-0">
-         <div class="modal-header">
+         <div class="modal-header pl-2">
             <div class="modal-title h6">
-               {{ $t('word.credentials') }}
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ $t('word.credentials') }}
+               </div>
             </div>
             <a class="btn btn-clear c-hand" @click.stop="closeModal" />
          </div>
diff --git a/src/renderer/components/ModalEditConnection.vue b/src/renderer/components/ModalEditConnection.vue
index 4f39127a..52c484a8 100644
--- a/src/renderer/components/ModalEditConnection.vue
+++ b/src/renderer/components/ModalEditConnection.vue
@@ -2,9 +2,11 @@
    <div class="modal active">
       <a class="modal-overlay c-hand" @click="closeModal" />
       <div class="modal-container">
-         <div class="modal-header">
+         <div class="modal-header pl-2">
             <div class="modal-title h6">
-               {{ $t('message.editConnection') }}
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-server mr-1" /> {{ $t('message.editConnection') }}
+               </div>
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
          </div>
diff --git a/src/renderer/components/ModalNewConnection.vue b/src/renderer/components/ModalNewConnection.vue
index 5dae624e..6ff3e998 100644
--- a/src/renderer/components/ModalNewConnection.vue
+++ b/src/renderer/components/ModalNewConnection.vue
@@ -2,9 +2,11 @@
    <div class="modal active">
       <a class="modal-overlay c-hand" @click="closeModal" />
       <div class="modal-container">
-         <div class="modal-header">
+         <div class="modal-header pl-2">
             <div class="modal-title h6">
-               {{ $t('message.createNewConnection') }}
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-server-plus mr-1" /> {{ $t('message.createNewConnection') }}
+               </div>
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
          </div>
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index 0071ee39..4d763084 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -2,9 +2,12 @@
    <div id="settings" class="modal active">
       <a class="modal-overlay c-hand" @click="closeModal" />
       <div class="modal-container">
-         <div class="modal-header">
-            <div class="modal-title h5">
-               {{ $t('word.settings') }}
+         <div class="modal-header pl-2">
+            <div class="modal-title h6">
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-cog mr-1" />
+                  {{ $t('word.settings') }}
+               </div>
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
          </div>
diff --git a/src/renderer/components/SettingBarContext.vue b/src/renderer/components/SettingBarContext.vue
index 306c690f..4c650ef8 100644
--- a/src/renderer/components/SettingBarContext.vue
+++ b/src/renderer/components/SettingBarContext.vue
@@ -1,7 +1,7 @@
 <template>
    <BaseContextMenu
       :context-event="contextEvent"
-      @closeContext="$emit('closeContext')"
+      @close-context="$emit('close-context')"
    >
       <div class="context-element" @click="showEditModal(contextConnection)">
          <i class="mdi mdi-18px mdi-pencil text-light pr-1" /> {{ $t('word.edit') }}
@@ -16,7 +16,9 @@
          @hide="hideConfirmModal"
       >
          <template :slot="'header'">
-            {{ $t('message.deleteConnection') }}
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-server-remove mr-1" /> {{ $t('message.deleteConnection') }}
+            </div>
          </template>
          <div :slot="'body'">
             <div class="mb-2">
diff --git a/src/renderer/components/TheNotificationsBoard.vue b/src/renderer/components/TheNotificationsBoard.vue
index f8d8cc58..6c782960 100644
--- a/src/renderer/components/TheNotificationsBoard.vue
+++ b/src/renderer/components/TheNotificationsBoard.vue
@@ -77,7 +77,7 @@ export default {
 <style lang="scss">
   #notifications-board {
     position: absolute;
-    z-index: 9;
+    z-index: 999;
     right: 1rem;
     bottom: 1rem;
   }
diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
index 129d96c7..682d92a5 100644
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -5,7 +5,7 @@
             v-if="isContext"
             :context-event="contextEvent"
             :context-connection="contextConnection"
-            @closeContext="isContext = false"
+            @close-context="isContext = false"
          />
          <ul class="settingbar-elements">
             <draggable v-model="connections">
diff --git a/src/renderer/components/WorkspaceExploreBarDatabase.vue b/src/renderer/components/WorkspaceExploreBarDatabase.vue
index 95a361cb..b2e642ef 100644
--- a/src/renderer/components/WorkspaceExploreBarDatabase.vue
+++ b/src/renderer/components/WorkspaceExploreBarDatabase.vue
@@ -6,7 +6,7 @@
          @click="changeBreadcrumbs({schema: database.name, table:null})"
       >
          <i class="icon mdi mdi-18px mdi-chevron-right" />
-         <i class="mdi mdi-18px mdi-database mr-1" />
+         <i class="database-icon mdi mdi-18px mdi-database mr-1" />
          <span>{{ database.name }}</span>
       </summary>
       <div class="accordion-body">
@@ -20,7 +20,7 @@
                   @click="changeBreadcrumbs({schema: database.name, table: table.TABLE_NAME})"
                >
                   <a class="table-name">
-                     <i class="mdi mdi-18px mdi-table mr-1" />
+                     <i class="table-icon mdi mdi-18px mdi-table mr-1" />
                      <span>{{ table.TABLE_NAME }}</span>
                   </a>
                </li>
@@ -77,6 +77,11 @@ export default {
         background: rgba($color: #fff, $alpha: 0.05);
         border-radius: 2px;
       }
+
+      .database-icon,
+      .table-icon {
+        opacity: 0.7;
+      }
     }
 
     .menu-item {
diff --git a/src/renderer/components/WorkspaceQueryTable.vue b/src/renderer/components/WorkspaceQueryTable.vue
index 052b1cf2..ff54578f 100644
--- a/src/renderer/components/WorkspaceQueryTable.vue
+++ b/src/renderer/components/WorkspaceQueryTable.vue
@@ -9,7 +9,7 @@
          :context-event="contextEvent"
          :selected-rows="selectedRows"
          @deleteSelected="deleteSelected"
-         @closeContext="isContext = false"
+         @close-context="isContext = false"
       />
       <div ref="table" class="table table-hover">
          <div class="thead">
diff --git a/src/renderer/components/WorkspaceQueryTableContext.vue b/src/renderer/components/WorkspaceQueryTableContext.vue
index 25983cc7..48fae54f 100644
--- a/src/renderer/components/WorkspaceQueryTableContext.vue
+++ b/src/renderer/components/WorkspaceQueryTableContext.vue
@@ -1,7 +1,7 @@
 <template>
    <BaseContextMenu
       :context-event="contextEvent"
-      @closeContext="closeContext"
+      @close-context="closeContext"
    >
       <div class="context-element" @click="showConfirmModal">
          <i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}
@@ -13,7 +13,9 @@
          @hide="hideConfirmModal"
       >
          <template :slot="'header'">
-            {{ $tc('message.deleteRows', selectedRows.length) }}
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-delete mr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}
+            </div>
          </template>
          <div :slot="'body'">
             <div class="mb-2">
@@ -58,7 +60,7 @@ export default {
          this.isConfirmModal = false;
       },
       closeContext () {
-         this.$emit('closeContext');
+         this.$emit('close-context');
       },
       deleteRows () {
          this.$emit('deleteSelected');