styling on editing photo page

LycheeOrg · Oct 10, 2024 · f1d73d0 · f1d73d0
1 parent 9545efb
commit f1d73d0
Show file tree

Hide file tree

Showing 14 changed files with 161 additions and 55 deletions.
diff --git a/resources/js/components/drawers/PhotoEdit.vue b/resources/js/components/drawers/PhotoEdit.vue
@@ -9,8 +9,16 @@
 					<label for="description" class="font-bold mt-4 md:mt-0">{{ $t("lychee.PHOTO_SET_DESCRIPTION") }}</label>
 					<Textarea id="description" class="w-full h-48" v-model="description" rows="5" cols="30" />
 
-					<label for="tags" class="font-bold mt-4 md:mt-0 self-center">{{ $t("lychee.PHOTO_SET_TAGS") }}</label>
-					<AutoComplete id="tags" v-model="tags" multiple :typeahead="false"></AutoComplete>
+					<label for="tags" class="font-bold h-11 mt-4 md:mt-0 self-center">{{ $t("lychee.PHOTO_SET_TAGS") }}</label>
+					<AutoComplete
+						id="tags"
+						v-model="tags"
+						:typeahead="false"
+						multiple
+						class="border-b hover:border-b-0"
+						:placeholder="$t('lychee.NO_TAGS')"
+						pt:inputmultiple:class="w-full border-t-0 border-l-0 border-r-0 border-b hover:border-b-primary-400 focus:border-b-primary-400"
+					/>
 
 					<label for="uploadDate" class="font-bold mt-4 md:mt-0 self-center">{{ $t("lychee.PHOTO_SET_CREATED_AT") }}</label>
 					<DatePicker
@@ -21,6 +29,7 @@
 						dateFormat=""
 						:showSeconds="true"
 						:invalid="!uploadDate"
+						class="border-0 p-0 w-full border-b hover:border-b-primary-400 focus:border-b-primary-400"
 					/>
 
 					<label for="license" class="font-bold mt-4 md:mt-0 self-center">{{ $t("lychee.SET_LICENSE") }}</label>
@@ -44,7 +53,7 @@
 							</div>
 						</template>
 					</Select>
-					<Button severity="contrast" class="w-full col-span-2 font-bold border-none" @click="save">
+					<Button severity="primary" class="w-full col-span-2 font-bold border-none" @click="save">
 						{{ $t("lychee.SAVE") }}
 					</Button>
 				</form>
@@ -124,3 +133,9 @@ watch(
 	(newPhoto: App.Http.Resources.Models.PhotoResource, _oldPhoto) => load(newPhoto),
 );
 </script>
+<style lang="css">
+/* Only way to get rid of the border sadly. */
+.p-datepicker-input {
+	border: none;
+}
+</style>
diff --git a/resources/js/components/forms/album/AlbumCreateDialog.vue b/resources/js/components/forms/album/AlbumCreateDialog.vue
@@ -4,7 +4,7 @@
 			<div v-focustrap class="flex flex-col relative max-w-full text-sm rounded-md pt-9">
 				<p class="mb-5 px-9">{{ $t("lychee.TITLE_NEW_ALBUM") }}</p>
 				<div class="inline-flex flex-col gap-2 px-9">
-					<FloatLabel>
+					<FloatLabel variant="on">
 						<InputText id="title" v-model="title" />
 						<label class="" for="title">{{ $t("lychee.ALBUM_TITLE") }}</label>
 					</FloatLabel>

diff --git a/resources/js/components/forms/album/AlbumCreateTagDialog.vue b/resources/js/components/forms/album/AlbumCreateTagDialog.vue
@@ -4,11 +4,11 @@
 			<div v-focustrap class="flex flex-col relative max-w-full text-sm rounded-md pt-9">
 				<p class="mb-5 px-9">{{ $t("lychee.NEW_TAG_ALBUM") }}</p>
 				<div class="inline-flex flex-col gap-3 px-9">
-					<FloatLabel>
+					<FloatLabel variant="on">
 						<InputText id="title" v-model="title" />
 						<label class="" for="title">{{ $t("lychee.ALBUM_TITLE") }}</label>
 					</FloatLabel>
-					<FloatLabel>
+					<FloatLabel variant="on">
 						<AutoComplete
 							id="tags"
 							v-model="tags"

