Browse Source

Prevent upload list from overflowing and add standalone copy text button

develop
Alice Gaudon 5 months ago
parent
commit
51da9f4c7c
  1. 2
      assets/sass/app.scss
  2. 17
      assets/sass/layout.scss
  3. 8
      assets/ts/copyable_text.ts
  4. 15
      views/file-uploader.njk

2
assets/sass/app.scss

@ -1,2 +1,2 @@
@import "layout";
@import "fm";
@import "fm";

17
assets/sass/layout.scss

@ -928,6 +928,23 @@ td.actions {
width: 100%;
}
.table-col-grow-cell {
display: flex;
flex-direction: row;
> * {
width: 0;
flex-grow: 1;
white-space: nowrap;
text-overflow: ellipsis;
}
* {
overflow: hidden;
text-overflow: ellipsis;
}
}
.pagination {
ul {
display: flex;

8
assets/ts/copyable_text.ts

@ -12,4 +12,12 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
});
document.querySelectorAll<HTMLElement>('.copy-button[data-content]').forEach(el => {
el.addEventListener('click', () => {
navigator.clipboard.writeText(`${el.dataset.content}`)
.then(() => console.log('copy success'))
.catch(console.error);
});
});
});

15
views/file-uploader.njk

@ -61,8 +61,7 @@
<thead>
<tr>
<th>#</th>
<th class="table-col-grow">URL</th>
<th>Name</th>
<th class="table-col-grow">Name</th>
<th>Size</th>
<th>Expires at</th>
<th>Actions</th>
@ -73,19 +72,15 @@
{% for file in files %}
<tr>
<td>{{ file.id }}</td>
<td>
<div class="copyable-text">
<a class="content" href="{{ file.getURL() }}" target="_blank">{{ file.getURL() }}</a>
<button class="copy-button"><i data-feather="copy"></i></button>
</div>
</td>
<td><pre>{{ file.real_name }}</pre></td>
<td class="table-col-grow-cell"><a href="{{ file.getURL() }}"><pre>{{ file.real_name }}</pre></a></td>
<td>{{ (file.size / (1024 * 1024)).toFixed(2) }}MB</td>
<td>{% if file.expires_at %}{{ file.expires_at.toISOString() }}{% else %}Never{% endif %}</td>
<td class="actions">
{% if file.shouldBeDeleted() %}
Pending deletion
{% else %}
<button class="copy-button" data-content="{{ file.getURL() }}"><i data-feather="copy"></i> <span class="tip">Copy URL</span></button>
<form action="{{ route('delete-file-frontend', file.slug) }}" method="post">
{{ macros.csrf(getCsrfToken) }}
<button class="button danger"><i data-feather="trash"></i> <span class="tip">Delete</span></button>
@ -95,7 +90,7 @@
</tr>
{% else %}
<tr>
<td colspan="6" class="center">You haven't uploaded any file yet.</td>
<td colspan="5" class="center">You haven't uploaded any file yet.</td>
</tr>
{% endfor %}
</tbody>

Loading…
Cancel
Save