beautiful buttons + selector + images

frontend/src/App.vue

@@ -113,7 +113,7 @@ ul>li {
 }
 
 .active {
-	background-color: #09c7aa;
+	background-color: #646cff;
 }
 
 .active>a {
@@ -122,7 +122,7 @@ ul>li {
 
 a {
 	color: rgb(172, 165, 154);
-	text-decoration-color: initial;
+	text-decoration: none;
 	font-family: "Aeonik", sans-serif;
 }
 

frontend/src/components/Gallery.vue

@@ -38,6 +38,16 @@ export default defineComponent({
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
+	margin: 5px;
+	padding: 0.5rem;
+	background-color: #1a1a1a;
+	color: white;
+	border-radius: 8px;
+	border: 1px solid transparent;
+}
+
+.image:hover {
+	border-color: #646cff;
 }
 
 label {

frontend/src/components/Home.vue

@@ -13,13 +13,15 @@ export default defineComponent({
 	props: {
 		images: {
 			type: Map<number, ImageType>,
-			required: true
+			required: true,
 		}
 	},
 	data() {
 		return {
-			imageSelectedId: 0 as number,
-			sure: false as boolean
+			imageSelectedId: -1 as number,
+			sure: false as boolean,
+			timer: null as ReturnType<typeof setTimeout> | null,
+			open: false as boolean,
 		}
 	},
 	mounted() {
@@ -39,25 +41,140 @@ export default defineComponent({
 				this.$emit('delete', this.imageSelectedId);
 			else
 				this.sure = true;
+		},
+		startTimer() {
+			if (this.timer !== null) {
+				clearTimeout(this.timer);
+				this.timer = null;
+			}
+			this.timer = setTimeout(() => {
+				location.href = "/images/" + this.imageSelectedId;
+			}, 2500);
+		},
+		clearTimer() {
+			if (this.timer !== null) {
+				clearTimeout(this.timer);
+				this.timer = null;
+			}
 		}
 	}
 })
 </script>
 <template>
 	<div class="flex" v-if="images.keys != null">
-		<div>
+		<Image @mouseleave="clearTimer()" @mouseenter="startTimer()" class="home"
+			v-if="imageSelectedId !== undefined && imageSelectedId !== -1" :id="imageSelectedId">
+		</Image>
+		<div class="selector">
 			<label>Selectioner une image: </label>
-			<select v-model="imageSelectedId" style="width: min-content;margin: 15px;">
-				<option v-for="[id, image] in images" :key="id" :value="id">{{ image.name }}</option>
-			</select>
-			<button @mouseleave="sure = false" @click="confirmDelete()" :class="sure ? 'confirm' : ''">
+			<div class="custom-select" :tabindex="imageSelectedId" @blur="open = false">
+				<div class="selected" :class="{ open: open }" @click="open = !open">
+					<span>{{ images.get(imageSelectedId)?.name }}</span>
+				</div>
+				<div class="items" :class="{ selectHide: !open }">
+					<div v-for="[id, image] of images" :key="id" @click="imageSelectedId = image.id; open = false;">
+						<span>{{ image.name }}</span>
+					</div>
+				</div>
+			</div>
+			<button class="button" @mouseleave="sure = false" @click="confirmDelete()" :class="sure ? 'confirm' : ''">
 				{{ sure ? "Confirmer" : "Supprimer" }}</button>
 		</div>
-		<Image class="home" v-if="imageSelectedId !== undefined" :id="imageSelectedId"></Image>
 	</div>
 	<h1 v-else>Aucune image trouvée</h1>
 </template>
 <style scoped>
+/* SELECT */
+
+.custom-select {
+	width: 100%;
+	text-align: left;
+	outline: none;
+	height: 47px;
+	line-height: 47px;
+}
+
+.custom-select .selected {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: #1a1a1a;
+	border-radius: 6px;
+	/* border: 1px solid #666666; */
+	color: #fff;
+	padding-left: 1em;
+	cursor: pointer;
+	user-select: none;
+	border: 1px solid transparent;
+}
+
+.custom-select .selected:hover {
+	border-color: #646cff;
+}
+
+.custom-select span {
+	padding-right: 1rem;
+}
+
+.custom-select .selected.open {
+	border: 1px solid #646cff;
+	border-radius: 6px 6px 0px 0px;
+}
+
+.custom-select .selected:after {
+	content: "";
+	margin-right: 15px;
+	margin-top: 5px;
+	border: 5px solid transparent;
+	border-color: #fff transparent transparent transparent;
+}
+
+.custom-select .items {
+	color: #fff;
+	border-radius: 0px 0px 6px 6px;
+	overflow: hidden;
+	border-right: 1px solid #646cff;
+	border-left: 1px solid #646cff;
+	border-bottom: 1px solid #646cff;
+	background-color: #1a1a1a;
+}
+
+.custom-select .items div {
+	color: #fff;
+	padding-left: 1em;
+	cursor: pointer;
+	user-select: none;
+}
+
+.custom-select .items div:hover {
+	background-color: #646cff;
+}
+
+.selectHide {
+	display: none;
+}
+
+/* FIN SELECT */
+
+html {
+	overflow: hidden;
+}
+
+.selector {
+	margin-bottom: 5%;
+	display: flex;
+	flex-direction: row;
+	align-content: center;
+	justify-content: center;
+	gap: 1em;
+}
+
+.selector label {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
 .flex {
 	display: flex;
 	flex-direction: column;
@@ -78,4 +195,9 @@ label {
 	max-width: 60%;
 	max-height: 60vh;
 }
+
+.home img:hover {
+	transform: scale(2);
+	transition: transform 3s;
+}
 </style>

frontend/src/components/Upload.vue

@@ -108,9 +108,10 @@ export default defineComponent({
 	</div>
 	<h2 v-if="file !== null && file.length !== 0">Preview :</h2>
 	<div class="previewBox">
-		<label v-for="(f, id) in (file as FileList)" :key="id" class="imageLabel">{{ (f as File).name }}:
+		<div class="imagePreview" v-for="(f, id) in (file as FileList)" :key="id">
+			<label>{{ (f as File).name }}</label>
 			<img :id="'preview-' + id" />
-		</label>
+		</div>
 	</div>
 </template>
 <style scoped>
@@ -144,29 +145,19 @@ h2 {
 .filename {
 	background-color: white;
 	color: black;
-	border: 1px solid rgb(255, 0, 98);
+	border: 1px solid #1a1a1a;
 	border-radius: 0 8px 8px 0;
 }
 
 #labelInput {
 	border-radius: 8px 0 0 8px;
-	background-color: rgb(255, 0, 98);
+	background-color: #1a1a1a;
 }
 
 .inputform:hover label {
 	border-color: #646cff;
 }
 
-.imageLabel {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	max-width: 33%;
-	height: 33vh;
-	margin: 5px;
-}
-
 .previewBox {
 	display: flex;
 	flex-direction: row;
@@ -175,6 +166,25 @@ h2 {
 	flex-wrap: wrap;
 }
 
+.imagePreview {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	max-width: 33%;
+	height: 33vh;
+	margin: 5px;
+	padding: 0.5rem;
+	background-color: #1a1a1a;
+	color: white;
+	border-radius: 8px;
+	border: 1px solid transparent;
+}
+
+.imagePreview:hover {
+	border-color: #646cff;
+}
+
 .error {
 	color: red;
 	font-weight: bold;