diff --git a/resources/js/components/forms/album/AlbumProperties.vue b/resources/js/components/forms/album/AlbumProperties.vue
@@ -2,22 +2,22 @@
 	<Card class="sm:p-4 xl:px-9 max-sm:w-full sm:min-w-[32rem] flex-shrink-0">
 		<template #content>
 			<form>
-				<div class="mb-4 h-12">
-					<FloatLabel>
+				<div class="h-12">
+					<FloatLabel variant="on">
 						<InputText id="title" type="text" v-model="title" />
 						<label for="title">{{ $t("lychee.ALBUM_TITLE") }}</label>
 					</FloatLabel>
 					<!-- <x-forms.error-message field='title' /> -->
 				</div>
-				<div class="my-4 h-56 pt-4">
-					<FloatLabel>
-						<Textarea id="description" class="w-full h-48" v-model="description" rows="5" cols="30" />
+				<div class="my-4 h-48">
+					<FloatLabel variant="on">
+						<Textarea id="description" class="w-full h-48" v-model="description" rows="6" cols="30" />
 						<!-- <x-forms.error-message field='description' /> -->
 						<label for="description">{{ $t("lychee.ALBUM_DESCRIPTION") }}</label>
 					</FloatLabel>
 				</div>
-				<div class="my-4 h-10 flex">
-					<FloatLabel>
+				<div class="my-2 h-10 flex">
+					<FloatLabel variant="on">
 						<Select
 							id="photoSortingColumn"
 							class="w-48 border-none"
@@ -39,7 +39,7 @@
 						</Select>
 						<label for="photoSortingColumn">{{ $t("lychee.ALBUM_PHOTO_ORDERING") }}</label>
 					</FloatLabel>
-					<FloatLabel>
+					<FloatLabel variant="on">
 						<Select
 							id="photoSortingOrder"
 							class="w-48 border-none"
@@ -63,8 +63,8 @@
 					</FloatLabel>
 				</div>
 				<template v-if="is_model_album">
-					<div class="my-4 h-10 flex">
-						<FloatLabel>
+					<div class="my-2 h-10 flex">
+						<FloatLabel variant="on">
 							<Select
 								id="albumSortingColumn"
 								class="w-48 border-none"
@@ -86,7 +86,7 @@
 							</Select>
 							<label for="albumSortingColumn">{{ $t("lychee.ALBUM_CHILDREN_ORDERING") }}</label>
 						</FloatLabel>
-						<FloatLabel>
+						<FloatLabel variant="on">
 							<Select
 								id="albumSortingOrder"
 								class="w-48 border-none"
@@ -109,8 +109,8 @@
 							<label for="albumSortingOrder">asc/desc</label>
 						</FloatLabel>
 					</div>
-					<div class="h-10 my-4">
-						<FloatLabel>
+					<div class="h-10 my-2">
+						<FloatLabel variant="on">
 							<Select id="header" class="w-72 border-none" v-model="header_id" :options="headersOptions" optionLabel="title" showClear>
 								<template #value="slotProps">
 									<div v-if="slotProps.value && slotProps.value.id === 'compact'">
@@ -137,8 +137,8 @@
 						</FloatLabel>
 					</div>
 					<!-- <livewire:forms.album.set-header :album_id="$this->albumID" lazy="on-load" /> -->
-					<div class="h-10 my-4">
-						<FloatLabel>
+					<div class="h-10 my-2">
+						<FloatLabel variant="on">
 							<Select id="license" class="w-72 border-none" v-model="license" :options="licenseOptions" optionLabel="label" showClear>
 								<template #value="slotProps">
 									<div v-if="slotProps.value" class="flex items-center">
@@ -154,14 +154,14 @@
 							<label for="license">{{ $t("lychee.ALBUM_SET_LICENSE") }}</label>
 						</FloatLabel>
 					</div>
-					<div class="my-4">
-						<FloatLabel>
+					<div class="my-2">
+						<FloatLabel variant="on">
 							<InputText id="copyright" v-model="copyright" />
 							<label for="copyright">{{ $t("lychee.ALBUM_SET_COPYRIGHT") }}</label>
 						</FloatLabel>
 					</div>
-					<div class="h-10 my-4">
-						<FloatLabel>
+					<div class="h-10 my-2 pt-4">
+						<FloatLabel variant="on">
 							<Select
 								id="aspectRatio"
 								class="w-72 border-none"
@@ -186,7 +186,7 @@
 					</div>
 				</template>
 				<div v-if="!is_model_album" class="mb-8 h-10">
