refactor: Improve some ux

Voxelum · Dec 22, 2022 · e2df99a · e2df99a
1 parent bd4df6f
commit e2df99a
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 59 deletions.
diff --git a/xmcl-keystone-ui/locales/en.yaml b/xmcl-keystone-ui/locales/en.yaml
@@ -726,6 +726,7 @@ multiplayer:
   currentIpTitle: Detectd Public IP
   currentNatTitle: 'Current network (NAT):'
   difficultyLevelHint: The level of difficulty to create a peer connection with other
+  disconnect: Disconnect
   disconnectDescription: Are you sure you want to disconnect with user {user}({id})?
   disconnected: disconnected
   enterRemoteToken: Enter Remote Token

diff --git a/xmcl-keystone-ui/locales/zh-CN.yaml b/xmcl-keystone-ui/locales/zh-CN.yaml
@@ -737,6 +737,7 @@ multiplayer:
   currentIpTitle: 检测到公网 IP
   currentNatTitle: 当前网络 (NAT) 环境
   difficultyLevelHint: 与他人联机难度由低到高
+  disconnect: 断开连接
   disconnectDescription: 你确定你要断开和 {user}({id}) 的连接么
   disconnected: 断开连接
   enterRemoteToken: 输入对方的令牌

diff --git a/xmcl-keystone-ui/src/components/DeleteDialog.vue b/xmcl-keystone-ui/src/components/DeleteDialog.vue
@@ -32,9 +32,9 @@
           @click="onDelete"
         >
           <v-icon left>
-            delete
+            {{ confirmIcon ?? 'delete' }}
           </v-icon>
