feat(restore last session): improve design and add close button

Rule-34 · Jul 11, 2023 · e1e48a1 · e1e48a1
1 parent bafe397
commit e1e48a1
Showing 1 changed file with 40 additions and 33 deletions.
diff --git a/components/posts/RestoreLastSessionPopup.vue b/components/posts/RestoreLastSessionPopup.vue
@@ -4,6 +4,7 @@
   import qs from 'qs'
   import { TransitionChild, TransitionRoot } from '@headlessui/vue'
   import { useInterval } from '@vueuse/core'
+  import { XMarkIcon } from '@heroicons/vue/24/outline'
 
   const router = useRouter()
 
@@ -74,7 +75,7 @@
     return text
   })
 
-  function onClick() {
+  function onContinueClick() {
     if (!isPremium.value) {
       toast.error('[Premium feature] Restore last session is only available for Premium users')
       return
@@ -86,6 +87,11 @@
 
     window.location.assign(lastPostsPageUrl.toString())
   }
+
+  function onCloseClick() {
+    pauseCounter()
+    toggleMenu(false)
+  }
 </script>
 
 <template>
@@ -95,41 +101,42 @@
       as="template"
     >
       <div class="relative z-20">
-        <!--          <TransitionChild-->
-        <!--            as="template"-->
-        <!--            enter="ease-out duration-300"-->
-        <!--            enter-from="opacity-0"-->
-        <!--            enter-to="opacity-100"-->
-        <!--            leave="ease-in duration-200"-->
-        <!--            leave-from="opacity-100"-->
-        <!--            leave-to="opacity-0"-->
-        <!--          >-->
-        <!--            <div class="fixed inset-0 bg-base-1000/80 backdrop-blur transition-opacity" />-->
-        <!--          </TransitionChild>-->
-
-        <!-- Panel -->
+        <!-- Container -->
         <div
-          class="fixed inset-x-4 bottom-2"
-          style="filter: drop-shadow(0px -10px 30px #000) drop-shadow(0px 5px 20px #000)"
+          class="fixed inset-x-3 bottom-0"
+          style="filter: drop-shadow(0px -33px 30px #000)"
         >
-          <div class="flex min-h-full items-end justify-center p-2 text-center sm:items-center sm:p-0">
-            <TransitionChild
-              as="template"
-              enter="ease-out duration-300"
-              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enter-to="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leave-from="opacity-100 translate-y-0 sm:scale-100"
-              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
+          <!-- Panel -->
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="translate-y-full"
+            enter-to="translate-y-0"
+            leave="ease-in duration-200"
+            leave-from="translate-y-0"
+            leave-to="translate-y-full"
+          >
+            <div class="flex min-h-full items-end justify-center text-center">
+              <!-- Close button -->
+              <div class="absolute -top-12 right-0 z-10 flex w-16 justify-center">
+                <button
+                  class="focus-visible:focus-util hover:hover-bg-util rounded-md p-2.5"
+                  type="button"
+                  @click="onCloseClick"
+                >
+                  <span class="sr-only">Close menu</span>
+
+                  <XMarkIcon class="hover:hover-text-util h-6 w-6 text-base-content-highlight" />
+                </button>
+              </div>
+
               <div
-                class="relative w-full transform overflow-hidden rounded-lg bg-base-1000 px-4 pb-4 pt-5 text-left shadow-xl ring-1 ring-base-0/10 transition-all sm:my-8 sm:max-w-sm sm:p-6"
+                class="relative w-full transform overflow-hidden rounded-lg rounded-b-none bg-base-1000 p-4 text-left shadow-xl ring-1 ring-base-0/10 transition-all sm:max-w-sm sm:p-6"
                 @mouseout="resumeCounter"
                 @mouseover="pauseCounter"
                 @touchend="resumeCounter"
                 @touchstart="pauseCounter"
               >
-                <!-- TODO: Add dismiss button -->
                 <!-- TODO: Add dismiss forever button in dropdown -->
                 <div>
                   <h3 class="text-base font-medium leading-6 tracking-tight text-base-content-highlight">
@@ -145,24 +152,24 @@
                   <button
                     class="hover:hover-text-util focus-visible:focus-outline-util hover:hover-bg-util w-full rounded-md px-3 py-2 text-sm shadow-sm ring-1 ring-base-0/20"
                     type="button"
-                    @click="onClick"
+                    @click="onContinueClick"
                   >
                     Continue
                   </button>
                 </div>
 
                 <!-- Progress -->
-                <div class="absolute inset-x-0 bottom-0 h-0.5 w-full rounded-full bg-base-950">
+                <div class="absolute inset-x-0 bottom-0 h-1 w-full bg-base-950">
                   <span class="sr-only"> Percentage of time left until the popup closes </span>
 
                   <div
                     :style="{ width: `${counterPercentage}%` }"
-                    class="h-0.5 rounded-full bg-base-0/20 transition-all duration-300 ease-in-out"
+                    class="h-1 bg-base-0/20 transition-all duration-300 ease-in-out"
                   />
                 </div>
               </div>
-            </TransitionChild>
-          </div>
+            </div>
+          </TransitionChild>
         </div>
       </div>
     </TransitionRoot>