feat: settings modal to change locale

This commit is contained in:
Fabio Di Stasio 2023-04-10 17:32:35 +02:00
parent a8eef65a96
commit 2265a3e40e
8 changed files with 130 additions and 12 deletions

View File

@ -30,11 +30,21 @@
</transition> </transition>
</div> </div>
</nav> </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> </header>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import ModalSettings from './ModalSettings.vue';
defineProps({ defineProps({
selTab: Number, selTab: Number,
@ -42,6 +52,8 @@ defineProps({
serverStatus: Number serverStatus: Number
}); });
const isSettingModal = ref(false);
const emit = defineEmits(['selectTab']); const emit = defineEmits(['selectTab']);
const { t } = useI18n(); const { t } = useI18n();

View File

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

View File

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

View File

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

View File

@ -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>

View File

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

View File

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

View File

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