Feat: improve UI

xmcl-electron-app/main/ElectronController.ts

@@ -372,7 +372,7 @@ export class ElectronController implements LauncherAppController {
       vibrancy: man.vibrancy ? 'sidebar' : undefined, // or popover
       icon: nativeTheme.shouldUseDarkColors ? man.iconSets.darkIcon : man.iconSets.icon,
       titleBarStyle: this.getTitlebarStyle(),
-      trafficLightPosition: this.app.platform.os === 'osx' ? { x: 14, y: 10 } : undefined,
+      trafficLightPosition: this.app.platform.os === 'osx' ? { x: 21, y: 16 } : undefined,
       webPreferences: {
         preload: indexPreload,
         session: restoredSession,
@@ -504,6 +504,9 @@ export class ElectronController implements LauncherAppController {
   }
 
   private getTitlebarStyle() {
+    if (this.app.platform.os === 'osx') {
+      return 'hiddenInset'
+    }
     return this.app.platform.os === 'linux' &&
       this.settings?.linuxTitlebar
       ? 'default'

xmcl-keystone-ui/src/components/AppSystemBarBadge.vue

@@ -1,12 +1,13 @@
 <template>
   <div
-    class="non-moveable flex flex-grow-0 cursor-pointer rounded px-2 py-1 transition-all hover:bg-[rgba(255,255,255,0.2)]"
+    class="non-moveable flex flex-grow-0 cursor-pointer rounded px-2 py-1.5 transition-all hover:bg-[rgba(255,255,255,0.2)] gap-2"
     @click="$emit('click', $event)"
   >
-    <v-icon class="badge-icon">
+    <v-icon class="badge-icon mr-0">
       {{ icon }}
     </v-icon>
     <span
+      v-if="text"
       class="whitespace-nowrap"
       :class="{ 'badge-text': canHideText }"
     >
@@ -17,7 +18,7 @@
 <script setup lang="ts">
 defineProps<{
   icon: string
-  text: string
+  text?: string
   canHideText?: boolean
 }>()
 

xmcl-keystone-ui/src/components/AvatarItem.vue

@@ -1,20 +1,20 @@
 <template>
   <div
-    class="flex flex-grow-0 items-center rounded pr-2 text-sm"
+    class="flex flex-grow-0 items-center rounded pr-2 text-sm gap-2"
     :class="{ 'cursor-pointer': !!$listeners.click }"
     @click="emit('click', $event)"
   >
     <v-avatar
       :left="true"
       class="hidden lg:block"
-      style="height: 34px; width: 34px"
+      style="height: 32px; width: 32px; min-width: 34px;"
       :class="{ responsive }"
     >
       <img
         v-if="avatar"
         :src="avatar"
       >
-      <v-icon v-else-if="icon">
+      <v-icon v-else-if="icon" :class="iconClass">
         {{ icon }}
       </v-icon>
     </v-avatar>
@@ -24,14 +24,16 @@
       class="text overflow-hidden overflow-ellipsis whitespace-nowrap"
     >
       <div
-        class="select-none font-semibold dark:text-gray-300"
+        class="select-none font-semibold"
         :style="{
           color: bgColor
         }"
       >
         {{ title }}
       </div>
-      {{ text }}
+      <div class="opacity-64">
+        {{ text }}
+      </div>
     </div>
   </div>
 </template>
@@ -45,6 +47,7 @@ const props = defineProps<{
   title?: string
   text?: string
   responsive?: boolean
+  iconClass?: string
 }>()
 const { getColorCode } = useVuetifyColor()
 const bgColor = computed(() => props.color ? getColorCode(props.color) : undefined)

xmcl-keystone-ui/src/components/HomeCard.vue

@@ -5,7 +5,6 @@
     style="box-sizing: border-box"
     outlined
     :style="{
-      borderColor: mouse > 0 ? 'white' : '',
       'backdrop-filter': `blur(${blurCard}px)`,
     }"
     :color="highlighted ? 'yellow darken-2' : cardColor"
@@ -99,7 +98,7 @@
         <v-icon class="material-icons-outlined" left>
           {{ additionButton.icon || 'add' }}
         </v-icon>
-        <span>
+        <span class="pr-1">
           {{ additionButton.text }}
         </span>
       </v-btn>
@@ -169,6 +168,11 @@ const highlighted = computed(() => globalDragover.value && dragover.value > 0)
   width: 100%;
 }
 
