Titlebar and resizable explorebar

2025-06-05 21:59:22 +02:00 · 2020-06-02 19:13:57 +02:00
parent 759bcddfb7
commit f3d165d3f1
15 changed files with 286 additions and 68 deletions
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
    "electron-log": "^4.2.0",
    "electron-updater": "^4.3.1",
    "knex": "^0.21.1",
+    "lodash": "^4.17.15",
    "material-design-icons": "^3.0.1",
    "mssql": "^6.2.0",
    "mysql": "^2.18.1",
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -26,7 +26,9 @@ function createMainWindow () {
      webPreferences: {
         nodeIntegration: true,
         'web-security': false
-      }
+      },
+      frame: false,
+      backgroundColor: '#1d1d1d'
   });

   if (isDevelopment)
--- a/src/main/ipc-handlers/connection.js
+++ b/src/main/ipc-handlers/connection.js
@@ -65,7 +65,6 @@ export default () => {
         return { status: 'success', response: structure };
      }
      catch (err) {
-         console.log(err);
         return { status: 'error', response: err.toString() };
      }
   });
--- a/src/main/models/InformationSchema.js
+++ b/src/main/models/InformationSchema.js
@@ -5,6 +5,7 @@ export default class {
      return connection()
         .select('*')
         .withSchema('information_schema')
-         .from('TABLES');
+         .from('TABLES')
+         .orderBy(['TABLE_SCHEMA', 'TABLE_NAME'], 'asc');
   }
 }
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -1,5 +1,7 @@
 <template>
   <div id="wrapper">
+      <TheTitleBar />
+      <div id="window-content">
         <TheSettingBar />
         <div id="main-content" class="container">
            <TheAppWelcome v-if="!connections.length" @newConn="showNewConnModal" />
@@ -17,10 +19,12 @@
         <ModalEditConnection v-if="isEditModal" />
         <ModalSettings v-if="isSettingModal" />
      </div>
+   </div>
 </template>

 <script>
 import { mapActions, mapGetters } from 'vuex';
+import TheTitleBar from '@/components/TheTitleBar';
 import TheSettingBar from '@/components/TheSettingBar';
 import TheFooter from '@/components/TheFooter';
 import TheNotificationsBoard from '@/components/TheNotificationsBoard';
@@ -33,6 +37,7 @@ import ModalSettings from '@/components/ModalSettings';
 export default {
   name: 'App',
   components: {
+      TheTitleBar,
      TheSettingBar,
      TheFooter,
      TheNotificationsBoard,
@@ -70,17 +75,22 @@ export default {
   }

   #wrapper{
-      display: flex;
      height: 100vh;
      position: relative;
   }

+   #window-content{
+      display: flex;
+      position: relative;
+   }
+
   #main-content {
      padding: 0;
      justify-content: flex-start;
