feat: change the style

hoppscotch · Feb 29, 2024 · 4b73c89 · 4b73c89
1 parent 7f79ecd
commit 4b73c89
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 27 deletions.
diff --git a/packages/Toast.vue b/packages/Toast.vue
@@ -7,7 +7,7 @@
     ref="toastRef"
     data-sonner-toast=""
     :class="toastClass"
-    :data-styled="!isTitleComponent"
+    :data-styled="!Boolean(toast.unstyled || unstyled)"
     :data-mounted="mounted"
     :data-promise="Boolean(toast.promise)"
     :data-removed="removed"

diff --git a/packages/Toaster.vue b/packages/Toaster.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Remove item from normal navigation flow, only available via hotkey -->
   <section :aria-label="`${containerAriaLabel} ${hotkeyLabel}`" :tabIndex="-1">
-    <template v-for="pos in possiblePositions" :key="pos">
+    <template v-for="(pos, index) in possiblePositions" :key="pos">
       <ol
         ref="listRef"
         data-sonner-toaster
@@ -36,9 +36,15 @@
         @pointerdown="onPointerDown"
         @pointerup="interacting = false"
       >
-        <template v-for="(toast, index) in toasts" :key="toast.id">
+        <template
+          v-for="(toast, idx) in toasts.filter(
+            (toast) =>
+              (!toast.position && index === 0) || toast.position === position
+          )"
+          :key="toast.id"
+        >
           <Toast
-            :index="index"
+            :index="idx"
             :toast="toast"
             :duration="toastOptions?.duration ?? duration"
             :className="toastOptions?.className"
@@ -265,14 +271,15 @@ watchEffect((onInvalidate) => {
 
       // Update the toast if it already exists
       if (indexOfExistingToast !== -1) {
-        // toasts.value.splice(indexOfExistingToast, 1, toast)
-        toasts.value = [
-          ...toasts.value.slice(0, indexOfExistingToast),
-          { ...toasts.value[indexOfExistingToast], ...toast },
-          ...toasts.value.slice(indexOfExistingToast + 1)
-        ]
+        toasts.value.splice(indexOfExistingToast, 1, toast)
+        // toasts.value = [
+        //   ...toasts.value.slice(0, indexOfExistingToast),
+        //   { ...toasts.value[indexOfExistingToast], ...toast },
+        //   ...toasts.value.slice(indexOfExistingToast + 1)
+        // ]
+      } else {
+        toasts.value = [toast, ...toasts.value]
       }
-      toasts.value = [toast, ...toasts.value]
     })
   })
 

diff --git a/packages/styles.css b/packages/styles.css
@@ -134,8 +134,8 @@ html[dir='rtl'],
 
 [data-sonner-toast] [data-icon] {
   display: flex;
-  height: 20px;
-  width: 20px;
+  height: 16px;
+  width: 16px;
   position: relative;
   justify-content: flex-start;
   align-items: center;
@@ -180,8 +180,10 @@ html[dir='rtl'],
   border: none;
   cursor: pointer;
   outline: none;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
   transition: opacity 400ms, box-shadow 200ms;
-  z-index: 100;
 }
 
 [data-sonner-toast] [data-button]:focus-visible {
@@ -218,7 +220,6 @@ html[dir='rtl'],
   border: 1px solid var(--gray4);
   transform: var(--toast-close-button-transform);
   border-radius: 50%;
-  opacity: 0;
   cursor: pointer;
   z-index: 1;
   transition: opacity 100ms, background 200ms, border-color 200ms;
@@ -232,16 +233,6 @@ html[dir='rtl'],
   cursor: not-allowed;
 }
 
-[data-sonner-toast]:hover [data-close-button] {
-  opacity: 1;
-}
-[data-sonner-toast]:focus [data-close-button] {
-  opacity: 1;
-}
-[data-sonner-toast]:focus-within [data-close-button] {
-  opacity: 1;
-}
-
 [data-sonner-toast]:hover [data-close-button]:hover {
   background: var(--gray2);
   border-color: var(--gray5);
@@ -254,6 +245,7 @@ html[dir='rtl'],
   left: 0;
   right: 0;
   height: 100%;
+  z-index: -1;
 }
 
 [data-sonner-toast][data-y-position='top'][data-swiping='true']:before {
@@ -518,12 +510,12 @@ html[dir='rtl'],
   --size: 16px;
   height: var(--size);
   width: var(--size);
+  position: absolute;
   inset: 0;
   z-index: 10;
 }
 
 .sonner-loading-wrapper[data-visible='false'] {
-  display: none;
   transform-origin: center;
   animation: sonner-fade-out 0.2s ease forwards;
 }
@@ -549,7 +541,6 @@ html[dir='rtl'],
 
 .sonner-loading-bar:nth-child(1) {
   animation-delay: -1.2s;
-  /* Rotate trick to avoid adding an additional pixel in some sizes */
   transform: rotate(0.0001deg) translate(146%);
 }
 
@@ -647,3 +638,17 @@ html[dir='rtl'],
     animation: none !important;
   }
 }
+
+.sonner-loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: center;
+  transition: opacity 200ms, transform 200ms;
+}
+
+.sonner-loader[data-visible='false'] {
+  opacity: 0;
+  transform: scale(0.8) translate(-50%, -50%);
+}