fix(fe2): Update sidebar styles based on Michal's feedback (#2807)

* Updates from Michal video 1 * Fix openWorkspaceCreateDialog * Update color of + button * Change isUserAdmin to isNotGuest * Updated dialog * Updated condtion --------- Co-authored-by: Mike Tasset <mike.tasset@gmail.com>
specklesystems · Aug 29, 2024 · 62e0c9e · 62e0c9e
1 parent a0224e2
commit 62e0c9e
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 15 deletions.
diff --git a/packages/frontend-2/components/dashboard/Sidebar.vue b/packages/frontend-2/components/dashboard/Sidebar.vue
@@ -57,9 +57,9 @@
               collapsible
               title="Workspaces"
               :plus-click="
-                isUserAdmin
+                isNotGuest
                   ? () => {
-                      openWorkspaceCreateDialog
+                      openWorkspaceCreateDialog()
                     }
                   : undefined
               "
@@ -192,6 +192,7 @@ import { useRoute } from 'vue-router'
 import { useActiveUser } from '~~/lib/auth/composables/activeUser'
 import { HomeIcon } from '@heroicons/vue/24/outline'
 import { useMixpanel } from '~~/lib/core/composables/mp'
+import { Roles } from '@speckle/shared'
 
 const { isLoggedIn } = useActiveUser()
 const isWorkspacesEnabled = useIsWorkspacesEnabled()
@@ -210,7 +211,9 @@ const isActive = (...routes: string[]): boolean => {
   return routes.some((routeTo) => route.path === routeTo)
 }
 
-const isUserAdmin = computed(() => user.value?.role === 'server:admin')
+const isNotGuest = computed(
+  () => Roles.Server.Admin || user.value?.role === Roles.Server.User
+)
 
 const workspacesItems = computed(() =>
   workspaceResult.value?.activeUser

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
@@ -86,7 +86,7 @@
               </template>
             </LayoutSidebarMenuGroup>
             <LayoutSidebarMenuGroupItem
-              v-if="isAdmin"
+              v-if="canCreateWorkspace"
               label="Add workspace"
               @click="openWorkspaceCreateDialog"
             >
@@ -170,6 +170,11 @@ const workspaceItems = computed(
   () => workspaceResult.value?.activeUser?.workspaces.items ?? []
 )
 const isAdmin = computed(() => user.value?.role === Roles.Server.Admin)
+const canCreateWorkspace = computed(
+  () =>
+    user.value?.role === Roles.Server.Admin || user.value?.role === Roles.Server.User
+)
+
 const selectedMenuItem = computed((): SettingsMenuItem | null => {
   const categories = [
     userMenuItems.value,

diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/ArrowFilled.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/ArrowFilled.vue
@@ -1,13 +1,13 @@
 <template>
   <svg
-    width="8"
-    height="4"
-    viewBox="0 0 8 4"
+    width="16"
+    height="32"
+    viewBox="0 0 16 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M3.64645 3.74984C3.84171 3.9451 4.15829 3.9451 4.35355 3.74984L7.14645 0.956947C7.46143 0.641965 7.23835 0.103394 6.79289 0.103394L1.20711 0.103394C0.761654 0.103394 0.53857 0.641964 0.853552 0.956946L3.64645 3.74984Z"
+      d="M7.64645 17.7498C7.84171 17.9451 8.15829 17.9451 8.35355 17.7498L11.1464 14.9569C11.4614 14.642 11.2383 14.1034 10.7929 14.1034H5.20711C4.76165 14.1034 4.53857 14.642 4.85355 14.9569L7.64645 17.7498Z"
       fill="currentColor"
     />
   </svg>

diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
@@ -3,16 +3,16 @@
     <div
       v-if="title"
       class="h-8 flex items-center justify-between select-none rounded-md"
-      :class="[collapsible && 'hover:bg-highlight-1', plusClick && 'pr-1']"
+      :class="[collapsible && 'hover:bg-highlight-1']"
     >
       <button
         v-if="collapsible"
-        class="group flex space-x-2 items-center w-full rounded-md py-0.5 px-3"
+        class="group flex space-x-1 items-center w-full rounded-md py-0.5 px-2"
         @click="isCollapsed = !isCollapsed"
       >
         <ArrowFilled
           :class="[isCollapsed ? '-rotate-90' : '']"
-          class="h-2.5 w-2.5 text-foreground-2 shrink-0"
+          class="text-foreground-2 shrink-0"
         />
         <div v-if="$slots['title-icon']" class="flex items-center justify-center">
           <slot name="title-icon"></slot>
@@ -32,7 +32,7 @@
       <button
         v-if="plusClick"
         v-tippy="plusText ? plusText : undefined"
-        class="hidden group-hover:flex items-center justify-center w-6 h-6 shrink-0 hover:bg-primary-muted rounded"
+        class="hidden group-hover:flex p-[3px] shrink-0 hover:bg-primary-muted rounded mr-2 text-foreground-2"
         @click="plusClick"
       >
         <Plus class="h-4 w-4" />

diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
@@ -7,15 +7,15 @@
     :class="[
       !disabled && 'cursor-pointer hover:bg-highlight-1',
       active && 'bg-highlight-3 hover:!bg-highlight-3',
-      $slots.icon ? 'px-2' : 'pr-2 pl-6',
+      $slots.icon ? 'pl-1 pr-2' : 'pr-2 pl-6',
       extraPadding && '!pl-14'
     ]"
   >
     <div
-      class="flex items-center space-x-[10px] truncate"
+      class="flex items-center space-x-2 truncate"
       :class="[disabled && 'opacity-60']"
     >
-      <div v-if="$slots.icon" class="flex items-center justify-center">
+      <div v-if="$slots.icon" class="h-6 w-6 flex items-center justify-center">
         <slot name="icon" />
       </div>
       <span class="truncate" :class="$slots.icon ? '' : 'pl-2'">