Merge pull request #2099 from nextcloud/fix/new-album-layout

Fix new album form layout
nextcloud · Oct 23, 2023 · c76a8bd · c76a8bd
2 parents fb96c79 + 7562a46
commit c76a8bd
Show file tree

Hide file tree

Showing 15 changed files with 44 additions and 67 deletions.
diff --git a/js/photos-main.js b/js/photos-main.js
diff --git a/js/photos-main.js.map b/js/photos-main.js.map
diff --git a/...extcloud_sharing_dist_index_js-node_modules_vue-material-design-icons_AccountGr-4153cd.js b/...extcloud_sharing_dist_index_js-node_modules_vue-material-design-icons_AccountGr-4153cd.js
diff --git a/...loud_sharing_dist_index_js-node_modules_vue-material-design-icons_AccountGr-4153cd.js.map b/...loud_sharing_dist_index_js-node_modules_vue-material-design-icons_AccountGr-4153cd.js.map
diff --git a/js/photos-public.js b/js/photos-public.js
diff --git a/js/photos-public.js.map b/js/photos-public.js.map
diff --git a/js/photos-src_components_Albums_AlbumForm_vue.js b/js/photos-src_components_Albums_AlbumForm_vue.js
diff --git a/js/photos-src_components_Albums_AlbumForm_vue.js.map b/js/photos-src_components_Albums_AlbumForm_vue.js.map
diff --git a/js/photos-src_views_AlbumContent_vue.js b/js/photos-src_views_AlbumContent_vue.js
diff --git a/js/photos-src_views_AlbumContent_vue.js.map b/js/photos-src_views_AlbumContent_vue.js.map
diff --git a/js/photos-src_views_Timeline_vue.js b/js/photos-src_views_Timeline_vue.js
diff --git a/js/photos-src_views_Timeline_vue.js.map b/js/photos-src_views_Timeline_vue.js.map
diff --git a/js/photos-vendors-node_modules_nextcloud_upload_dist_index_esm_js.js b/js/photos-vendors-node_modules_nextcloud_upload_dist_index_esm_js.js
diff --git a/js/photos-vendors-node_modules_nextcloud_upload_dist_index_esm_js.js.map b/js/photos-vendors-node_modules_nextcloud_upload_dist_index_esm_js.js.map
diff --git a/src/components/Albums/AlbumForm.vue b/src/components/Albums/AlbumForm.vue
@@ -29,41 +29,39 @@
 				:required="true"
 				autofocus="true"
 				:label="t('photos', 'Name of the album')" />
-			<label>
-				<MapMarker />
-				<NcTextField :value.sync="albumLocation"
-					name="location"
-					type="text"
-					:label="t('photos', 'Location of the album')" />
-			</label>
+			<NcTextField :value.sync="albumLocation"
+				name="location"
+				type="text"
+				:label="t('photos', 'Location of the album')">
+				<template #default>
+					<MapMarker :size="20" />
+				</template>
+			</NcTextField>
 		</div>
 		<div class="form-buttons">
 			<span class="left-buttons">
 				<NcButton v-if="displayBackButton"
-					:aria-label="t('photos', 'Go back to the previous view.')"
 					type="tertiary"
 					@click="back">
 					{{ t('photos', 'Back') }}
 				</NcButton>
 			</span>
 			<span class="right-buttons">
 				<NcButton v-if="sharingEnabled && !editMode"
-					:aria-label="t('photos', 'Go to the add collaborators view.')"
 					type="secondary"
 					:disabled="albumName.trim() === '' || loading"
 					@click="showCollaboratorView = true">
 					<template #icon>
-						<AccountMultiplePlus />
+						<AccountMultiplePlus :size="20" />
 					</template>
 					{{ t('photos', 'Add collaborators') }}
 				</NcButton>
-				<NcButton :aria-label="editMode ? t('photos', 'Save.') : t('photos', 'Create the album.')"
-					type="primary"
+				<NcButton type="primary"
 					:disabled="albumName === '' || loading"
 					@click="submit()">
 					<template #icon>
-						<NcLoadingIcon v-if="loading" />
-						<Send v-else />
+						<NcLoadingIcon v-if="loading" :size="20" />
+						<Send v-else :size="20" />
 					</template>
 					{{ editMode ? t('photos', 'Save') : t('photos', 'Create album') }}
 				</NcButton>
@@ -73,22 +71,20 @@
 	<CollaboratorsSelectionForm v-else
 		:album-name="albumName"
 		:allow-public-link="false">
-		<template slot-scope="{collaborators}">
+		<template #default="{ collaborators }">
 			<span class="left-buttons">
-				<NcButton :aria-label="t('photos', 'Back to the new album form.')"
-					type="tertiary"
+				<NcButton type="tertiary"
 					@click="showCollaboratorView = false">
 					{{ t('photos', 'Back') }}
 				</NcButton>
 			</span>
 			<span class="right-buttons">
-				<NcButton :aria-label="editMode ? t('photos', 'Save.') : t('photos', 'Create the album.')"
-					type="primary"
+				<NcButton type="primary"
 					:disabled="albumName.trim() === '' || loading"
 					@click="submit(collaborators)">
 					<template #icon>
-						<NcLoadingIcon v-if="loading" />
-						<Send v-else />
+						<NcLoadingIcon v-if="loading" :size="20" />
+						<Send v-else :size="20" />
 					</template>
 					{{ editMode ? t('photos', 'Save') : t('photos', 'Create album') }}
 				</NcButton>
@@ -259,7 +255,7 @@ export default {
 	display: flex;
 	flex-direction: column;
 	height: 350px;
-	padding: 16px;
+	padding: calc(var(--default-grid-baseline) * 4);
 
 	.form-title {
 		font-weight: bold;
@@ -270,25 +266,10 @@ export default {
 	}
 
 	.form-inputs {
-		flex-grow: 1;
-		justify-items: flex-end;
-
-		input {
-			width: 100%;
-		}
-
-		label {
-			display: flex;
-			margin-top: 16px;
-
-			:deep {
-				.material-design-icon {
-					align-self: flex-end;
-					margin-right: 12px;
-					margin-bottom: 6px;
-				}
-			}
-		}
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--default-grid-baseline) * 4);
 	}
 
 	.form-buttons {
@@ -298,15 +279,12 @@ export default {
 
 		.left-buttons, .right-buttons {
 			display: flex;
+			gap: calc(var(--default-grid-baseline) * 4);
 		}
 
 		.right-buttons {
 			justify-content: flex-end;
 		}
-
-		button {
-			margin-right: 16px;
-		}
 	}
 }
 
@@ -318,7 +296,6 @@ export default {
 	.right-buttons {
 		justify-content: flex-end;
 		flex-direction: column;
-		gap: calc(var(--default-grid-baseline) * 4);
 	}
 }
 </style>