+.home-card .v-card__title {
+  padding: 8px 16px;
+  font-size: 1rem;
+}
+
 .btn {
   display: none;
 }

xmcl-keystone-ui/src/composables/instance.ts

@@ -31,6 +31,7 @@ export function useInstance(path: Ref<string>, instances: Ref<Instance[]>) {
   const instance = computed(() => instances.value.find(i => i.path === path.value) ?? EMPTY_INSTANCE)
   const runtime = computed(() => instance.value.runtime)
   const name = computed(() => instance.value.name)
+  const description = computed(() => instance.value.description)
   const isServer = computed(() => instance.value.server !== null)
   const select = (p: string) => {
     path.value = p
@@ -44,6 +45,7 @@ export function useInstance(path: Ref<string>, instances: Ref<Instance[]>) {
     isServer,
     select,
     instance,
+    description,
     refreshing: computed(() => false),
   }
 }

xmcl-keystone-ui/src/composables/launchButton.ts

@@ -90,7 +90,7 @@ export function useLaunchButton() {
         return {
           text: t('launch.launch'),
           color: !javaIssue.value ? 'primary' : 'primary darken-1',
-          leftIcon: 'play_arrow',
+          icon: 'play_arrow',
           onClick: async () => {
             await fixInstanceFileIssue()
             if (javaIssue.value) {
@@ -140,7 +140,7 @@ export function useLaunchButton() {
       return {
         text: t('launch.launch'),
         color: !javaIssue.value ? 'primary' : 'primary darken-1',
-        leftIcon: 'play_arrow',
+        icon: 'play_arrow',
         onClick: async () => {
           await fixInstanceFileIssue()
           if (javaIssue.value) {
@@ -168,7 +168,6 @@ export function useLaunchButton() {
     loadingInstanceFiles.value ||
     isValidating.value ||
     dirty.value)
-  const leftIcon = computed(() => launchButtonFacade.value.leftIcon)
   const menuItems = computed<LaunchMenuItem[]>(() => dirty.value ? [] : launchButtonFacade.value.menu || [])
 
   const listeners = new Set<() => void | Promise<void>>()
@@ -207,7 +206,6 @@ export function useLaunchButton() {
     icon,
     text,
     loading,
-    leftIcon,
     menuItems,
   }
 }

xmcl-keystone-ui/src/index.html

@@ -10,7 +10,7 @@
     <script src="http://launcher/flights"></script>
 </head>
 
-<body class="flex-1 overflow-y-auto">
+<body class="flex-1 overflow-hidden">
     <div id="app"></div>
     <script type="module" src="./windows/main/index.ts"></script>
 </body>

xmcl-keystone-ui/src/views/AppBackground.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute z-0 h-full w-full">
+  <div class="absolute z-0 h-full w-full ovferflow-hidden">
     <Particles
       v-if="backgroundType === BackgroundType.PARTICLE"
       color="#dedede"
@@ -15,7 +15,7 @@
     <img
       v-else-if="backgroundImage?.type === 'image' && backgroundType === BackgroundType.IMAGE"
       :src="backgroundImage.url"
-      class="absolute z-0 h-full w-full"
+      class="absolute z-0 h-[calc(100vh+16px)] w-[calc(100vw+16px)] -top-2 -left-2"
       :style="{ filter: `blur(${blur}px)`, 'object-fit': backgroundImageFit }"
     >
     <video

xmcl-keystone-ui/src/views/AppSideBar.vue

@@ -4,22 +4,22 @@
     permanent
     :mini-variant="true"
     :color="sideBarColor"
-    class="sidebar moveable z-10 rounded-[0.75rem]"
+    class="sidebar moveable z-10 rounded-lg shadow-lg"
     :style="{ 'backdrop-filter': `blur(${blurSidebar}px)` }"
   >
     <v-list
       nav
       dense
-      class="ml-1 px-2"
+      class="px-2"
     >
-      <v-list-item
+      <!-- <v-list-item
         class="non-moveable"
         @click="goBack"
       >
-        <v-icon class="text-[18px]">
+        <v-icon :size="22">
           arrow_back
         </v-icon>
-      </v-list-item>
+      </v-list-item> -->
 
       <v-list-item
         id="my-stuff-button"
@@ -30,7 +30,7 @@
         class="non-moveable"
       >
         <v-list-item-icon>
-          <v-icon> widgets </v-icon>
+          <v-icon :size="22"> home </v-icon>
         </v-list-item-icon>
         <v-list-item-title v-text="t('myStuff')" />
       </v-list-item>
@@ -43,23 +43,20 @@
         class="non-moveable"
       >
         <v-list-item-icon>
-          <v-icon
-            :size="28"
-          >
-            store
-          </v-icon>
+          <v-icon :size="22">store</v-icon>
         </v-list-item-icon>
         <v-list-item-title v-text="t('store.name', 2)" />
       </v-list-item>
-      <v-divider />
     </v-list>
 
+    <v-divider class="mx-2" />
+
     <AppSideBarContentNext />
 
-    <v-list
+    <!-- <v-list
       nav
       dense
-      class="ml-1 px-2"
+      class="px-2"
       style=""
     >
       <v-list-item
@@ -69,18 +66,20 @@
         @click="goMultiplayer"
       >
         <v-list-item-icon>
-          <v-icon
-            :size="23"
-          >
-            hub
-          </v-icon>
+          <v-icon :size="22">hub</v-icon>
         </v-list-item-icon>
         <v-list-item-title>{{ t('multiplayer.name') }}</v-list-item-title>
       </v-list-item>
+    </v-list> -->
+
+    <!-- <v-divider class="mx-2 block" /> -->
 
-      <v-divider
-        class="mx-1 block"
-      />
+    <v-list
+      nav
+      dense
+      class="px-2"
+      style=""
+    >
 
       <v-list-item
         v-shared-tooltip.right="_ => t('setting.name', 2)"
@@ -98,9 +97,7 @@
             <template #badge>
               <span>{{ 1 }}</span>
             </template>
-            <v-icon>
-              settings
-            </v-icon>
+            <v-icon :size="22">settings</v-icon>
           </v-badge>
         </v-list-item-icon>
         <v-list-item-title>{{ t('setting.name', 2) }}</v-list-item-title>
@@ -127,22 +124,41 @@ function goBack() {
   back()
 }
 
-function goMultiplayer() {
-  windowController.openMultiplayerWindow()
-}
-
 </script>
 
 <style scoped>
 .sidebar {
-  min-width: 80px;
-  max-height: 100%;
+  width: 64px !important;
+  min-width: 64px !important;
+  margin-left: 16px;
+  max-height: calc(100% - 16px);
   display: flex;
   flex-direction: column;
+  border: none !important;
   /* @apply rounded-r-xl border-r-[hsla(0,0%,100%,.12)]; */
 }
 </style>
 <style>
+.sidebar .v-navigation-drawer__border {
+  display: none;
+}
+
+.sidebar .v-list-item {
+  min-width: 48px !important;
+  min-height: 48px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s ease;
+}
+
+.sidebar .v-list-item .v-list-item__icon {
+  margin: auto;
+}
+
+.sidebar .v-list-item:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
 
 .dark .sidebar .theme--dark.v-icon {
   color: var(--icon-color);
@@ -154,12 +170,17 @@ function goMultiplayer() {
 
 .dark .sidebar .v-list-item:hover {
   --icon-color: #fff;
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .v-navigation-drawer__content {
   @apply flex flex-col flex-grow-0 h-full;
 }
 
+.sidebar .v-list .v-list-item--active {
+  color: var(--color-primary);
+}
+
 .sidebar .v-list .v-list-item--active, .v-list .v-list-item--active .v-icon {
   /* color: #4caf50 !important; */
   color: var(--color-primary);
@@ -169,16 +190,11 @@ function goMultiplayer() {
   @apply text-white;
 }
 
-.sidebar .theme--dark.v-list-item--active:hover:before {
-  opacity: .5;
-}
-
 .sidebar .theme--light.v-list-item--active:before {
-  opacity: .25;
-  background-color: gray;
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 .avatar .v-list-group__header.v-list-item--active:not(:hover):not(:focus):before {
-  opacity: .24;
 }
 </style>