PhotosIndex: replace edit button with edit menu

controllers/EditAsset.php

@@ -30,6 +30,22 @@ class EditAsset extends HTMLController
 			header('Location: ' . $redirectUrl);
 			exit;
 		}
+		else if ((isset($_REQUEST['inc_prio']) || isset($_REQUEST['dec_prio'])) && Session::validateSession('get'))
+		{
+			if (isset($_REQUEST['inc_prio']))
+				$priority = $asset->priority + 1;
+			else
+				$priority = $asset->priority - 1;
+
+			$asset->priority = max(0, min(100, $priority));
+			$asset->save();
+
+			if (isset($_SERVER['HTTP_REFERER']))
+				header('Location: ' . $_SERVER['HTTP_REFERER']);
+			else
+				header('Location: ' . BASEURL . '/' . $asset->getSubdir());
+			exit;
+		}
 
 		// Get a list of available photo albums
 		$allAlbums = [];

public/css/admin.css

@@ -1,27 +1,3 @@
-/* Edit icon on tiled grids
------------------------------*/
-.polaroid {
-	position: relative;
-}
-.polaroid a.edit {
-	background: var(--bs-body-bg);
-	border-radius: 3px;
-	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
-	color: var(--bs-body-color);
-	opacity: 0;
-	left: 20px;
-	line-height: 1.5;
-	padding: 5px 10px;
-	position: absolute;
-	transition: 0.25s;
-	top: 20px;
-	z-index: 50;
-}
-.polaroid:hover > a.edit {
-	opacity: 1;
-}
-
-
 /* Crop editor
 ----------------*/
 #crop_editor {

public/css/default.css

@@ -296,6 +296,34 @@ div.polaroid a {
 }
 
 
+/* Edit icon on tiled grids
+-----------------------------*/
+.polaroid {
+	position: relative;
+}
+.polaroid div.edit {
+	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+	opacity: 0;
+	left: 20px;
+	position: absolute;
+	transition: 0.25s;
+	top: 20px;
+	z-index: 50;
+}
+.polaroid div.edit .dropdown-item {
+	line-height: 1.4;
+}
+.polaroid div.edit .dropdown-toggle {
+	line-height: 1.4;
+	padding: 0.25rem 0.5rem;
+}
+.polaroid div.edit .dropdown-toggle::after {
+	margin-left: 0;
+}
+.polaroid:hover > div.edit {
+	opacity: 1;
+}
+
 
 /* Album title boxes
 ----------------------*/

templates/PhotoPage.php

@@ -25,7 +25,15 @@ class PhotoPage extends Template
 
 		echo '
 				<div class="row mt-5">
-					<div class="col-lg-9">
+					<div class="col-lg">';
+
+		$this->photoMeta();
+
+		echo '
+					</div>
+				</div>
+				<div class="row mt-5">
+					<div class="col-lg">
 						<div id="sub_photo" class="content-box">';
 
 		$this->userActions();
@@ -39,12 +47,6 @@ class PhotoPage extends Template
 		echo '
 						</div>
 					</div>
-					<div class="col-lg-3">';
-
-		$this->photoMeta();
-
-		echo '
-					</div>
 				</div>
 				<script type="text/javascript" src="', BASEURL, '/js/photonav.js"></script>';
 	}
@@ -109,12 +111,12 @@ class PhotoPage extends Template
 	private function photoMeta()
 	{
 		echo '
-				<ul class="list-group photo_meta">';
+				<ul class="list-group list-group-horizontal photo_meta">';
 
 		foreach ($this->metaData as $header => $body)
 		{
 			echo '
-					<li class="list-group-item">
+					<li class="list-group-item flex-fill">
 						<h4>', $header, '</h4>
 						', $body, '
 					</li>';

templates/PhotosIndex.php

@@ -81,6 +81,28 @@ class PhotosIndex extends Template
 		$this->previous_header = $header;
 	}
 
+	protected function editMenu(Image $image)
+	{
+		echo '
+				<div class="edit dropdown">
+					<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+					</button>
+					<ul class="dropdown-menu">
+						<li><a class="dropdown-item" href="', $image->getEditUrl(), '">Edit image</a></li>
+						<li><a class="dropdown-item" href="', $image->getDeleteUrl(), '&',
+							Session::getSessionTokenKey(), '=', Session::getSessionToken(),
+							'" onclick="return confirm(\'Are you sure you want to delete this image?\');',
+							'">Delete image</a></li>
+						<li><a class="dropdown-item" href="', $image->getEditUrl(), '&inc_prio&',
+							Session::getSessionTokenKey(), '=', Session::getSessionToken(),
+							'">Increase priority</a></li>
+						<li><a class="dropdown-item" href="', $image->getEditUrl(), '&dec_prio&',
+							Session::getSessionTokenKey(), '=', Session::getSessionToken(),
+							'">Decrease priority</a></li>
+					</ul>
+				</div>';
+	}
+
 	protected function photo(Image $image, $className, $width, $height, $crop = true, $fit = true)
 	{
 		// Prefer thumbnail aspect ratio if available, otherwise use image aspect ratio.
@@ -90,8 +112,7 @@ class PhotosIndex extends Template
 				<div class="polaroid ', $className, '" style="aspect-ratio: ', $aspectRatio, '">';
 
 		if ($this->show_edit_buttons)
-			echo '
+			$this->editMenu($image);
-					<a class="edit" href="', BASEURL, '/editasset/?id=', $image->getId(), '">Edit</a>';
 
 		echo '
 					<a href="', $image->getPageUrl(), $this->url_suffix, '#photo_frame">';