feat: adjust ui

zyyv · Dec 23, 2023 · 93cd34d · 93cd34d
1 parent 8e4e26e
commit 93cd34d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 9 deletions.
diff --git a/src/components/Animate.vue b/src/components/Animate.vue
@@ -13,20 +13,43 @@ const classList = computed(() => [
   hasDuration(name) ? '' : 'important-animate-duration-1500',
   'important-animate-count-infinite',
 ])
+
+const { copy, copied } = useClipboard()
+
+function handleCopy(value: string) {
+  try {
+    copy(`animate-${value}`)
+    // alert('Copied!')
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error)
+  }
+}
 </script>
 
 <template>
   <div
-    aspect="1/1" w-full fcc rd-2 bg="#333" ring="~ [hsla(0,0%,100%,.1)]" trans :class="{
-      'group': !isOpenAnimate,
+    aspect="1/1" bg="#333" ring="~ [hsla(0,0%,100%,.1)]" pr w-full fcc of-hidden rd-2 trans class="group" :class="{
       'hover-cursor-pointer': hoverable,
       'hover-ring-[hsla(0,0%,100%,.5)]': hoverable,
-      'hover-text-purple-400': hoverable,
+      'text-#999': hoverable,
     }"
   >
     <div v-if="type === 'text'" :class="classList">
       {{ name }}
     </div>
     <div v-else-if="type === 'radio'" w="15%" h="15%" rd bg=" [hsla(0,0%,100%,.5)]" :class="classList" />
+
+    <div
+      v-if="hoverable" bottom="-20%" class="h-20%"
+      bg="black op-10" pa left-0 right-0 z-1 fcc gap-2 px-2 trans group-hover-bottom-0 @click.stop="handleCopy(name)"
+    >
+      <div line-clamp-1>
+        {{ name }}
+      </div>
+      <div v-if="copied" i-ri-check-line shrink-0 />
+      <div v-else i-ri-file-copy-line shrink-0 />
+    </div>
   </div>
 </template>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
@@ -11,7 +11,7 @@ const keyframeCSS = computedAsync(async () => {
   return await codeToHtml(fotmatkeyframeCSS.value, { lang: 'css', theme: 'vitesse-dark' })
 })
 
-const { copy } = useClipboard()
+const { copy, copied } = useClipboard()
 
 function handleCopy(value: string) {
   try {
@@ -63,10 +63,13 @@ watchEffect(() => {
           </span>
         </p>
         <div pr w-full>
-          <div
-            i-ri:clipboard-line pa right-4 top-8 cursor-pointer hover-i-ri:clipboard-fill
-            @click="handleCopy(fotmatkeyframeCSS)"
-          />
+          <div pa right-4 top-8 cursor-pointer>
+            <div v-if="copied" i-ri-check-line />
+            <div v-else
+              i-ri:clipboard-line hover-i-ri:clipboard-fill
+              @click="handleCopy(fotmatkeyframeCSS)"
+            />
+          </div>
           <div v-html="keyframeCSS" />
         </div>
       </div>

diff --git a/src/components/Preview.vue b/src/components/Preview.vue
@@ -7,7 +7,8 @@ function handleClicked(keyframeName: string) {
 
 <template>
   <main
-    grid="~ cols-2 sm:cols-4 md:cols-5 xl:cols-6 2xl:cols-7 gap-5"
+    grid="~ cols-2 sm:cols-3 xl:cols-5 2xl:cols-6"
+    gap="4 sm:2vw xl:1vw"
     w-full of-hidden p-4 trans
   >
     <template v-if="All_Animations">