Skip to content

Commit e9d4867

Browse files
JammingBenJammingBen
committed
feat: improve batch action margins
1 parent 1510b78 commit e9d4867

5 files changed

Lines changed: 49 additions & 41 deletions

File tree

‎packages/web-app-admin-settings/src/components/AppTemplate.vue‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -32,30 +32,32 @@
3232
/>
3333
</div>
3434
</div>
35-
<div
36-
class="flex items-center justify-between min-h-10 px-3 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high"
37-
>
38-
<batch-actions
39-
v-if="showBatchActions"
40-
:actions="batchActions"
41-
:action-options="{ resources: batchActionItems }"
42-
:limited-screen-space="limitedScreenSpace"
43-
/>
44-
<div v-if="batchActionItems.length" class="flex items-center gap-1">
45-
<oc-button
46-
v-oc-tooltip="$gettext('Clear selection')"
47-
:aria-label="$gettext('Clear selection')"
48-
appearance="raw"
49-
gap-size="small"
50-
class="p-1"
51-
@click="$emit('clearSelection')"
52-
>
53-
<span
54-
class="text-sm"
55-
v-text="$gettext('%{count} selected', { count: batchActionItems.length })"
56-
/>
57-
<oc-icon fill-type="line" name="close" />
58-
</oc-button>
35+
<div class="flex items-baseline justify-end w-full min-h-10">
36+
<div
37+
class="flex-1 flex items-center justify-between min-h-9 px-3 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high"
38+
>
39+
<batch-actions
40+
v-if="showBatchActions"
41+
:actions="batchActions"
42+
:action-options="{ resources: batchActionItems }"
43+
:limited-screen-space="limitedScreenSpace"
44+
/>
45+
<div v-if="batchActionItems.length" class="flex items-center gap-1">
46+
<oc-button
47+
v-oc-tooltip="$gettext('Clear selection')"
48+
:aria-label="$gettext('Clear selection')"
49+
appearance="raw"
50+
gap-size="small"
51+
class="p-1"
52+
@click="$emit('clearSelection')"
53+
>
54+
<span
55+
class="text-sm"
56+
v-text="$gettext('%{count} selected', { count: batchActionItems.length })"
57+
/>
58+
<oc-icon fill-type="line" name="close" />
59+
</oc-button>
60+
</div>
5961
</div>
6062
</div>
6163
</div>

