UI/UX improvements (#146)

* Some initial changes * New project cards * Version * Finalize improvements * Fixed styling issues on versions page * Removed light mode * Run linter * Added mixpanel stuff in context menus * Fix styling issues * Fix windows * homepage fixes * Finishing touches on mac styling * Fixed windows related styling * Update global.scss --------- Co-authored-by: Jai A <jaiagr+gpg@pm.me>
2023-06-20 00:09:03 -04:00
parent 1e78a7b6a8
commit bd697a02f5
25 changed files with 985 additions and 491 deletions
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -475,7 +475,7 @@ const showLoaders = computed(
 <template>
  <div class="search-container">
    <aside class="filter-panel">
-      <div v-if="instanceContext" class="small-instance">
+      <Card v-if="instanceContext" class="small-instance">
        <router-link :to="`/instance/${encodeURIComponent(instanceContext.path)}`" class="instance">
          <Avatar
            :src="
@@ -512,7 +512,7 @@ const showLoaders = computed(
          @update:model-value="onSearchChangeToTop(1)"
          @click.prevent.stop
        />
-      </div>
+      </Card>
      <Card class="search-panel-card">
        <Button
          role="button"
@@ -707,10 +707,7 @@ const showLoaders = computed(
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 <style lang="scss">
 .small-instance {
-  background: var(--color-bg);
-  padding: var(--gap-lg);
-  border-radius: var(--radius-md);
-  margin-bottom: var(--gap-md);
+  min-height: unset !important;

  .instance {
    display: flex;
@@ -765,8 +762,7 @@ const showLoaders = computed(
 .search-panel-card {
  display: flex;
  flex-direction: column;
-  background-color: var(--color-bg) !important;
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
  min-height: min-content !important;
 }

@@ -825,14 +821,20 @@ const showLoaders = computed(
  .filter-panel {
    position: fixed;
    width: 20rem;
-    background: var(--color-raised-bg);
-    padding: 1rem;
+    padding: 1rem 0.5rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    height: fit-content;
    min-height: calc(100vh - 3.25rem);
    max-height: calc(100vh - 3.25rem);
    overflow-y: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      background: transparent;
+    }

    h2 {
      color: var(--color-contrast);
@@ -844,8 +846,8 @@ const showLoaders = computed(

  .search {
    scroll-behavior: smooth;
-    margin: 0 1rem 0.5rem 21rem;
-    width: calc(100% - 22rem);
+    margin: 0 1rem 0.5rem 20.5rem;
+    width: calc(100% - 20.5rem);

    .loading {
      margin: 2rem;
--- a/theseus_gui/src/pages/Index.vue
+++ b/theseus_gui/src/pages/Index.vue
@@ -21,7 +21,9 @@ breadcrumbs.setRootContext({ name: 'Home', link: route.path })
 const recentInstances = shallowRef([])

 const getInstances = async () => {
+  console.log('aa')
  const profiles = await list(true).catch(handleError)
+  console.log(profiles)
  recentInstances.value = Object.values(profiles).sort((a, b) => {
    return dayjs(b.metadata.last_played ?? 0).diff(dayjs(a.metadata.last_played ?? 0))
  })
@@ -69,16 +71,19 @@ onUnmounted(() => unlisten())
      :instances="[
        {
          label: 'Jump back in',
+          route: '/library',
          instances: recentInstances,
          downloaded: true,
        },
        {
          label: 'Popular packs',
+          route: '/browse/modpack',
          instances: featuredModpacks,
          downloaded: false,
        },
        {
          label: 'Popular mods',
+          route: '/browse/mod',
          instances: featuredMods,
          downloaded: false,
        },
--- a/theseus_gui/src/pages/Library.vue
+++ b/theseus_gui/src/pages/Library.vue
@@ -23,12 +23,7 @@ onUnmounted(() => unlisten())
 </script>

 <template>
-  <GridDisplay
-    v-if="instances.length > 0"
-    label="Instances"
-    :instances="instances"
-    class="display"
-  />
+  <GridDisplay label="Instances" :instances="instances" class="display" />
 </template>

 <style lang="scss" scoped>
--- a/theseus_gui/src/pages/Settings.vue
+++ b/theseus_gui/src/pages/Settings.vue
@@ -342,7 +342,7 @@ watch(

 <style lang="scss" scoped>
 .settings-page {
-  margin: 1rem 1rem 1rem 0;
+  margin: 1rem;
 }

 .installation-input {
--- a/theseus_gui/src/pages/instance/Index.vue
+++ b/theseus_gui/src/pages/instance/Index.vue
@@ -57,21 +57,22 @@
            Folder
          </Button>
        </span>
+        <hr class="card-divider" />
+        <div class="pages-list">
+          <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/`" class="btn">
+            <BoxIcon />
+            Mods
+          </RouterLink>
+          <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/logs`" class="btn">
+            <FileIcon />
+            Logs
+          </RouterLink>
+          <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/options`" class="btn">
+            <SettingsIcon />
+            Options
+          </RouterLink>
+        </div>
      </Card>
-      <div class="pages-list">
-        <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/`" class="btn">
-          <BoxIcon />
-          Mods
-        </RouterLink>
-        <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/logs`" class="btn">
-          <FileIcon />
-          Logs
-        </RouterLink>
-        <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/options`" class="btn">
-          <SettingsIcon />
-          Options
-        </RouterLink>
-      </div>
    </div>
    <div class="content">
      <Promotion />
@@ -266,7 +267,6 @@ onUnmounted(() => {

 <style scoped lang="scss">
 .instance-card {
-  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
@@ -288,7 +288,6 @@ Button {
  display: flex;
  flex-direction: column;
  padding: 1rem;
-  background: var(--color-raised-bg);
  min-height: calc(100% - 3.25rem);
  overflow: hidden;
 }
@@ -321,7 +320,7 @@ Button {
 }

 .content {
-  margin-left: 20rem;
+  margin-left: 19rem;
 }

 .instance-info {
@@ -341,7 +340,7 @@ Button {
 .pages-list {
  display: flex;
  flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--gap-xs);

  a {
    font-size: 100%;
@@ -350,7 +349,6 @@ Button {
    transition: all ease-in-out 0.1s;
    width: 100%;
    color: var(--color-primary);
-    padding: var(--gap-md);
    box-shadow: none;

    &.router-link-exact-active {
@@ -373,28 +371,6 @@ Button {
  }
 }

-.header-nav {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 0.5rem;
-  gap: 0.5rem;
-  background: var(--color-raised-bg);
-}
-
-.project-card {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 1rem;
-  background: var(--color-raised-bg);
-  width: 20rem;
-}
-
 .instance-nav {
  display: flex;
  flex-direction: row;
@@ -402,7 +378,6 @@ Button {
  justify-content: left;
  padding: 1rem;
  gap: 0.5rem;
-  background: var(--color-raised-bg);
  height: min-content;
  width: 100%;
 }
--- a/theseus_gui/src/pages/instance/Mods.vue
+++ b/theseus_gui/src/pages/instance/Mods.vue
@@ -52,17 +52,28 @@
        v-model="selectedProjectType"
        :items="Object.keys(selectableProjectTypes)"
      />
-      <Button :disabled="!projects.some((x) => x.outdated)" class="no-wrap" @click="updateAll">
-        <UpdatedIcon />
-        Update {{ selected.length > 0 ? 'selected' : 'all' }}
-      </Button>
+      <DropdownButton
+        :options="['update_all', 'filter_update']"
+        default-value="update_all"
+        :disabled="!projects.some((x) => x.outdated)"
+        @option-click="updateAll"
+      >
+        <template #update_all>
+          <UpdatedIcon />
+          Update {{ selected.length > 0 ? 'selected' : 'all' }}
+        </template>
+        <template #filter_update>
+          <UpdatedIcon />
+          Select Updatable
+        </template>
+      </DropdownButton>
      <Button v-if="selected.length > 0" class="no-wrap" @click="deleteWarning.show()">
        <TrashIcon />
        Remove selected
      </Button>
      <DropdownButton
        v-if="selected.length > 0"
-        :options="['toggle', 'disable', 'enable']"
+        :options="['toggle', 'disable', 'enable', 'hide_show']"
        default-value="toggle"
        @option-click="toggleSelected"
      >
@@ -78,6 +89,10 @@
          <CheckCircleIcon />
          Enable selected
        </template>
+        <template #hide_show>
+          <CheckCircleIcon />
+          {{ hideNonSelected ? 'Show' : 'Hide' }} unselected
+        </template>
      </DropdownButton>
      <DropdownButton
        v-if="selected.length > 0"
@@ -299,6 +314,7 @@ const sortFilter = ref('')
 const selectedProjectType = ref('All')
 const selected = computed(() => projects.value.filter((mod) => mod.selected))
 const deleteWarning = ref(null)
+const hideNonSelected = ref(false)

 const selectableProjectTypes = computed(() => {
  const obj = { All: 'all' }
@@ -313,12 +329,19 @@ const selectableProjectTypes = computed(() => {

 const search = computed(() => {
  const projectType = selectableProjectTypes.value[selectedProjectType.value]
-  const filtered = projects.value.filter((mod) => {
-    return (
-      mod.name.toLowerCase().includes(searchFilter.value.toLowerCase()) &&
-      (projectType === 'all' || mod.project_type === projectType)
-    )
-  })
+  const filtered = projects.value
+    .filter((mod) => {
+      return (
+        mod.name.toLowerCase().includes(searchFilter.value.toLowerCase()) &&
+        (projectType === 'all' || mod.project_type === projectType)
+      )
+    })
+    .filter((mod) => {
+      if (hideNonSelected.value) {
+        return mod.selected
+      }
+      return true
+    })

  return updateSort(filtered, sortFilter.value)
 })
@@ -368,37 +391,45 @@ function updateSort(projects, sort) {
  }
 }

-async function updateAll() {
-  const setProjects = []
-  for (const [i, project] of selected.value ?? projects.value.entries()) {
-    if (project.outdated) {
-      project.updating = true
-      setProjects.push(i)
+async function updateAll(args) {
+  if (args.option === 'update_all') {
+    const setProjects = []
+    for (const [i, project] of selected.value ?? projects.value.entries()) {
+      if (project.outdated) {
+        project.updating = true
+        setProjects.push(i)
+      }
+    }
+
+    const paths = await update_all(props.instance.path).catch(handleError)
+
+    for (const [oldVal, newVal] of Object.entries(paths)) {
+      const index = projects.value.findIndex((x) => x.path === oldVal)
+      projects.value[index].path = newVal
+      projects.value[index].outdated = false
+
+      if (projects.value[index].updateVersion) {
+        projects.value[index].version = projects.value[index].updateVersion.version_number
+        projects.value[index].updateVersion = null
+      }
+    }
+    for (const project of setProjects) {
+      projects.value[project].updating = false
+    }
+
+    mixpanel.track('InstanceUpdateAll', {
+      loader: props.instance.metadata.loader,
+      game_version: props.instance.metadata.game_version,
+      count: setProjects.length,
+      selected: selected.value.length > 1,
+    })
+  } else {
+    for (const project of projects.value) {
+      if (project.outdated) {
+        project.selected = true
+      }
    }
  }
-
-  const paths = await update_all(props.instance.path).catch(handleError)
-
-  for (const [oldVal, newVal] of Object.entries(paths)) {
-    const index = projects.value.findIndex((x) => x.path === oldVal)
-    projects.value[index].path = newVal
-    projects.value[index].outdated = false
-
-    if (projects.value[index].updateVersion) {
-      projects.value[index].version = projects.value[index].updateVersion.version_number
-      projects.value[index].updateVersion = null
-    }
-  }
-  for (const project of setProjects) {
-    projects.value[project].updating = false
-  }
-
-  mixpanel.track('InstanceUpdateAll', {
-    loader: props.instance.metadata.loader,
-    game_version: props.instance.metadata.game_version,
-    count: setProjects.length,
-    selected: selected.value.length > 1,
-  })
 }

 async function updateProject(mod) {
@@ -523,6 +554,9 @@ async function toggleSelected(args) {
        }
      }
      break
+    case 'hide_show':
+      hideNonSelected.value = !hideNonSelected.value
+      break
  }
 }

--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="root-container">
    <div v-if="data" class="project-sidebar">
-      <div v-if="instance" class="small-instance">
+      <Card v-if="instance" class="small-instance">
        <router-link class="instance" :to="`/instance/${encodeURIComponent(instance.path)}`">
          <Avatar
            :src="
@@ -23,7 +23,7 @@
            </span>
          </div>
        </router-link>
-      </div>
+      </Card>
      <Card class="sidebar-card" @contextmenu.prevent.stop="handleRightClick">
        <Avatar size="lg" :src="data.icon_url" />
        <div class="instance-info">
@@ -207,6 +207,7 @@
        :dependencies="dependencies"
        :install="install"
        :installed="installed"
+        :installed-version="installedVersion"
      />
    </div>
  </div>
@@ -259,6 +260,7 @@ import {
  add_project_from_version as installMod,
  check_installed,
  get as getInstance,
+  remove_project,
 } from '@/helpers/profile'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
@@ -284,7 +286,6 @@ const incompatibilityWarning = ref(null)

 const options = ref(null)
 const installing = ref(false)
-
 const data = shallowRef(null)
 const versions = shallowRef([])
 const members = shallowRef([])
@@ -293,6 +294,7 @@ const categories = shallowRef([])
 const instance = ref(null)

 const installed = ref(false)
+const installedVersion = ref(null)

 async function fetchProjectData() {
  ;[
@@ -315,6 +317,11 @@ async function fetchProjectData() {
    instance.value?.path &&
    (await check_installed(instance.value.path, data.value.id).catch(handleError))
  breadcrumbs.setName('Project', data.value.title)
+  installedVersion.value = instance.value
+    ? Object.values(instance.value.projects).find(
+        (p) => p?.metadata?.version?.project_id === data.value.id
+      )?.metadata?.version?.id
+    : null
 }

 await fetchProjectData()
@@ -338,6 +345,18 @@ async function install(version) {
  installing.value = true
  let queuedVersionData

+  if (installed.value) {
+    await remove_project(
+      instance.value.path,
+      Object.entries(instance.value.projects)
+        .map(([key, value]) => ({
+          key,
+          value,
+        }))
+        .find((p) => p.value.metadata?.version?.project_id === data.value.id).key
+    )
+  }
+
  if (version) {
    queuedVersionData = versions.value.find((v) => v.id === version)
  } else {
@@ -406,7 +425,7 @@ async function install(version) {
          queuedVersionData = selectedVersion
          await installMod(instance.value.path, selectedVersion.id).catch(handleError)
          await installVersionDependencies(instance.value, queuedVersionData)
-
+          installedVersion.value = selectedVersion.id
          mixpanel.track('ProjectInstall', {
            loader: instance.value.metadata.loader,
            game_version: instance.value.metadata.game_version,
@@ -430,7 +449,7 @@ async function install(version) {
        if (compatible) {
          await installMod(instance.value.path, queuedVersionData.id).catch(handleError)
          await installVersionDependencies(instance.value, queuedVersionData)
-
+          installedVersion.value = queuedVersionData.id
          mixpanel.track('ProjectInstall', {
            loader: instance.value.metadata.loader,
            game_version: instance.value.metadata.game_version,
@@ -513,15 +532,20 @@ const handleOptionsClick = (args) => {
  height: fit-content;
  max-height: calc(100vh - 3.25rem);
  overflow-y: auto;
-  background: var(--color-raised-bg);
-  padding: 1rem;
+  padding: 1rem 0.5rem 1rem 1rem;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
 }

 .sidebar-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
-  background-color: var(--color-bg);
 }

 .content-container {
@@ -529,7 +553,7 @@ const handleOptionsClick = (args) => {
  flex-direction: column;
  width: 100%;
  padding: 1rem;
-  margin-left: 20rem;
+  margin-left: 19.5rem;
 }

 .button-group {
@@ -652,7 +676,6 @@ const handleOptionsClick = (args) => {
 }

 .small-instance {
-  background: var(--color-bg);
  padding: var(--gap-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--gap-md);
--- a/theseus_gui/src/pages/project/Versions.vue
+++ b/theseus_gui/src/pages/project/Versions.vue
@@ -1,50 +1,76 @@
 <template>
-  <Card>
-    <div class="filter-header">
-      <div class="manage">
-        <multiselect
-          v-model="filterVersions"
-          :options="
-            versions
-              .flatMap((value) => value.loaders)
-              .filter((value, index, self) => self.indexOf(value) === index)
-          "
-          :multiple="true"
-          :searchable="true"
-          :show-no-results="false"
-          :close-on-select="false"
-          :clear-search-on-select="false"
-          :show-labels="false"
-          :selectable="() => versions.length <= 6"
-          placeholder="Filter loader..."
-        />
-        <multiselect
-          v-model="filterLoader"
-          :options="
-            versions
-              .flatMap((value) => value.game_versions)
-              .filter((value, index, self) => self.indexOf(value) === index)
-          "
-          :multiple="true"
-          :searchable="true"
-          :show-no-results="false"
-          :close-on-select="false"
-          :clear-search-on-select="false"
-          :show-labels="false"
-          :selectable="() => versions.length <= 6"
-          placeholder="Filter versions..."
-        />
-      </div>
-      <Button
-        class="no-wrap clear-filters"
-        :disabled="!filterLoader && !filterVersions"
-        :action="clearFilters"
-      >
-        <ClearIcon />
-        Clear filters
-      </Button>
+  <Card class="filter-header">
+    <div class="manage">
+      <multiselect
+        v-model="filterLoader"
+        :options="
+          versions
+            .flatMap((value) => value.loaders)
+            .filter((value, index, self) => self.indexOf(value) === index)
+        "
+        :multiple="true"
+        :searchable="true"
+        :show-no-results="false"
+        :close-on-select="false"
+        :clear-search-on-select="false"
+        :show-labels="false"
+        :selectable="() => versions.length <= 6"
+        placeholder="Filter loader..."
+        :custom-label="(option) => option.charAt(0).toUpperCase() + option.slice(1)"
+      />
+      <multiselect
+        v-model="filterGameVersions"
+        :options="
+          versions
+            .flatMap((value) => value.game_versions)
+            .filter((value, index, self) => self.indexOf(value) === index)
+        "
+        :multiple="true"
+        :searchable="true"
+        :show-no-results="false"
+        :close-on-select="false"
+        :clear-search-on-select="false"
+        :show-labels="false"
+        :selectable="() => versions.length <= 6"
+        placeholder="Filter versions..."
+        :custom-label="(option) => option.charAt(0).toUpperCase() + option.slice(1)"
+      />
+      <multiselect
+        v-model="filterVersions"
+        :options="
+          versions
+            .map((value) => value.version_type)
+            .filter((value, index, self) => self.indexOf(value) === index)
+        "
+        :multiple="true"
+        :searchable="true"
+        :show-no-results="false"
+        :close-on-select="false"
+        :clear-search-on-select="false"
+        :show-labels="false"
+        :selectable="() => versions.length <= 6"
+        placeholder="Filter release channel..."
+        :custom-label="(option) => option.charAt(0).toUpperCase() + option.slice(1)"
+      />
    </div>
+    <Button
+      class="no-wrap clear-filters"
+      :disabled="
+        filterVersions.length === 0 && filterLoader.length === 0 && filterGameVersions.length === 0
+      "
+      :action="clearFilters"
+    >
+      <ClearIcon />
+      Clear filters
+    </Button>
  </Card>
+  <Pagination
+    :page="currentPage"
+    :count="Math.ceil(filteredVersions.length / 20)"
+    class="pagination-before"
+    :link-function="(page) => `?page=${page}`"
+    @switch-page="switchPage"
+  />
  <Card class="mod-card">
    <div class="table">
      <div class="table-row table-head">
@@ -54,19 +80,20 @@
        <div class="table-cell table-text">Stats</div>
      </div>
      <div
-        v-for="version in versions"
+        v-for="version in filteredVersions.slice((currentPage - 1) * 20, currentPage * 20)"
        :key="version.id"
        class="table-row selectable"
        @click="$router.push(`/project/${$route.params.id}/version/${version.id}`)"
      >
        <div class="table-cell table-text">
          <Button
-            color="primary"
+            :color="installed && version.id === installedVersion ? '' : 'primary'"
            icon-only
-            :disabled="installed"
+            :disabled="installed && version.id === installedVersion"
            @click.stop="() => install(version.id)"
          >
            <DownloadIcon v-if="!installed" />
+            <SwapIcon v-else-if="installed && version.id !== installedVersion" />
            <CheckIcon v-else />
          </Button>
        </div>
@@ -124,20 +151,34 @@
 </template>

 <script setup>
-import { Card, Button, CheckIcon, ClearIcon, Badge, DownloadIcon, formatNumber } from 'omorphia'
+import {
+  Card,
+  Button,
+  CheckIcon,
+  ClearIcon,
+  Badge,
+  DownloadIcon,
+  Pagination,
+  formatNumber,
+} from 'omorphia'
 import Multiselect from 'vue-multiselect'
 import { releaseColor } from '@/helpers/utils'
-import { ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { SwapIcon } from '@/assets/icons/index.js'

-let filterVersions = ref(null)
-let filterLoader = ref(null)
+const filterVersions = ref([])
+const filterLoader = ref([])
+const filterGameVersions = ref([])
+
+const currentPage = ref(1)

 const clearFilters = () => {
-  filterVersions.value = null
-  filterLoader.value = null
+  filterVersions.value = []
+  filterLoader.value = []
+  filterGameVersions.value = []
 }

-defineProps({
+const props = defineProps({
  versions: {
    type: Array,
    required: true,
@@ -148,8 +189,39 @@ defineProps({
  },
  installed: {
    type: Boolean,
-    required: true,
+    default: null,
  },
+  instance: {
+    type: Object,
+    default: null,
+  },
+  installedVersion: {
+    type: String,
+    default: null,
+  },
+})
+
+const filteredVersions = computed(() => {
+  return props.versions.filter(
+    (projectVersion) =>
+      (filterGameVersions.value.length === 0 ||
+        filterGameVersions.value.some((gameVersion) =>
+          projectVersion.game_versions.includes(gameVersion)
+        )) &&
+      (filterLoader.value.length === 0 ||
+        filterLoader.value.some((loader) => projectVersion.loaders.includes(loader))) &&
+      (filterVersions.value.length === 0 ||
+        filterVersions.value.includes(projectVersion.version_type))
+  )
+})
+
+function switchPage(page) {
+  currentPage.value = page
+}
+
+//watch all the filters and if a value changes, reset to page 1
+watch([filterVersions, filterLoader, filterGameVersions], () => {
+  currentPage.value = 1
 })
 </script>

@@ -160,6 +232,7 @@ defineProps({
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
+  margin-bottom: 0.5rem;
 }

 .table-row {
@@ -188,6 +261,7 @@ defineProps({
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
+  margin-top: 0.5rem;
 }

 .text-combo {