From 0af875d713ca449a7af82a53a82665583b3b01ea Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Wed, 11 Dec 2024 15:04:56 -0800
Subject: feat(files): Right-align list actions

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 apps/files/src/views/FilesList.vue | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index 7e8bd9f1795..16764501038 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -32,24 +32,28 @@
 						multiple
 						@failed="onUploadFail"
 						@uploaded="onUpload" />
-
-					<NcActions :inline="1" force-name>
-						<NcActionButton v-for="action in enabledFileListActions"
-							:key="action.id"
-							close-after-click
-							@click="() => action.exec(currentView, dirContents, { folder: currentFolder })">
-							<template #icon>
-								<NcIconSvgWrapper :svg="action.iconSvgInline(currentView)" />
-							</template>
-							{{ action.displayName(currentView) }}
-						</NcActionButton>
-					</NcActions>
 				</template>
 			</BreadCrumbs>
 
 			<!-- Secondary loading indicator -->
 			<NcLoadingIcon v-if="isRefreshing" class="files-list__refresh-icon" />
 
+			<NcActions class="files-list__header-actions"
+				:inline="1"
+				type="tertiary"
+				force-name>
+				<NcActionButton v-for="action in enabledFileListActions"
+					:key="action.id"
+					close-after-click
+					@click="action.exec(currentView, dirContents, { folder: currentFolder })">
+					<template #icon>
+						<NcIconSvgWrapper v-if="action.iconSvgInline !== undefined"
+							:svg="action.iconSvgInline(currentView)" />
+					</template>
+					{{ action.displayName(currentView) }}
+				</NcActionButton>
+			</NcActions>
+
 			<NcButton v-if="fileListWidth >= 512 && enableGridView"
 				:aria-label="gridViewButtonLabel"
 				:title="gridViewButtonLabel"
@@ -760,6 +764,11 @@ export default defineComponent({
 				color: var(--color-main-text) !important;
 			}
 		}
+
+		&-actions {
+			min-width: fit-content !important;
+			margin-inline: calc(var(--default-grid-baseline) * 2);
+		}
 	}
 
 	&__empty-view-wrapper {
-- 
cgit v1.2.3