Added setting modal

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'),

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',
+         isNewConnModal: 'application/isNewModal',
-         isEditModal: 'connections/isEditModal',
+         isEditModal: 'application/isEditModal',
+         isSettingModal: 'application/isSettingModal',
          connections: 'connections/getConnections'
       })
    },
    methods: {
       ...mapActions({
-         showNewConnModal: 'connections/showNewConnModal'
+         showNewConnModal: 'application/showNewConnModal'
       })
    }
 };

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>

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>

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 () {

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 () {

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>

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;

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) {

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!',

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!',

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;
       }
    }
 }

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');
       }
    }
 };

src/renderer/store/modules/connections.store.js

@@ -4,16 +4,10 @@ export default {
    namespaced: true,
    strict: true,
    state: {
-      connections: [],
+      connections: []
-      is_new_modal: false,
-      is_edit_modal: false,
-      selected_conection: {}
    },
    getters: {
-      getConnections: state => state.connections,
+      getConnections: state => state.connections
-      getSelectedConnection: state => state.selected_conection,
-      isNewModal: state => state.is_new_modal,
-      isEditModal: state => state.is_edit_modal
    },
    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');
       }
    }
 };

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