+      height: calc(100vh - #{$excluding-size});

      > .columns{
-         height: 100vh;
+         height: calc(100vh - #{$footer-height});
      }
   }
 </style>
--- a/src/renderer/components/DatabaseExploreBar.vue
+++ b/src/renderer/components/DatabaseExploreBar.vue
@@ -1,5 +1,11 @@
 <template>
-   <div class="workspace-explorebar column">
+   <div class="p-relative">
+      <div ref="resizer" class="workspace-explorebar-resizer" />
+      <div
+         ref="explorebar"
+         class="workspace-explorebar column"
+         :style="{width: localWidth ? localWidth+'px' : ''}"
+      >
         <div class="workspace-explorebar-header">
            <span class="workspace-explorebar-title">{{ connectionName }}</span>
            <span v-if="workspace.connected" class="workspace-explorebar-tools">
@@ -38,10 +44,12 @@
            </div>
         </div>
      </div>
+   </div>
 </template>

 <script>
 import { mapGetters, mapActions } from 'vuex';
+import _ from 'lodash';
 import DatabaseConnectPanel from '@/components/DatabaseConnectPanel';

 export default {
@@ -50,16 +58,19 @@ export default {
      DatabaseConnectPanel
   },
   props: {
-      connection: Object
+      connection: Object,
+      isSelected: Boolean
   },
   data () {
      return {
-         isRefreshing: false
+         isRefreshing: false,
+         localWidth: null
      };
   },
   computed: {
      ...mapGetters({
         getWorkspace: 'workspaces/getWorkspace',
+         explorebarSize: 'settings/getExplorebarSize',
         getConnectionName: 'connections/getConnectionName'
      }),
      workspace () {
@@ -69,24 +80,66 @@ export default {
         return this.getConnectionName(this.connection.uid);
      }
   },
+   watch: {
+      localWidth: _.debounce(function (val) {
+         this.changeExplorebarSize(val);
+      }, 500),
+      isSelected (val) {
+         if (val) this.localWidth = this.explorebarSize;
+      }
+   },
+   created () {
+      this.localWidth = this.explorebarSize;
+   },
+   mounted () {
+      const resizer = this.$refs.resizer;
+
+      resizer.addEventListener('mousedown', (e) => {
+         e.preventDefault();
+
+         window.addEventListener('mousemove', this.resize);
+         window.addEventListener('mouseup', this.stopResize);
+      });
+   },
   methods: {
      ...mapActions({
         disconnectWorkspace: 'workspaces/removeConnected',
-         refreshStructure: 'workspaces/refreshStructure'
+         refreshStructure: 'workspaces/refreshStructure',
+         changeExplorebarSize: 'settings/changeExplorebarSize'
      }),
      async refresh () {
         this.isRefreshing = true;
         await this.refreshStructure(this.connection.uid);
         this.isRefreshing = false;
+      },
+      resize (e) {
+         const el = this.$refs.explorebar;
+         let explorebarWidth = e.pageX - el.getBoundingClientRect().left;
+         if (explorebarWidth > 500) explorebarWidth = 500;
+         if (explorebarWidth < 150) explorebarWidth = 150;
+         this.localWidth = explorebarWidth;
+      },
+      stopResize () {
+         window.removeEventListener('mousemove', this.resize);
      }
   }
 };
 </script>

 <style lang="scss">
+   .workspace-explorebar-resizer{
+      position: absolute;
+      width: 4px;
+      right: -2px;
+      top: 0;
+      height: calc(100vh - #{$excluding-size});
+      cursor: ew-resize;
+      z-index: 99;
+   }
+
   .workspace-explorebar{
      width: $explorebar-width;
-      height: calc(100vh - #{$footer-height});
+      height: calc(100vh - #{$excluding-size});
      overflow: auto;
      display: flex;
      flex-direction: column;
@@ -94,7 +147,6 @@ export default {
      align-items: center;
      text-align: left;
      background: $bg-color-gray;
-      margin-bottom: $footer-height;
      box-shadow: 0 0 1px 0px #000;
      z-index: 8;
      flex: initial;
--- a/src/renderer/components/DatabaseWorkspace.vue
+++ b/src/renderer/components/DatabaseWorkspace.vue
@@ -1,6 +1,6 @@
 <template>
-   <div v-show="selectedWorkspace === connection.uid" class="workspace column columns">
-      <DatabaseExploreBar :connection="connection" />
+   <div v-show="isSelected" class="workspace column columns">
+      <DatabaseExploreBar :connection="connection" :is-selected="isSelected" />
      <div class="workspace-tabs column">
         <pre>{{ JSON.stringify(workspace.structure, null, 3) }}</pre>
      </div>
@@ -27,6 +27,9 @@ export default {
      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
+      },
+      isSelected () {
+         return this.selectedWorkspace === this.connection.uid;
      }
   },
   async created () {
@@ -53,7 +56,7 @@ export default {

      .workspace-tabs{
         overflow: auto;
-         height: calc(100vh - #{$footer-height});
+         height: calc(100vh - #{$excluding-size});
      }
   }
 </style>
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -42,6 +42,7 @@
                     </li>
                  </ul>
               </div>
+
               <div v-if="selectedTab === 'general'" class="panel-body py-4">
                  <form class="form-horizontal">
                     <div class="col-6 col-sm-12">
@@ -71,19 +72,23 @@
                     </div>
                  </form>
               </div>
+
               <div v-if="selectedTab === 'themes'" class="panel-body py-4">
                  <!--  -->
               </div>
+
               <div v-if="selectedTab === 'update'" class="panel-body py-4">
                  <!--  -->
               </div>
+
               <div v-if="selectedTab === 'about'" class="panel-body py-4">
                  <div class="text-center">
                     <img :src="require('@/images/logo.svg').default" width="128">
                     <h4>{{ appName }}</h4>
                     <p>
                        {{ $t('word.version') }}: {{ appVersion }}<br>
-                        <a class="c-hand" @click="openOutside('https://github.com/Fabio286/antares')">GitHub</a>
+                        <a class="c-hand" @click="openOutside('https://github.com/Fabio286/antares')">GitHub</a><br>
+                        <small>{{ $t('message.madeWithJS') }}</small>
                     </p>
                  </div>
               </div>
--- a/src/renderer/components/TheNotificationsBoard.vue
+++ b/src/renderer/components/TheNotificationsBoard.vue
@@ -42,6 +42,6 @@ export default {
      position: absolute;
      z-index: 9;
      right: 1rem;
-      bottom: $footer-height+1rem;
+      bottom: 1rem;
   }
 </style>
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -103,13 +103,13 @@ export default {
 <style lang="scss">
   #settingbar{
      width: $settingbar-width;
+      height: calc(100vh - #{$excluding-size});
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      background: $bg-color-light;
      padding: 0;
-      margin-bottom: $footer-height;
      box-shadow: 0 0 1px 0px #000;
      z-index: 9;

--- a/src/renderer/components/TheTitleBar.vue
+++ b/src/renderer/components/TheTitleBar.vue
@@ -0,0 +1,133 @@
+<template>
+   <div id="titlebar">
+      <div class="titlebar-resizer" />
+      <div class="titlebar-elements">
+         <img class="titlebar-logo" :src="require('@/images/logo.svg').default">
+      </div>
+      <div class="titlebar-elements">
+         <!--  -->
+      </div>
+      <div class="titlebar-elements">
+         <div
+            v-if="isDevelopment"
+            class="titlebar-element"
+            @click="openDevTools"
+         >
+            <i class="material-icons">code</i>
+         </div>
+         <div
+            v-if="isDevelopment"
+            class="titlebar-element"
+            @click="reload"
+         >
+            <i class="material-icons">refresh</i>
+         </div>
+         <div class="titlebar-element" @click="minimizeApp">
+            <i class="material-icons">remove</i>
+         </div>
+         <div class="titlebar-element" @click="toggleFullScreen">
+            <i v-if="isMaximized" class="material-icons">fullscreen_exit</i>
+            <i v-else class="material-icons">fullscreen</i>
+         </div>
+         <div class="titlebar-element close-button" @click="closeApp">
+            <i class="material-icons">close</i>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import { remote } from 'electron';
+
+export default {
+   name: 'TheTitleBar',
+   data () {
+      return {
+         w: remote.getCurrentWindow(),
+         isMaximized: remote.getCurrentWindow().isMaximized(),
+         isDevelopment: process.env.NODE_ENV === 'development'
+      };
+   },
+   created () {
+      window.addEventListener('resize', this.onResize);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.onResize);
+   },
+   methods: {
+      closeApp () {
+         this.w.close();
+      },
+      minimizeApp () {
+         this.w.minimize();
+      },
+      toggleFullScreen () {
+         if (this.isMaximized)
+            this.w.unmaximize();
+         else
+            this.w.maximize();
+      },
+      openDevTools () {
+         this.w.openDevTools();
+      },
+      reload () {
+         this.w.reload();
+      },
+      onResize () {
+         this.isMaximized = this.w.isMaximized();
+      }
+   }
+};
+</script>
+
+<style lang="scss">
+   #titlebar{
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+      background: $bg-color-light;
+      align-items: center;
+      height: $titlebar-height;
+      -webkit-app-region: drag;
+      user-select: none;
+
+      .titlebar-resizer{
+         position: absolute;
+         top: 0;
+         width: 100%;
+         height: 4px;
+         z-index: 999;
+         -webkit-app-region: no-drag;
+      }
+
+      .titlebar-elements{
+         display: flex;
+         align-items: center;
+
+         .titlebar-logo{
+            height: $titlebar-height;
+            padding: 0 .4rem;
+         }
+
+         .titlebar-element{
+            display: flex;
+            align-items: center;
+            height: $titlebar-height;
+            line-height: 0;
+            padding: 0 .7rem;
+            opacity: .7;
+            transition: opacity .2s;
+            -webkit-app-region: no-drag;
+
+            &:hover{
+               opacity: 1;
+               background: rgba($color: #fff, $alpha: .2);
+            }
+
+            &.close-button:hover{
+               background: red;
+            }
+         }
+      }
+   }
+</style>
--- a/src/renderer/i18n/en-US.js
+++ b/src/renderer/i18n/en-US.js
@@ -39,7 +39,8 @@ module.exports = {
      editConnection: 'Edit connection',
      deleteConnection: 'Delete connection',
      deleteConnectionCorfirm: 'Do you confirm the cancellation of',
-      connectionSuccessfullyMade: 'Connection successfully made!'
+      connectionSuccessfullyMade: 'Connection successfully made!',
+      madeWithJS: 'Made with 💛 and JavaScript!'
   },
   // Date and Time
   short: {
--- a/src/renderer/i18n/it-IT.js
+++ b/src/renderer/i18n/it-IT.js
@@ -39,7 +39,8 @@ module.exports = {
      editConnection: 'Modifica connessione',
      deleteConnection: 'Elimina connessione',
      deleteConnectionCorfirm: 'Confermi l\'eliminazione di',
-      connectionSuccessfullyMade: 'Connessione avvenuta con successo!'
+      connectionSuccessfullyMade: 'Connessione avvenuta con successo!',
+      madeWithJS: 'Fatto con 💛 e JavaScript!'
   },
   // Date and Time
   short: {
--- a/src/renderer/scss/_variables.scss
+++ b/src/renderer/scss/_variables.scss
@@ -9,6 +9,8 @@ $success-color: #32b643;
 $error-color: #de3b28;

 /*Sizes*/
+$titlebar-height: 1.5rem;
 $settingbar-width: 3rem;
 $explorebar-width: 14rem;
 $footer-height: 1.5rem;
+$excluding-size: $footer-height + $titlebar-height;
--- a/src/renderer/store/modules/settings.store.js
+++ b/src/renderer/store/modules/settings.store.js
@@ -5,20 +5,28 @@ export default {
   namespaced: true,
   strict: true,
   state: {
-      locale: 'en-US'
+      locale: 'en-US',
+      explorebar_size: null
   },
   getters: {
-      getLocale: state => state.locale
+      getLocale: state => state.locale,
+      getExplorebarSize: state => state.explorebar_size
   },
   mutations: {
      SET_LOCALE (state, locale) {
         state.locale = locale;
         i18n.locale = locale;
+      },
+      SET_EXPLOREBAR_SIZE (state, size) {
+         state.explorebar_size = size;
      }
   },
   actions: {
      changeLocale ({ commit }, locale) {
         commit('SET_LOCALE', locale);
+      },
+      changeExplorebarSize ({ commit }, size) {
+         commit('SET_EXPLOREBAR_SIZE', size);
      }
   }
 };