-					<FloatLabel>
+					<FloatLabel variant="on">
 						<AutoComplete
 							id="tags"
 							v-model="tags"
@@ -198,7 +198,7 @@
 						<label for="tags">{{ $t("lychee.ALBUM_SET_SHOWTAGS") }}</label>
 					</FloatLabel>
 				</div>
-				<Button class="p-3 w-full font-bold border-none text-white hover:bg-primary-500 hover:text-surface-0 flex-shrink" @click="save">
+				<Button class="p-3 mt-4 w-full font-bold border-none text-white hover:bg-primary-500 hover:text-surface-0 flex-shrink" @click="save">
 					{{ $t("lychee.SAVE") }}
 				</Button>
 			</form>

diff --git a/resources/js/components/forms/album/Unlock.vue b/resources/js/components/forms/album/Unlock.vue
@@ -4,7 +4,7 @@
 			<div v-focustrap class="flex flex-col relative max-w-xl text-sm rounded-md pt-9">
 				<p class="mb-5 px-9">{{ $t("lychee.ALBUM_PASSWORD_REQUIRED") }}</p>
 				<div class="inline-flex flex-col gap-2 px-9">
-					<FloatLabel>
+					<FloatLabel variant="on">
 						<InputText id="albumPassword" v-model="password" @keydown.enter="unlock" />
 						<label class="" for="albumPassword">{{ $t("lychee.PASSWORD") }}</label>
 					</FloatLabel>

diff --git a/resources/js/components/forms/gallery-dialogs/RenameDialog.vue b/resources/js/components/forms/gallery-dialogs/RenameDialog.vue
@@ -3,7 +3,7 @@
 		<template #container="{ closeCallback }">
 			<div>
 				<p class="p-9 text-center text-muted-color max-w-xl text-wrap">
-					<FloatLabel>
+					<FloatLabel variant="on">
 						<InputText id="title" v-model="title" />
 						<label for="title">{{ question }}</label>
 					</FloatLabel>

diff --git a/resources/js/components/forms/profile/SetLogin.vue b/resources/js/components/forms/profile/SetLogin.vue
@@ -11,7 +11,7 @@
 				<div class="pb-5">
 					{{ $t("lychee.PASSWORD_TITLE") }}
 				</div>
-				<FloatLabel>
+				<FloatLabel variant="on">
 					<InputPassword id="oldPassword" v-model="oldPassword" :invalid="!oldPassword && hasChanged" />
 					<label class="" for="oldPassword">{{ $t("lychee.PASSWORD_CURRENT") }}</label>
 				</FloatLabel>
@@ -20,15 +20,15 @@
 				<div class="py-5">
 					{{ $t("lychee.PASSWORD_TEXT") }}
 				</div>
-				<FloatLabel>
+				<FloatLabel variant="on">
 					<InputText id="username" v-model="username" />
 					<label class="" for="username">{{ $t("lychee.USERNAME") }}</label>
 				</FloatLabel>
-				<FloatLabel class="mt-4">
+				<FloatLabel class="mt-4" variant="on">
 					<InputPassword id="password" v-model="password" />
 					<label class="" for="password">{{ $t("lychee.LOGIN_PASSWORD") }}</label>
 				</FloatLabel>
-				<FloatLabel class="mt-4">
+				<FloatLabel class="mt-4" variant="on">
 					<InputPassword id="password_confirmation" v-model="password_confirmation" :invalid="password !== password_confirmation" />
 					<label class="" for="password_confirmation">{{ $t("lychee.LOGIN_PASSWORD_CONFIRM") }}</label>
 				</FloatLabel>
@@ -37,7 +37,7 @@
 				<div class="py-5">
 					{{ $t("lychee.USER_EMAIL_INSTRUCTION") }}
 				</div>
-				<FloatLabel>
+				<FloatLabel variant="on">
 					<InputText id="email" v-model="email" />
 					<label class="" for="email">{{ $t("lychee.ENTER_EMAIL") }}</label>
 				</FloatLabel>

diff --git a/resources/js/components/forms/users/CreateUser.vue b/resources/js/components/forms/users/CreateUser.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="w-full flex flex-wrap md:flex-nowrap gap-2 justify-center">
-		<FloatLabel class="w-1/3">
+		<FloatLabel class="w-1/3" variant="on">
 			<InputText id="username" v-model="username" aria-label="Username" />
 			<label class="" for="username">{{ $t("lychee.USERNAME") }}</label>
 		</FloatLabel>
