diff options
| -rw-r--r-- | src-vue/src/App.vue | 11 | ||||
| -rw-r--r-- | src-vue/src/style.css | 15 | ||||
| -rw-r--r-- | src-vue/src/utils/NorthstarMod.d.ts | 5 | ||||
| -rw-r--r-- | src-vue/src/views/ModsView.vue | 37 |
4 files changed, 67 insertions, 1 deletions
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue index 115330c3..5eeeb93b 100644 --- a/src-vue/src/App.vue +++ b/src-vue/src/App.vue @@ -34,6 +34,7 @@ export default { </script> <template> + <div class="app-inner"> <div id="fc_bg__container" /> <el-menu @@ -56,6 +57,7 @@ export default { <el-button color="white" icon="SemiSelect" @click="minimize" circle /> <el-button color="white" icon="CloseBold" @click="close" circle /> </div> + </div> </template> <style> @@ -63,6 +65,10 @@ export default { #fc__menu_bar { border: none !important; } +.app-inner { + height: 100%; + width: 100%; +} /* Header item */ #fc__menu_bar .el-menu-item { @@ -84,6 +90,11 @@ export default { background-color: transparent; } +.app-inner > .fc__mods__container { + overflow-y: auto; + height: calc(100% - var(--fc-menu_height)); +} + /* Header menu */ #fc__menu_bar { background-image: radial-gradient(transparent 1px); diff --git a/src-vue/src/style.css b/src-vue/src/style.css index 6fd4a793..6e00975d 100644 --- a/src-vue/src/style.css +++ b/src-vue/src/style.css @@ -1,3 +1,12 @@ +* { + box-sizing: border-box; +} + +html, body { + height: 100%; + width: 100%; +} + body { margin: 0; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; @@ -5,6 +14,12 @@ body { user-select: none; } +#app { + position: relative; + height: 100%; + width: 100%; +} + #fc_bg__container { background: url(/src/assets/wallpaperflare.com_wallpaper.jpg) center no-repeat; background-size: cover; diff --git a/src-vue/src/utils/NorthstarMod.d.ts b/src-vue/src/utils/NorthstarMod.d.ts new file mode 100644 index 00000000..b0ce0ed3 --- /dev/null +++ b/src-vue/src/utils/NorthstarMod.d.ts @@ -0,0 +1,5 @@ +// Matches Rust struct (in lib.rs). +export interface NorthstarMod { + name: String, + enabled: bool, +} diff --git a/src-vue/src/views/ModsView.vue b/src-vue/src/views/ModsView.vue index c37f5fe2..934d6b9d 100644 --- a/src-vue/src/views/ModsView.vue +++ b/src-vue/src/views/ModsView.vue @@ -1,15 +1,50 @@ <template> <div class="fc__mods__container"> <h3>Installed Mods:</h3> - TODO + <div> + <el-card shadow="hover" v-for="mod in installed_mods"> + <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled" + disabled /> + {{mod.name}} + </el-card> + </div> </div> </template> <script lang="ts"> import { defineComponent } from "vue"; +import { ElNotification } from "element-plus"; +import { invoke } from '@tauri-apps/api/tauri'; +import { GameInstall } from "../utils/GameInstall"; +import { NorthstarMod } from "../utils/NorthstarMod" export default defineComponent({ name: "ModsView", + data() { + return { + installed_mods: [] as NorthstarMod[], + } + }, + async mounted() { + let game_install = { + game_path: this.$store.state.game_path, + install_type: this.$store.state.install_type + } as GameInstall; + // Call back-end for installed mods + await invoke("get_installed_mods_caller", { gameInstall: game_install }) + .then((message) => { + this.installed_mods = (message as NorthstarMod[]); + }) + .catch((error) => { + console.error(error); + ElNotification({ + title: 'Error', + message: error, + type: 'error', + position: 'bottom-right' + }); + }); + } }); </script> |