From c9fa9956bbe417268fd174c0417cbbdb2b8492cc Mon Sep 17 00:00:00 2001
From: krateng <git.noreply@krateng.ch>
Date: Thu, 7 Apr 2022 20:00:09 +0200
Subject: [PATCH] Improved delete button

---
 maloja/web/jinja/partials/scrobbles.jinja | 17 +++++++----
 maloja/web/static/css/maloja.css          | 36 ++++++++++++++++++++---
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/maloja/web/jinja/partials/scrobbles.jinja b/maloja/web/jinja/partials/scrobbles.jinja
index a394e48..bc949cf 100644
--- a/maloja/web/jinja/partials/scrobbles.jinja
+++ b/maloja/web/jinja/partials/scrobbles.jinja
@@ -13,12 +13,19 @@
 			<td class='time'>{{ malojatime.timestamp_desc(s["time"],short=shortTimeDesc) }}</td>
 			{{ entityrow.row(s.track) }}
 			{% if adminmode %}
-			<td class='iconbuttons'>
-				<div class='clickable_icon danger'>
-				<svg style="width:16px;height:16px" viewBox="0 0 24 24">
-					<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
-				</svg>
+
+			<td class='delete_area'>
+				<span class="confirmactions">
+					<button class="smallbutton warning">Confirm</button>
+					<button class="smallbutton" onclick="this.parentElement.parentElement.classList.remove('active')">Cancel</button>
+				</span>
+
+				<div class='deleteicon clickable_icon danger' onclick="this.parentElement.classList.add('active')">
+					<svg style="width:14px;height:14px" viewBox="0 0 24 24">
+						<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
+					</svg>
 				</div>
+
 			</td>
 			{% endif %}
 		</tr>
diff --git a/maloja/web/static/css/maloja.css b/maloja/web/static/css/maloja.css
index c9a1e33..cabb06a 100644
--- a/maloja/web/static/css/maloja.css
+++ b/maloja/web/static/css/maloja.css
@@ -446,11 +446,21 @@ button:hover {
 	background-color: var(--button-color-bg-focus);
 	color: var(--button-color-fg-focus);
 }
+button.warning:hover {
+	background-color:darkred;
+	color:white;
+}
 button.locked {
 	background-color:grey;
 	color:black;
 	cursor:not-allowed;
 }
+button.smallbutton {
+	padding:1px;
+	padding-right:2px;
+	padding-left:2px;
+	font-size: 80%;
+}
 
 
 
@@ -479,6 +489,7 @@ table.list {
 table.list tr {
 	background-color: var(--current-bg-color);
 	border-color: var(--current-bg-color);
+	height: 1.4em;
 
 }
 
@@ -500,10 +511,14 @@ table.list tr:nth-child(even) {
 	/* make rows distinguishable with respect to any bg color */
 }
 
-table.list tr:nth-child(5n) td {
-	border-bottom: 1px solid rgba(120,120,120,0.2);
+table.list tr:nth-child(4n) td {
+	border-bottom: 1px solid rgba(120,120,120,0.4);
 	padding-bottom: 1px;
 }
+table.list tr:nth-child(4n+1) td {
+	border-top: 1px solid rgba(120,120,120,0.4);
+	padding-top: 1px;
+}
 
 table.list tr:hover {
 	--current-bg-color: rgba(255,255,255,0.2);
@@ -572,9 +587,22 @@ table.list td.searchProvider:hover {
 	color: gold;
 }
 
-table.list td.iconbuttons {
+table.list td.delete_area {
 	text-align: right;
-	width:40px;
+	width:7em;
+}
+
+table.list td.delete_area span.confirmactions {
+	display:none;
+}
+table.list td.delete_area.active span.confirmactions {
+	display:inline-block;
+}
+table.list td.delete_area div.deleteicon {
+	display:inline-block;
+}
+table.list td.delete_area.active div.deleteicon {
+	display:none;
 }