Explode menu definemodel

specklesystems · Dec 12, 2024 · c727bd2 · c727bd2
1 parent 7510766
commit c727bd2
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 34 deletions.
diff --git a/packages/frontend-2/components/viewer/Controls.vue b/packages/frontend-2/components/viewer/Controls.vue
@@ -136,8 +136,11 @@
             </ViewerControlsButtonToggle>
 
             <!-- Explosion -->
-            <ViewerExplodeMenu v-tippy="isSmallerOrEqualSm ? undefined : 'Explode'" />
-
+            <ViewerExplodeMenu
+              :open="explodeOpen"
+              @force-close-others="activeControl = 'none'"
+              @update:open="(value: boolean) => toggleActiveControl(value ? 'explode' : 'none')"
+            />
             <!-- Settings -->
             <ViewerSettingsMenu />
           </ViewerControlsButtonGroup>
@@ -511,4 +514,11 @@ const viewsOpen = computed({
     activeControl.value = value ? 'views' : 'none'
   }
 })
+
+const explodeOpen = computed({
+  get: () => activeControl.value === 'explode',
+  set: (value) => {
+    activeControl.value = value ? 'explode' : 'none'
+  }
+})
 </script>
diff --git a/packages/frontend-2/components/viewer/explode/Menu.vue b/packages/frontend-2/components/viewer/explode/Menu.vue
@@ -1,44 +1,46 @@
 <template>
-  <div class="relative z-30">
-    <Popover as="div" class="relative z-30">
-      <PopoverButton v-slot="{ open }" as="template">
-        <ViewerControlsButtonToggle flat secondary :active="open || isActive">
-          <!-- <ChevronUpDownIcon class="w-5 h-5 rotate-45" /> -->
-          <IconExplode class="h-4 w-4 sm:h-5 sm:w-5" />
-        </ViewerControlsButtonToggle>
-      </PopoverButton>
-      <PopoverPanel
-        class="absolute translate-x-0 left-12 top-0 p-2 bg-foundation max-h-64 simple-scrollbar overflow-y-auto outline outline-2 outline-primary-muted rounded-lg shadow-lg overflow-hidden flex flex-col space-y-2"
-      >
-        <div class="flex items-center space-x-1">
-          <input
-            id="intensity"
-            v-model="explodeFactor"
-            class="w-24 sm:w-32 h-2 mr-2"
-            type="range"
-            name="intensity"
-            min="0"
-            max="1"
-            step="0.01"
-          />
-          <label class="text-body-xs text-foreground-2" for="intensity">
-            Intensity
-          </label>
-        </div>
-      </PopoverPanel>
-    </Popover>
-  </div>
+  <ViewerMenu
+    v-model:open="open"
+    v-tippy="isSmallerOrEqualSm ? undefined : 'Explode'"
+    tooltip="Explode model"
+  >
+    <template #trigger-icon>
+      <IconExplode
+        class="h-4 w-4 sm:h-5 sm:w-5"
+        :class="{ 'text-foreground-2': !isActive }"
+      />
+    </template>
+    <div class="w-56 p-2 flex flex-col space-y-2">
+      <div class="flex items-center space-x-1">
+        <input
+          id="intensity"
+          v-model="explodeFactor"
+          class="w-24 sm:w-32 h-2 mr-2"
+          type="range"
+          name="intensity"
+          min="0"
+          max="1"
+          step="0.01"
+        />
+        <label class="text-body-xs text-foreground-2" for="intensity">Intensity</label>
+      </div>
+    </div>
+  </ViewerMenu>
 </template>
+
 <script setup lang="ts">
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import { useMixpanel } from '~~/lib/core/composables/mp'
-// import { ChevronUpDownIcon } from '@heroicons/vue/24/outline'
 import { useInjectedViewerState } from '~~/lib/viewer/composables/setup'
+import { useIsSmallerOrEqualThanBreakpoint } from '~~/composables/browser'
+
+const open = defineModel<boolean>('open', { required: true })
 
 const {
   ui: { explodeFactor }
 } = useInjectedViewerState()
 
+const { isSmallerOrEqualSm } = useIsSmallerOrEqualThanBreakpoint()
+
 const isActive = computed(() => {
   return explodeFactor.value > 0.01
 })

diff --git a/packages/frontend-2/components/viewer/menu/Menu.vue b/packages/frontend-2/components/viewer/menu/Menu.vue
@@ -12,7 +12,7 @@
     <div
       v-if="open"
       v-keyboard-clickable
-      class="absolute translate-x-0 left-10 sm:left-12 -top-0 sm:-top-2 bg-foundation max-h-64 simple-scrollbar overflow-y-auto rounded-lg shadow-md flex flex-col"
+      class="absolute translate-x-0 left-10 sm:left-12 -top-0 bg-foundation max-h-64 simple-scrollbar overflow-y-auto rounded-lg shadow-md flex flex-col"
     >
       <slot />
     </div>