‎packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,11 @@ exports[`Spaces view > loading states > should render spaces list after loading
1212
<view-options-stub perpagestorageprefix="admin-settings" hashiddenfiles="false" hasfileextensions="false" haspagination="true" paginationoptions="20,50,100,250" perpagequeryname="items-per-page" perpagedefault="50" viewmodedefault="resource-tiles" viewmodes=""></view-options-stub>
1313
</div>
1414
</div>
15-
<div class="flex items-center justify-between min-h-10 px-3 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
16-
<!--v-if-->
17-
<!--v-if-->
15+
<div class="flex items-baseline justify-end w-full min-h-10">
16+
<div class="flex-1 flex items-center justify-between min-h-9 px-3 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
17+
<!--v-if-->
18+
<!--v-if-->
19+
</div>
1820
</div>
1921
</div>
2022
<spaces-list-stub class=""></spaces-list-stub>

‎packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,11 @@ exports[`Users view > list view > renders initially warning if filters are manda
1212
<view-options-stub perpagestorageprefix="admin-settings" hashiddenfiles="false" hasfileextensions="false" haspagination="true" paginationoptions="20,50,100,250" perpagequeryname="items-per-page" perpagedefault="50" viewmodedefault="resource-tiles" viewmodes=""></view-options-stub>
1313
</div>
1414
</div>
15-
<div class="flex items-center justify-between min-h-10 px-3 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
16-
<!--v-if-->
17-
<!--v-if-->
15+
<div class="flex items-baseline justify-end w-full min-h-10">
16+
<div class="flex-1 flex items-center justify-between min-h-9 px-3 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
17+
<!--v-if-->
18+
<!--v-if-->
19+
</div>
1820
</div>
1921
</div>
2022
<div class="user-filters flex justify-between flex-wrap items-end mx-4 mb-4">
@@ -56,9 +58,11 @@ exports[`Users view > list view > renders list initially 1`] = `
5658
<view-options-stub perpagestorageprefix="admin-settings" hashiddenfiles="false" hasfileextensions="false" haspagination="true" paginationoptions="20,50,100,250" perpagequeryname="items-per-page" perpagedefault="50" viewmodedefault="resource-tiles" viewmodes=""></view-options-stub>
5759
</div>
5860
</div>
59-
<div class="flex items-center justify-between min-h-10 px-3 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
60-
<!--v-if-->
61-
<!--v-if-->
61+
<div class="flex items-baseline justify-end w-full min-h-10">
62+
<div class="flex-1 flex items-center justify-between min-h-9 px-3 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
63+
<!--v-if-->
64+
<!--v-if-->
65+
</div>
6266
</div>
6367
</div>
6468
<div class="user-filters flex justify-between flex-wrap items-end mx-4 mb-4">

‎packages/web-pkg/src/components/AppBar/AppBar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,10 @@
4444
</div>
4545
</div>
4646
<slot v-if="hasSharesNavigation" name="navigation" />
47-
<div class="files-app-bar-actions flex items-center justify-end min-h-10">
47+
<div class="files-app-bar-actions flex items-baseline justify-end min-h-10">
4848
<slot v-if="!showBatchActions" name="actions" :limited-screen-space="limitedScreenSpace" />
4949
<div
50-
class="flex-1 flex justify-between items-center px-3 min-h-10 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high"
50+
class="flex-1 flex justify-between items-center px-3 min-h-9 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high"
5151
>
5252
<batch-actions
5353
v-if="showBatchActions && !batchActionsLoading"

‎packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ exports[`AppBar component > renders > by default no breadcrumbs, no bulkactions,
1212
</div>
1313
</div>
1414
<!--v-if-->
15-
<div class="files-app-bar-actions flex items-center justify-end min-h-10">
16-
<div class="flex-1 flex justify-between items-center px-3 min-h-10 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
15+
<div class="files-app-bar-actions flex items-baseline justify-end min-h-10">
16+
<div class="flex-1 flex justify-between items-center px-3 min-h-9 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
1717
<!--v-if-->
1818
<!--v-if-->
1919
</div>
@@ -34,8 +34,8 @@ exports[`AppBar component > renders > if given, with content in the actions slot
3434
</div>
3535
</div>
3636
<!--v-if-->
37-
<div class="files-app-bar-actions flex items-center justify-end min-h-10"><button class="action-slot">Click</button>
38-
<div class="flex-1 flex justify-between items-center px-3 min-h-10 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
37+
<div class="files-app-bar-actions flex items-baseline justify-end min-h-10"><button class="action-slot">Click</button>
38+
<div class="flex-1 flex justify-between items-center px-3 min-h-9 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
3939
<!--v-if-->
4040
<!--v-if-->
4141
</div>
@@ -56,8 +56,8 @@ exports[`AppBar component > renders > if given, with content in the content slot
5656
</div>
5757
</div>
5858
<!--v-if-->
59-
<div class="files-app-bar-actions flex items-center justify-end min-h-10">
60-
<div class="flex-1 flex justify-between items-center px-3 min-h-10 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
59+
<div class="files-app-bar-actions flex items-baseline justify-end min-h-10">
60+
<div class="flex-1 flex justify-between items-center px-3 min-h-9 rounded-xl has-[_ul:first-child>*]:bg-role-surface-container-high">
6161
<!--v-if-->
6262
<!--v-if-->
6363
</div>

0 commit comments

Comments
 (0)