From 428c300e9f42f8b9232f780d387292c1a94fcd23 Mon Sep 17 00:00:00 2001 From: Rémy Raes Date: Wed, 29 Mar 2023 00:45:16 +0200 Subject: feat: i18n (#182) * build: add vue-i18n dependency * feat: add i18n plugin to vue project * feat: use translations in play button * feat: translate play view * feat: translate menu items * feat: translate local mods view * feat: translate online mods view * feat: translate mods menu * feat: translate thunderstore mod card component * fix: remove useless "this" keyword * feat: translate settings view * fix: remove leftover test invocation * feat: add language selector component * feat: using language selector updates interface's language * feat: save language in persistent store on selector change * feat: initialize lang on app launch * refactor: move i18n code into App.mounted callback * feat: update interface language on app launch * feat: adjust language selection on language selector load * fix: this.$root can't be null * feat: translate store notifications * fix: add missing parameter to english translation * feat: translate "by" author keyword * feat: translate repair window * feat: translate repair window title * docs: add some documentation regarding localization * docs: explain how to add a new language * feat: translate Northstar release canal selector elements * docs: describe how to inject variable into translations * feat: translate "info" word * feat: translate popconfirm buttons * fix: remove "this" keyword * fix: save store when updating interface language --- src-vue/src/components/ThunderstoreModCard.vue | 34 +++++++++++++------------- 1 file changed, 17 insertions(+), 17 deletions(-) (limited to 'src-vue/src/components/ThunderstoreModCard.vue') diff --git a/src-vue/src/components/ThunderstoreModCard.vue b/src-vue/src/components/ThunderstoreModCard.vue index c9f6768c..b81ed03c 100644 --- a/src-vue/src/components/ThunderstoreModCard.vue +++ b/src-vue/src/components/ThunderstoreModCard.vue @@ -21,7 +21,7 @@
{{ mod.name }}
-
by {{ mod.owner }}
+
{{ $t('mods.card.by') }} {{ mod.owner }}
{{ latestVersion.description }}
@@ -33,7 +33,7 @@ :loading="isBeingInstalled || isBeingUpdated" @click.stop="installMod(mod)" > - {{ modButtonText }} + {{ $t(modButtonText) }} @@ -51,10 +51,10 @@ @@ -129,15 +129,15 @@ export default defineComponent({ modButtonText(): string { switch (this.modStatus) { case ThunderstoreModStatus.BEING_INSTALLED: - return "Installing..."; + return "mods.card.button.being_installed"; case ThunderstoreModStatus.BEING_UPDATED: - return "Updating..."; + return "mods.card.button.being_updated"; case ThunderstoreModStatus.INSTALLED: - return "Installed"; + return "mods.card.button.installed"; case ThunderstoreModStatus.NOT_INSTALLED: - return "Install"; + return "mods.card.button.install"; case ThunderstoreModStatus.OUTDATED: - return "Update"; + return "mods.card.button.outdated"; } }, @@ -200,11 +200,11 @@ export default defineComponent({ // Show pop-up to confirm delete ElMessageBox.confirm( - 'Delete Thunderstore mod?', - 'Warning', + this.$t('mods.card.remove_dialog_text'), + this.$t('mods.card.remove_dialog_title'), { - confirmButtonText: 'OK', - cancelButtonText: 'Cancel', + confirmButtonText: this.$t('generic.yes'), + cancelButtonText: this.$t('generic.cancel'), type: 'warning', } ) @@ -217,7 +217,7 @@ export default defineComponent({ await invoke("delete_thunderstore_mod", { gameInstall: game_install, thunderstoreModString: this.latestVersion.full_name }) .then((message) => { ElNotification({ - title: `Removed ${mod.name}`, + title: this.$t('mods.card.remove_success', {modName: mod.name}), message: message as string, type: 'success', position: 'bottom-right' @@ -225,7 +225,7 @@ export default defineComponent({ }) .catch((error) => { ElNotification({ - title: 'Error', + title: this.$t('generic.error'), message: error, type: 'error', position: 'bottom-right' @@ -255,7 +255,7 @@ export default defineComponent({ await invoke("install_mod_caller", { gameInstall: game_install, thunderstoreModString: this.latestVersion.full_name }).then((message) => { ElNotification({ - title: `Installed ${mod.name}`, + title: this.$t('mods.card.install_success', {modName: mod.name}), message: message as string, type: 'success', position: 'bottom-right' @@ -263,7 +263,7 @@ export default defineComponent({ }) .catch((error) => { ElNotification({ - title: 'Error', + title: this.$t('generic.error'), message: error, type: 'error', position: 'bottom-right' -- cgit v1.2.3 From 6d58e6793d40df4fec518f37351868803a02a033 Mon Sep 17 00:00:00 2001 From: Rémy Raes Date: Mon, 10 Apr 2023 14:25:32 +0200 Subject: refactor: Notifications (#259) * feat: wrap ElNotification class in a showNotification method * refactor: replace notification invocations in mod views * feat: add 'info' type to showNotification method * refactor: replace notification invocations in repair view * refactor: replace notification invocations in settings view * refactor: replace notification invocations in developer view * feat: showNotification method now returns a NotificationHandle * feat: showNotification has a duration argument * refactor: replace notification invocations in pull requests module * refactor: replace notification invocation in repair view * refactor: replace notification invocations in UI store * refactor: remove unused import from play view * refactor: use showErrorNotification method to wrap up error display * fix: add missing showErrorNotification imports * style: format code * style: format ThunderstoreModCard.vue * style: format pull_requests.ts * style: format SettingsView.vue * style: format RepairView.vue * style: format DeveloperView.vue * refactor: remove useless import * refactor: add missing showErrorNotification invocation * feat: showErrorNotification has an optional title argument * style: format LocalModsView.vue --- src-vue/src/components/ThunderstoreModCard.vue | 34 +++------- src-vue/src/plugins/modules/pull_requests.ts | 66 +++++--------------- src-vue/src/plugins/store.ts | 86 +++++++++----------------- src-vue/src/utils/ui.ts | 29 +++++++++ src-vue/src/views/DeveloperView.vue | 81 ++++-------------------- src-vue/src/views/PlayView.vue | 1 - src-vue/src/views/RepairView.vue | 57 ++++------------- src-vue/src/views/SettingsView.vue | 20 +++--- src-vue/src/views/mods/LocalModsView.vue | 22 ++----- 9 files changed, 117 insertions(+), 279 deletions(-) create mode 100644 src-vue/src/utils/ui.ts (limited to 'src-vue/src/components/ThunderstoreModCard.vue') diff --git a/src-vue/src/components/ThunderstoreModCard.vue b/src-vue/src/components/ThunderstoreModCard.vue index b81ed03c..fec95f14 100644 --- a/src-vue/src/components/ThunderstoreModCard.vue +++ b/src-vue/src/components/ThunderstoreModCard.vue @@ -72,9 +72,9 @@ import {invoke, shell} from "@tauri-apps/api"; import {ThunderstoreModStatus} from "../utils/thunderstore/ThunderstoreModStatus"; import {NorthstarMod} from "../../../src-tauri/bindings/NorthstarMod"; import {GameInstall} from "../utils/GameInstall"; -import {ElNotification} from "element-plus"; import { NorthstarState } from "../utils/NorthstarState"; import { ElMessageBox } from "element-plus"; +import { showErrorNotification, showNotification } from "../utils/ui"; export default defineComponent({ name: "ThunderstoreModCard", @@ -214,22 +214,12 @@ export default defineComponent({ install_type: this.$store.state.install_type } as GameInstall; - await invoke("delete_thunderstore_mod", { gameInstall: game_install, thunderstoreModString: this.latestVersion.full_name }) + await invoke("delete_thunderstore_mod", { gameInstall: game_install, thunderstoreModString: this.latestVersion.full_name }) .then((message) => { - ElNotification({ - title: this.$t('mods.card.remove_success', {modName: mod.name}), - message: message as string, - type: 'success', - position: 'bottom-right' - }); + showNotification(this.$t('mods.card.remove_success', {modName: mod.name}), message); }) .catch((error) => { - ElNotification({ - title: this.$t('generic.error'), - message: error, - type: 'error', - position: 'bottom-right' - }); + showErrorNotification(error); }) .finally(() => { this.$store.commit('loadInstalledMods'); @@ -253,21 +243,11 @@ export default defineComponent({ this.isBeingInstalled = true; } - await invoke("install_mod_caller", { gameInstall: game_install, thunderstoreModString: this.latestVersion.full_name }).then((message) => { - ElNotification({ - title: this.$t('mods.card.install_success', {modName: mod.name}), - message: message as string, - type: 'success', - position: 'bottom-right' - }); + await invoke("install_mod_caller", { gameInstall: game_install, thunderstoreModString: this.latestVersion.full_name }).then((message) => { + showNotification(this.$t('mods.card.install_success', {modName: mod.name}), message); }) .catch((error) => { - ElNotification({ - title: this.$t('generic.error'), - message: error, - type: 'error', - position: 'bottom-right' - }); + showErrorNotification(error); }) .finally(() => { this.isBeingInstalled = false; diff --git a/src-vue/src/plugins/modules/pull_requests.ts b/src-vue/src/plugins/modules/pull_requests.ts index 227888f2..ff9ec322 100644 --- a/src-vue/src/plugins/modules/pull_requests.ts +++ b/src-vue/src/plugins/modules/pull_requests.ts @@ -1,8 +1,8 @@ -import { ElNotification } from "element-plus"; import { invoke, shell } from "@tauri-apps/api"; import { PullsApiResponseElement } from "../../../../src-tauri/bindings/PullsApiResponseElement"; import { PullRequestType } from '../../../../src-tauri/bindings/PullRequestType'; import { store } from "../store"; +import { showErrorNotification, showNotification } from "../../utils/ui"; interface PullRequestStoreState { searchValue: string, @@ -33,12 +33,7 @@ export const pullRequestModule = { } }) .catch((error) => { - ElNotification({ - title: 'Error', - message: error, - type: 'error', - position: 'bottom-right' - }); + showErrorNotification(error); }); }, async downloadLauncherPR(state: PullRequestStoreState, pull_request: PullsApiResponseElement) { @@ -48,12 +43,7 @@ export const pullRequestModule = { shell.open(url); }) .catch((error) => { - ElNotification({ - title: 'Error', - message: error, - type: 'error', - position: 'bottom-right' - }); + showErrorNotification(error); }); }, async downloadModsPR(state: PullRequestStoreState, pull_request: PullsApiResponseElement) { @@ -62,32 +52,16 @@ export const pullRequestModule = { }, async installLauncherPR(state: PullRequestStoreState, pull_request: PullsApiResponseElement) { // Send notification telling the user to wait for the process to finish - const notification = ElNotification({ - title: `Installing launcher PR ${pull_request.number}`, - message: 'Please wait', - duration: 0, - type: 'info', - position: 'bottom-right' - }); + const notification = showNotification(`Installing launcher PR ${pull_request.number}`, 'Please wait', 'info', 0); await invoke("apply_launcher_pr", { pullRequest: pull_request, gameInstallPath: store.state.game_path }) .then((message) => { console.log(message); // Show user notification if mod install completed. - ElNotification({ - title: `Done`, - message: `Installed ${pull_request.number}: "${pull_request.title}"`, - type: 'success', - position: 'bottom-right' - }); + showNotification(`Done`, `Installed ${pull_request.number}: "${pull_request.title}"`); }) .catch((error) => { - ElNotification({ - title: 'Error', - message: error, - type: 'error', - position: 'bottom-right' - }); + showErrorNotification(error); }) .finally(() => { // Clear old notification @@ -96,32 +70,20 @@ export const pullRequestModule = { }, async installModsPR(state: PullRequestStoreState, pull_request: PullsApiResponseElement) { // Send notification telling the user to wait for the process to finish - const notification = ElNotification({ - title: `Installing mods PR ${pull_request.number}`, - message: 'Please wait', - duration: 0, - type: 'info', - position: 'bottom-right' - }); + const notification = showNotification(`Installing mods PR ${pull_request.number}`, 'Please wait', 'info', 0); await invoke("apply_mods_pr", { pullRequest: pull_request, gameInstallPath: store.state.game_path }) .then((message) => { // Show user notification if mod install completed. - ElNotification({ - title: `Done`, - message: `Installed ${pull_request.number}: "${pull_request.title}"\nMake sure to launch via batch file or by specifying correct profile!`, - type: 'success', - duration: 7_000, // in ms - position: 'bottom-right' - }); + showNotification( + `Done`, + `Installed ${pull_request.number}: "${pull_request.title}"\nMake sure to launch via batch file or by specifying correct profile!`, + 'success', + 7000 + ); }) .catch((error) => { - ElNotification({ - title: 'Error', - message: error, - type: 'error', - position: 'bottom-right' - }); + showErrorNotification(error); }) .finally(() => { // Clear old notification diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts index cdbd6738..6f878277 100644 --- a/src-vue/src/plugins/store.ts +++ b/src-vue/src/plugins/store.ts @@ -6,7 +6,7 @@ import { invoke } from "@tauri-apps/api"; import { GameInstall } from "../utils/GameInstall"; import { ReleaseCanal } from "../utils/ReleaseCanal"; import { FlightCoreVersion } from "../../../src-tauri/bindings/FlightCoreVersion"; -import { ElNotification, NotificationHandle } from 'element-plus'; +import { NotificationHandle } from 'element-plus'; import { NorthstarState } from '../utils/NorthstarState'; import { appDir } from '@tauri-apps/api/path'; import { open } from '@tauri-apps/api/dialog'; @@ -18,6 +18,7 @@ import { NorthstarMod } from "../../../src-tauri/bindings/NorthstarMod"; import { searchModule } from './modules/search'; import { i18n } from '../main'; import { pullRequestModule } from './modules/pull_requests'; +import { showErrorNotification, showNotification } from '../utils/ui'; const persistentStore = new Store('flight-core-settings.json'); @@ -128,12 +129,10 @@ export const store = createStore({ let is_valid_titanfall2_install = await invoke("verify_install_location", { gamePath: selected }) as boolean; if (is_valid_titanfall2_install) { state.game_path = selected; - ElNotification({ - title: i18n.global.tc('notification.game_folder.new.title'), - message: i18n.global.tc('notification.game_folder.new.text'), - type: 'success', - position: 'bottom-right' - }); + showNotification( + i18n.global.tc('notification.game_folder.new.title'), + i18n.global.tc('notification.game_folder.new.text') + ); try { notification_handle.close(); } @@ -156,12 +155,10 @@ export const store = createStore({ } else { // Not valid Titanfall2 install - ElNotification({ - title: i18n.global.tc('notification.game_folder.wrong.title'), - message: i18n.global.tc('notification.game_folder.wrong.text'), - type: 'error', - position: 'bottom-right' - }); + showErrorNotification( + i18n.global.tc('notification.game_folder.wrong.text'), + i18n.global.tc('notification.game_folder.wrong.title') + ); } } }, @@ -229,12 +226,7 @@ export const store = createStore({ }) .catch((error) => { console.error(error); - ElNotification({ - title: i18n.global.tc('generic.error'), - message: error, - type: 'error', - position: 'bottom-right' - }); + showErrorNotification(error); }); break; @@ -251,20 +243,11 @@ export const store = createStore({ await invoke("launch_northstar_steam_caller", { gameInstall: game_install, bypassChecks: no_checks }) .then((message) => { - ElNotification({ - title: 'Success', - type: 'success', - position: 'bottom-right' - }); + showNotification('Success'); }) .catch((error) => { console.error(error); - ElNotification({ - title: 'Error', - message: error, - type: 'error', - position: 'bottom-right' - }); + showErrorNotification(error); }); return; @@ -324,12 +307,7 @@ export const store = createStore({ }) .catch((error) => { console.error(error); - ElNotification({ - title: i18n.global.tc('generic.error'), - message: error, - type: 'error', - position: 'bottom-right' - }); + showErrorNotification(error); }); }, async toggleReleaseCandidate(state: FlightCoreStore) { @@ -346,12 +324,10 @@ export const store = createStore({ store.commit("checkNorthstarUpdates"); // Display notification to highlight change - ElNotification({ - title: i18n.global.tc(`channels.names.${state.northstar_release_canal}`), - message: i18n.global.tc('channels.release.switch.text', {canal: state.northstar_release_canal}), - type: 'success', - position: 'bottom-right' - }); + showNotification( + i18n.global.tc(`channels.names.${state.northstar_release_canal}`), + i18n.global.tc('channels.release.switch.text', {canal: state.northstar_release_canal}), + ); } } }); @@ -418,13 +394,12 @@ async function _initializeApp(state: any) { .catch((err) => { // Gamepath not found or other error console.error(err); - notification_handle = ElNotification({ - title: i18n.global.tc('notification.game_folder.not_found.title'), - message: i18n.global.tc('notification.game_folder.not_found.text'), - type: 'error', - position: 'bottom-right', - duration: 0 // Duration `0` means the notification will not auto-vanish - }); + notification_handle = showNotification( + i18n.global.tc('notification.game_folder.not_found.title'), + i18n.global.tc('notification.game_folder.not_found.text'), + 'error', + 0 // Duration `0` means the notification will not auto-vanish + ); }); } @@ -461,13 +436,12 @@ async function _checkForFlightCoreUpdates(state: FlightCoreStore) { if (flightcore_is_outdated) { let newest_flightcore_version = await invoke("get_newest_flightcore_version") as FlightCoreVersion; - ElNotification({ - title: i18n.global.tc('notification.flightcore_outdated.title'), - message: i18n.global.tc('notification.flightcore_outdated.text', {oldVersion: state.flightcore_version, newVersion: newest_flightcore_version.tag_name}), - type: 'warning', - position: 'bottom-right', - duration: 0 // Duration `0` means the notification will not auto-vanish - }); + showNotification( + i18n.global.tc('notification.flightcore_outdated.title'), + i18n.global.tc('notification.flightcore_outdated.text', {oldVersion: state.flightcore_version, newVersion: newest_flightcore_version.tag_name}), + 'warning', + 0 // Duration `0` means the notification will not auto-vanish + ); } } diff --git a/src-vue/src/utils/ui.ts b/src-vue/src/utils/ui.ts new file mode 100644 index 00000000..b84d7666 --- /dev/null +++ b/src-vue/src/utils/ui.ts @@ -0,0 +1,29 @@ +import { ElNotification, NotificationHandle } from "element-plus"; +import { i18n } from "../main"; + +/** + * Displays content to the user in the form of a notification appearing on screen bottom right. + **/ +function showNotification( + title: string, + message: string = '', + type: 'success' | 'warning' | 'error' | 'info' = 'success', + duration: number = 4500 +): NotificationHandle { + return ElNotification({ + title, message, type, duration, + position: 'bottom-right', + }); +} + +/** + * Helper method displaying an error message to the user. + **/ +function showErrorNotification( + error: string, + title: string = i18n.global.tc('generic.error') +): NotificationHandle { + return showNotification(title, error, 'error'); +} + +export {showNotification, showErrorNotification}; diff --git a/src-vue/src/views/DeveloperView.vue b/src-vue/src/views/DeveloperView.vue index 7712756c..d9e268e3 100644 --- a/src-vue/src/views/DeveloperView.vue +++ b/src-vue/src/views/DeveloperView.vue @@ -87,10 +87,10 @@