feat: settings modal to change locale

src/renderer/components/AppHeader.vue

@@ -30,11 +30,21 @@
             </transition>
          </div>
       </nav>
+      <div
+         class="navSettings"
+         :title="t('word.settings')"
+         @click="isSettingModal=true"
+      >
+         <i class="material-icons">settings</i>
+      </div>
+      <ModalSettings v-if="isSettingModal" @hide-settings="isSettingModal=false" />
    </header>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import ModalSettings from './ModalSettings.vue';
 
 defineProps({
    selTab: Number,
@@ -42,6 +52,8 @@ defineProps({
    serverStatus: Number
 });
 
+const isSettingModal = ref(false);
+
 const emit = defineEmits(['selectTab']);
 
 const { t } = useI18n();

src/renderer/components/ModalEditMessage.vue

@@ -1,6 +1,6 @@
 <template>
    <div id="popcontainer">
-      <div class="popup">
+      <div class="popup" :style="'min-width: 350px;'">
          <div class="box-100">
             <h4>{{ t('message.editMessage') }}</h4>
             <div class="input-element">
@@ -17,6 +17,7 @@
                <textarea
                   v-model="staticMsg.message"
                   required
+                  rows="5"
                />
             </div>
          </div>

src/renderer/components/ModalNewMessage.vue

@@ -1,6 +1,6 @@
 <template>
    <div id="popcontainer">
-      <div class="popup">
+      <div class="popup" :style="'min-width: 350px;'">
          <div class="box-100">
             <h4>{{ t('message.addMessage') }}</h4>
             <div class="input-element">
@@ -17,6 +17,7 @@
                <textarea
                   v-model="message.message"
                   required
+                  rows="5"
                />
             </div>
          </div>

src/renderer/components/ModalNewPort.vue

@@ -74,6 +74,6 @@ const confirm = () => {
       };
       errMsg.value = '';
    }
-   else errMsg.value = 'Porta già esistente!';
+   else errMsg.value = 'Port already exists!';
 };
 </script>

src/renderer/components/ModalSettings.vue

@@ -0,0 +1,87 @@
+<template>
+   <div id="popcontainer">
+      <div class="popup" :style="'min-width: 350px;'">
+         <div class="box-100">
+            <h4>{{ t('word.settings') }}</h4>
+            <div class="input-element">
+               <label>{{ t('word.locale', 1) }}</label>
+               <select
+                  v-model="localLocale"
+                  @change="changeLocale(localLocale)"
+               >
+                  <option
+                     v-for="locale in locales"
+                     :key="locale.code"
+                     :value="locale.code"
+                  >
+                     {{ locale.name }} | {{ locale.code }}
+                  </option>
+               </select>
+            </div>
+            <div class="creditsBox">
+               <div>
+                  {{ appName }} v{{ appVersion }}
+               </div>
+               <div>
+                  {{ t('word.author') }}: <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">{{ appAuthor }}</a>
+               </div>
+            </div>
+            <div class="buttons">
+               <button class="cancel" @click="close">
+                  {{ t('word.close') }}
+               </button>
+            </div>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useSettingsStore } from '@/stores/settings';
+import { useApplicationStore } from '@/stores/application';
+import { AvailableLocale } from '@/i18n';
+import { storeToRefs } from 'pinia';
+import { localesNames } from '@/i18n/supported-locales';
+import { shell } from 'electron';
+
+const settingsStore = useSettingsStore();
+const { appVersion, appName } = useApplicationStore();
+const { changeLocale } = settingsStore;
+const { locale: selectedLocale } = storeToRefs(settingsStore);
+
+const emit = defineEmits(['hide-settings', 'create-port']);
+
+const { t } = useI18n();
+
+const appAuthor = 'Fabio Di Stasio';
+const localLocale: Ref<AvailableLocale> = ref(null);
+
+const locales = computed(() => {
+   const locales = [];
+   for (const locale of Object.keys(localesNames))
+      locales.push({ code: locale, name: localesNames[locale] });
+
+   return locales;
+});
+
+const close = () => {
+   emit('hide-settings');
+};
+
+const openOutside = (link: string) => {
+   shell.openExternal(link);
+};
+
+localLocale.value = selectedLocale.value;
+</script>
+<style lang="scss">
+.creditsBox {
+   display: flex;
+   align-items: center;
+   padding: 15px 0;
+   flex-direction: column;
+   gap: 8px;
+}
+</style>

src/renderer/i18n/en-US.ts

@@ -19,7 +19,11 @@ export const enUS = {
       cancel: 'Cancel',
       edit: 'Edit',
       create: 'Create',
-      reset: 'Reset'
+      reset: 'Reset',
+      settings: 'Settings',
+      close: 'Close',
+      locale: 'Locale',
+      author: 'Author'
    },
    message: {
       running: 'Running',

src/renderer/scss/main.scss

@@ -163,7 +163,8 @@ label {
 }
 
 #header {
-  padding: 10px 15px 0;
+  padding: 0 15px;
+  display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
@@ -189,7 +190,7 @@ label {
 }
 
 #appTabs .navTab {
-  padding: 10px 30px 15px;
+  padding: 17px 30px 15px;
   cursor: pointer;
   font-size: 14px;
   opacity: 0.6;
@@ -208,11 +209,22 @@ label {
 #appTabs .navTab .running {
   position: absolute;
   right: 5px;
-  top: 7px;
+  top: 14px;
   color: #33ce33;
   font-size: 22px;
 }
 
+.navSettings {
+  padding: 5px;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: all 0.2s;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 #main {
   padding: 5px;
   position: relative;
@@ -578,6 +590,10 @@ fieldset:not(:disabled) #messageList li:hover .editMessage {
   box-shadow: 0 0 10px -2px #000;
   max-width: 70vw;
   max-height: 90vh;
+
+  .buttons {
+    justify-content: flex-end;
+  }
 }
 
 .popup h4 {
@@ -591,7 +607,7 @@ fieldset:not(:disabled) #messageList li:hover .editMessage {
 
 .buttons {
   display: flex;
-  justify-content: space-evenly;
+  justify-content: center;
 }
 
 .buttons button {

src/renderer/stores/settings.ts

@@ -21,10 +21,7 @@ export const useSettingsStore = defineStore('settings', {
          this.locale = locale;
          i18n.global.locale = locale;
          settingsStore.set('locale', this.locale);
-      },
-      changePageSize (limit: number) {
-         this.dataTabLimit = limit;
-         settingsStore.set('data_tab_limit', this.dataTabLimit);
+         console.log(this.locale);
       },
       changeApplicationTheme (theme: string) {
          this.applicationTheme = theme;