Add File Download for notes.

This commit is contained in:
2025-07-06 22:46:31 +02:00
parent 9113dc1a69
commit f4b8664fd5
3 changed files with 527 additions and 6 deletions

View File

@@ -22,6 +22,38 @@
</div>
<div class="note-actions">
<div class="dropdown" style="display: inline-block;">
<button class="btn btn-success dropdown-toggle" type="button" id="downloadDropdown" data-toggle="dropdown">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="vertical-align: -2px; margin-right: 4px;">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
Download
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{ url_for('download_note', slug=note.slug, format='md') }}">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="margin-right: 8px;">
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V7s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
</svg>
Markdown (.md)
</a>
<a class="dropdown-item" href="{{ url_for('download_note', slug=note.slug, format='html') }}">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="margin-right: 8px;">
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
<path d="M8.5 6.5a.5.5 0 0 0-1 0V8H6a.5.5 0 0 0 0 1h1.5v1.5a.5.5 0 0 0 1 0V9H10a.5.5 0 0 0 0-1H8.5V6.5z"/>
</svg>
HTML (.html)
</a>
<a class="dropdown-item" href="{{ url_for('download_note', slug=note.slug, format='txt') }}">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="margin-right: 8px;">
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
<path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
</svg>
Plain Text (.txt)
</a>
</div>
</div>
<a href="{{ url_for('view_note_mindmap', slug=note.slug) }}" class="btn btn-info">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="vertical-align: -2px; margin-right: 4px;">
<circle cx="8" cy="8" r="2"/>
@@ -452,6 +484,64 @@
font-weight: 500;
}
/* Dropdown styles */
.dropdown {
position: relative;
}
.dropdown-toggle::after {
content: "";
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
min-width: 200px;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
background-color: white;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.dropdown-menu.show {
display: block;
}
.dropdown-item {
display: flex;
align-items: center;
width: 100%;
padding: 0.5rem 1rem;
color: #212529;
text-align: inherit;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border: 0;
}
.dropdown-item:hover {
background-color: #f8f9fa;
color: #212529;
text-decoration: none;
}
.dropdown-item svg {
flex-shrink: 0;
}
/* Modal styles */
.modal-content {
max-width: 500px;
@@ -486,8 +576,22 @@
</style>
<script>
{% if note.can_user_edit(g.user) %}
document.addEventListener('DOMContentLoaded', function() {
// Download dropdown functionality
const downloadBtn = document.getElementById('downloadDropdown');
const downloadMenu = downloadBtn.nextElementSibling;
downloadBtn.addEventListener('click', function(e) {
e.stopPropagation();
downloadMenu.classList.toggle('show');
});
// Close dropdown when clicking outside
document.addEventListener('click', function() {
downloadMenu.classList.remove('show');
});
{% if note.can_user_edit(g.user) %}
const modal = document.getElementById('link-modal');
const addLinkBtn = document.getElementById('add-link-btn');
const closeBtn = modal.querySelector('.close');
@@ -582,8 +686,8 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
});
{% endif %}
});
{% endif %}
</script>
{% endblock %}