Skip to content

Commit 1133bcf

Browse files
alexzhang1030alexzhang1030
authoredMay 8, 2024··
fix(client): drawer positions (#361)
·
v7.7.5v7.2.0
1 parent add83ae commit 1133bcf

File tree

5 files changed

+82
-72
lines changed

5 files changed

+82
-72
lines changed
 

‎packages/client/src/components/graph/GraphDrawer.vue

+1
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ const keys = [
4747
:close-outside="false"
4848
:permanent="true"
4949
:content-blur="true"
50+
position="absolute"
5051
mount-to=".graph-body"
5152
>
5253
<div class="w-300px" h-full of-auto>

‎packages/client/src/pages/assets.vue

+70-68
Original file line numberDiff line numberDiff line change
@@ -104,88 +104,90 @@ onUnmounted(() => {
104104
</script>
105105

106106
<template>
107-
<div block h-full of-auto class="drawer-container relative">
108-
<Navbar ref="navbar" v-model:search="search" pb2 :no-padding="true">
109-
<template #actions>
110-
<div flex-none flex="~ gap2 items-center" text-lg>
111-
<!-- <VueIcon
107+
<div block h-full of-hidden class="drawer-container relative">
108+
<div h-full w-full of-auto>
109+
<Navbar ref="navbar" v-model:search="search" pb2 :no-padding="true">
110+
<template #actions>
111+
<div flex-none flex="~ gap2 items-center" text-lg>
112+
<!-- <VueIcon
112113
v-tooltip.bottom-end="'File Upload'"
113114
icon="i-carbon:cloud-upload"
114115
title="File Upload" :border="false" flex="~ gap-0!" action
115116
@click="dropzone = !dropzone"
116117
/> -->
117-
<VueSelect v-model="filteredExtensions" :multiple="true" :options="uniqAssetsTypes">
118-
<template #button>
119-
<IconTitle
120-
v-tooltip.bottom-end="'Filter'"
121-
icon="i-carbon-filter hover:op50" :border="false"
122-
title="Filter" relative cursor-pointer p2 text-lg
123-
@click="() => { }"
118+
<VueSelect v-model="filteredExtensions" :multiple="true" :options="uniqAssetsTypes">
119+
<template #button>
120+
<IconTitle
121+
v-tooltip.bottom-end="'Filter'"
122+
icon="i-carbon-filter hover:op50" :border="false"
123+
title="Filter" relative cursor-pointer p2 text-lg
124+
@click="() => { }"
125+
>
126+
<span flex="~ items-center justify-center" absolute bottom-0 right-2px h-4 w-4 rounded-full bg-primary-800 text-8px text-white>
127+
{{ filteredExtensions.length }}
128+
</span>
129+
</IconTitle>
130+
</template>
131+
<template
132+
#item="{
133+
item, active,
134+
}"
124135
>
125-
<span flex="~ items-center justify-center" absolute bottom-0 right-2px h-4 w-4 rounded-full bg-primary-800 text-8px text-white>
126-
{{ filteredExtensions.length }}
127-
</span>
128-
</IconTitle>
129-
</template>
130-
<template
131-
#item="{
132-
item, active,
133-
}"
134-
>
135-
<div
136-
w-full flex="~ gap-2 items-center" rounded px2 py2
137-
>
138-
<VueCheckbox :model-value="active" />
139-
<span text-xs op75>{{ item.label }}</span>
140-
</div>
141-
</template>
142-
</VueSelect>
143-
<VueIcon
144-
v-tooltip.bottom-end="'Toggle View'"
145-
:border="false"
146-
:icon="view === 'grid' ? 'i-carbon-list' : 'i-carbon-grid'"
147-
title="Toggle view"
148-
action cursor-pointer text-lg
149-
@click="toggleView"
150-
/>
136+
<div
137+
w-full flex="~ gap-2 items-center" rounded px2 py2
138+
>
139+
<VueCheckbox :model-value="active" />
140+
<span text-xs op75>{{ item.label }}</span>
141+
</div>
142+
</template>
143+
</VueSelect>
144+
<VueIcon
145+
v-tooltip.bottom-end="'Toggle View'"
146+
:border="false"
147+
:icon="view === 'grid' ? 'i-carbon-list' : 'i-carbon-grid'"
148+
title="Toggle view"
149+
action cursor-pointer text-lg
150+
@click="toggleView"
151+
/>
152+
</div>
153+
</template>
154+
<div op50>
155+
<span v-if="search">{{ filtered.length }} matched · </span>
156+
<span>{{ assets?.length }} assets in total</span>
151157
</div>
152-
</template>
153-
<div op50>
154-
<span v-if="search">{{ filtered.length }} matched · </span>
155-
<span>{{ assets?.length }} assets in total</span>
156-
</div>
157-
</Navbar>
158+
</Navbar>
158159

159-
<template v-if="view === 'grid'">
160-
<template v-if="byFolders.length > 1">
161-
<SectionBlock
162-
v-for="[folder, items] of byFolders"
163-
:key="folder"
164-
:text="folder"
165-
:description="`${items.length} items`"
166-
:open="items.length <= DETAILS_MAX_ITEMS"
167-
:padding="false"
168-
>
169-
<div mt--4 px2 grid="~ cols-minmax-8rem">
170-
<AssetGridItem v-for="a of items" :key="a.path" :asset="a" :folder="folder" @click="selected = a" />
171-
</div>
172-
</SectionBlock>
160+
<template v-if="view === 'grid'">
161+
<template v-if="byFolders.length > 1">
162+
<SectionBlock
163+
v-for="[folder, items] of byFolders"
164+
:key="folder"
165+
:text="folder"
166+
:description="`${items.length} items`"
167+
:open="items.length <= DETAILS_MAX_ITEMS"
168+
:padding="false"
169+
>
170+
<div mt--4 px2 grid="~ cols-minmax-8rem">
171+
<AssetGridItem v-for="a of items" :key="a.path" :asset="a" :folder="folder" @click="selected = a" />
172+
</div>
173+
</SectionBlock>
174+
</template>
175+
<div v-else p2 grid="~ cols-minmax-8rem">
176+
<AssetGridItem v-for="a of filtered" :key="a.path" :asset="a" @click="selected = a" />
177+
</div>
173178
</template>
174-
<div v-else p2 grid="~ cols-minmax-8rem">
175-
<AssetGridItem v-for="a of filtered" :key="a.path" :asset="a" @click="selected = a" />
179+
<div v-else>
180+
<AssetListItem
181+
v-for="item, key of byTree" :key="key"
182+
v-model="selected"
183+
:item="item"
184+
/>
176185
</div>
177-
</template>
178-
<div v-else>
179-
<AssetListItem
180-
v-for="item, key of byTree" :key="key"
181-
v-model="selected"
182-
:item="item"
183-
/>
184186
</div>
185187
<VueDrawer
186188
:model-value="!!selected"
187189
:top="navbar"
188-
permanent mount-to=".drawer-container"
190+
permanent mount-to=".drawer-container" position="absolute"
189191
content-class="w120 text-sm" @update:model-value="(v) => {
190192
if (!v) selected = undefined
191193
}"

‎packages/ui/src/components/Dialog.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ onMounted(() => isMount.value = true)
6363
leave-from-class="opacity-100 [&_.modal]:scale-100"
6464
leave-to-class="opacity-0 [&_.modal]:scale-95"
6565
>
66-
<Overlay v-if="show" :dim="dim" :blur="blur">
66+
<Overlay v-if="show" :dim :blur :position>
6767
<div
6868
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"
6969
:style="{

‎packages/ui/src/components/Drawer.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ onMounted(() => isMount.value = true)
7777
:class="{
7878
'pointer-events-none': permanent,
7979
}"
80-
:dim="dim" :blur="blur" @click="closeOutside && closable && (show = false)"
80+
:dim :blur :position @click="closeOutside && closable && (show = false)"
8181
>
8282
<div
8383
:class="[classes.class, contentClass ?? '', contentBlur ? '$ui-glass-effect' : '$ui-bg-base']"

‎packages/ui/src/components/Overlay.vue

+9-2
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,24 @@
22
export interface OverlayProps {
33
dim?: boolean
44
blur?: boolean
5+
/**
6+
* Position of the overlay, default is `fixed`
7+
*/
8+
position?: 'fixed' | 'absolute'
59
}
610
7-
defineProps<OverlayProps>()
11+
withDefaults(defineProps<OverlayProps>(), {
12+
position: 'fixed',
13+
})
814
</script>
915

1016
<template>
1117
<div
12-
class="fixed left-0 top-0 $ui-z-max h-full w-full $ui-fcc transition-opacity transition-duration-300 $ui-bg-base"
18+
class="left-0 top-0 $ui-z-max h-full w-full $ui-fcc transition-opacity transition-duration-300 $ui-bg-base"
1319
:class="[
1420
dim ? 'bg-opacity-50!' : 'bg-opacity-0!',
1521
blur ? 'backdrop-blur-sm' : '',
22+
position,
1623
]"
1724
>
1825
<slot />

0 commit comments

Comments
 (0)
Please sign in to comment.