diff options
Diffstat (limited to 'src-vue/src/views/mods')
| -rw-r--r-- | src-vue/src/views/mods/LocalModsView.vue | 78 | ||||
| -rw-r--r-- | src-vue/src/views/mods/ThunderstoreModsView.vue | 21 |
2 files changed, 43 insertions, 56 deletions
diff --git a/src-vue/src/views/mods/LocalModsView.vue b/src-vue/src/views/mods/LocalModsView.vue index ed801b7a..3fb90bdc 100644 --- a/src-vue/src/views/mods/LocalModsView.vue +++ b/src-vue/src/views/mods/LocalModsView.vue @@ -1,38 +1,44 @@ <template> - <el-scrollbar> - <div> - <p v-if="mods.length === 0">No mods were found.</p> - <el-card v-else shadow="hover" v-for="mod in mods" v-bind:key="mod.name"> - <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled" - :before-change="() => updateWhichModsEnabled(mod)" :loading="global_load_indicator" /> - <el-popconfirm - title="Are you sure to delete this mod?" - @confirm="deleteMod(mod)" - > - <template #reference> - <el-button type="danger">Delete</el-button> - </template> - </el-popconfirm> - {{ mod.name }} - <span v-if="mod.version != null">(v{{ mod.version }})</span> - <img - v-if="mod.thunderstore_mod_string != null" - title="This Northstar mod is part of a Thunderstore mod" - src="/src/assets/thunderstore-icon.png" - class="image" - height="16" - /> - </el-card> - </div> + <!-- Message displayed if no mod matched searched words --> + <div v-if="mods.length === 0" class="noModMessage"> + {{ $t('mods.local.no_mods') }} + </div> + + <el-scrollbar v-else> + <el-card shadow="hover" v-for="mod in mods" v-bind:key="mod.name"> + <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled" + :before-change="() => updateWhichModsEnabled(mod)" :loading="global_load_indicator" /> + <el-popconfirm + :title="$t('mods.local.delete_confirm')" + :confirm-button-text="$t('generic.yes')" + :cancel-button-text="$t('generic.no')" + @confirm="deleteMod(mod)" + > + <template #reference> + <el-button type="danger"> + {{ $t('mods.local.delete') }} + </el-button> + </template> + </el-popconfirm> + {{ mod.name }} + <span v-if="mod.version != null">(v{{ mod.version }})</span> + <img + v-if="mod.thunderstore_mod_string != null" + :title="$t('mods.local.part_of_ts_mod')" + src="/src/assets/thunderstore-icon.png" + class="image" + height="16" + /> + </el-card> </el-scrollbar> </template> <script lang="ts"> import { invoke } from '@tauri-apps/api'; -import { ElNotification } from 'element-plus'; import { defineComponent } from 'vue'; import { GameInstall } from '../../utils/GameInstall'; import { NorthstarMod } from "../../../../src-tauri/bindings/NorthstarMod"; +import { showErrorNotification, showNotification } from '../../utils/ui'; export default defineComponent({ name: 'LocalModsView', @@ -79,12 +85,7 @@ export default defineComponent({ }) } catch (error) { - ElNotification({ - title: 'Error', - message: `${error}`, - type: 'error', - position: 'bottom-right' - }); + showErrorNotification(`${error}`); this.global_load_indicator = false; return false; } @@ -100,19 +101,10 @@ export default defineComponent({ await invoke("delete_northstar_mod", { gameInstall: game_install, nsmodName: mod.name }) .then((message) => { // Just a visual indicator that it worked - ElNotification({ - title: `Success deleting ${mod.name}`, - type: 'success', - position: 'bottom-right' - }); + showNotification(this.$t('mods.local.success_deleting', {modName: mod.name})); }) .catch((error) => { - ElNotification({ - title: 'Error', - message: error, - type: 'error', - position: 'bottom-right' - }); + showErrorNotification(error); }) .finally(() => { this.$store.commit('loadInstalledMods'); diff --git a/src-vue/src/views/mods/ThunderstoreModsView.vue b/src-vue/src/views/mods/ThunderstoreModsView.vue index 19809f3e..5a7270df 100644 --- a/src-vue/src/views/mods/ThunderstoreModsView.vue +++ b/src-vue/src/views/mods/ThunderstoreModsView.vue @@ -3,11 +3,17 @@ <div v-if="mods.length === 0" class="fc__changelog__container">
<el-progress :show-text="false" :percentage="50" :indeterminate="true" />
</div>
+
+ <!-- Message displayed if no mod matched searched words -->
+ <div v-else-if="filteredMods.length === 0" class="noModMessage">
+ {{ $t('mods.online.no_match') }}<br/>
+ {{ $t('mods.online.try_another_search') }}
+ </div>
+
<el-scrollbar v-else class="container" ref="scrollbar">
<div class="card-container">
- <div class="pagination_container">
+ <div class="pagination_container" v-if="shouldDisplayPagination">
<el-pagination
- v-if="shouldDisplayPagination"
:currentPage="currentPageIndex + 1"
layout="prev, pager, next"
:page-size="modsPerPage"
@@ -16,12 +22,6 @@ />
</div>
- <!-- Message displayed if no mod matched searched words -->
- <div v-if="filteredMods.length === 0" class="modMessage">
- No matching mod has been found.<br/>
- Try another search!
- </div>
-
<!-- Mod cards -->
<thunderstore-mod-card v-for="mod of currentPageMods" v-bind:key="mod.name" :mod="mod" />
</div>
@@ -199,11 +199,6 @@ export default defineComponent({ margin: 0 0 0 10px !important;
}
-.modMessage {
- color: white;
- margin: 20px 5px;
-}
-
.card-container {
margin: 0 auto;
}
|