mirror/maloja
1
0
Fork 0
mirror of https://github.com/krateng/maloja.git synced 2023-08-10 21:12:55 +03:00
Code Issues Projects Releases Wiki Activity

Improved design of scrobble delete functionality

Browse Source
This commit is contained in:
krateng 2022-04-07 20:23:03 +02:00
parent 848f009774
commit 8d111b6de7
3 changed files with 44 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
maloja/web/jinja/partials/scrobbles.jinja
View File

@ -6,6 +6,9 @@
{% import 'snippets/entityrow.jinja' as entityrow %} {% import 'snippets/entityrow.jinja' as entityrow %}
<script src="/edit.js"></script>
<table class='list'> <table class='list'>
{% for s in scrobbles -%} {% for s in scrobbles -%}
{%- if loop.index0 >= firstindex and loop.index0 < lastindex -%} {%- if loop.index0 >= firstindex and loop.index0 < lastindex -%}
@ -16,15 +19,17 @@
<td class='delete_area'> <td class='delete_area'>
<span class="confirmactions"> <span class="confirmactions">
<button class="smallbutton warning">Confirm</button> <button class="smallbutton warning" onclick="deleteScrobble({{ s.time }},this)">Confirm</button>
<button class="smallbutton" onclick="this.parentElement.parentElement.classList.remove('active')">Cancel</button> <button class="smallbutton" onclick="toggleDeleteConfirm(this)">Cancel</button>
</span> </span>
<div class='deleteicon clickable_icon danger' onclick="this.parentElement.classList.add('active')"> <span class="initializeactions">
<div class='deleteicon clickable_icon danger' onclick="toggleDeleteConfirm(this)">
<svg style="width:14px;height:14px" viewBox="0 0 24 24"> <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" /> <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
</svg> </svg>
</div> </div>
</span>
</td> </td>
{% endif %} {% endif %}

26
maloja/web/static/css/maloja.css
View File

@ -592,18 +592,32 @@ table.list td.delete_area {
width:7em; width:7em;
} }
table.list td.delete_area span.confirmactions { /* 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; display: none;
} }
table.list td.delete_area.active span.confirmactions { table.list tr td.delete_area span.initializeactions {
display:inline-block; display: initial;
} }
table.list td.delete_area div.deleteicon { table.list tr td.delete_area.active span.confirmactions {
display:inline-block; display: initial;
} }
table.list td.delete_area.active div.deleteicon { table.list tr td.delete_area.active span.initializeactions {
display: none; 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;
}
/* /*

10
maloja/web/static/js/edit.js Normal file
View File

@ -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');
}