Fixes and enhancements (#350)

* Fixes #147 * Fixes #149 and #151 * Fixed #153 * Fixes #154 * Update ContextMenu.vue * Revert temp change to test windows * More bug fixes * Fixed modpack install bug * Fixes #314 * Lint * Fix #261
2023-07-21 17:59:34 -04:00 · 2023-07-21 17:59:34 -04:00 · 4941260805
commit 4941260805
parent 448de384d1
10 changed files with 99 additions and 85 deletions
--- a/theseus_gui/src/App.vue
+++ b/theseus_gui/src/App.vue
@ -29,7 +29,7 @@ import mixpanel from 'mixpanel-browser'
 import { saveWindowState, StateFlags } from 'tauri-plugin-window-state-api'
 import OnboardingModal from '@/components/OnboardingModal.vue'
 import { getVersion } from '@tauri-apps/api/app'
-import { window } from '@tauri-apps/api'
+import { window as TauriWindow } from '@tauri-apps/api'
 import { TauriEvent } from '@tauri-apps/api/event'
 import { await_sync, check_safe_loading_bars_complete } from './helpers/state'
 import { confirm } from '@tauri-apps/api/dialog'
@ -93,10 +93,10 @@ const handleClose = async () => {
    }
  }
  await await_sync()
-  window.getCurrent().close()
+  await TauriWindow.getCurrent().close()
 }

-window.getCurrent().listen(TauriEvent.WINDOW_CLOSE_REQUESTED, async () => {
+TauriWindow.getCurrent().listen(TauriEvent.WINDOW_CLOSE_REQUESTED, async () => {
  await handleClose()
 })

@ -136,8 +136,8 @@ document.querySelector('body').addEventListener('click', function (e) {
            path: target.href,
          },
        })
-        e.preventDefault()
      }
+      e.preventDefault()
      break
    }
    target = target.parentElement
@ -153,24 +153,13 @@ const accounts = ref(null)
    <suspense>
      <OnboardingModal ref="testModal" :accounts="accounts" />
    </suspense>
-    <div class="nav-container" :class="{ expanded: !themeStore.collapsedNavigation }">
+    <div class="nav-container">
      <div class="nav-section">
        <suspense>
-          <AccountsCard
-            ref="accounts"
-            :mode="themeStore.collapsedNavigation ? 'small' : 'expanded'"
-          />
+          <AccountsCard ref="accounts" mode="small" />
        </suspense>
        <div class="pages-list">
-          <RouterLink
-            to="/"
-            class="btn"
-            :class="{
-              'icon-only': themeStore.collapsedNavigation,
-              'collapsed-button': themeStore.collapsedNavigation,
-              'expanded-button': !themeStore.collapsedNavigation,
-            }"
-          >
+          <RouterLink to="/" class="btn icon-only collapsed-button">
            <HomeIcon />
            <span v-if="!themeStore.collapsedNavigation">Home</span>
          </RouterLink>
@ -232,15 +221,17 @@ const accounts = ref(null)
      </div>
    </div>
    <div class="view" :class="{ expanded: !themeStore.collapsedNavigation }">
-      <div data-tauri-drag-region class="appbar">
-        <section class="navigation-controls">
-          <Breadcrumbs data-tauri-drag-region />
-        </section>
-        <section class="mod-stats">
-          <Suspense>
-            <RunningAppBar data-tauri-drag-region />
-          </Suspense>
-        </section>
+      <div class="appbar-row">
+        <div data-tauri-drag-region class="appbar">
+          <section class="navigation-controls">
+            <Breadcrumbs data-tauri-drag-region />
+          </section>
+          <section class="mod-stats">
+            <Suspense>
+              <RunningAppBar data-tauri-drag-region />
+            </Suspense>
+          </section>
+        </div>
        <section class="window-controls">
          <Button class="titlebar-button" icon-only @click="() => appWindow.minimize()">
            <MinimizeIcon />
@ -291,12 +282,16 @@ const accounts = ref(null)
  width: min-content;
 }

