From dc10eb68bf2889fef3f18c8f56e619f40701f729 Mon Sep 17 00:00:00 2001
From: Rémy Raes <contact@remyraes.com>
Date: Wed, 30 Nov 2022 02:14:09 +0100
Subject: 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
---
 src-vue/src/views/ChangelogView.vue        |  6 +--
 src-vue/src/views/DeveloperView.vue        | 81 ++++++++++++++----------------
 src-vue/src/views/ModsView.vue             |  8 +--
 src-vue/src/views/SettingsView.vue         | 47 ++++++++---------
 src-vue/src/views/ThunderstoreModsView.vue |  6 +--
 5 files changed, 67 insertions(+), 81 deletions(-)

(limited to 'src-vue/src/views')

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 {
-- 
cgit v1.2.3