Added setting modal

2020-05-30 12:54:05 +02:00 · 2020-05-30 12:54:05 +02:00 · d9dbf8e462
parent 5dc901a75c
commit d9dbf8e462
15 changed files with 270 additions and 54 deletions
--- a/src/main/index.js
+++ b/src/main/index.js
@ -18,7 +18,7 @@ function createMainWindow () {
      width: 1600,
      height: 1000,
      minHeight: 550,
-      minWidth: 450,
+      minWidth: 900,
      title: 'Antares',
      autoHideMenuBar: true,
      icon: path.join(__static, 'logo-32.png'),
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@ -15,6 +15,7 @@
      <TheNotificationsBoard />
      <ModalNewConnection v-if="isNewConnModal" />
      <ModalEditConnection v-if="isEditModal" />
+      <ModalSettings v-if="isSettingModal" />
   </div>
 </template>

@ -27,6 +28,7 @@ import TheAppWelcome from '@/components/TheAppWelcome';
 import DatabaseWorkspace from '@/components/DatabaseWorkspace';
 import ModalNewConnection from '@/components/ModalNewConnection';
 import ModalEditConnection from '@/components/ModalEditConnection';
+import ModalSettings from '@/components/ModalSettings';

 export default {
   name: 'App',
@ -37,7 +39,8 @@ export default {
      TheAppWelcome,
      DatabaseWorkspace,
      ModalNewConnection,
-      ModalEditConnection
+      ModalEditConnection,
+      ModalSettings
   },
   data () {
      return {
@ -46,14 +49,15 @@ export default {
   computed: {
      ...mapGetters({
         isLoading: 'application/isLoading',
-         isNewConnModal: 'connections/isNewModal',
-         isEditModal: 'connections/isEditModal',
+         isNewConnModal: 'application/isNewModal',
+         isEditModal: 'application/isEditModal',
+         isSettingModal: 'application/isSettingModal',
         connections: 'connections/getConnections'
      })
   },
   methods: {
      ...mapActions({
-         showNewConnModal: 'connections/showNewConnModal'
+         showNewConnModal: 'application/showNewConnModal'
      })
   }
 };
--- a/src/renderer/components/BaseConfirmModal.vue
+++ b/src/renderer/components/BaseConfirmModal.vue
@ -2,7 +2,7 @@
   <div class="modal modal-sm active">
      <a class="modal-overlay" @click="hideModal" />
      <div class="modal-container">
-         <div v-if="hasHeader" class="modal-header text-light">
+         <div v-if="hasHeader" class="modal-header">
            <div class="modal-title h6">
               <slot name="header" />
            </div>
--- a/src/renderer/components/ModalAskCredentials.vue
+++ b/src/renderer/components/ModalAskCredentials.vue
@ -2,7 +2,7 @@
   <div class="modal active modal-sm">
      <a class="modal-overlay" />
      <div class="modal-container p-0">
-         <div class="modal-header text-light">
+         <div class="modal-header">
            <div class="modal-title h6">
               {{ $t('word.credentials') }}
            </div>
--- a/src/renderer/components/ModalEditConnection.vue
+++ b/src/renderer/components/ModalEditConnection.vue
@ -2,7 +2,7 @@
   <div class="modal active">
      <a class="modal-overlay c-hand" @click="closeModal" />
      <div class="modal-container">
-         <div class="modal-header text-light">
+         <div class="modal-header">
            <div class="modal-title h6">
               {{ $t('message.editConnection') }}
            </div>
@ -151,7 +151,7 @@ export default {
   },
   computed: {
      ...mapGetters({
-         connection: 'connections/getSelectedConnection'
+         connection: 'application/getSelectedConnection'
      })
   },
   created () {
@ -159,7 +159,7 @@ export default {
   },
   methods: {
      ...mapActions({
-         closeModal: 'connections/hideEditConnModal',
+         closeModal: 'application/hideEditConnModal',
         editConnection: 'connections/editConnection'
      }),
      async startTest () {
--- a/src/renderer/components/ModalNewConnection.vue
+++ b/src/renderer/components/ModalNewConnection.vue
@ -2,7 +2,7 @@
   <div class="modal active">
      <a class="modal-overlay c-hand" @click="closeModal" />
      <div class="modal-container">
-         <div class="modal-header text-light">
+         <div class="modal-header">
            <div class="modal-title h6">
               {{ $t('message.createNewConnection') }}
            </div>
@ -164,7 +164,7 @@ export default {
   },
   methods: {
      ...mapActions({
-         closeModal: 'connections/hideNewConnModal',
+         closeModal: 'application/hideNewConnModal',
         addConnection: 'connections/addConnection'
      }),
      setDefaults () {
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@ -0,0 +1,145 @@
+<template>
+   <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>
+            <a class="btn btn-clear c-hand" @click="closeModal" />
+         </div>
+         <div class="modal-body p-0">
+            <div class="panel">
+               <div class="panel-nav">
+                  <ul class="tab tab-block">
+                     <li
+                        class="tab-item"
+                        :class="{'active': selectedTab === 'general'}"
+                        @click="selectTab('general')"
+                     >
+                        <a class="c-hand">{{ $t('word.general') }}</a>
+                     </li>
+                     <li
+                        class="tab-item"
+                        :class="{'active': selectedTab === 'themes'}"
+                        @click="selectTab('themes')"
+                     >
+                        <a class="c-hand">{{ $t('word.themes') }}</a>
+                     </li>
+                     <li
+                        class="tab-item"
+                        :class="{'active': selectedTab === 'update'}"
+                        @click="selectTab('update')"
+                     >
+                        <a class="c-hand" :class="{'badge': isUpdate}">{{ $t('word.update') }}</a>
+                     </li>
+                     <li
+                        class="tab-item"
+                        :class="{'active': selectedTab === 'about'}"
+                        @click="selectTab('about')"
+                     >
+                        <a class="c-hand">{{ $t('word.about') }}</a>
+                     </li>
+                  </ul>
+               </div>
+               <div v-if="selectedTab === 'general'" class="panel-body py-4">
+                  <form class="form-horizontal">
+                     <div class="col-6 col-sm-12">
+                        <div class="form-group">
+                           <div class="col-6 col-sm-12">
+                              <label class="form-label">{{ $t('word.language') }}:</label>
+                           </div>
+                           <div class="col-6 col-sm-12">
+                              <select
+                                 v-model="localLocale"
+                                 class="form-select"
+                                 @change="changeLocale(localLocale)"
+                              >
+                                 <option v-for="(locale, key) in locales" :key="key">
+                                    {{ locale }}
+                                 </option>
+                              </select>
+                           </div>
+                        </div>
+                     </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="logo.svg" width="128">
+                     <h4>{{ appName }}</h4>
+                     <p>
+                        {{ $t('word.version') }}: 0.0.0<br>
+                        <a class="c-hand" @click="openOutside('https://github.com/Fabio286/antares')">GitHub</a>
+                     </p>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+const { shell } = require('electron');
+
+export default {
+   name: 'ModalSettings',
+   data () {
+      return {
+         isUpdate: false,
+         localLocale: null,
+         selectedTab: 'general'
+      };
+   },
+   computed: {
+      ...mapGetters({
+         appName: 'application/appName',
+         selectedLocale: 'settings/getLocale'
+      }),
+      locales () {
+         return this.$i18n.availableLocales;
+      }
+   },
+   created () {
+      this.localLocale = this.selectedLocale;
+   },
+   methods: {
+      ...mapActions({
+         closeModal: 'application/hideSettingModal',
+         changeLocale: 'settings/changeLocale'
+      }),
+      selectTab (tab) {
+         this.selectedTab = tab;
+      },
+      openOutside (link) {
+         shell.openExternal(link);
+      }
+   }
+};
+</script>
+
+<style lang="scss">
+#settings{
+   .modal-body{
+      overflow: hidden;
+
+      .panel-body{
+         height: calc(70vh - 70px);
+         overflow: auto;
+      }
+
+      .badge::after{
+         background: #32b643;
+      }
+   }
+
+}
+</style>
--- a/src/renderer/components/SettingBarContext.vue
+++ b/src/renderer/components/SettingBarContext.vue
@ -50,7 +50,7 @@ export default {
   methods: {
      ...mapActions({
         deleteConnection: 'connections/deleteConnection',
-         showEditModal: 'connections/showEditConnModal'
+         showEditModal: 'application/showEditConnModal'
      }),
      showConfirmModal () {
         this.isConfirmModal = true;
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@ -34,7 +34,11 @@

      <div class="settingbar-bottom-elements">
         <ul class="settingbar-elements">
-            <li class="settingbar-element btn btn-link tooltip tooltip-right mb-2" :data-tooltip="$t('word.settings')">
+            <li
+               class="settingbar-element btn btn-link tooltip tooltip-right mb-2"
+               :data-tooltip="$t('word.settings')"
+               @click="showSettingModal"
+            >
               <i class="settingbar-element-icon material-icons text-light">settings</i>
            </li>
         </ul>
@ -79,7 +83,8 @@ export default {
   methods: {
      ...mapActions({
         updateConnections: 'connections/updateConnections',
-         showNewConnModal: 'connections/showNewConnModal',
+         showNewConnModal: 'application/showNewConnModal',
+         showSettingModal: 'application/showSettingModal',
         selectWorkspace: 'workspaces/selectWorkspace'
      }),
      contextMenu (event, connection) {
--- a/src/renderer/i18n/en-US.js
+++ b/src/renderer/i18n/en-US.js
@ -18,7 +18,13 @@ module.exports = {
      disconnect: 'Disconnect',
      disconnected: 'Disconnected',
      refresh: 'Refresh',
-      settings: 'Settings'
+      settings: 'Settings',
+      general: 'General',
+      themes: 'Themes',
+      update: 'Update',
+      about: 'About',
+      language: 'Language',
+      version: 'Version'
   },
   message: {
      appWelcome: 'Welcome to Antares SQL Client!',
--- a/src/renderer/i18n/it-IT.js
+++ b/src/renderer/i18n/it-IT.js
@ -18,7 +18,13 @@ module.exports = {
      disconnect: 'Disconnetti',
      disconnected: 'Disconnesso',
      refresh: 'Aggiorna',
-      settings: 'Impostazioni'
+      settings: 'Impostazioni',
+      general: 'Generale',
+      themes: 'Temi',
+      update: 'Aggiornamento',
+      about: 'Informazioni',
+      language: 'Lingua',
+      version: 'Versione'
   },
   message: {
      appWelcome: 'Benvenuto in Antares SQL Client!',
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@ -50,6 +50,24 @@ body{
   }
 }

+// Scrollbars
+::-webkit-scrollbar {
+   width: 10px;
+   height: 10px;
+}
+ 
+::-webkit-scrollbar-track {
+   background: $bg-color-light; 
+}
+  
+ ::-webkit-scrollbar-thumb {
+   background: rgba($color: #FFF, $alpha: .5); 
+
+   &:hover {
+      background: rgba($color: #FFF, $alpha: 1); 
+   }
+}
+
 // Animations
@keyframes rotation {
   from {
@ -84,6 +102,24 @@ body{
         display: flex;
         justify-content: space-between;
         align-items: center;
+         color: #FFF;
+      }
+   }
+}
+
+.tab{
+   border-color: #272727;
+}
+
+.panel{
+   border: none;
+}
+
+.badge{
+   &[data-badge],
+   &:not([data-badge]){
+      &::after {
+         box-shadow: none;
      }
   }
 }
--- a/src/renderer/store/modules/application.store.js
+++ b/src/renderer/store/modules/application.store.js
@ -4,20 +4,66 @@ export default {
   strict: true,
   state: {
      app_name: 'Antares - SQL Client',
-      is_loading: false
+      is_loading: false,
+      is_new_modal: false,
+      is_edit_modal: false,
+      is_setting_modal: false,
+      selected_conection: {}
   },
   getters: {
      isLoading: state => state.is_loading,
-      appName: state => state.app_name
+      appName: state => state.app_name,
+      getSelectedConnection: state => state.selected_conection,
+      isNewModal: state => state.is_new_modal,
+      isEditModal: state => state.is_edit_modal,
+      isSettingModal: state => state.is_setting_modal
   },
   mutations: {
      SET_LOADING_STATUS (state, payload) {
         state.is_loading = payload;
+      },
+      SHOW_NEW_CONNECTION_MODAL (state) {
+         state.is_new_modal = true;
+      },
+      HIDE_NEW_CONNECTION_MODAL (state) {
+         state.is_new_modal = false;
+      },
+      SHOW_EDIT_CONNECTION_MODAL (state, connection) {
+         state.is_edit_modal = true;
+         state.selected_conection = connection;
+      },
+      HIDE_EDIT_CONNECTION_MODAL (state) {
+         state.is_edit_modal = false;
+      },
+      SHOW_SETTING_MODAL (state) {
+         state.is_setting_modal = true;
+      },
+      HIDE_SETTING_MODAL (state) {
+         state.is_setting_modal = false;
      }
   },
   actions: {
      setLoadingStatus ({ commit }, payload) {
         commit('SET_LOADING_STATUS', payload);
+      },
+      // Modals
+      showNewConnModal ({ commit }) {
+         commit('SHOW_NEW_CONNECTION_MODAL');
+      },
+      hideNewConnModal ({ commit }) {
+         commit('HIDE_NEW_CONNECTION_MODAL');
+      },
+      showEditConnModal ({ commit }, connection) {
+         commit('SHOW_EDIT_CONNECTION_MODAL', connection);
+      },
+      hideEditConnModal ({ commit }) {
+         commit('HIDE_EDIT_CONNECTION_MODAL');
+      },
+      showSettingModal ({ commit }) {
+         commit('SHOW_SETTING_MODAL');
+      },
+      hideSettingModal ({ commit }) {
+         commit('HIDE_SETTING_MODAL');
      }
   }
 };
--- a/src/renderer/store/modules/connections.store.js
+++ b/src/renderer/store/modules/connections.store.js
@ -4,16 +4,10 @@ export default {
   namespaced: true,
   strict: true,
   state: {
-      connections: [],
-      is_new_modal: false,
-      is_edit_modal: false,
-      selected_conection: {}
+      connections: []
   },
   getters: {
-      getConnections: state => state.connections,
-      getSelectedConnection: state => state.selected_conection,
-      isNewModal: state => state.is_new_modal,
-      isEditModal: state => state.is_edit_modal
+      getConnections: state => state.connections
   },
   mutations: {
      ADD_CONNECTION (state, connection) {
@ -32,19 +26,6 @@ export default {
      },
      UPDATE_CONNECTIONS (state, connections) {
         state.connections = connections;
-      },
-      SHOW_NEW_CONNECTION_MODAL (state) {
-         state.is_new_modal = true;
-      },
-      HIDE_NEW_CONNECTION_MODAL (state) {
-         state.is_new_modal = false;
-      },
-      SHOW_EDIT_CONNECTION_MODAL (state, connection) {
-         state.is_edit_modal = true;
-         state.selected_conection = connection;
-      },
-      HIDE_EDIT_CONNECTION_MODAL (state) {
-         state.is_edit_modal = false;
      }
   },
   actions: {
@ -59,19 +40,6 @@ export default {
      },
      updateConnections ({ commit }, connections) {
         commit('UPDATE_CONNECTIONS', connections);
-      },
-      // Modals
-      showNewConnModal ({ commit }) {
-         commit('SHOW_NEW_CONNECTION_MODAL');
-      },
-      hideNewConnModal ({ commit }) {
-         commit('HIDE_NEW_CONNECTION_MODAL');
-      },
-      showEditConnModal ({ commit }, connection) {
-         commit('SHOW_EDIT_CONNECTION_MODAL', connection);
-      },
-      hideEditConnModal ({ commit }) {
-         commit('HIDE_EDIT_CONNECTION_MODAL');
      }
   }
 };
--- a/src/renderer/store/modules/settings.store.js
+++ b/src/renderer/store/modules/settings.store.js
@ -5,7 +5,7 @@ export default {
   namespaced: true,
   strict: true,
   state: {
-      locale: 'it-IT'
+      locale: 'en-US'
   },
   getters: {
      getLocale: state => state.locale