aboutsummaryrefslogtreecommitdiff
path: root/src-vue/src
diff options
context:
space:
mode:
authorRémy Raes <contact@remyraes.com>2022-11-30 02:14:09 +0100
committerGitHub <noreply@github.com>2022-11-30 02:14:09 +0100
commitdc10eb68bf2889fef3f18c8f56e619f40701f729 (patch)
tree1e62648a64fa9a46b03dd52450f9961b57fc4604 /src-vue/src
parentb9895a407b215230d336a5104d84fcb5e2582b5b (diff)
downloadFlightCore-dc10eb68bf2889fef3f18c8f56e619f40701f729.tar.gz
FlightCore-dc10eb68bf2889fef3f18c8f56e619f40701f729.zip
feat: Add scrollbar to all views (#91)
* feat: add new CSS class for UI containers * feat: add a scrollbar to developer view * refactor: use CSS class in all views * feat: put a scrollbar in settings view
Diffstat (limited to 'src-vue/src')
-rw-r--r--src-vue/src/style.css6
-rw-r--r--src-vue/src/views/ChangelogView.vue6
-rw-r--r--src-vue/src/views/DeveloperView.vue81
-rw-r--r--src-vue/src/views/ModsView.vue8
-rw-r--r--src-vue/src/views/SettingsView.vue47
-rw-r--r--src-vue/src/views/ThunderstoreModsView.vue6
6 files changed, 73 insertions, 81 deletions
diff --git a/src-vue/src/style.css b/src-vue/src/style.css
index d8e10375..b39ac8db 100644
--- a/src-vue/src/style.css
+++ b/src-vue/src/style.css
@@ -34,3 +34,9 @@ body {
--el-scrollbar-opacity: 0.5;
--el-scrollbar-hover-opacity: 0.7;
}
+
+.fc-container {
+ position: relative;
+ height: calc(100% - var(--fc-menu_height));
+ color: white;
+}
diff --git a/src-vue/src/views/ChangelogView.vue b/src-vue/src/views/ChangelogView.vue
index 62d7f820..b9b91568 100644
--- a/src-vue/src/views/ChangelogView.vue
+++ b/src-vue/src/views/ChangelogView.vue
@@ -1,5 +1,5 @@
<template>
- <div style="height: calc(100% - var(--fc-menu_height))">
+ <div class="fc-container">
<div v-if="releases.length === 0" class="fc__changelog__container">
<el-progress :show-text="false" :percentage="50" :indeterminate="true" />
</div>
@@ -65,10 +65,6 @@ export default defineComponent({
.fc__changelog__container {
padding: 20px 30px;
- position: relative;
- overflow-y: auto;
- height: calc(100% - var(--fc-menu_height));
- color: white;
}
.el-timeline-item__timestamp {
diff --git a/src-vue/src/views/DeveloperView.vue b/src-vue/src/views/DeveloperView.vue
index eec70194..f2e097b0 100644
--- a/src-vue/src/views/DeveloperView.vue
+++ b/src-vue/src/views/DeveloperView.vue
@@ -1,56 +1,58 @@
<template>
- <div class="fc__developer__container">
- <h3>Basic:</h3>
+ <div class="fc-container">
+ <el-scrollbar>
+ <h3>Basic:</h3>
- <el-button type="primary" @click="disableDevMode">
- Disable developer mode
- </el-button>
+ <el-button type="primary" @click="disableDevMode">
+ Disable developer mode
+ </el-button>
- <el-button type="primary" @click="crashApplication">
- Panic button
- </el-button>
+ <el-button type="primary" @click="crashApplication">
+ Panic button
+ </el-button>
- <h3>Linux:</h3>
+ <h3>Linux:</h3>
- <el-button type="primary" @click="checkLinuxCompatibility">
- Check NSProton Compatibility
- </el-button>
+ <el-button type="primary" @click="checkLinuxCompatibility">
+ Check NSProton Compatibility
+ </el-button>
- <h3>Testing:</h3>
+ <h3>Testing:</h3>
- <el-button type="primary" @click="toggleReleaseCandidate">
- Toggle Release Candidate
- </el-button>
+ <el-button type="primary" @click="toggleReleaseCandidate">
+ Toggle Release Candidate
+ </el-button>
- <el-button type="primary" @click="launchGameWithoutChecks">
- Launch Northstar (bypass all checks)
- </el-button>
+ <el-button type="primary" @click="launchGameWithoutChecks">
+ Launch Northstar (bypass all checks)
+ </el-button>
- <h3>Mod install:</h3>
+ <h3>Mod install:</h3>
- <el-input v-model="mod_to_install_field_string" placeholder="Please input Thunderstore dependency string (example: AuthorName-ModName-1.2.3)" clearable />
+ <el-input v-model="mod_to_install_field_string" placeholder="Please input Thunderstore dependency string (example: AuthorName-ModName-1.2.3)" clearable />
- <el-button type="primary" @click="installMod">
- Install mod
- </el-button>
+ <el-button type="primary" @click="installMod">
+ Install mod
+ </el-button>
- <h3>Repair:</h3>
+ <h3>Repair:</h3>
- <el-button type="primary" @click="disableAllModsButCore">
- Disable all but core mods
- </el-button>
+ <el-button type="primary" @click="disableAllModsButCore">
+ Disable all but core mods
+ </el-button>
- <el-button type="primary" @click="getInstalledMods">
- Get installed mods
- </el-button>
+ <el-button type="primary" @click="getInstalledMods">
+ Get installed mods
+ </el-button>
- <el-button type="primary" @click="cleanUpDownloadFolder">
- Force delete temp download folder
- </el-button>
+ <el-button type="primary" @click="cleanUpDownloadFolder">
+ Force delete temp download folder
+ </el-button>
- <el-button type="primary" @click="clearFlightCorePersistentStore">
- Delete FlightCore persistent store
- </el-button>
+ <el-button type="primary" @click="clearFlightCorePersistentStore">
+ Delete FlightCore persistent store
+ </el-button>
+ </el-scrollbar>
</div>
</template>
@@ -235,9 +237,4 @@ export default defineComponent({
</script>
<style scoped>
-.fc__developer__container {
- padding: 20px 30px;
- color: white;
- position: relative;
-}
</style>
diff --git a/src-vue/src/views/ModsView.vue b/src-vue/src/views/ModsView.vue
index 3c2b3cfe..00522bf5 100644
--- a/src-vue/src/views/ModsView.vue
+++ b/src-vue/src/views/ModsView.vue
@@ -1,5 +1,5 @@
<template>
- <div class="fc__mods__container">
+ <div class="fc-container">
<el-scrollbar>
<h3>Installed Mods:</h3>
<div>
@@ -68,9 +68,5 @@ export default defineComponent({
});
</script>
-<style scoped>
-.fc__mods__container {
- color: white;
- position: relative;
-}
+<style>
</style>
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
index b32f7e6f..8cb6e810 100644
--- a/src-vue/src/views/SettingsView.vue
+++ b/src-vue/src/views/SettingsView.vue
@@ -1,24 +1,28 @@
<template>
- <div class="fc_settings__container">
- <!-- Game folder location -->
- <h3>Manage installation</h3>
- <el-input
- v-model="$store.state.game_path"
- class="w-50 m-2"
- placeholder="Choose installation folder"
- @click="updateGamePath"
- >
- <template #prepend>
- <el-button icon="Folder" @click="updateGamePath"/>
- </template>
- </el-input>
- <h3>About:</h3>
- <div class="fc_northstar__version" @click="activateDeveloperMode">
- FlightCore Version: {{ flightcoreVersion === '' ? 'Unknown version' : `${flightcoreVersion}` }}
- </div>
- <br />
- <br />
- UI design inspired by <el-link :underline="false" target="_blank" href="https://github.com/TFORevive/tforevive_launcher/" type="primary">TFORevive Launcher</el-link> (not yet public)
+ <div class="fc-container">
+ <el-scrollbar>
+ <div class="fc_settings__container">
+ <!-- Game folder location -->
+ <h3>Manage installation</h3>
+ <el-input
+ v-model="$store.state.game_path"
+ class="w-50 m-2"
+ placeholder="Choose installation folder"
+ @click="updateGamePath"
+ >
+ <template #prepend>
+ <el-button icon="Folder" @click="updateGamePath"/>
+ </template>
+ </el-input>
+ <h3>About:</h3>
+ <div class="fc_northstar__version" @click="activateDeveloperMode">
+ FlightCore Version: {{ flightcoreVersion === '' ? 'Unknown version' : `${flightcoreVersion}` }}
+ </div>
+ <br />
+ <br />
+ UI design inspired by <el-link :underline="false" target="_blank" href="https://github.com/TFORevive/tforevive_launcher/" type="primary">TFORevive Launcher</el-link> (not yet public)
+ </div>
+ </el-scrollbar>
</div>
</template>
@@ -65,10 +69,7 @@ export default defineComponent({
<style scoped>
.fc_settings__container {
max-width: 1200px;
- padding: 20px 30px;
margin: 0 auto;
- color: white;
- position: relative;
}
h3:first-of-type {
diff --git a/src-vue/src/views/ThunderstoreModsView.vue b/src-vue/src/views/ThunderstoreModsView.vue
index cc9db0b5..5b74bd1c 100644
--- a/src-vue/src/views/ThunderstoreModsView.vue
+++ b/src-vue/src/views/ThunderstoreModsView.vue
@@ -1,5 +1,5 @@
<template>
- <div style="height: calc(100% - var(--fc-menu_height))">
+ <div class="fc-container">
<div v-if="mods.length === 0" class="fc__changelog__container">
<el-progress :show-text="false" :percentage="50" :indeterminate="true" />
</div>
@@ -112,10 +112,6 @@ export default defineComponent({
<style scoped>
.fc__changelog__container {
padding: 20px 30px;
- position: relative;
- overflow-y: auto;
- height: calc(100% - var(--fc-menu_height));
- color: white;
}
.el-timeline-item__timestamp {