-		<FloatLabel class="w-1/3">
+		<FloatLabel class="w-1/3" variant="on">
 			<InputPassword id="password" v-model="password" aria-label="Password" />
 			<label class="" for="password">{{ $t("lychee.PASSWORD") }}</label>
 		</FloatLabel>

diff --git a/resources/js/components/modals/KeybindingsHelp.vue b/resources/js/components/modals/KeybindingsHelp.vue
@@ -96,6 +96,8 @@ const shortcutsList = ref([
 			{ action: "Show this modal", key: "?" },
 			// { action: "Toggle Sensitive albums", key: "h" },
 			{ action: "Select all", key: "ctrl/cmd a" },
+			{ action: "Move selection", key: "m" },
+			{ action: "Delete selection", key: "BckSpace" },
 		],
 	},
 	{
@@ -105,8 +107,10 @@ const shortcutsList = ref([
 			{ action: "Upload photos", key: "u" },
 			{ action: "Search", key: "/" },
 			{ action: "Start/Stop slideshow", key: "Space" },
-			{ action: "Toggle panel", key: "i" },
 			{ action: "Select all", key: "ctrl/cmd a" },
+			{ action: "Move selection", key: "m" },
+			{ action: "Delete selection", key: "BckSpace" },
+			{ action: "Toggle panel", key: "i" },
 			// { action: "Select all albums or photos", key: "ctrl a" },
 		],
 	},
@@ -123,12 +127,13 @@ const shortcutsList = ref([
 			// TODO: implement this.
 			{ action: "Cycle overlay mode", key: "o" },
 			{ action: "Start/Stop slideshow", key: "Space" },
-			{ action: "Show information", key: "i" },
-			{ action: "Edit information", key: "e" },
 			{ action: "Star photo", key: "s" },
+			{ action: "Move photo", key: "m" },
+			{ action: "Delete the photo", key: "BckSpace" },
+			{ action: "Edit information", key: "e" },
+			{ action: "Show information", key: "i" },
 			// { action: "Rotate counter clock wise", key: "ctrl ←" },
 			// { action: "Rotate clockwise", key: "ctrl →" },
-			{ action: "Delete the photo", key: "BckSpace" },
 		],
 	},
 ]);

diff --git a/resources/js/components/modals/LoginModal.vue b/resources/js/components/modals/LoginModal.vue
@@ -22,13 +22,13 @@
 					</template>
 				</div>
 				<div class="inline-flex flex-col gap-2 px-9">
-					<FloatLabel>
+					<FloatLabel variant="on">
 						<InputText id="username" v-model="username" autocomplete="username" />
 						<label class="" for="username">{{ $t("lychee.USERNAME") }}</label>
 					</FloatLabel>
 				</div>
 				<div class="inline-flex flex-col gap-2 px-9">
-					<FloatLabel>
+					<FloatLabel variant="on">
 						<InputPassword id="password" v-model="password" @keydown.enter="login" autocomplete="current-password" />
 						<label class="" for="password">{{ $t("lychee.PASSWORD") }}</label>
 					</FloatLabel>

diff --git a/resources/js/components/modals/RegisterLychee.vue b/resources/js/components/modals/RegisterLychee.vue
@@ -7,7 +7,7 @@
 					<template v-if="!is_se_enabled">
 						<h2 class="my-6 font-bold text-center">Enter your license key below:</h2>
 						<p class="text-muted-color text-center">
-							<FloatLabel>
+							<FloatLabel variant="on">
 								<InputText v-model="licenseKey" id="licenseKey" class="w-full" @update:model-value="licenseKeyIsInvValid = false" />
 								<label for="licenseKey">{{ "License key" }}</label>
 							</FloatLabel>

diff --git a/resources/js/components/modals/WebauthnModal.vue b/resources/js/components/modals/WebauthnModal.vue
@@ -3,7 +3,7 @@
 		<template #container="{ closeCallback }">
 			<form v-focustrap class="flex flex-col gap-4 relative max-w-full text-sm rounded-md pt-9">
 				<div class="inline-flex flex-col gap-2 px-9">
-					<FloatLabel>
+					<FloatLabel variant="on">
 						<InputText id="username" v-model="username" />
 						<label class="" for="username">{{ $t("lychee.USERNAME") }}</label>
 					</FloatLabel>