fix: tooltip component

yilanboy · Oct 29, 2024 · 47de86d · 47de86d
1 parent b24f832
commit 47de86d
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 49 deletions.
diff --git a/resources/views/components/tooltip.blade.php b/resources/views/components/tooltip.blade.php
@@ -1,16 +1,17 @@
 @props([
     'tooltipText' => 'Copy link',
-    'clickText' => 'Copied!',
+    'clickText' => '',
     'tooltipPosition' => 'top',
 ])
 
 @script
   <script>
     Alpine.data('tooltip', () => ({
       tooltipVisible: false,
-      tooltipText: @js($tooltipText),
+      tooltipText: '',
+      clickText: '',
       tooltipArrow: true,
-      tooltipPosition: @js($tooltipPosition),
+      tooltipPosition: '',
 
       mouseEnterTooltip() {
         this.tooltipVisible = true;
@@ -21,8 +22,12 @@
       },
 
       clickTooltip() {
-        this.tooltipText = '{{ $clickText }}';
-        setTimeout(() => this.tooltipText = '{{ $tooltipText }}', 2000);
+        if (typeof this.clickText !== "string" || this.clickText.trim().length === 0) return;
+
+        const originalText = this.tooltipText;
+
+        this.tooltipText = this.clickText
+        setTimeout(() => this.tooltipText = originalText, 2000);
       },
 
       tooltipVisibleClassListBinging: {
@@ -56,12 +61,21 @@
             right: 'origin-top-right -rotate-45',
           } [this.tooltipPosition];
         }
+      },
+
+      init() {
+        this.tooltipText = this.$root.dataset.tooltipText;
+        this.clickText = this.$root.dataset.clickText;
+        this.tooltipPosition = this.$root.dataset.tooltipPosition;
       }
     }));
   </script>
 @endscript
 
 <div
+  data-tooltip-text="{{ $tooltipText }}"
+  data-click-text="{{ $clickText }}"
+  data-tooltip-position="{{ $tooltipPosition }}"
   {{ $attributes->merge(['class' => 'relative w-fit h-fit']) }}
   x-data="tooltip"
 >

diff --git a/resources/views/livewire/shared/comments/comment-card.blade.php b/resources/views/livewire/shared/comments/comment-card.blade.php
@@ -100,7 +100,7 @@ class="flex items-center hover:text-gray-500 dark:hover:text-gray-300"
 
   @if ($currentLayer < $maxLayer)
     <div
-      class="relative pl-8 before:absolute before:left-2 before:h-full before:w-1 before:rounded-full before:bg-green-400/20 before:contain-none dark:before:bg-indigo-500/20"
+      class="relative pl-8 before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:rounded-full before:bg-green-400/20 before:contain-none dark:before:bg-indigo-500/20"
       id="children-{{ $commentId }}"
     >
       <livewire:shared.comments.comment-group

diff --git a/resources/views/livewire/shared/posts/side-menu.blade.php b/resources/views/livewire/shared/posts/side-menu.blade.php
@@ -1,40 +1,62 @@
 <div class="sticky top-1/2 flex -translate-y-1/2 flex-col space-y-2">
   {{-- Home --}}
-  <a
-    class="group flex h-14 w-14 items-center justify-center text-gray-500 dark:text-gray-400"
-    href="{{ route('posts.index') }}"
-    role="button"
-    wire:navigate
+  <x-tooltip
+    :tooltip-text="'返回首頁'"
+    :tooltip-position="'right'"
   >
-    <x-icon.home class="w-6 text-2xl transition duration-150 ease-in group-hover:rotate-12 group-hover:scale-125" />
-  </a>
+    <a
+      class="group flex h-14 w-14 items-center justify-center text-gray-500 dark:text-gray-400"
+      href="{{ route('posts.index') }}"
+      role="button"
+      wire:navigate
+    >
+      <x-icon.home class="w-6 text-2xl transition duration-150 ease-in group-hover:rotate-12 group-hover:scale-125" />
+    </a>
+  </x-tooltip>
 
   <!-- Facebook share button -->
-  <button
-    class="group flex h-14 w-14 items-center justify-center text-gray-500 dark:text-gray-400"
-    data-sharer="facebook"
-    data-hashtag="{{ config('app.name') }}"
-    data-url="{{ request()->fullUrl() }}"
-    type="button"
+  <x-tooltip
+    :tooltip-text="'分享至 FB'"
+    :click-text="'好耶！'"
+    :tooltip-position="'right'"
   >