-          {{ t('delete.yes') }}
+          {{ confirm ?? t('delete.yes') }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -47,6 +47,8 @@ import { useDialog } from '../composables/dialog'
 const props = defineProps<{
   title: string
   width?: number
+  confirm?: string
+  confirmIcon?: string
   persistent?: boolean
   dialog?: string
 }>()

diff --git a/xmcl-keystone-ui/src/views/AppAddInstanceDialog.vue b/xmcl-keystone-ui/src/views/AppAddInstanceDialog.vue
@@ -45,13 +45,13 @@
           step="1"
           class="p-0"
         >
-          <template-content
+          <TemplateContent
             style="overflow: auto; max-height: 70vh; padding: 24px 24px 16px"
             :templates="templates"
             :value="selectedTemplate"
             @select="onSelect"
           />
-          <stepper-footer
+          <StepperFooter
             style="padding: 16px 24px"
             :disabled="creating"
             :creating="creating"
@@ -67,13 +67,13 @@
           <div
             style="overflow: auto; max-height: 70vh; padding: 24px 24px 16px"
           >
-            <base-content
+            <BaseContent
               :valid.sync="valid"
               @update:valid="valid = $event"
             />
-            <advance-content :valid.sync="valid" />
+            <AdvanceContent :valid.sync="valid" />
           </div>
-          <stepper-footer
+          <StepperFooter
             style="padding: 16px 24px"
             :disabled="!valid || creationData.name === '' || creationData.runtime.minecraft === ''"
             :creating="creating"
@@ -86,7 +86,7 @@
           step="3"
           class="overflow-auto max-h-[70vh]"
         >
-          <stepper-modpack-content
+          <StepperModpackContent
             v-if="canPreview"
             :modpack="selectedTemplate"
             :shown="isModpackContentShown"

diff --git a/xmcl-keystone-ui/src/views/AppAddServerDialog.vue b/xmcl-keystone-ui/src/views/AppAddServerDialog.vue
@@ -25,19 +25,24 @@
       >
         <v-stepper-content
           step="1"
-          style="overflow: auto; max-height: 550px;"
+          class="p-0"
         >
-          <server-content
-            :status="status"
-            :pinging="pinging"
-            :accepting-version="acceptingVersion"
-            :valid.sync="valid"
-          />
-          <advance-content
-            :show-minecraft="false"
-            :valid.sync="valid"
-          />
-          <stepper-footer
+          <div
+            style="overflow: auto; max-height: 70vh; padding: 24px 24px 16px"
+          >
+            <ServerContent
+              :status="status"
+              :pinging="pinging"
+              :accepting-version="acceptingVersion"
+              :valid.sync="valid"
+            />
+            <AdvanceContent
+              :show-minecraft="false"
+              :valid.sync="valid"
+            />
+          </div>
+          <StepperFooter
+            style="padding: 16px 24px"
             :disabled="!valid || runtime.minecraft === ''"
             :creating="creating"
             create
@@ -52,7 +57,7 @@
             >
               {{ t('server.ping') }}
             </v-btn>
-          </stepper-footer>
+          </StepperFooter>
         </v-stepper-content>
       </v-stepper-items>
     </v-stepper>

diff --git a/xmcl-keystone-ui/src/views/AppSideBarContentFocus.vue b/xmcl-keystone-ui/src/views/AppSideBarContentFocus.vue
@@ -19,6 +19,8 @@
           <v-divider />
           <v-tooltip
             :close-delay="0"
+            color="black"
+            transition="scroll-x-transition"
             right
           >
             <template #activator="{ on: tooltip }">
@@ -42,6 +44,8 @@
             {{ t('mod.name', 2) }}
           </v-tooltip>
           <v-tooltip
+            color="black"
+            transition="scroll-x-transition"
             :close-delay="0"
             right
           >
@@ -63,6 +67,8 @@
           </v-tooltip>
 
           <v-tooltip
+            color="black"
+            transition="scroll-x-transition"
             :close-delay="0"
             right
           >
@@ -87,6 +93,8 @@
       </div>
 
       <v-tooltip
+        color="black"
+        transition="scroll-x-transition"
         :close-delay="0"
         right
       >
@@ -108,6 +116,8 @@
       </v-tooltip>
 
       <v-tooltip
+        color="black"
+        transition="scroll-x-transition"
         :close-delay="0"
         right
       >
@@ -132,6 +142,8 @@
 
       <v-tooltip
         v-if="sideBarShowCurseforge"
+        color="black"
+        transition="scroll-x-transition"
         :close-delay="0"
         right
       >
@@ -156,6 +168,8 @@
 
       <v-tooltip
         v-if="sideBarShowModrinth"
+        color="black"
+        transition="scroll-x-transition"
         :close-delay="0"
         right
       >
@@ -180,6 +194,8 @@
 
       <v-tooltip
         v-if="sideBarShowFtb"
+        color="black"
+        transition="scroll-x-transition"
         :close-delay="0"
         right
       >

diff --git a/xmcl-keystone-ui/src/views/AppSideBarContentNext.vue b/xmcl-keystone-ui/src/views/AppSideBarContentNext.vue
@@ -227,7 +227,6 @@
   </div>
 </template>
 <script setup lang="ts">
-import PlayerAvatar from '@/components/PlayerAvatar.vue'
 import { useService } from '@/composables'
 import { useLocalStorageCacheBool } from '@/composables/cache'
 import { ContextMenuItem } from '@/composables/contextMenu'

diff --git a/xmcl-keystone-ui/src/views/Multiplayer.vue b/xmcl-keystone-ui/src/views/Multiplayer.vue
@@ -307,39 +307,20 @@
               {{ c.userInfo.name || c.id }}
             </v-list-item-title>
             <v-list-item-subtitle class="flex gap-2 items-center">
-              <v-tooltip
-                right
-                transition="scroll-x-transition"
-                color="black"
+              <v-chip
+                label
+                small
+                :color="stateToColor[c.connectionState]"
               >
-                <template #activator="{ on }">
-                  <v-chip
-                    label
-                    small
-                    :color="stateToColor[c.connectionState]"
-                    v-on="on"
-                  >
-                    <v-icon left>
-                      signal_cellular_alt
-                    </v-icon>
-                    {{ t(`peerConnectionState.name`) }}:
-                    {{ tConnectionStates[c.connectionState] }}
-                    <template v-if="c.connectionState === 'connected'">
-                      ({{ c.ping }}ms)
-                    </template>
-                  </v-chip>
-                </template>
-
-                <template v-if="c.selectedCandidate">
-                  {{ tTransportType[c.selectedCandidate.local.type] }}
-                  {{ c.selectedCandidate.local.address }}:{{ c.selectedCandidate.local.port }}
-                  ->
-                  {{ tTransportType[c.selectedCandidate.remote.type] }}
-                  {{ c.selectedCandidate.remote.address }}:{{ c.selectedCandidate.remote.port }}
+                <v-icon left>
+                  signal_cellular_alt
+                </v-icon>
+                {{ t(`peerConnectionState.name`) }}:
+                {{ tConnectionStates[c.connectionState] }}
+                <template v-if="c.connectionState === 'connected'">
+                  ({{ c.ping }}ms)
                 </template>
-              </v-tooltip>
-
-              <!-- {{ c.ping }}ms -->
+              </v-chip>
             </v-list-item-subtitle>
           </v-list-item-content>
           <v-list-item-action
@@ -408,13 +389,22 @@
             </v-btn>
           </v-list-item-action>
           <v-list-item-action class="self-center">
-            <v-btn
-              color="error"
-              icon
-              @click="startDelete(c.id)"
+            <v-tooltip
+              color="black"
+              top
             >
-              <v-icon>link_off</v-icon>
-            </v-btn>
+              <template #activator="{ on }">
+                <v-btn
+                  color="error"
+                  icon
+                  v-on="on"
+                  @click="startDelete(c.id)"
+                >
+                  <v-icon>link_off</v-icon>
+                </v-btn>
+              </template>
+              {{ t('multiplayer.disconnect') }}
+            </v-tooltip>
           </v-list-item-action>
         </v-list-item>
       </v-list>
@@ -425,6 +415,8 @@
         :title="t('multiplayer.disconnected')"
         :persistent="false"
         :width="400"
+        :confirm-icon="'link_off'"
+        :confirm="t('multiplayer.confirm')"
         @confirm="doDelete"
       >
         {{ t('multiplayer.disconnectDescription', { user: deletingName, id: deleting }) }}

diff --git a/xmcl-keystone-ui/src/views/SettingGeneral.vue b/xmcl-keystone-ui/src/views/SettingGeneral.vue
@@ -65,6 +65,14 @@
           {{
             t("setting.useBmclAPI")
           }}
+          <a
+            class="underline primary ml-1"
+            href="https://bmclapidoc.bangbang93.com/"
+          >
+            <v-icon small>
+              question_mark
+            </v-icon>
+          </a>
         </v-list-item-title>
         <v-list-item-subtitle>
           {{