FE2 - Visual improvements from pairing with Agi (#2111)

* Small tweaks from Agi List * Reset Filters Animation * Changes to Scene Explorer Filtering * WIP * New Versions Icon * Add SunLightShadows * Small changes pre CR * Remove unneeded prosp
specklesystems · Mar 12, 2024 · 84a485d · 84a485d
1 parent c26b188
commit 84a485d
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 65 deletions.
diff --git a/packages/frontend-2/app.vue b/packages/frontend-2/app.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     id="speckle"
-    class="bg-foundation-page text-foreground has-[.viewer-transparent]:!bg-transparent"
+    class="bg-foundation-page text-foreground has-[.viewer]:!overflow-hidden has-[.viewer-transparent]:!bg-transparent"
   >
     <NuxtLayout>
       <NuxtPage />

diff --git a/packages/frontend-2/components/global/icon/Versions.vue b/packages/frontend-2/components/global/icon/Versions.vue
@@ -0,0 +1,24 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 8V12L14 14"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M3.05005 10.9999C3.27414 8.8 4.30031 6.75956 5.93278 5.26791C7.56525 3.77627 9.68974 2.93783 11.9009 2.91257C14.1121 2.88732 16.2552 3.67701 17.9213 5.13098C19.5874 6.58495 20.6599 8.60142 20.9342 10.7957C21.2085 12.9899 20.6654 15.2084 19.4084 17.0277C18.1515 18.8471 16.2687 20.14 14.1193 20.6598C11.97 21.1796 9.70446 20.8899 7.75504 19.846C5.80563 18.8021 4.30877 17.077 3.55005 14.9999M3.05005 19.9999V14.9999H8.05005"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/packages/frontend-2/components/project/page/models/Card.vue b/packages/frontend-2/components/project/page/models/Card.vue
@@ -72,12 +72,12 @@
             v-tippy="'View Version Gallery'"
             rounded
             size="xs"
-            :icon-left="ArrowPathRoundedSquareIcon"
             :to="modelVersionsRoute(projectId, model.id)"
-            :class="`transition ${
+            :class="`transition gap-0.5 ml-1 ${
               hovered ? 'inline-block opacity-100' : 'sm:hidden sm:opacity-0'
             }`"
           >
+            <IconVersions class="h-4 w-4" />
             {{ versionCount }}
           </FormButton>
           <ProjectPageModelsActions
@@ -125,10 +125,7 @@ import type {
   ProjectPageLatestItemsModelItemFragment,
   ProjectPageModelsCardProjectFragment
 } from '~~/lib/common/generated/gql/graphql'
-import {
-  ArrowPathRoundedSquareIcon,
-  ChatBubbleLeftRightIcon
-} from '@heroicons/vue/24/solid'
+import { ChatBubbleLeftRightIcon } from '@heroicons/vue/24/solid'
 import { modelRoute, modelVersionsRoute } from '~~/lib/common/helpers/route'
 import { graphql } from '~~/lib/common/generated/gql'
 import { canModifyModels } from '~~/lib/projects/helpers/permissions'

diff --git a/packages/frontend-2/components/project/page/models/StructureItem.vue b/packages/frontend-2/components/project/page/models/StructureItem.vue
@@ -106,9 +106,10 @@
               v-if="!isPendingFileUpload(item) && item.model"
               rounded
               size="xs"
-              :icon-left="ArrowPathRoundedSquareIcon"
               :to="modelVersionsRoute(project.id, item.model.id)"
+              class="gap-0.5"
             >
+              <IconVersions class="h-4 w-4" />
               {{ model?.versionCount.totalCount }}
             </FormButton>
           </div>
@@ -231,7 +232,6 @@ import {
   CubeIcon,
   CubeTransparentIcon,
   PlusIcon,
-  ArrowPathRoundedSquareIcon,
   ChatBubbleLeftRightIcon,
   ArrowTopRightOnSquareIcon
 } from '@heroicons/vue/24/solid'

diff --git a/packages/frontend-2/components/viewer/GlobalFilterReset.vue b/packages/frontend-2/components/viewer/GlobalFilterReset.vue
@@ -1,20 +1,11 @@
 <template>
   <div
-    v-show="hasAnyFiltersApplied"
-    class="bg-pink-300/0 flex justify-center items-center pointer-events-none"
+    class="bg-pink-300/0 flex justify-center items-center pointer-events-none transition-all duration-300 ease-in overflow-hidden h-8"
+    :class="hasAnyFiltersApplied ? 'translate-y-0' : 'translate-y-16'"
   >
-    <Transition
-      enter-active-class="transform ease-out duration-300 transition"
-      enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-      enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-      leave-active-class="transition ease-in duration-100"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <FormButton size="xs" class="pointer-events-auto" @click="trackAndResetFilters">
-        Reset Filters
-      </FormButton>
-    </Transition>
+    <FormButton size="sm" class="pointer-events-auto" @click="trackAndResetFilters">
+      Reset Filters
+    </FormButton>
   </div>
 </template>
 <script setup lang="ts">

diff --git a/packages/frontend-2/components/viewer/explorer/Filters.vue b/packages/frontend-2/components/viewer/explorer/Filters.vue
@@ -1,8 +1,9 @@
 <template>
   <ViewerLayoutPanel class="mt-2" hide-close>
+    <template #title>Filtering</template>
     <template #actions>
       <div class="flex justify-between items-center w-full">
-        <div>
+        <div class="-mt-1">
           <FormButton
             v-tippy="'Change Filter'"
             text
@@ -13,38 +14,40 @@
           >
             {{ title.split('.').reverse()[0] || title || 'No Title' }}
           </FormButton>
+        </div>
+        <div class="flex gap-1 divide-x divide-outline-3">
           <FormButton
             v-if="title !== 'Object Type'"
             text
             size="xs"
+            class="flex gap-1"
             @click="
               ;(showAllFilters = false),
                 removePropertyFilter(),
                 refreshColorsIfSetOrActiveFilterIsNumeric()
             "
           >
+            <ArrowPathIcon class="h-4 w-4" />
             Reset
           </FormButton>
-        </div>
-        <div>
           <FormButton
             v-tippy="'Toggle coloring'"
             size="xs"
             text
             @click="toggleColors()"
           >
-            <IconColouringOutline v-if="!colors" class="w-3 h-3 text-primary" />
-            <IconColouring v-else class="w-3 h-3 text-primary" />
+            <IconColouringOutline v-if="!colors" class="w-4 h-4 text-primary" />
+            <IconColouring v-else class="w-4 h-4 text-primary" />
           </FormButton>
         </div>
       </div>
     </template>
     <div
-      :class="`relative flex flex-col space-y-2 px-2 simple-scrollbar overflow-y-scroll overflow-x-hidden shadow-inner ${
-        showAllFilters ? 'h-44 visible py-2' : 'h-0 invisible py-1'
+      :class="`relative flex flex-col gap-0.5 simple-scrollbar overflow-y-scroll overflow-x-hidden shadow-inner ${
+        showAllFilters ? 'h-44 visible pb-2' : 'h-0 invisible py-1'
       } transition-[height] border-b-2 border-primary-muted`"
     >
-      <div class="sticky top-0">
+      <div class="sticky top-0 bg-foundation p-2 pb-1">
         <FormTextInput
           v-model="searchString"
           name="filter search"
@@ -53,26 +56,28 @@
           :show-clear="!!searchString"
         />
       </div>
-      <div
-        v-for="(filter, index) in relevantFiltersLimited"
-        :key="index"
-        class="text-xs px-1"
-      >
-        <button
-          class="block w-full text-left hover:bg-primary-muted transition truncate rounded-md py-[1px]"
-          @click="
-            ;(showAllFilters = false),
-              setPropertyFilter(filter),
-              refreshColorsIfSetOrActiveFilterIsNumeric()
-          "
+      <div>
+        <div
+          v-for="(filter, index) in relevantFiltersLimited"
+          :key="index"
+          class="text-xs"
         >
-          {{ filter.key }}
-        </button>
-      </div>
-      <div v-if="itemCount < relevantFiltersSearched.length" class="mb-2">
-        <FormButton size="xs" text full-width @click="itemCount += 30">
-          View More ({{ relevantFiltersSearched.length - itemCount }})
-        </FormButton>
+          <button
+            class="block w-full text-left hover:bg-primary-muted transition truncate rounded-md py-1 px-2 mx-2"
+            @click="
+              ;(showAllFilters = false),
+                setPropertyFilter(filter),
+                refreshColorsIfSetOrActiveFilterIsNumeric()
+            "
+          >
+            {{ filter.key }}
+          </button>
+        </div>
+        <div v-if="itemCount < relevantFiltersSearched.length" class="mb-2">
+          <FormButton size="xs" text full-width @click="itemCount += 30">
+            View More ({{ relevantFiltersSearched.length - itemCount }})
+          </FormButton>
+        </div>
       </div>
     </div>
     <div v-if="activeFilter">
@@ -89,6 +94,7 @@
 </template>
 <script setup lang="ts">
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/solid'
+import { ArrowPathIcon } from '@heroicons/vue/24/outline'
 import type {
   PropertyInfo,
   StringPropertyInfo,

diff --git a/packages/frontend-2/components/viewer/layout/Panel.vue b/packages/frontend-2/components/viewer/layout/Panel.vue
@@ -24,7 +24,7 @@
     </div>
     <div
       v-if="$slots.actions"
-      class="flex items-center py-1 sm:py-2 gap-2 px-2"
+      class="flex items-center h-8 gap-2 px-2 relative z-10"
       :class="
         moveActionsToBottom
           ? 'order-3 border-t border-outline-3 mt-2'

diff --git a/packages/frontend-2/components/viewer/resources/ModelCard.vue b/packages/frontend-2/components/viewer/resources/ModelCard.vue
@@ -42,8 +42,8 @@
           v-if="!showVersions"
           class="flex flex-none items-center space-x-1 text-xs font-bold"
         >
+          <IconVersions class="h-4 w-4" />
           <span>{{ model.versions?.totalCount }}</span>
-          <ArrowPathRoundedSquareIcon class="h-4 w-4" />
         </div>
         <div
           v-else
@@ -108,11 +108,7 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
 import { graphql } from '~~/lib/common/generated/gql'
-import {
-  XMarkIcon,
-  ArrowPathRoundedSquareIcon,
-  ChevronUpIcon
-} from '@heroicons/vue/24/solid'
+import { XMarkIcon, ChevronUpIcon } from '@heroicons/vue/24/solid'
 import type {
   ViewerLoadedResourcesQuery,
   ViewerModelVersionCardItemFragment

diff --git a/packages/frontend-2/components/viewer/resources/VersionCard.vue b/packages/frontend-2/components/viewer/resources/VersionCard.vue
@@ -44,7 +44,6 @@
         v-tippy="'Shows a summary of added, deleted and changed elements.'"
         size="xs"
         text
-        class="opacity-0 group-hover:opacity-100 transition"
         @click.stop="handleViewChanges"
       >
         View Changes

diff --git a/packages/frontend-2/components/viewer/sun/Menu.vue b/packages/frontend-2/components/viewer/sun/Menu.vue
@@ -14,9 +14,15 @@
       leave-to-class="opacity-0"
     >
       <PopoverPanel
-        class="absolute translate-x-0 left-10 sm:left-12 top-2 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"
+        class="absolute translate-x-0 left-10 sm:left-12 top-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">
+        <div class="p-2 border-b border-outline flex gap-2 items-center">
+          <div class="scale-90">
+            <FormSwitch v-model="sunlightShadows" />
+          </div>
+          <span class="text-foreground text-sm">Sun Shadows</span>
+        </div>
+        <div class="flex items-center gap-1 px-2">
           <input
             id="intensity"
             v-model="intensity"
@@ -31,7 +37,7 @@
             Intensity
           </label>
         </div>
-        <div class="flex items-center space-x-1">
+        <div class="flex items-center gap-1 px-2">
           <input
             id="elevation"
             v-model="elevation"
@@ -46,7 +52,7 @@
             Elevation
           </label>
         </div>
-        <div class="flex items-center space-x-1">
+        <div class="flex items-center gap-1 px-2">
           <input
             id="azimuth"
             v-model="azimuth"
@@ -61,7 +67,7 @@
             Azimuth
           </label>
         </div>
-        <div class="flex items-center space-x-1">
+        <div class="flex items-center gap-1 px-2 pb-2">
           <input
             id="indirect"
             v-model="indirectLightIntensity"
@@ -87,6 +93,7 @@ import { SunIcon } from '@heroicons/vue/24/outline'
 import { useInjectedViewerState } from '~~/lib/viewer/composables/setup'
 import { useMixpanel } from '~~/lib/core/composables/mp'
 import { debounce } from 'lodash-es'
+import { FormSwitch } from '@speckle/ui-components'
 
 const mp = useMixpanel()
 const debounceTrackLightConfigChange = debounce(() => {
@@ -116,4 +123,5 @@ const intensity = createLightConfigComputed('intensity')
 const elevation = createLightConfigComputed('elevation')
 const azimuth = createLightConfigComputed('azimuth')
 const indirectLightIntensity = createLightConfigComputed('indirectLightIntensity')
+const sunlightShadows = createLightConfigComputed('castShadow')
 </script>
diff --git a/packages/frontend-2/pages/projects/[id]/webhooks/index.vue b/packages/frontend-2/pages/projects/[id]/webhooks/index.vue
@@ -59,6 +59,7 @@
       <template #enabled="{ item }">
         <FormSwitch
           :model-value="!!item.enabled"
+          icons
           @update:model-value="(newValue) => onEnabledChange(item, newValue)"
         />
       </template>

diff --git a/packages/ui-components/src/components/form/Switch.vue b/packages/ui-components/src/components/form/Switch.vue
@@ -6,8 +6,14 @@
       :class="{ 'bg-primary': enabled, 'bg-primary-muted': !enabled }"
     >
       <div class="absolute inset-0 flex items-center gap-2 px-1 text-white">
-        <CheckIcon class="h-5 w-5 drop-shadow-md" />
-        <XMarkIcon class="h-5 w-5 drop-shadow-md" />
+        <CheckIcon
+          class="h-5 w-5 drop-shadow-md"
+          :class="icons ? 'opacity-100' : 'opacity-0'"
+        />
+        <XMarkIcon
+          class="h-5 w-5 drop-shadow-md"
+          :class="icons ? 'opacity-100' : 'opacity-0'"
+        />
       </div>
       <span
         class="scale-95 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
@@ -21,5 +27,9 @@
 import { Switch as HeadlessSwitch } from '@headlessui/vue'
 import { CheckIcon, XMarkIcon } from '@heroicons/vue/24/solid'
 
+defineProps<{
+  icons?: boolean
+}>()
+
 const enabled = defineModel<boolean>()
 </script>