mirror of
https://github.com/zadam/trilium.git
synced 2025-06-05 17:38:47 +02:00
file properties converted to collapsible section container
This commit is contained in:
zadam
parent
8fb7dd451e
commit
552d213817
@ -17,6 +17,7 @@ import Container from "../widgets/container.js";
|
||||
import SqlTableSchemasWidget from "../widgets/sql_table_schemas.js";
|
||||
import NoteListWidget from "../widgets/note_list.js";
|
||||
import SqlResultWidget from "../widgets/sql_result.js";
|
||||
import FilePropertiesWidget from "../widgets/file_properties.js";
|
||||
|
||||
export default class DesktopExtraWindowLayout {
|
||||
constructor(customWidgets) {
|
||||
@ -48,6 +49,7 @@ export default class DesktopExtraWindowLayout {
|
||||
.child(
|
||||
new TabCachingWidget(() => new CollapsibleSectionContainer()
|
||||
.child(new SearchDefinitionWidget())
|
||||
.child(new FilePropertiesWidget())
|
||||
.child(new PromotedAttributesWidget())
|
||||
.child(new OwnedAttributeListWidget())
|
||||
.child(new InheritedAttributesWidget())
|
||||
|
||||
@ -28,6 +28,7 @@ import SearchDefinitionWidget from "../widgets/search_definition.js";
|
||||
import Container from "../widgets/container.js";
|
||||
import SqlResultWidget from "../widgets/sql_result.js";
|
||||
import SqlTableSchemasWidget from "../widgets/sql_table_schemas.js";
|
||||
import FilePropertiesWidget from "../widgets/file_properties.js";
|
||||
|
||||
const RIGHT_PANE_CSS = `
|
||||
<style>
|
||||
@ -156,6 +157,7 @@ export default class DesktopMainWindowLayout {
|
||||
.child(
|
||||
new TabCachingWidget(() => new CollapsibleSectionContainer()
|
||||
.child(new SearchDefinitionWidget())
|
||||
.child(new FilePropertiesWidget())
|
||||
.child(new PromotedAttributesWidget())
|
||||
.child(new OwnedAttributeListWidget())
|
||||
.child(new InheritedAttributesWidget())
|
||||
|
||||
133
src/public/app/widgets/file_properties.js
Normal file
133
src/public/app/widgets/file_properties.js
Normal file
@ -0,0 +1,133 @@
|
||||
import server from "../services/server.js";
|
||||
import TabAwareWidget from "./tab_aware_widget.js";
|
||||
import toastService from "../services/toast.js";
|
||||
import openService from "../services/open.js";
|
||||
import utils from "../services/utils.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="file-properties-widget">
|
||||
<style>
|
||||
.file-table {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.file-table th, .file-table td {
|
||||
padding: 5px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.file-buttons {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
</style>
|
||||
|
||||
<table class="file-table">
|
||||
<tr>
|
||||
<th>Note ID:</th>
|
||||
<td class="file-note-id"></td>
|
||||
<th>Original file name:</th>
|
||||
<td class="file-filename"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>File type:</th>
|
||||
<td class="file-filetype"></td>
|
||||
<th>File size:</th>
|
||||
<td class="file-filesize"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<div class="file-buttons">
|
||||
<button class="file-download btn btn-sm btn-primary" type="button">Download</button>
|
||||
|
||||
<button class="file-open btn btn-sm btn-primary" type="button">Open</button>
|
||||
|
||||
<button class="file-upload-new-revision btn btn-sm btn-primary">Upload new revision</button>
|
||||
|
||||
<input type="file" class="file-upload-new-revision-input" style="display: none">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>\`;
|
||||
`;
|
||||
|
||||
export default class FilePropertiesWidget extends TabAwareWidget {
|
||||
static getType() { return "file"; }
|
||||
|
||||
renderTitle(note) {
|
||||
return {
|
||||
show: note.type === 'file',
|
||||
activate: true,
|
||||
$title: 'File'
|
||||
};
|
||||
}
|
||||
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.contentSized();
|
||||
this.$fileNoteId = this.$widget.find(".file-note-id");
|
||||
this.$fileName = this.$widget.find(".file-filename");
|
||||
this.$fileType = this.$widget.find(".file-filetype");
|
||||
this.$fileSize = this.$widget.find(".file-filesize");
|
||||
this.$downloadButton = this.$widget.find(".file-download");
|
||||
this.$openButton = this.$widget.find(".file-open");
|
||||
this.$uploadNewRevisionButton = this.$widget.find(".file-upload-new-revision");
|
||||
this.$uploadNewRevisionInput = this.$widget.find(".file-upload-new-revision-input");
|
||||
|
||||
this.$downloadButton.on('click', () => openService.downloadFileNote(this.noteId));
|
||||
this.$openButton.on('click', () => openService.openFileNote(this.noteId));
|
||||
|
||||
this.$uploadNewRevisionButton.on("click", () => {
|
||||
this.$uploadNewRevisionInput.trigger("click");
|
||||
});
|
||||
|
||||
this.$uploadNewRevisionInput.on('change', async () => {
|
||||
const fileToUpload = this.$uploadNewRevisionInput[0].files[0]; // copy to allow reset below
|
||||
this.$uploadNewRevisionInput.val('');
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('upload', fileToUpload);
|
||||
|
||||
const result = await $.ajax({
|
||||
url: baseApiUrl + 'notes/' + this.noteId + '/file',
|
||||
headers: await server.getHeaders(),
|
||||
data: formData,
|
||||
type: 'PUT',
|
||||
timeout: 60 * 60 * 1000,
|
||||
contentType: false, // NEEDED, DON'T REMOVE THIS
|
||||
processData: false, // NEEDED, DON'T REMOVE THIS
|
||||
});
|
||||
|
||||
if (result.uploaded) {
|
||||
toastService.showMessage("New file revision has been uploaded.");
|
||||
|
||||
this.refresh();
|
||||
}
|
||||
else {
|
||||
toastService.showError("Upload of a new file revision failed.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async refreshWithNote(note) {
|
||||
const attributes = note.getAttributes();
|
||||
const attributeMap = utils.toObject(attributes, l => [l.name, l.value]);
|
||||
|
||||
this.$widget.show();
|
||||
|
||||
this.$fileNoteId.text(note.noteId);
|
||||
this.$fileName.text(attributeMap.originalFileName || "?");
|
||||
this.$fileType.text(note.mime);
|
||||
|
||||
const noteComplement = await this.tabContext.getNoteComplement();
|
||||
|
||||
this.$fileSize.text(noteComplement.contentLength + " bytes");
|
||||
|
||||
// open doesn't work for protected notes since it works through browser which isn't in protected session
|
||||
this.$openButton.toggle(!note.isProtected);
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,5 @@
|
||||
import utils from "../../services/utils.js";
|
||||
import openService from "../../services/open.js";
|
||||
import server from "../../services/server.js";
|
||||
import toastService from "../../services/toast.js";
|
||||
import TypeWidget from "./type_widget.js";
|
||||
|
||||
const TPL = `
|
||||
@ -13,53 +11,21 @@ const TPL = `
|
||||
|
||||
.note-detail-file {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.file-table th, .file-table td {
|
||||
padding: 5px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
|
||||
.file-preview-content {
|
||||
background-color: var(--accented-background-color);
|
||||
padding: 15px;
|
||||
max-height: 300px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<table class="file-table">
|
||||
<tr>
|
||||
<th>Note ID:</th>
|
||||
<td class="file-note-id"></td>
|
||||
<th>Original file name:</th>
|
||||
<td class="file-filename"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>File type:</th>
|
||||
<td class="file-filetype"></td>
|
||||
<th>File size:</th>
|
||||
<td class="file-filesize"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre class="file-preview-content"></pre>
|
||||
|
||||
<iframe class="pdf-preview" style="width: 100%; height: 100%; flex-grow: 100;"></iframe>
|
||||
|
||||
<div style="padding: 10px; display: flex; justify-content: space-evenly;">
|
||||
<button class="file-download btn btn-sm btn-primary" type="button">Download</button>
|
||||
|
||||
<button class="file-open btn btn-sm btn-primary" type="button">Open</button>
|
||||
|
||||
<button class="file-upload-new-revision btn btn-sm btn-primary">Upload new revision</button>
|
||||
|
||||
<input type="file" class="file-upload-new-revision-input" style="display: none">
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export default class FileTypeWidget extends TypeWidget {
|
||||
@ -68,50 +34,8 @@ export default class FileTypeWidget extends TypeWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.contentSized();
|
||||
this.$fileNoteId = this.$widget.find(".file-note-id");
|
||||
this.$fileName = this.$widget.find(".file-filename");
|
||||
this.$fileType = this.$widget.find(".file-filetype");
|
||||
this.$fileSize = this.$widget.find(".file-filesize");
|
||||
this.$previewContent = this.$widget.find(".file-preview-content");
|
||||
this.$pdfPreview = this.$widget.find(".pdf-preview");
|
||||
this.$downloadButton = this.$widget.find(".file-download");
|
||||
this.$openButton = this.$widget.find(".file-open");
|
||||
this.$uploadNewRevisionButton = this.$widget.find(".file-upload-new-revision");
|
||||
this.$uploadNewRevisionInput = this.$widget.find(".file-upload-new-revision-input");
|
||||
|
||||
this.$downloadButton.on('click', () => openService.downloadFileNote(this.noteId));
|
||||
this.$openButton.on('click', () => openService.openFileNote(this.noteId));
|
||||
|
||||
this.$uploadNewRevisionButton.on("click", () => {
|
||||
this.$uploadNewRevisionInput.trigger("click");
|
||||
});
|
||||
|
||||
this.$uploadNewRevisionInput.on('change', async () => {
|
||||
const fileToUpload = this.$uploadNewRevisionInput[0].files[0]; // copy to allow reset below
|
||||
this.$uploadNewRevisionInput.val('');
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('upload', fileToUpload);
|
||||
|
||||
const result = await $.ajax({
|
||||
url: baseApiUrl + 'notes/' + this.noteId + '/file',
|
||||
headers: await server.getHeaders(),
|
||||
data: formData,
|
||||
type: 'PUT',
|
||||
timeout: 60 * 60 * 1000,
|
||||
contentType: false, // NEEDED, DON'T REMOVE THIS
|
||||
processData: false, // NEEDED, DON'T REMOVE THIS
|
||||
});
|
||||
|
||||
if (result.uploaded) {
|
||||
toastService.showMessage("New file revision has been uploaded.");
|
||||
|
||||
this.refresh();
|
||||
}
|
||||
else {
|
||||
toastService.showError("Upload of a new file revision failed.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async doRefresh(note) {
|
||||
@ -120,13 +44,8 @@ export default class FileTypeWidget extends TypeWidget {
|
||||
|
||||
this.$widget.show();
|
||||
|
||||
this.$fileNoteId.text(note.noteId);
|
||||
this.$fileName.text(attributeMap.originalFileName || "?");
|
||||
this.$fileType.text(note.mime);
|
||||
|
||||
const noteComplement = await this.tabContext.getNoteComplement();
|
||||
|
||||
this.$fileSize.text(noteComplement.contentLength + " bytes");
|
||||
this.$previewContent.empty().hide();
|
||||
this.$pdfPreview.attr('src', '').empty().hide();
|
||||
|
||||
@ -138,8 +57,5 @@ export default class FileTypeWidget extends TypeWidget {
|
||||
this.$pdfPreview.show();
|
||||
this.$pdfPreview.attr("src", openService.getUrlForDownload("api/notes/" + this.noteId + "/open"));
|
||||
}
|
||||
|
||||
// open doesn't work for protected notes since it works through browser which isn't in protected session
|
||||
this.$openButton.toggle(!note.isProtected);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user