chore: refactor music table render

Discreater · Nov 9, 2023 · 0f013aa · 0f013aa
1 parent ccb61ef
commit 0f013aa
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 11 deletions.
diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue
@@ -97,7 +97,7 @@ const inTauri = getPlatform() === 'tauri';
       @keyup.enter="search"
     >
       <template #extra>
-        <QHoverButton size="small" :disabled="!searchText" @click="search">
+        <QHoverButton size="custom" :disabled="!searchText" @click="search">
           <IconSearch clip="text-xs" />
         </QHoverButton>
       </template>
@@ -120,7 +120,7 @@ const inTauri = getPlatform() === 'tauri';
       :placeholder="t('nav.search')" @keyup.enter="search"
     >
       <template #extra>
-        <QHoverButton size="small" :disabled="!searchText" @click="search">
+        <QHoverButton size="custom" :disabled="!searchText" @click="search">
           <IconSearch text="text-xs" />
         </QHoverButton>
       </template>

diff --git a/src/components/QHoverButton.vue b/src/components/QHoverButton.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-type Size = 'small' | 'normal';
+type Size = 'custom' | 'fixed';
 
 type Cursor = 'default' | 'pointer';
 
 const props = withDefaults(defineProps<{ disabled?: boolean; size?: Size; cursor?: Cursor }>(), {
   disabled: false,
-  size: 'normal',
+  size: 'fixed',
   cursor: 'default',
 });
 
-const buttonClass = props.size === 'small' ? 'my-0.5' : 'h-10 w-10';
+const buttonClass = props.size === 'custom' ? 'my-0.5' : 'h-10 w-10';
 </script>
 
 <template>

diff --git a/src/components/QInput.vue b/src/components/QInput.vue
@@ -39,7 +39,7 @@ function clear() {
       @focusout="focus = false"
       @input="onValueChange($event)"
     >
-    <QHoverButton v-if="showValue" size="small" @click="clear()">
+    <QHoverButton v-if="showValue" size="custom" @click="clear()">
       <IconDismiss class="text-xs" />
     </QHoverButton>
     <slot name="extra" />

diff --git a/src/pages/main/MusicLib.vue b/src/pages/main/MusicLib.vue
@@ -109,13 +109,15 @@ function handleTitleClick(track: Track) {
       <template #bodyCell="{ column, row, rowIdx }">
         <template v-if="column.key === 'actions'">
           <div class="flex">
-            <QButton class="text-passion" @click="playByIdx(rowIdx)">
-              <IconPlay />
-            </QButton>
+            <QHoverButton size="custom" class="text-passion h-8 w-8" @click="playByIdx(rowIdx)">
+              <IconPlay class="text-base" />
+            </QHoverButton>
           </div>
         </template>
         <template v-else-if="column.key === 'title'">
-          <QHoverButton :text="row.title" class="hover:text-passion text-left" @click="handleTitleClick(row)" />
+          <QHoverButton size="custom" class="hover:text-passion text-left" @click="handleTitleClick(row)">
+            {{ row.title }}
+          </QHoverButton>
         </template>
         <template v-else-if="column.key === 'artist'">
           <div>

diff --git a/src/pages/main/PlayQueue.vue b/src/pages/main/PlayQueue.vue
@@ -47,7 +47,9 @@ const columns: Column[] = [
     <QTable :columns="columns" :data="views">
       <template #bodyCell="{ column, row, rowIdx }">
         <template v-if="column.key === 'actions'">
-          <QHoverButton :icon="IconPlay" class="text-passion" @click="playByIdx(rowIdx)" />
+          <QHoverButton size="custom" class="text-passion h-8 w-8" @click="playByIdx(rowIdx)">
+            <IconPlay class="text-base" />
+          </QHoverButton>
         </template>
         <template v-else-if="column.key === 'title'">
           {{ row.title }}