From 8d111b6de711646d49152c15ac0549b629244f36 Mon Sep 17 00:00:00 2001
From: krateng <git.noreply@krateng.ch>
Date: Thu, 7 Apr 2022 20:23:03 +0200
Subject: [PATCH] Improved design of scrobble delete functionality
---
maloja/web/jinja/partials/scrobbles.jinja | 19 ++++++++------
maloja/web/static/css/maloja.css | 30 +++++++++++++++++------
maloja/web/static/js/edit.js | 10 ++++++++
3 files changed, 44 insertions(+), 15 deletions(-)
create mode 100644 maloja/web/static/js/edit.js
diff --git a/maloja/web/jinja/partials/scrobbles.jinja b/maloja/web/jinja/partials/scrobbles.jinja
index bc949cf..1fb1cbd 100644
--- a/maloja/web/jinja/partials/scrobbles.jinja
+++ b/maloja/web/jinja/partials/scrobbles.jinja
@@ -6,6 +6,9 @@
{% import 'snippets/entityrow.jinja' as entityrow %}
+<script src="/edit.js"></script>
+
+
<table class='list'>
{% for s in scrobbles -%}
{%- if loop.index0 >= firstindex and loop.index0 < lastindex -%}
@@ -16,15 +19,17 @@
<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>
+ <button class="smallbutton warning" onclick="deleteScrobble({{ s.time }},this)">Confirm</button>
+ <button class="smallbutton" onclick="toggleDeleteConfirm(this)">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>
+ <span class="initializeactions">
+ <div class='deleteicon clickable_icon danger' onclick="toggleDeleteConfirm(this)">
+ <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>
+ </span>
</td>
{% endif %}
diff --git a/maloja/web/static/css/maloja.css b/maloja/web/static/css/maloja.css
index cabb06a..3056671 100644
--- a/maloja/web/static/css/maloja.css
+++ b/maloja/web/static/css/maloja.css
@@ -592,17 +592,31 @@ table.list td.delete_area {
width:7em;
}
-table.list td.delete_area span.confirmactions {
- display:none;
+/* rows that can be deleted in some form
+ 'active' class on the delete area cell to toggle confirm prompt
+ 'removed' class on the whole row to delete
+*/
+table.list tr td.delete_area span.confirmactions {
+ display: none;
}
-table.list td.delete_area.active span.confirmactions {
- display:inline-block;
+table.list tr td.delete_area span.initializeactions {
+ display: initial;
}
-table.list td.delete_area div.deleteicon {
- display:inline-block;
+table.list tr td.delete_area.active span.confirmactions {
+ display: initial;
}
-table.list td.delete_area.active div.deleteicon {
- display:none;
+table.list tr td.delete_area.active span.initializeactions {
+ display: none;
+}
+table.list tr.removed td.delete_area span.confirmactions {
+ display: none;
+}
+table.list tr.removed td.delete_area span.initializeactions {
+ display: none;
+}
+table.list tr.removed {
+ text-decoration: line-through;
+ opacity:0.4;
}
diff --git a/maloja/web/static/js/edit.js b/maloja/web/static/js/edit.js
new file mode 100644
index 0000000..c44afc0
--- /dev/null
+++ b/maloja/web/static/js/edit.js
@@ -0,0 +1,10 @@
+// JS for all web interface editing / deletion of scrobble data
+
+function toggleDeleteConfirm(element) {
+ element.parentElement.parentElement.classList.toggle('active');
+}
+
+function deleteScrobble(id,element) {
+ element.parentElement.parentElement.parentElement.classList.add('removed');
+
+}