-    <x-icon.facebook class="w-6 text-2xl transition duration-150 ease-in group-hover:rotate-12 group-hover:scale-125" />
-  </button>
+    <button
+      class="group flex h-14 w-14 items-center justify-center text-gray-500 dark:text-gray-400"
+      data-sharer="facebook"
+      data-hashtag="{{ config('app.name') }}"
+      data-url="{{ request()->fullUrl() }}"
+      type="button"
+    >
+      <x-icon.facebook
+        class="w-6 text-2xl transition duration-150 ease-in group-hover:rotate-12 group-hover:scale-125" />
+    </button>
+  </x-tooltip>
 
   <!-- x share button -->
-  <button
-    class="group flex h-14 w-14 items-center justify-center text-gray-500 dark:text-gray-400"
-    data-sharer="x"
-    data-title="{{ $postTitle }}"
-    data-hashtags="{{ config('app.name') }}"
-    data-url="{{ request()->fullUrl() }}"
-    type="button"
+  <x-tooltip
+    :tooltip-text="'分享至 X'"
+    :click-text="'稍等...'"
+    :tooltip-position="'right'"
   >
-    <x-icon.twitter-x
-      class="w-6 text-2xl transition duration-150 ease-in group-hover:rotate-12 group-hover:scale-125" />
-  </button>
+    <button
+      class="group flex h-14 w-14 items-center justify-center text-gray-500 dark:text-gray-400"
+      data-sharer="x"
+      data-title="{{ $postTitle }}"
+      data-hashtags="{{ config('app.name') }}"
+      data-url="{{ request()->fullUrl() }}"
+      type="button"
+    >
+      <x-icon.twitter-x
+        class="w-6 text-2xl transition duration-150 ease-in group-hover:rotate-12 group-hover:scale-125" />
+    </button>
+  </x-tooltip>
 
   <!-- Copy link button -->
-  <x-tooltip :tooltip-position="'right'">
+  <x-tooltip
+    :tooltip-text="'複製連結'"
+    :click-text="'好囉！'"
+    :tooltip-position="'right'"
+  >
     <button
       class="group flex h-14 w-14 items-center justify-center text-gray-500 dark:text-gray-400"
       data-clipboard="{{ urldecode(request()->fullUrl()) }}"
@@ -50,26 +72,37 @@ class="w-6 text-2xl transition duration-150 ease-in group-hover:rotate-12 group-
   @if (auth()->id() === $authorId)
     <div class="h-[2px] w-14 bg-gray-300 dark:bg-gray-600"></div>
 
-    <a
-      class="group flex h-14 w-14 items-center justify-center text-gray-500 dark:text-gray-400"
-      href="{{ route('posts.edit', ['postId' => $postId]) }}"
-      role="button"
-      wire:navigate
+    <x-tooltip
+      :tooltip-text="'編輯文章'"
+      :tooltip-position="'right'"
     >
-      <x-icon.pencil-square
-        class="w-6 text-2xl transition duration-150 ease-in group-hover:rotate-12 group-hover:scale-125"
-      />
-    </a>
+      <a
+        class="group flex h-14 w-14 items-center justify-center text-gray-500 dark:text-gray-400"
+        href="{{ route('posts.edit', ['postId' => $postId]) }}"
+        role="button"
+        wire:navigate
+      >
+        <x-icon.pencil-square
+          class="w-6 text-2xl transition duration-150 ease-in group-hover:rotate-12 group-hover:scale-125"
+        />
+      </a>
+    </x-tooltip>
 
     {{-- 刪除 --}}
-    <button
-      class="group flex h-14 w-14 items-center justify-center text-gray-500 dark:text-gray-400"
-      type="button"
-      title="刪除文章"
-      wire:confirm="你確定要刪除文章嗎？（7 天之內可以還原）"
-      wire:click="destroy({{ $postId }})"
+    <x-tooltip
+      :tooltip-text="'刪除文章'"
+      :tooltip-position="'right'"
     >
-      <x-icon.trash class="w-6 text-2xl transition duration-150 ease-in group-hover:rotate-12 group-hover:scale-125" />
-    </button>
+      <button
+        class="group flex h-14 w-14 items-center justify-center text-gray-500 dark:text-gray-400"
+        type="button"
+        title="刪除文章"
+        wire:confirm="你確定要刪除文章嗎？（7 天之內可以還原）"
+        wire:click="destroy({{ $postId }})"
+      >
+        <x-icon.trash
+          class="w-6 text-2xl transition duration-150 ease-in group-hover:rotate-12 group-hover:scale-125" />
+      </button>
+    </x-tooltip>
   @endif
 </div>