+.appbar-row {
+  display: flex;
+  flex-direction: row;
+}
+
 .window-controls {
  z-index: 20;
  display: none;
  flex-direction: row;
  align-items: center;
-  gap: 0.25rem;

  .titlebar-button {
    display: flex;
@ -306,6 +301,8 @@ const accounts = ref(null)
    transition: all ease-in-out 0.1s;
    background-color: var(--color-raised-bg);
    color: var(--color-base);
+    border-radius: 0;
+    height: 3.25rem;

    &.close {
      &:hover,
@ -342,6 +339,7 @@ const accounts = ref(null)
    .appbar {
      display: flex;
      align-items: center;
+      flex-grow: 1;
      background: var(--color-raised-bg);
      box-shadow: inset 0px -3px 0px black;
      text-align: center;
--- a/theseus_gui/src/assets/stylesheets/global.scss
+++ b/theseus_gui/src/assets/stylesheets/global.scss
@ -47,13 +47,6 @@ input {
  border: none !important;
 }

-.mod-text {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  color: var(--color-contrast);
-}
-
 .badge {
  display: flex;
  border-radius: var(--radius-md);
--- a/theseus_gui/src/components/ui/ContextMenu.vue
+++ b/theseus_gui/src/components/ui/ContextMenu.vue
@ -127,16 +127,19 @@ onBeforeUnmount(() => {
      &.primary {
        background-color: var(--color-brand);
        color: var(--color-accent-contrast);
+        font-weight: bold;
      }

      &.danger {
        background-color: var(--color-red);
        color: var(--color-accent-contrast);
+        font-weight: bold;
      }

      &.contrast {
        background-color: var(--color-orange);
        color: var(--color-accent-contrast);
+        font-weight: bold;
      }
    }
  }
--- a/theseus_gui/src/components/ui/InstallConfirmModal.vue
+++ b/theseus_gui/src/components/ui/InstallConfirmModal.vue
@ -4,6 +4,7 @@ import { install as pack_install } from '@/helpers/pack'
 import { ref } from 'vue'
 import mixpanel from 'mixpanel-browser'
 import { useTheming } from '@/store/theme.js'
+import { handleError } from '@/store/state.js'

 const themeStore = useTheming()

@ -15,11 +16,12 @@ const confirmModal = ref(null)
 const installing = ref(false)

 defineExpose({
-  show: (id, projectIdVal, projectTitle, projectIcon) => {
-    version.value = id
+  show: (projectIdVal, versionId, projectTitle, projectIcon) => {
    projectId.value = projectIdVal
+    version.value = versionId
    title.value = projectTitle
    icon.value = projectIcon
+    installing.value = false
    confirmModal.value.show()

    mixpanel.track('PackInstallStart')
@ -28,7 +30,13 @@ defineExpose({

 async function install() {
  installing.value = true
-  await pack_install(projectId.value, version.value, title.value, icon.value ? icon.value : null)
+  console.log(`Installing ${projectId.value} ${version.value} ${title.value} ${icon.value}`)
+  await pack_install(
+    projectId.value,
+    version.value,
+    title.value,
+    icon.value ? icon.value : null
+  ).catch(handleError)
  confirmModal.value.hide()

  mixpanel.track('PackInstall', {
--- a/theseus_gui/src/components/ui/RunningAppBar.vue
+++ b/theseus_gui/src/components/ui/RunningAppBar.vue
@ -11,14 +11,16 @@
    </Button>
    <div v-if="selectedProfile" class="status">
      <span class="circle running" />
-      <div
-        ref="profileButton"
-        class="running-text"
-        :class="{ clickable: currentProcesses.length > 1 }"
-        @click="toggleProfiles()"
-      >
-        {{ selectedProfile.metadata.name }}
-        <div v-if="currentProcesses.length > 1" class="arrow" :class="{ rotate: showProfiles }">
+      <div ref="profileButton" class="running-text">
+        <router-link :to="`/instance/${encodeURIComponent(selectedProfile.path)}`">
+          {{ selectedProfile.metadata.name }}
+        </router-link>
+        <div
+          v-if="currentProcesses.length > 1"
+          class="arrow button-base"
+          :class="{ rotate: showProfiles }"
+          @click="toggleProfiles()"
+        >
          <DropdownIcon />
        </div>
      </div>
@ -44,7 +46,7 @@
    </div>
  </div>
  <transition name="download">
-    <Card v-if="showCard === true" ref="card" class="info-card">
+    <Card v-if="showCard === true && currentLoadingBars.length > 0" ref="card" class="info-card">
      <div v-for="loadingBar in currentLoadingBars" :key="loadingBar.id" class="info-text">
        <h3 class="info-title">
          {{ loadingBar.title }}
@ -57,7 +59,11 @@
    </Card>
  </transition>
  <transition name="download">
-    <Card v-if="showProfiles === true" ref="profiles" class="profile-card">
+    <Card
+      v-if="showProfiles === true && currentProcesses.length > 0"
+      ref="profiles"
+      class="profile-card"
+    >
      <Button
        v-for="profile in currentProcesses"
        :key="profile.id"
@ -193,6 +199,7 @@ const handleClickOutsideCard = (event) => {
    card.value &&
    card.value.$el !== event.target &&
    !elements.includes(card.value.$el) &&
+    infoButton.value &&
    !infoButton.value.contains(event.target)
  ) {
    showCard.value = false
--- a/theseus_gui/src/pages/Settings.vue
+++ b/theseus_gui/src/pages/Settings.vue
@ -106,25 +106,6 @@ watch(
          "
        />
      </div>
-      <div class="adjacent-input">
-        <label for="collapsed-nav">
-          <span class="label__title">Collapsed navigation mode</span>
-          <span class="label__description"
-            >Change the style of the side navigation bar to a compact version.</span
-          >
-        </label>
-        <Toggle
-          id="collapsed-nav"
-          :model-value="themeStore.collapsedNavigation"
-          :checked="themeStore.collapsedNavigation"
-          @update:model-value="
-            (e) => {
-              themeStore.collapsedNavigation = e
-              settings.collapsed_navigation = themeStore.collapsedNavigation
-            }
-          "
-        />
-      </div>
      <div class="adjacent-input">
        <label for="advanced-rendering">
          <span class="label__title">Advanced rendering</span>
--- a/theseus_gui/src/pages/instance/Logs.vue
+++ b/theseus_gui/src/pages/instance/Logs.vue
@ -122,14 +122,14 @@ async function setLogs() {
 }

 const copyLog = () => {
-  if (logs.value[selectedLogIndex.value]) {
+  if (logs.value.length > 0 && logs.value[selectedLogIndex.value]) {
    navigator.clipboard.writeText(logs.value[selectedLogIndex.value].stdout)
    copied.value = true
  }
 }

 const share = async () => {
-  if (logs.value[selectedLogIndex.value]) {
+  if (logs.value.length > 0 && logs.value[selectedLogIndex.value]) {
    const url = await ofetch('https://api.mclo.gs/1/log', {
      method: 'POST',
      headers: {
@ -146,7 +146,7 @@ watch(selectedLogIndex, async (newIndex) => {
  copied.value = false
  userScrolled.value = false

-  if (newIndex !== 0) {
+  if (logs.value.length > 1 && newIndex !== 0) {
    logs.value[newIndex].stdout = 'Loading...'
    logs.value[newIndex].stdout = await get_output_by_datetime(
      props.instance.uuid,
--- a/theseus_gui/src/pages/instance/Mods.vue
+++ b/theseus_gui/src/pages/instance/Mods.vue
@ -61,12 +61,6 @@
              <DropdownIcon v-if="sortColumn === 'Version'" :class="{ down: ascending }" />
            </Button>
          </div>
-          <div v-if="selected.length === 0" class="table-cell table-text">
-            <Button class="transparent" @click="sortProjects('Author')">
-              Author
-              <DropdownIcon v-if="sortColumn === 'Author'" :class="{ down: ascending }" />
-            </Button>
-          </div>
          <div v-if="selected.length === 0" class="table-cell table-text actions-cell">
            <Button class="transparent" @click="sortProjects('Enabled')">
              Actions
@ -187,18 +181,22 @@
            <router-link
              v-if="mod.slug"
              :to="{ path: `/project/${mod.slug}/`, query: { i: props.instance.path } }"
-              class="mod-text"
+              class="mod-content"
            >
              <Avatar :src="mod.icon" />
-              {{ mod.name }}
+              <div v-tooltip="`${mod.name} by ${mod.author}`" class="mod-text">
+                <div class="title">{{ mod.name }}</div>
+                <span class="no-wrap">by {{ mod.author }}</span>
+              </div>
            </router-link>
-            <div v-else class="mod-text">
+            <div v-else class="mod-content">
              <Avatar :src="mod.icon" />
-              {{ mod.name }}
+              <span v-tooltip="`${mod.name}`" class="title">{{ mod.name }}</span>
            </div>
          </div>
-          <div class="table-cell table-text">{{ mod.version }}</div>
-          <div class="table-cell table-text">{{ mod.author }}</div>
+          <div class="table-cell table-text">
+            <span v-tooltip="`${mod.version}`">{{ mod.version }}</span>
+          </div>
          <div class="table-cell table-text manage">
            <Button v-tooltip="'Remove project'" icon-only @click="removeMod(mod)">
              <TrashIcon />
@ -225,6 +223,9 @@
              :checked="!mod.disabled"
              @change="toggleDisableMod(mod)"
            />
+            <Button v-tooltip="`Show ${mod.file_name}`" icon-only @click="showInFolder(mod.path)">
+              <FolderOpenIcon />
+            </Button>
          </div>
        </div>
      </div>
@ -344,6 +345,7 @@ import { handleError } from '@/store/notifications.js'
 import mixpanel from 'mixpanel-browser'
 import { open } from '@tauri-apps/api/dialog'
 import { listen } from '@tauri-apps/api/event'
+import { showInFolder } from '@/helpers/utils.js'
 import { MenuIcon, ToggleIcon, TextInputIcon, AddProjectImage } from '@/assets/icons'

 const router = useRouter()
@ -765,7 +767,7 @@ listen('tauri://file-drop', async (event) => {
 }

 .table-row {
-  grid-template-columns: min-content 2fr 1fr 1fr 11rem;
+  grid-template-columns: min-content 2fr 1fr 13.25rem;

  &.show-options {
    grid-template-columns: min-content auto;
@ -807,6 +809,11 @@ listen('tauri://file-drop', async (event) => {

 .name-cell {
  padding-left: 0;
+
+  .btn {
+    margin-left: var(--gap-sm);
+    min-width: unset;
+  }
 }

 .dropdown {
@ -845,6 +852,22 @@ listen('tauri://file-drop', async (event) => {
  }
 }

+.mod-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  .mod-text {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .title {
+    color: var(--color-contrast);
+    font-weight: bolder;
+  }
+}
+
 .actions-cell {
  display: flex;
  align-items: center;
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@ -345,7 +345,9 @@ const markInstalled = () => {
 async function install(version) {
  installing.value = true
  let queuedVersionData
-  instance.value = await getInstance(instance.value.path, false).catch(handleError)
+  if (instance.value) {
+    instance.value = await getInstance(instance.value.path, false).catch(handleError)
+  }

  if (installed.value) {
    await remove_project(
--- a/theseus_gui/src/store/theme.js
+++ b/theseus_gui/src/store/theme.js
@ -3,7 +3,6 @@ import { defineStore } from 'pinia'
 export const useTheming = defineStore('themeStore', {
  state: () => ({
    themeOptions: ['dark'],
-    collapsedNavigation: false,
    advancedRendering: true,
    selectedTheme: 'dark',
    darkTheme: true,