Standing up global settings page. (#63)

* Adds markup to Settings page. * Fixes card styling. Makes theme a dropdown. Fleshes out theme store and helpers. * Settings wired up to backend. Omorphia package bumped. * settings not syncing * Further polishes Global Settings. * Post-merge cleanup. * Cleans up code. Ensures Java versions are present. * Wires up auto-detect modal. Wires up Java version browse. Styling updates. * Styling inputs. Adjusts modals. * Removes theme helpers. Removes unnecessary classes. * Always displays settings save btn. Watch code removed. New Card added. * Cleans up merge from master. Adds AnimatedLogo to settings. * Installs updated Omorphia. Removes unnecessary styles. Fixes loading logo position. * Starts wiring up theming to settings. Adds Tauri command to get just theme. * Settings page polish. allowList updated. * Condenses modals into one. Implements JRE checking. * Updates Omorphia package. Removes unnecessary styles. * Removes get_theme. Styling changes. * Changes appbar background for light-mode. * Fixes * fix color with var --------- Co-authored-by: thesuzerain <wverchere@gmail.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me>
2023-04-21 17:45:50 -04:00
parent 6887c33b66
commit 16f297b546
17 changed files with 704 additions and 3041 deletions
--- a/theseus_gui/src/App.vue
+++ b/theseus_gui/src/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 import { RouterView, RouterLink } from 'vue-router'
 import {
  ChevronLeftIcon,
@@ -12,15 +12,14 @@ import {
 } from 'omorphia'
 import { useTheming } from '@/store/state'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
-import { toggleTheme } from '@/helpers/theme'
 import { list } from '@/helpers/profile'
+import { get } from '@/helpers/settings'

 const themeStore = useTheming()

-toggleTheme(themeStore.darkTheme)
-
-watch(themeStore, (newState) => {
-  toggleTheme(newState.darkTheme)
+onMounted(async () => {
+  const { theme } = await get()
+  themeStore.setThemeState(theme)
 })

 const installedMods = ref(0)
@@ -81,25 +80,17 @@ list().then(
  flex-direction: row;
  overflow: hidden;

-  .router-view {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    overflow-x: hidden;
-  }
-
  .view {
-    margin-left: 5rem;
-    width: calc(100% - 5rem);
-    height: calc(100%);
+    width: 100%;

    .appbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
-      background: #40434a;
+      background: var(--color-super-raised-bg);
      text-align: center;
      padding: 0.5rem 1rem;
+      z-index: 11;

      .navigation-controls {
        display: inherit;
@@ -137,24 +128,44 @@ list().then(
        justify-content: flex-end;
      }
    }
-  }
-}

-.nav-container {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  height: 100%;
-  box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
-  padding: 1rem;
+    .router-view {
+      width: 100%;
+      height: calc(100% - 2rem);
+      overflow: auto;
+      overflow-x: hidden;
+    }
+  }
 }

 .dark-mode {
  .nav-container {
-    background: var(--color-bg);
+    background: var(--color-bg) !important;
  }
+  .pages-list {
+    a.router-link-active {
+      color: #fff;
+    }
+  }
+}
+
+.light-mode {
+  .nav-container {
+    box-shadow: var(--shadow-floating), var(--shadow-floating), var(--shadow-floating),
+      var(--shadow-floating) !important;
+  }
+}
+
+.nav-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 10;
+  height: 100%;
+  box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+  padding: 1rem;
+  background: var(--color-raised-bg);
 }

 .pages-list {
@@ -176,7 +187,7 @@ list().then(
    color: var(--color-base);

    &.router-link-active {
-      color: var(--color-accent-contrast);
+      color: var(--color-contrast);
      background: var(--color-button-bg);
    }

@@ -208,14 +219,6 @@ list().then(
  }
 }

-.dark-mode {
-  .pages-list {
-    a.router-link-active {
-      color: #fff;
-    }
-  }
-}
-
 .instance-list {
  display: flex;
  flex-direction: column;
@@ -252,6 +255,10 @@ list().then(
 }

 .settings {
+  svg {
+    color: var(--color-base) !important;
+  }
+
  a {
    display: flex;
    flex-direction: column;
--- a/theseus_gui/src/assets/stylesheets/global.scss
+++ b/theseus_gui/src/assets/stylesheets/global.scss
@@ -151,3 +151,10 @@ a {
  border-top-left-radius: var(--radius-md) !important;
  border-top-right-radius: var(--radius-md) !important;
 }
+
+.mod-text {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  color: var(--color-contrast);
+}
--- a/theseus_gui/src/components/ui/AccountsCard.vue
+++ b/theseus_gui/src/components/ui/AccountsCard.vue
@@ -62,7 +62,7 @@ const appendProfiles = (accounts) => {
  return accounts.map((account) => {
    return {
      ...account,
-      profile_picture: `https://crafthead.net/helm/${account.id}/128`,
+      profile_picture: `https://crafthead.net/helm/${account.id.replace(/-/g, '')}/128`,
    }
  })
 }
--- a/theseus_gui/src/helpers/theme.js
+++ b/theseus_gui/src/helpers/theme.js
@@ -1,13 +0,0 @@
-/**
- * Sets the dark-mode or light-mode class on <html> if dark mode is on.
- * @param {Boolean} isDarkMode Bool value indicating if dark mode is on.
- */
-export const toggleTheme = (isDarkMode) => {
-  if (isDarkMode) {
-    document.getElementsByTagName('html')[0].classList.remove('light-mode')
-    document.getElementsByTagName('html')[0].classList.add('dark-mode')
-  } else {
-    document.getElementsByTagName('html')[0].classList.remove('dark-mode')
-    document.getElementsByTagName('html')[0].classList.add('light-mode')
-  }
-}
--- a/theseus_gui/src/pages/Settings.vue
+++ b/theseus_gui/src/pages/Settings.vue
@@ -1,7 +1,451 @@
-<script setup></script>
+<script setup>
+import { ref, watch } from 'vue'
+import {
+  Card,
+  Slider,
+  DropdownSelect,
+  Button,
+  SearchIcon,
+  PlayIcon,
+  Modal,
+  CheckIcon,
+  XIcon,
+  PlusIcon,
+  AnimatedLogo,
+} from 'omorphia'
+import { BrowseIcon } from '@/assets/icons'
+import { useTheming } from '@/store/state'
+import { get, set } from '@/helpers/settings'
+import { find_jre_8_jres, find_jre_17_jres, get_jre } from '@/helpers/jre'
+import { open } from '@tauri-apps/api/dialog'
+
+const themeStore = useTheming()
+
+const fetchSettings = await get()
+
+if (!fetchSettings.java_globals?.JAVA_8)
+  fetchSettings.java_globals.JAVA_8 = { path: '', version: '' }
+if (!fetchSettings.java_globals?.JAVA_17)
+  fetchSettings.java_globals.JAVA_17 = { path: '', version: '' }
+
+const settings = ref(fetchSettings)
+const chosenInstallOptions = ref([])
+const browsingInstall = ref(0)
+
+const testingJava17 = ref(false)
+const java17Success = ref(null)
+const testingJava8 = ref(false)
+const java8Success = ref(null)
+
+// DOM refs
+const detectJavaModal = ref(null)
+
+const handleTheme = async (e) => {
+  themeStore.setThemeState(e.option.toLowerCase())
+  settings.value.theme = themeStore.selectedTheme
+  await set(settings.value)
+}
+
+const loadJavaModal = async (version) => {
+  if (version === 17) chosenInstallOptions.value = await find_jre_17_jres()
+  else if (version === 8) chosenInstallOptions.value = await find_jre_8_jres()
+
+  browsingInstall.value = version
+  detectJavaModal.value.show()
+}
+
+watch(settings.value, async (oldSettings, newSettings) => {
+  await set(newSettings)
+})
+
+const handleJava17FileInput = async () => {
+  let filePath = await open()
+  settings.value.java_globals.JAVA_17 = {
+    path: filePath,
+    version: '17',
+  }
+}
+const handleJava8FileInput = async () => {
+  let filePath = await open()
+  settings.value.java_globals.JAVA_8 = {
+    path: filePath,
+    version: '8',
+  }
+}
+
+const handleJava17Test = async () => {
+  let result
+  testingJava17.value = true
+  setTimeout(async () => {
+    result = await get_jre(settings.value.java_globals.JAVA_17.path)
+    testingJava17.value = false
+    if (result) java17Success.value = true
+    else java17Success.value = false
+
+    setTimeout(() => {
+      java17Success.value = null
+    }, 2000)
+  }, 1000)
+}
+
+const handleJava8Test = async () => {
+  let result
+  testingJava8.value = true
+  setTimeout(async () => {
+    result = await get_jre(settings.value.java_globals.JAVA_8.path)
+    testingJava8.value = false
+    java8Success.value = !!result
+
+    setTimeout(() => {
+      java8Success.value = null
+    }, 2000)
+  }, 1000)
+}
+
+const setJavaInstall = (javaInstall) => {
+  if (browsingInstall.value === 17) settings.value.java_globals.JAVA_17 = javaInstall
+  else if (browsingInstall.value === 8) settings.value.java_globals.JAVA_8 = javaInstall
+  detectJavaModal.value.hide()
+  chosenInstallOptions.value = []
+  browsingInstall.value = 0
+}
+</script>

 <template>
  <div>
-    <p>Settings page</p>
+    <Modal ref="detectJavaModal" header="Select java version">
+      <div class="auto-detect-modal">
+        <div class="table">
+          <div class="table-row table-head">
+            <div class="table-cell table-text">Version</div>
+            <div class="table-cell table-text">Path</div>
+            <div class="table-cell table-text">Actions</div>
+          </div>
+          <div
+            v-for="javaInstall in chosenInstallOptions"
+            :key="javaInstall.path"
+            class="table-row"
+          >
+            <div class="table-cell table-text">
+              <span>{{ javaInstall.version }}</span>
+            </div>
+            <div class="table-cell table-text">
+              <span>{{ javaInstall.path }}</span>
+            </div>
+            <div class="table-cell table-text manage">
+              <Button
+                :disabled="
+                  settings.java_globals.JAVA_17.path === javaInstall.path ||
+                  settings.java_globals.JAVA_8.path === javaInstall.path
+                "
+                class="select-btn"
+                @click="() => setJavaInstall(javaInstall)"
+              >
+                <span
+                  v-if="
+                    settings.java_globals.JAVA_17.path === javaInstall.path ||
+                    settings.java_globals.JAVA_8.path === javaInstall.path
+                  "
+                >
+                  <CheckIcon />Selected
+                </span>
+                <span v-else><PlusIcon />Select</span>
+              </Button>
+            </div>
+          </div>
+          <div v-if="chosenInstallOptions.length === 0" class="table-row entire-row">
+            <div class="table-cell table-text">No JARS Found!</div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+    <Card class="theming">
+      <h2>Display</h2>
+      <div class="toggle-setting">
+        <div class="description">
+          <h3>Color theme</h3>
+          <p>Change the global launcher color theme.</p>
+        </div>
+        <DropdownSelect
+          name="Theme dropdown"
+          :options="themeStore.themeOptions"
+          :default-value="settings.theme"
+          :model-value="settings.theme"
+          class="theme-dropdown"
+          @change="handleTheme"
+        />
+      </div>
+    </Card>
+    <Card class="settings-card">
+      <h2 class="settings-title">Java</h2>
+      <div class="settings-group">
+        <h3>Java 17 Location</h3>
+        <div class="toggle-setting">
+          <input
+            v-model="settings.java_globals.JAVA_17.path"
+            type="text"
+            class="input installation-input"
+            placeholder="/path/to/java17"
+          />
+          <span class="installation-buttons">
+            <Button @click="() => loadJavaModal(17)">
+              <SearchIcon />
+              Auto Detect
+            </Button>
+            <Button @click="handleJava17FileInput">
+              <BrowseIcon />
+              Browse
+            </Button>
+            <Button @click="handleJava17Test">
+              <PlayIcon />
+              Test
+            </Button>
+            <AnimatedLogo v-if="testingJava17 === true" class="testing-loader" />
+            <CheckIcon
+              v-else-if="java17Success === true && testingJava17 === false"
+              class="test-success"
+            />
+            <XIcon
+              v-else-if="java17Success === false && testingJava17 === false"
+              class="test-fail"
+            />
+          </span>
+        </div>
+      </div>
+      <div class="settings-group">
+        <h3>Java 8 Location</h3>
+        <div class="toggle-setting">
+          <input
+            v-model="settings.java_globals.JAVA_8.path"
+            type="text"
+            class="input installation-input"
+            placeholder="/path/to/java8"
+          />
+          <span class="installation-buttons">
+            <Button @click="() => loadJavaModal(8)">
+              <SearchIcon />
+              Auto Detect
+            </Button>
+            <Button @click="handleJava8FileInput">
+              <BrowseIcon />
+              Browse
+            </Button>
+            <Button @click="handleJava8Test">
+              <PlayIcon />
+              Test
+            </Button>
+            <AnimatedLogo v-if="testingJava8 === true" class="testing-loader" />
+            <CheckIcon
+              v-else-if="java8Success === true && testingJava8 === false"
+              class="test-success"
+            />
+            <XIcon v-else-if="java8Success === false && testingJava8 === false" class="test-fail" />
+          </span>
+        </div>
+      </div>
+      <hr class="card-divider" />
+      <div class="settings-group">
+        <h3>Java Arguments</h3>
+        <input
+          v-model="settings.custom_java_args"
+          type="text"
+          class="input installation-input"
+          placeholder="Enter java arguments..."
+        />
+      </div>
+      <div class="settings-group">
+        <h3>Environment Arguments</h3>
+        <input
+          v-model="settings.custom_env_args"
+          type="text"
+          class="input installation-input"
+          placeholder="Enter environment arguments..."
+        />
+      </div>
+      <hr class="card-divider" />
+      <div class="settings-group">
+        <div class="sliders">
+          <span class="slider">
+            Minimum Memory
+            <Slider v-model="settings.memory.minimum" :min="1000" :max="8200" :step="10" />
+          </span>
+          <span class="slider">
+            Maximum Memory
+            <Slider v-model="settings.memory.maximum" :min="1000" :max="8200" :step="10" />
+          </span>
+        </div>
+      </div>
+    </Card>
+    <Card class="settings-card">
+      <h2 class="settings-title">Window Size</h2>
+      <div class="settings-group">
+        <div class="settings-group">
+          <div class="sliders">
+            <span class="slider">
+              Width
+              <Slider v-model="settings.game_resolution[0]" :min="400" :max="2562" :step="2" />
+            </span>
+            <span class="slider">
+              Height
+              <Slider v-model="settings.game_resolution[1]" :min="400" :max="2562" :step="2" />
+            </span>
+          </div>
+        </div>
+      </div>
+    </Card>
+    <Card class="settings-card">
+      <h2 class="settings-title">Launcher Settings</h2>
+      <div class="settings-group">
+        <h3>Resource Management</h3>
+        <div class="toggle-setting">
+          <span>Maximum Concurrent Downloads</span>
+          <Slider
+            v-model="settings.max_concurrent_downloads"
+            class="concurrent-downloads"
+            :min="1"
+            :max="100"
+            :step="1"
+          />
+        </div>
+      </div>
+    </Card>
+    <Card class="settings-card">
+      <h2 class="settings-title">Commands</h2>
+      <div class="settings-group">
+        <div class="toggle-setting">
+          Pre Launch
+          <input v-model="settings.hooks.pre_launch" type="text" class="input" />
+        </div>
+        <div class="toggle-setting">
+          Wrapper
+          <input v-model="settings.hooks.wrapper" type="text" class="input" />
+        </div>
+        <div class="toggle-setting">
+          Post Launch
+          <input v-model="settings.hooks.post_exit" type="text" class="input" />
+        </div>
+      </div>
+    </Card>
  </div>
 </template>
+
+<style lang="scss" scoped>
+.concurrent-downloads {
+  width: 80% !important;
+}
+
+.auto-detect-modal {
+  padding: 1rem;
+
+  .table {
+    .table-row {
+      grid-template-columns: 1fr 4fr 1.5fr;
+    }
+
+    span {
+      display: inherit;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.slider-input {
+  width: 5rem !important;
+  flex-basis: 5rem !important;
+}
+
+.installation-input {
+  width: 100% !important;
+  flex-grow: 1;
+}
+
+.theming,
+.settings-card {
+  margin: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.theming {
+  .toggle-setting {
+    display: flex;
+  }
+}
+
+.theme-dropdown {
+  text-transform: capitalize;
+}
+
+.settings-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.settings-title {
+  color: var(--color-contrast);
+}
+
+.settings-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.installation-input {
+  width: 100%;
+}
+
+.installation-buttons {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.sliders {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: 1rem;
+  width: 100%;
+
+  .slider {
+    flex-grow: 1;
+  }
+}
+
+.toggle-setting {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.manage {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.testing-loader {
+  height: 1rem !important;
+  width: 1rem !important;
+
+  svg {
+    height: inherit !important;
+    width: inherit !important;
+  }
+}
+
+.test-success {
+  color: var(--color-green);
+}
+
+.test-fail {
+  color: var(--color-red);
+}
+</style>
--- a/theseus_gui/src/pages/instance/Mods.vue
+++ b/theseus_gui/src/pages/instance/Mods.vue
@@ -22,7 +22,7 @@
        </Button>
      </span>
    </div>
-    <div class="table-container">
+    <div class="table">
      <div class="table-row table-head">
        <div class="table-cell table-text">
          <Button color="success" icon-only>
@@ -176,53 +176,17 @@ function updateSort(projects, sort) {
 </script>

 <style scoped lang="scss">
-.table-container {
-  display: grid;
-  grid-template-rows: repeat(auto-fill, auto);
-  width: 100%;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-}
-
-.table-row {
-  display: grid;
-  grid-template-columns: min-content 2fr 1fr 1fr 8rem;
-}
-
-.table-head {
-  .table-cell {
-    background-color: var(--color-accent-contrast);
-  }
-}
-
-.table-cell {
-  padding: 1rem;
-  height: 100%;
-  align-items: center;
-  vertical-align: center;
-  display: flex;
-}
-
-.table-text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: fade;
-}
-
 .manage {
  display: flex;
  gap: 0.5rem;
 }

-.mod-text {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  color: var(--color-contrast);
+.table-row {
+  grid-template-columns: min-content 2fr 1fr 1fr 8rem;
 }

-.table-row:nth-child(even) .table-cell {
-  background-color: var(--color-bg);
+.table-cell {
+  align-items: center;
 }

 .card-row {
--- a/theseus_gui/src/pages/project/Versions.vue
+++ b/theseus_gui/src/pages/project/Versions.vue
@@ -51,7 +51,7 @@
    </div>
  </Card>
  <Card class="mod-card">
-    <div class="table-container">
+    <div class="table">
      <div class="table-row table-head">
        <div class="table-cell table-text download-cell" />
        <div class="name-cell table-cell table-text">Name</div>
@@ -167,54 +167,8 @@ defineProps({
  gap: 0.5rem;
 }

-.table-container {
-  display: grid;
-  grid-template-rows: repeat(auto-fill, auto);
-  width: 100%;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-}
-
 .table-row {
-  display: grid;
  grid-template-columns: min-content 1fr 1fr 1.5fr;
-  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, scale 0.05s ease-in-out,
-    outline 0.2s ease-in-out;
-
-  &.selectable:focus-visible,
-  &.selectable:hover {
-    cursor: pointer;
-    filter: brightness(0.85);
-  }
-
-  &.selectable:active {
-    filter: brightness(0.8);
-    scale: 0.99;
-  }
-}
-
-.table-head {
-  .table-cell {
-    background-color: var(--color-accent-contrast);
-  }
-}
-
-.table-cell {
-  padding: 1rem;
-  height: 100%;
-  align-items: center;
-  display: flex;
-  background-color: var(--color-raised-bg);
-}
-
-.name-cell {
-  padding-left: 0;
-}
-
-.table-text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: fade;
 }

 .manage {
@@ -227,17 +181,6 @@ defineProps({
  }
 }

-.mod-text {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  color: var(--color-contrast);
-}
-
-.table-row:nth-child(even) .table-cell {
-  background-color: var(--color-bg);
-}
-
 .card-row {
  display: flex;
  align-items: center;
--- a/theseus_gui/src/store/theme.js
+++ b/theseus_gui/src/store/theme.js
@@ -1,10 +1,18 @@
 import { defineStore } from 'pinia'

 export const useTheming = defineStore('themeStore', {
-  state: () => ({ darkTheme: true }),
+  state: () => ({ themeOptions: ['light', 'dark'], selectedTheme: 'dark', darkTheme: true }),
  actions: {
-    toggleTheme() {
-      this.darkTheme = !this.darkTheme
+    setThemeState(newTheme) {
+      if (this.themeOptions.includes(newTheme)) this.selectedTheme = newTheme
+      else console.warn('Selected theme is not present. Check themeOptions.')
+
+      this.setThemeClass()
+    },
+    setThemeClass() {
+      document.getElementsByTagName('html')[0].classList.remove('dark-mode')
+      document.getElementsByTagName('html')[0].classList.remove('light-mode')
+      document.getElementsByTagName('html')[0].classList.add(`${this.selectedTheme}-mode`)
    },
  },
 })