diff options
author | Rémy Raes <contact@remyraes.com> | 2022-11-30 02:14:09 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-30 02:14:09 +0100 |
commit | dc10eb68bf2889fef3f18c8f56e619f40701f729 (patch) | |
tree | 1e62648a64fa9a46b03dd52450f9961b57fc4604 /src-vue | |
parent | b9895a407b215230d336a5104d84fcb5e2582b5b (diff) | |
download | FlightCore-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')
-rw-r--r-- | src-vue/src/style.css | 6 | ||||
-rw-r--r-- | src-vue/src/views/ChangelogView.vue | 6 | ||||
-rw-r--r-- | src-vue/src/views/DeveloperView.vue | 81 | ||||
-rw-r--r-- | src-vue/src/views/ModsView.vue | 8 | ||||
-rw-r--r-- | src-vue/src/views/SettingsView.vue | 47 | ||||
-rw-r--r-- | src-vue/src/views/ThunderstoreModsView.vue | 6 |
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 { |