Improvements to explorebar

src/renderer/App.vue

@@ -6,7 +6,7 @@
          <div id="main-content" class="container">
             <TheAppWelcome v-if="!connections.length" @newConn="showNewConnModal" />
             <div v-else class="columns col-gapless">
-               <DatabaseWorkspace
+               <Workspace
                   v-for="connection in connections"
                   :key="connection.uid"
                   :connection="connection"
@@ -29,7 +29,7 @@ import TheSettingBar from '@/components/TheSettingBar';
 import TheFooter from '@/components/TheFooter';
 import TheNotificationsBoard from '@/components/TheNotificationsBoard';
 import TheAppWelcome from '@/components/TheAppWelcome';
-import DatabaseWorkspace from '@/components/DatabaseWorkspace';
+import Workspace from '@/components/Workspace';
 import ModalNewConnection from '@/components/ModalNewConnection';
 import ModalEditConnection from '@/components/ModalEditConnection';
 import ModalSettings from '@/components/ModalSettings';
@@ -42,7 +42,7 @@ export default {
       TheFooter,
       TheNotificationsBoard,
       TheAppWelcome,
-      DatabaseWorkspace,
+      Workspace,
       ModalNewConnection,
       ModalEditConnection,
       ModalSettings

src/renderer/components/TheTitleBar.vue

@@ -90,6 +90,8 @@ export default {
       height: $titlebar-height;
       -webkit-app-region: drag;
       user-select: none;
+      box-shadow: 0 0 1px 0px #000;
+      z-index: 9999;
 
       .titlebar-resizer{
          position: absolute;

src/renderer/components/Workspace.vue

@@ -1,6 +1,6 @@
 <template>
    <div v-show="isSelected" class="workspace column columns">
-      <DatabaseExploreBar :connection="connection" :is-selected="isSelected" />
+      <WorkspaceExploreBar :connection="connection" :is-selected="isSelected" />
       <div class="workspace-tabs column">
          <pre>{{ JSON.stringify(workspace.structure, null, 3) }}</pre>
       </div>
@@ -10,12 +10,12 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import Connection from '@/ipc-api/Connection';
-import DatabaseExploreBar from '@/components/DatabaseExploreBar';
+import WorkspaceExploreBar from '@/components/WorkspaceExploreBar';
 
 export default {
-   name: 'DatabaseWorkspace',
+   name: 'Workspace',
    components: {
-      DatabaseExploreBar
+      WorkspaceExploreBar
    },
    props: {
       connection: Object

src/renderer/components/WorkspaceConnectPanel.vue

@@ -30,7 +30,7 @@ import { mapActions } from 'vuex';
 import ModalAskCredentials from '@/components/ModalAskCredentials';
 
 export default {
-   name: 'DatabaseConnectPanel',
+   name: 'WorkspaceConnectPanel',
    components: {
       ModalAskCredentials
    },

src/renderer/components/WorkspaceExploreBar.vue

@@ -22,26 +22,13 @@
                >exit_to_app</i>
             </span>
          </div>
-         <DatabaseConnectPanel v-if="!workspace.connected" :connection="connection" />
+         <WorkspaceConnectPanel v-if="!workspace.connected" :connection="connection" />
          <div class="workspace-explorebar-body">
-            <div
+            <WorkspaceExploreBarDatabase
                v-for="db of workspace.structure"
                :key="db.dbName"
-            >
+               :database="db"
-               <div class="database-name">
+            />
-                  <i class="material-icons md-18 mr-1">view_agenda</i>{{ db.dbName }}
-               </div>
-               <div class="d-block ml-4">
-                  <div
-                     v-for="table of db.tables"
-                     :key="table.TABLE_NAME"
-                  >
-                     <div class="table-name">
-                        <i class="material-icons md-18 mr-1">view_headline</i>{{ table.TABLE_NAME }}
-                     </div>
-                  </div>
-               </div>
-            </div>
          </div>
       </div>
    </div>
@@ -50,12 +37,14 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import _ from 'lodash';
-import DatabaseConnectPanel from '@/components/DatabaseConnectPanel';
+import WorkspaceConnectPanel from '@/components/WorkspaceConnectPanel';
+import WorkspaceExploreBarDatabase from '@/components/WorkspaceExploreBarDatabase';
 
 export default {
-   name: 'DatabaseExploreBar',
+   name: 'WorkspaceExploreBar',
    components: {
-      DatabaseConnectPanel
+      WorkspaceConnectPanel,
+      WorkspaceExploreBarDatabase
    },
    props: {
       connection: Object,
@@ -139,8 +128,6 @@ export default {
 
    .workspace-explorebar{
       width: $explorebar-width;
-      height: calc(100vh - #{$excluding-size});
-      overflow: auto;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
@@ -151,14 +138,11 @@ export default {
       z-index: 8;
       flex: initial;
       position: relative;
-      padding-top: 1.4rem;
+      padding: 0;
 
       .workspace-explorebar-header{
-         top: 0;
+         width: 100%;
-         left: 0;
-         right: 0;
          padding: .3rem;
-         position: absolute;
          display: flex;
          justify-content: space-between;
          font-size: .6rem;
@@ -193,12 +177,9 @@ export default {
 
       .workspace-explorebar-body{
          width: 100%;
-
+         height: calc((100vh - 30px) - #{$excluding-size});
-         .database-name,
+         overflow: auto;
-         .table-name{
+         padding: 0 .1rem;
-            display: flex;
-            align-items: center;
-         }
       }
    }
 </style>

src/renderer/components/WorkspaceExploreBarDatabase.vue

@@ -0,0 +1,57 @@
+<template>
+   <details class="accordion workspace-explorebar-database">
+      <summary class="accordion-header database-name pb-0">
+         <i class="icon material-icons md-18 mr-1">navigate_next</i>
+         <i class="material-icons md-18 mr-1">view_agenda</i>
+         <span>{{ database.dbName }}</span>
+      </summary>
+      <div class="accordion-body">
+         <div class="database-bables">
+            <ul class="menu menu-nav pt-0">
+               <li
+                  v-for="table of database.tables"
+                  :key="table.TABLE_NAME"
+                  class="menu-item"
+               >
+                  <a class="table-name">
+                     <i class="material-icons md-18 mr-1">grid_on</i>
+                     <span>{{ table.TABLE_NAME }}</span>
+                  </a>
+               </li>
+            </ul>
+         </div>
+      </div>
+   </details>
+</template>
+
+<script>
+export default {
+   name: 'WorkspaceExploreBarDatabase',
+   props: {
+      database: Object
+   }
+};
+</script>
+
+<style lang="scss">
+   .workspace-explorebar-database{
+      .database-name,
+      a.table-name{
+         display: flex;
+         align-items: center;
+         padding: .1rem;
+         cursor: pointer;
+
+         > span{
+            overflow: hidden;
+            white-space: nowrap;
+            display: block;
+            text-overflow: ellipsis;
+         }
+      }
+
+      .database-bables{
+         margin-left: 1.2rem;
+      }
+   }
+</style>

src/renderer/scss/main.scss

@@ -139,4 +139,26 @@ body{
 
 .form-select:not([multiple]):not([size]):focus{
    border-color: $primary-color;
+}
+
+.menu{
+   font-size: .6rem;
+   .menu-item {
+      + .menu-item{
+         margin-top: 0;
+      }
+
+      > a{
+
+         &:hover{
+            color: $body-font-color;
+            background: rgba($color: #FFF, $alpha: .1);
+         }
+      }
+   }
+
+} 
+
+.accordion-body {
+   max-height: 500rem!important;
 }