Update discussion settings

packages/frontend-2/components/viewer/comments/Panel.vue

@@ -1,54 +1,51 @@
 <template>
   <ViewerLayoutSidePanel>
-    <template #title>Discussions</template>
-    <div class="px-4 py-1 border-b border-outline-2">
-      <FormButton
-        text
-        size="sm"
-        color="subtle"
-        :icon-right="showVisibilityOptions ? ChevronUpIcon : ChevronDownIcon"
-        @click="showVisibilityOptions = !showVisibilityOptions"
-      >
-        Discussion visibility options
-      </FormButton>
-    </div>
-    <div class="flex flex-col">
-      <div
-        v-show="showVisibilityOptions"
-        class="sticky top-10 px-2 py-1.5 flex flex-col gap-y-0.5 border-b border-outline-2 bg-foundation"
-      >
+    <template #title>
+      <span>Discussions</span>
+    </template>
+    <template #actions>
+      <div class="relative pr-2">
         <FormButton
+          ref="settingsButtonRef"
+          hide-text
           size="sm"
-          :icon-left="!hideBubbles ? CheckCircleIcon : CheckCircleIconOutlined"
-          text
-          class="!text-foreground"
-          @click="hideBubbles = !hideBubbles"
-        >
-          Show in 3D model
-        </FormButton>
+          color="subtle"
+          :icon-left="settingsIcon"
+          :class="showVisibilityOptions ? '!text-primary-focus !bg-info-lighter' : ''"
+          @click="showVisibilityOptions = !showVisibilityOptions"
+        />
 
-        <FormButton
-          size="sm"
-          :icon-left="includeArchived ? CheckCircleIcon : CheckCircleIconOutlined"
-          text
-          class="!text-foreground"
-          @click="includeArchived = includeArchived ? undefined : 'includeArchived'"
+        <ViewerLayoutPanel
+          v-if="showVisibilityOptions"
+          class="absolute right-2 top-full w-56 z-50"
         >
-          Show resolved ({{ commentThreadsMetadata?.totalArchivedCount }})
-        </FormButton>
-
-        <FormButton
-          size="sm"
-          :icon-left="loadedVersionsOnly ? CheckCircleIcon : CheckCircleIconOutlined"
-          text
-          class="!text-foreground"
-          @click="
-            loadedVersionsOnly = loadedVersionsOnly ? undefined : 'loadedVersionsOnly'
-          "
-        >
-          Exclude threads from other versions
-        </FormButton>
+          <div class="p-1">
+            <ViewerMenuItem
+              label="Show in 3D model"
+              :active="!hideBubbles"
+              @click="hideBubbles = !hideBubbles"
+            />
+            <ViewerMenuItem
+              :label="`Show resolved (${
+                commentThreadsMetadata?.totalArchivedCount || 0
+              })`"
+              :active="!!includeArchived"
+              @click="includeArchived = includeArchived ? undefined : 'includeArchived'"
+            />
+            <ViewerMenuItem
+              label="Exclude threads from other versions"
+              :active="!!loadedVersionsOnly"
+              @click="
+                loadedVersionsOnly = loadedVersionsOnly
+                  ? undefined
+                  : 'loadedVersionsOnly'
+              "
+            />
+          </div>
+        </ViewerLayoutPanel>
       </div>
+    </template>
+    <div class="flex flex-col">
       <div class="flex flex-col gap-y-2 p-1">
         <ViewerCommentsListItem
           v-for="thread in commentThreads"
@@ -71,12 +68,7 @@
 </template>
 <script setup lang="ts">
 import { graphql } from '~~/lib/common/generated/gql'
-import {
-  CheckCircleIcon,
-  ChevronDownIcon,
-  ChevronUpIcon
-} from '@heroicons/vue/24/solid'
-import { CheckCircleIcon as CheckCircleIconOutlined } from '@heroicons/vue/24/outline'
+import type { ConcreteComponent } from 'vue'
 import {
   useInjectedViewerInterfaceState,
   useInjectedViewerLoadedResources,
@@ -127,6 +119,7 @@ const {
 const canPostComment = useCheckViewerCommentingAccess()
 
 const showVisibilityOptions = ref(false)
+const settingsIcon = resolveComponent('IconViewerSettings') as ConcreteComponent
 
 const loadedVersionsOnly = computed({
   get: () =>

packages/frontend-2/components/viewer/controls/Left.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
 <template>
   <aside
-    class="absolute left-2 lg:left-0 top-[3.5rem] z-20 flex rounded-lg border border-outline-2 bg-foundation px-1 h-full"
+    class="absolute left-2 lg:left-0 top-[3.5rem] z-20 flex rounded-lg border border-outline-2 bg-foundation px-1 h-full overflow-visible"
     :class="[
       isEmbedEnabled
         ? ''
@@ -98,11 +98,13 @@
     <div
       ref="scrollableControlsContainer"
       :class="[
-        'simple-scrollbar bg-foundation absolute z-10 left-[calc(2.5rem+1px)] top-[-1px] bottom-[-1px] overflow-y-auto border-outline-2 border border-l-0 rounded-lg rounded-tl-none rounded-bl-none',
+        'simple-scrollbar bg-foundation absolute z-10 left-[calc(2.5rem+1px)] top-[-1px] bottom-[-1px] overflow-y-auto overflow-x-visible border-outline-2 border border-l-0 rounded-lg rounded-tl-none rounded-bl-none',
         hasActivePanel ? 'opacity-100' : 'opacity-0',
         isEmbedEnabled ? '' : 'lg:left-[calc(3rem+1px)] lg:border-none lg:rounded-none'
       ]"
-      :style="`width: ${isMobile ? 'calc(100vw - 3.75rem)' : `${width + 4}px`};`"
+      :style="`width: ${
+        isMobile ? 'calc(100vw - 3.75rem)' : `${width + 4}px`
+      }; overflow-x: visible !important;`"
     >
       <ViewerModelsPanel
         v-if="resourceItems.length !== 0 && activePanel === 'models'"

packages/frontend-2/components/viewer/menu/Item.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     v-tippy="description ? description : undefined"
-    class="flex items-center justify-between hover:bg-highlight-1 text-foreground w-full h-full text-body-2xs py-1.5 pr-2 pl-1 rounded-md"
+    class="flex items-center justify-between hover:bg-highlight-1 text-foreground w-full h-full text-body-2xs py-1.5 pr-2 pl-1 rounded-md font-normal"
   >
     <div class="w-5 shrink-0">
       <IconCheck v-if="active && !hideActiveTick" class="h-4 w-4 text-foreground-2" />