Added setting modal

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