xenofem/transbeam
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Wiki Activity

nicer delete buttons

Browse source
This commit is contained in:
xenofem 2022-04-28 03:35:02 -04:00
parent 01cfcd9fcc
commit 70384b04c3
3 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/feather-icons/x.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
Side by side

After

Width:  |  Height:  |  Size: 299 B

15
static/transbeam.css
View file

@ -85,6 +85,21 @@ td {
padding: 10px;
}
td.file_delete {
background-color: #888;
mask-image: url("feather-icons/x.svg");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
padding-left: 15px;
padding-right: 15px;
cursor: pointer;
}
td.file_delete:hover {
background-color: #f00;
}
td.file_size {
text-align: right;
}

9
static/transbeam.js
View file

@ -121,11 +121,8 @@ function addListEntry(file) {
const listEntry = document.createElement('tr');
const deleteButtonCell = document.createElement('td');
const deleteButton = document.createElement('button');
deleteButtonCell.appendChild(deleteButton);
deleteButton.className = 'file_delete';
deleteButton.textContent = 'x';
deleteButton.addEventListener('click', () => {
deleteButtonCell.className = 'file_delete';
deleteButtonCell.addEventListener('click', () => {
removeFile(file.name);
listEntry.remove();
updateFiles();
@ -160,7 +157,7 @@ uploadButton.addEventListener('click', (e) => {
if (files.length === 0) { return; }
fileInputContainer.remove();
for (const button of Array.from(document.getElementsByTagName('button'))) {
for (const button of Array.from(document.getElementsByTagName('button')).concat(...document.getElementsByClassName('file_delete'))) {
button.remove();
}