fix(client): drawer positions (#361)

vuejs · May 8, 2024 · 1133bcf · 1133bcf
1 parent add83ae
commit 1133bcf
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 72 deletions.
diff --git a/packages/client/src/components/graph/GraphDrawer.vue b/packages/client/src/components/graph/GraphDrawer.vue
@@ -47,6 +47,7 @@ const keys = [
     :close-outside="false"
     :permanent="true"
     :content-blur="true"
+    position="absolute"
     mount-to=".graph-body"
   >
     <div class="w-300px" h-full of-auto>

diff --git a/packages/client/src/pages/assets.vue b/packages/client/src/pages/assets.vue
@@ -104,88 +104,90 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div block h-full of-auto class="drawer-container relative">
-    <Navbar ref="navbar" v-model:search="search" pb2 :no-padding="true">
-      <template #actions>
-        <div flex-none flex="~ gap2 items-center" text-lg>
-          <!-- <VueIcon
+  <div block h-full of-hidden class="drawer-container relative">
+    <div h-full w-full of-auto>
+      <Navbar ref="navbar" v-model:search="search" pb2 :no-padding="true">
+        <template #actions>
+          <div flex-none flex="~ gap2 items-center" text-lg>
+            <!-- <VueIcon
             v-tooltip.bottom-end="'File Upload'"
             icon="i-carbon:cloud-upload"
             title="File Upload" :border="false" flex="~ gap-0!" action
             @click="dropzone = !dropzone"
           /> -->
-          <VueSelect v-model="filteredExtensions" :multiple="true" :options="uniqAssetsTypes">
-            <template #button>
-              <IconTitle
-                v-tooltip.bottom-end="'Filter'"
-                icon="i-carbon-filter hover:op50" :border="false"
-                title="Filter" relative cursor-pointer p2 text-lg
-                @click="() => { }"
+            <VueSelect v-model="filteredExtensions" :multiple="true" :options="uniqAssetsTypes">
+              <template #button>
+                <IconTitle
+                  v-tooltip.bottom-end="'Filter'"
+                  icon="i-carbon-filter hover:op50" :border="false"
+                  title="Filter" relative cursor-pointer p2 text-lg
+                  @click="() => { }"
+                >
+                  <span flex="~ items-center justify-center" absolute bottom-0 right-2px h-4 w-4 rounded-full bg-primary-800 text-8px text-white>
+                    {{ filteredExtensions.length }}
+                  </span>
+                </IconTitle>
+              </template>
+              <template
+                #item="{
+                  item, active,
+                }"
               >
-                <span flex="~ items-center justify-center" absolute bottom-0 right-2px h-4 w-4 rounded-full bg-primary-800 text-8px text-white>
-                  {{ filteredExtensions.length }}
-                </span>
-              </IconTitle>
-            </template>
-            <template
-              #item="{
-                item, active,
-              }"
-            >
-              <div
-                w-full flex="~ gap-2 items-center" rounded px2 py2
-              >
-                <VueCheckbox :model-value="active" />
-                <span text-xs op75>{{ item.label }}</span>
-              </div>
-            </template>
-          </VueSelect>
-          <VueIcon
-            v-tooltip.bottom-end="'Toggle View'"
-            :border="false"
-            :icon="view === 'grid' ? 'i-carbon-list' : 'i-carbon-grid'"
-            title="Toggle view"
-            action cursor-pointer text-lg
-            @click="toggleView"
-          />
+                <div
+                  w-full flex="~ gap-2 items-center" rounded px2 py2
+                >
+                  <VueCheckbox :model-value="active" />
+                  <span text-xs op75>{{ item.label }}</span>
+                </div>
+              </template>
+            </VueSelect>
+            <VueIcon
+              v-tooltip.bottom-end="'Toggle View'"
+              :border="false"
+              :icon="view === 'grid' ? 'i-carbon-list' : 'i-carbon-grid'"
+              title="Toggle view"
+              action cursor-pointer text-lg
+              @click="toggleView"
+            />
+          </div>
+        </template>
+        <div op50>
+          <span v-if="search">{{ filtered.length }} matched · </span>
+          <span>{{ assets?.length }} assets in total</span>
         </div>
-      </template>
-      <div op50>
-        <span v-if="search">{{ filtered.length }} matched · </span>
-        <span>{{ assets?.length }} assets in total</span>
-      </div>
-    </Navbar>
+      </Navbar>
 
