feat: modify favorite button style; add scroll-to-end button

OpenTreeHole · Jul 21, 2023 · 9ebebf5 · 9ebebf5
1 parent a12f23a
commit 9ebebf5
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/src/components/button/IconBtn.vue b/src/components/button/IconBtn.vue
@@ -1,6 +1,6 @@
 <template>
   <span :class="small ? 'px-1' : 'px-2'">
-    <span
+    <div
       :class="className"
       @click="$emit('click')"
     >
@@ -15,7 +15,7 @@
       >
         {{ text }}
       </span>
-    </span>
+    </div>
   </span>
 </template>
 

diff --git a/src/components/floor/FloorBlockAction.vue b/src/components/floor/FloorBlockAction.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex justify-end mt-2 overflow-visible">
+    <div class="flex justify-end py-2">
       <IconBtn
         :icon-class="
           floor instanceof DetailedFloor && floor.liked ? 'text-red-500' : 'text-neutral-400'

diff --git a/src/views/HolePage.vue b/src/views/HolePage.vue
@@ -5,18 +5,28 @@
         <div class="border-b-sm mt-2 pb-4">
           <div class="text-3xl px-6 lg:px-10 pb-2 flex justify-between">
             <div class="flex grow-0">#{{ holeId }}</div>
-            <div class="flex space-x-4">
+            <div class="flex space-x-4 items-center">
+              <div class="flex">
+                <IconBtn
+                  class="text-lg"
+                  @click="gotoEnd"
+                >
+                  mdi-arrow-collapse-down
+                </IconBtn>
+                <IconBtn
+                  class="text-lg"
+                  :class="isFavorite ? 'text-orange-300' : 'text-gray-400'"
+                  @click="toggleFavorite"
+                >
+                  {{ isFavorite ? 'mdi-star' : 'mdi-star-outline' }}
+                </IconBtn>
+              </div>
+
               <v-btn
                 color="primary"
                 @click="comment"
-                >发表评论</v-btn
               >
-              <v-btn
-                class="self-center"
-                color="primary"
-                @click="toggleFavorite"
-              >
-                {{ isFavorite ? '已收藏' : '收藏' }}
+                发表评论
               </v-btn>
             </div>
           </div>
@@ -66,7 +76,7 @@
             :id="floor.id"
             :key="`##${floor.id}, ${floor.fold}`"
             v-intersect="onIntersect(index)"
-            class="px-0 py-5 border-b-sm flex-col text-left"
+            class="px-0 pt-5 pb-3 border-b-sm flex-col text-left"
           >
             <FloorBlock
               v-model:floor="floors[index]"
@@ -113,6 +123,7 @@ import { useDivisionStore, useUserStore } from '@/store'
 import { useFloorPortal } from '@/composables/floor'
 import { useNotification } from '@/composables/notification'
 import LoadingCircular from '@/components/LoadingCircular.vue'
+import IconBtn from '@/components/button/IconBtn.vue'
 
 const props = defineProps<{ holeId: number; floorId?: number }>()
 
@@ -140,6 +151,11 @@ const scrollToFloor = (floor: Floor | number) => {
 
 provide('scrollToFloor', scrollToFloor)
 
+const gotoEnd = async () => {
+  await loadFloorsUntil(hole.value?.reply || 0)
+  scrollToFloor(floors[floors.length - 1])
+}
+
 const isFavorite = computed(() => {
   return userStore.favorites.some((favorite) => favorite.id === props.holeId)
 })