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
modrinth · Jul 21, 2023 · 4941260 · 4941260
1 parent 448de38
commit 4941260
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 85 deletions.
diff --git 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;

diff --git 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);

diff --git 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;
       }
     }
   }

diff --git 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', {

diff --git 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

diff --git 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>

diff --git 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,