-    <template v-if="view === 'grid'">
-      <template v-if="byFolders.length > 1">
-        <SectionBlock
-          v-for="[folder, items] of byFolders"
-          :key="folder"
-          :text="folder"
-          :description="`${items.length} items`"
-          :open="items.length <= DETAILS_MAX_ITEMS"
-          :padding="false"
-        >
-          <div mt--4 px2 grid="~ cols-minmax-8rem">
-            <AssetGridItem v-for="a of items" :key="a.path" :asset="a" :folder="folder" @click="selected = a" />
-          </div>
-        </SectionBlock>
+      <template v-if="view === 'grid'">
+        <template v-if="byFolders.length > 1">
+          <SectionBlock
+            v-for="[folder, items] of byFolders"
+            :key="folder"
+            :text="folder"
+            :description="`${items.length} items`"
+            :open="items.length <= DETAILS_MAX_ITEMS"
+            :padding="false"
+          >
+            <div mt--4 px2 grid="~ cols-minmax-8rem">
+              <AssetGridItem v-for="a of items" :key="a.path" :asset="a" :folder="folder" @click="selected = a" />
+            </div>
+          </SectionBlock>
+        </template>
+        <div v-else p2 grid="~ cols-minmax-8rem">
+          <AssetGridItem v-for="a of filtered" :key="a.path" :asset="a" @click="selected = a" />
+        </div>
       </template>
-      <div v-else p2 grid="~ cols-minmax-8rem">
-        <AssetGridItem v-for="a of filtered" :key="a.path" :asset="a" @click="selected = a" />
+      <div v-else>
+        <AssetListItem
+          v-for="item, key of byTree" :key="key"
+          v-model="selected"
+          :item="item"
+        />
       </div>
-    </template>
-    <div v-else>
-      <AssetListItem
-        v-for="item, key of byTree" :key="key"
-        v-model="selected"
-        :item="item"
-      />
     </div>
     <VueDrawer
       :model-value="!!selected"
       :top="navbar"
-      permanent mount-to=".drawer-container"
+      permanent mount-to=".drawer-container" position="absolute"
       content-class="w120 text-sm" @update:model-value="(v) => {
         if (!v) selected = undefined
       }"

diff --git a/packages/ui/src/components/Dialog.vue b/packages/ui/src/components/Dialog.vue
@@ -63,7 +63,7 @@ onMounted(() => isMount.value = true)
       leave-from-class="opacity-100 [&_.modal]:scale-100"
       leave-to-class="opacity-0 [&_.modal]:scale-95"
     >
-      <Overlay v-if="show" :dim="dim" :blur="blur">
+      <Overlay v-if="show" :dim :blur :position>
         <div
           class="modal relative grid grid-rows-[1.875rem_1fr_2.5rem] $ui-base max-h-[calc(100vh-6.25rem)] max-w-[calc(100vw-6.25rem)] min-h-6.25rem min-w-12.5rem gap-2.5 rounded-md bg-white px6 py4.5 color-gray-800 shadow-2xl transition-transform transition-duration-300 dark:bg-gray-900 dark:color-gray-200"
           :style="{

diff --git a/packages/ui/src/components/Drawer.vue b/packages/ui/src/components/Drawer.vue
@@ -77,7 +77,7 @@ onMounted(() => isMount.value = true)
         :class="{
           'pointer-events-none': permanent,
         }"
-        :dim="dim" :blur="blur" @click="closeOutside && closable && (show = false)"
+        :dim :blur :position @click="closeOutside && closable && (show = false)"
       >
         <div
           :class="[classes.class, contentClass ?? '', contentBlur ? '$ui-glass-effect' : '$ui-bg-base']"

diff --git a/packages/ui/src/components/Overlay.vue b/packages/ui/src/components/Overlay.vue
@@ -2,17 +2,24 @@
 export interface OverlayProps {
   dim?: boolean
   blur?: boolean
+  /**
+   * Position of the overlay, default is `fixed`
+   */
+  position?: 'fixed' | 'absolute'
 }
 
-defineProps<OverlayProps>()
+withDefaults(defineProps<OverlayProps>(), {
+  position: 'fixed',
+})
 </script>
 
 <template>
   <div
-    class="fixed left-0 top-0 $ui-z-max h-full w-full $ui-fcc transition-opacity transition-duration-300 $ui-bg-base"
+    class="left-0 top-0 $ui-z-max h-full w-full $ui-fcc transition-opacity transition-duration-300 $ui-bg-base"
     :class="[
       dim ? 'bg-opacity-50!' : 'bg-opacity-0!',
       blur ? 'backdrop-blur-sm' : '',
+      position,
     ]"
   >
     <slot />