refactor: Make instance setting ui more simple

Voxelum · Nov 18, 2024 · 626d304 · 626d304
1 parent 9ea0b70
commit 626d304
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 81 deletions.
diff --git a/xmcl-keystone-ui/src/views/BaseSetting.vue b/xmcl-keystone-ui/src/views/BaseSetting.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="base-setting xl:px-20 2xl:px-40">
+  <div class="base-setting px-10">
     <BaseSettingGeneral />
     <v-divider />
-    <BaseSettingSync />
-    <v-divider />
     <BaseSettingJava />
     <v-divider />
+    <BaseSettingSync />
+    <v-divider />
     <BaseSettingLaunch />
     <v-divider />
     <BaseSettingModpack v-if="!isServer" />
@@ -105,21 +105,6 @@ useTutorial(computed(() => [{
 
 </script>
 
-<style scoped=true>
-/* .base-setting {
-  max-width: 1300px;
-  width: 1220px;
-  margin: auto
-}
-
-@media screen and (max-width: 1300px) {
-  .base-setting {
-    width: unset;
-    margin: 0 24px;
-  }
-} */
-
-</style>
 <style>
 .local-version .v-select__selection--comma {
   max-width: 100px;
@@ -128,12 +113,24 @@ useTutorial(computed(() => [{
   text-overflow: ellipsis;
 }
 
-.base-settings {
+.base-setting {
   background: transparent !important;
   width: 100%;
 }
 
-.base-settings .v-text-field--box input,
+.base-setting .v-list-item {
+  @apply rounded-xl;
+}
+
+.base-setting .v-list-item:before {
+  @apply rounded-xl;
+}
+
+.base-setting .v-list-item:hover:before {
+  @apply rounded-xl;
+}
+
+.base-setting .v-text-field--box input,
 .v-text-field--full-width input,
 .v-text-field--outlined input {
   margin-top: 0

diff --git a/xmcl-keystone-ui/src/views/BaseSettingGeneral.vue b/xmcl-keystone-ui/src/views/BaseSettingGeneral.vue
@@ -1,7 +1,6 @@
 <template>
   <v-list
     class="base-settings"
-    two-line
     subheader
   >
     <v-subheader style="">
@@ -66,63 +65,6 @@
       </div>
     </v-list-item>
 
-    <v-divider class="mb-4 mt-2" />
-    <VersionInputMinecraft
-      :value="data.runtime.minecraft"
-      @input="onSelectMinecraft"
-    />
-    <VersionInputNeoForged
-      v-if="!data.runtime.labyMod"
-      :value="data.runtime.neoForged"
-      :minecraft="data.runtime.minecraft"
-      @input="onSelectNeoForged"
-    />
-    <VersionInputForge
-      v-if="!data.runtime.labyMod"
-      :value="data.runtime.forge"
-      :minecraft="data.runtime.minecraft"
-      @input="onSelectForge"
-    />
-    <VersionInputFabric
-      v-if="!data.runtime.labyMod"
-      :value="data.runtime.fabricLoader"
-      :minecraft="data.runtime.minecraft"
-      @input="onSelectFabric"
-    />
-    <VersionInputQuilt
-      v-if="!data.runtime.labyMod"
-      :value="data.runtime.quiltLoader"
-      :minecraft="data.runtime.minecraft"
-      @input="onSelectQuilt"
-    />
-    <VersionInputOptifine
-      v-if="!data.runtime.labyMod"
-      :value="data.runtime.optifine"
-      :forge="data.runtime.forge || ''"
-      :minecraft="data.runtime.minecraft"
-      @input="onSelectOptifine"
-    />
-    <VersionInputLabymod
-      v-if="data.runtime.labyMod"
-      :value="data.runtime.labyMod"
-      :minecraft="data.runtime.minecraft"
-      @input="onSelectLabyMod"
-    />
-    <VersionInputLocal
-      :value="data.version"
-      :versions="versions"
-      @input="onSelectLocalVersion"
-    />
-    <SettingItemCheckbox
-      v-model="fastLaunch"
-      :title="t('instanceSetting.fastLaunch')"
-      :description="t('instanceSetting.fastLaunchHint')"
-    >
-      <BaseSettingGlobalLabel
-        :global="isGlobalFastLaunch"
-        @clear="resetFastLaunch"
-      />
-    </SettingItemCheckbox>
     <SettingItemCheckbox
       v-model="hideLauncher"
       :title="t('instanceSetting.hideLauncher')"
@@ -163,6 +105,70 @@
         @clear="resetDisableElyByAuthlib"
       />
     </SettingItemCheckbox>
+
+    <v-divider class="mb-2 mt-2" />
+
+    <v-subheader>
+      {{ t('version.name', 2) }}
+      <div class="flex-grow" />
+      <v-btn
+        icon
+        @click="showAll = !showAll"
+      >
+        <v-icon v-if="!showAll">
+          unfold_more
+        </v-icon>
+        <v-icon v-else>
+          unfold_less
+        </v-icon>
+      </v-btn>
+    </v-subheader>
+    <VersionInputMinecraft
+      :value="data.runtime.minecraft"
+      @input="onSelectMinecraft"
+    />
+    <VersionInputNeoForged
+      v-if="showNeoForged"
+      :value="data.runtime.neoForged"
+      :minecraft="data.runtime.minecraft"
+      @input="onSelectNeoForged"
+    />
+    <VersionInputForge
+      v-if="showForge"
+      :value="data.runtime.forge"
+      :minecraft="data.runtime.minecraft"
+      @input="onSelectForge"
+    />
+    <VersionInputFabric
+      v-if="showFabric"
+      :value="data.runtime.fabricLoader"
+      :minecraft="data.runtime.minecraft"
+      @input="onSelectFabric"
+    />
+    <VersionInputQuilt
+      v-if="showQuilt"
+      :value="data.runtime.quiltLoader"
+      :minecraft="data.runtime.minecraft"
+      @input="onSelectQuilt"
+    />
+    <VersionInputOptifine
+      v-if="showOptifine"
+      :value="data.runtime.optifine"
+      :forge="data.runtime.forge || ''"
+      :minecraft="data.runtime.minecraft"
+      @input="onSelectOptifine"
+    />
+    <VersionInputLabymod
+      v-if="showLabyMod"
+      :value="data.runtime.labyMod"
+      :minecraft="data.runtime.minecraft"
+      @input="onSelectLabyMod"
+    />
+    <VersionInputLocal
+      :value="data.version"
+      :versions="versions"
+      @input="onSelectLocalVersion"
+    />
   </v-list>
 </template>
 
@@ -212,6 +218,14 @@ const { userProfile } = injection(kUserContext)
 const isThirdparty = computed(() => userProfile.value.authority !== AUTHORITY_MICROSOFT)
 const isElyBy = computed(() => userProfile.value.authority.startsWith('https://authserver.ely.by'))
 
+const showAll = ref(false)
+const showForge = computed(() => showAll.value || data.runtime.forge)
+const showNeoForged = computed(() => showAll.value || data.runtime.neoForged)
+const showFabric = computed(() => showAll.value || data.runtime.fabricLoader)
+const showQuilt = computed(() => showAll.value || data.runtime.quiltLoader)
+const showOptifine = computed(() => showAll.value || data.runtime.optifine)
+const showLabyMod = computed(() => showAll.value || data.runtime.labyMod)
+
 const {
   onSelectMinecraft,
   onSelectNeoForged,

diff --git a/xmcl-keystone-ui/src/views/BaseSettingJava.vue b/xmcl-keystone-ui/src/views/BaseSettingJava.vue
@@ -1,7 +1,6 @@
 <template>
   <v-list
     two-line
-    subheader
     style="background: transparent; width: 100%"
   >
     <v-subheader style="padding-right: 2px">
@@ -27,7 +26,6 @@
     <v-list-group
       id="java-list"
       no-action
-      :value="true"
     >
       <template #activator>
         <v-list-item
@@ -54,7 +52,7 @@
       />
     </v-list-group>
     <v-list-item>
-      <div class="mt-2 flex flex-col gap-2 px-[16px] py-[8px]">
+      <div class="mt-2 flex flex-col gap-2 py-[8px]">
         <div class="flex flex-row items-center">
           {{ t("java.memory") }}
           <BaseSettingGlobalLabel
@@ -192,4 +190,8 @@ async function browseFile() {
 .v-textarea.v-text-field--enclosed .v-text-field__slot textarea {
   word-break: break-all;
 }
+
+#java-list .v-list-group__header:before {
+  opacity: 0.08;
+}
 </style>