use Tailwind css

Comfy-Org · Feb 8, 2025 · 3b7886d · 3b7886d
1 parent 782d0d3
commit 3b7886d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 77 deletions.
diff --git a/src/components/load3d/Load3DAnimationControls.vue b/src/components/load3d/Load3DAnimationControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="controls-container">
+  <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
     <Load3DControls
       :backgroundColor="backgroundColor"
       :showGrid="showGrid"
@@ -9,9 +9,18 @@
       ref="load3dControlsRef"
     />
 
-    <div class="animation-controls" v-if="animations && animations.length > 0">
+    <div
+      v-if="animations && animations.length > 0"
+      class="absolute top-0 left-0 w-full flex justify-center pt-2 gap-2 items-center pointer-events-auto z-10"
+    >
       <Button class="p-button-rounded p-button-text" @click="togglePlay">
-        <i :class="['pi', playing ? 'pi-pause' : 'pi-play']"></i>
+        <i
+          :class="[
+            'pi',
+            playing ? 'pi-pause' : 'pi-play',
+            'text-white text-lg'
+          ]"
+        ></i>
       </Button>
 
       <Select
@@ -20,7 +29,7 @@
         optionLabel="name"
         optionValue="value"
         @change="speedChange"
-        class="speed-dropdown"
+        class="w-24"
       />
 
       <Select
@@ -29,7 +38,7 @@
         optionLabel="name"
         optionValue="index"
         @change="animationChange"
-        class="animation-dropdown"
+        class="w-32"
       />
     </div>
   </div>
@@ -87,7 +96,6 @@ const onUpdateBackgroundColor = (color: string) =>
 
 const togglePlay = () => {
   playing.value = !playing.value
-
   emit('togglePlay', playing.value)
 }
 
@@ -107,39 +115,3 @@ defineExpose({
   showGrid
 })
 </script>
-
-<style scoped>
-.controls-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-.animation-controls {
-  position: absolute;
-  top: 8px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  pointer-events: auto;
-  z-index: 2;
-}
-
-.pi {
-  color: white;
-  font-size: 1.2rem;
-}
-
-.speed-dropdown {
-  width: 5rem;
-}
-
-.animation-dropdown {
-  width: 8rem;
-}
-</style>
diff --git a/src/components/load3d/Load3DControls.vue b/src/components/load3d/Load3DControls.vue
@@ -1,27 +1,29 @@
 <template>
-  <div class="view-controls">
+  <div
+    class="absolute top-2 left-2 flex flex-col gap-2 pointer-events-auto z-20"
+  >
     <Button class="p-button-rounded p-button-text" @click="toggleCamera">
-      <i class="pi pi-camera"></i>
+      <i class="pi pi-camera text-white text-lg"></i>
     </Button>
 
     <Button
       class="p-button-rounded p-button-text"
       :class="{ 'p-button-outlined': showGrid }"
       @click="toggleGrid"
     >
-      <i class="pi pi-table"></i>
+      <i class="pi pi-table text-white text-lg"></i>
     </Button>
 
     <Button class="p-button-rounded p-button-text" @click="openColorPicker">
-      <i class="pi pi-palette"></i>
+      <i class="pi pi-palette text-white text-lg"></i>
       <input
         type="color"
         ref="colorPickerRef"
         :value="backgroundColor"
         @input="
           updateBackgroundColor(($event.target as HTMLInputElement).value)
         "
-        class="color-input"
+        class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
       />
     </Button>
   </div>
@@ -68,31 +70,3 @@ defineExpose({
   showGrid
 })
 </script>
-
-<style scoped>
-.view-controls {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  pointer-events: auto;
-  z-index: 2;
-}
-
-.pi {
-  color: white;
-  font-size: 1.2rem;
-}
-
-.color-input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  padding: 0;
-  margin: 0;
-  pointer-events: none;
-}
-</style>
diff --git a/src/extensions/core/load3d.ts b/src/extensions/core/load3d.ts
@@ -280,7 +280,7 @@ app.registerExtension({
 
     const [oldWidth, oldHeight] = node.size
 
-    node.setSize([Math.max(oldWidth, 300), Math.max(oldHeight, 700)])
+    node.setSize([Math.max(oldWidth, 400), Math.max(oldHeight, 700)])
 
     await nextTick()
 
@@ -414,7 +414,7 @@ app.registerExtension({
 
     const [oldWidth, oldHeight] = node.size
 
-    node.setSize([Math.max(oldWidth, 300), Math.max(oldHeight, 550)])
+    node.setSize([Math.max(oldWidth, 400), Math.max(oldHeight, 550)])
 
     await nextTick()