file note layout tweaks

This commit is contained in:
zadam 2020-01-19 10:29:21 +01:00
parent 37f279fab0
commit a99c016818
3 changed files with 37 additions and 35 deletions

View File

@ -6,39 +6,51 @@ import TabAwareWidget from "../tab_aware_widget.js";
const TPL = ` const TPL = `
<div class="note-detail-file note-detail-component"> <div class="note-detail-file note-detail-component">
<style>
.note-detail-file {
padding: 10px;
}
.file-table th, .file-table td {
padding: 10px;
font-size: larger;
}
.file-preview-content {
background-color: var(--accented-background-color);
padding: 15px;
max-height: 300px;
overflow: auto;
margin: 10px;
}
</style>
<table class="file-table"> <table class="file-table">
<tr> <tr>
<th>Note ID:</th> <th nowrap>Note ID:</th>
<td class="file-note-id"></td> <td class="file-note-id"></td>
</tr> </tr>
<tr> <tr>
<th>Original file name:</th> <th nowrap>Original file name:</th>
<td class="file-filename"></td> <td class="file-filename"></td>
</tr> </tr>
<tr> <tr>
<th>File type:</th> <th nowrap>File type:</th>
<td class="file-filetype"></td> <td class="file-filetype"></td>
</tr> </tr>
<tr> <tr>
<th>File size:</th> <th nowrap>File size:</th>
<td class="file-filesize"></td> <td class="file-filesize"></td>
</tr> </tr>
<tr class="file-preview-row"> </table>
<th>Preview:</th>
<td>
<pre class="file-preview-content"></pre> <pre class="file-preview-content"></pre>
</td>
</tr>
<tr>
<td colspan="2">
<button class="file-download btn btn-sm btn-primary" type="button">Download</button> <button class="file-download btn btn-sm btn-primary" type="button">Download</button>
&nbsp; &nbsp;
<button class="file-open btn btn-sm btn-primary" type="button">Open</button> <button class="file-open btn btn-sm btn-primary" type="button">Open</button>
&nbsp; &nbsp;
<button class="file-upload-new-revision btn btn-sm btn-primary">Upload new revision</button> <button class="file-upload-new-revision btn btn-sm btn-primary">Upload new revision</button>
</td>
</tr>
</table>
<input type="file" class="file-upload-new-revision-input" style="display: none"> <input type="file" class="file-upload-new-revision-input" style="display: none">
</div>`; </div>`;
@ -50,7 +62,6 @@ class NoteDetailFile extends TabAwareWidget{
this.$fileName = this.$widget.find(".file-filename"); this.$fileName = this.$widget.find(".file-filename");
this.$fileType = this.$widget.find(".file-filetype"); this.$fileType = this.$widget.find(".file-filetype");
this.$fileSize = this.$widget.find(".file-filesize"); this.$fileSize = this.$widget.find(".file-filesize");
this.$previewRow = this.$widget.find(".file-preview-row");
this.$previewContent = this.$widget.find(".file-preview-content"); this.$previewContent = this.$widget.find(".file-preview-content");
this.$downloadButton = this.$widget.find(".file-download"); this.$downloadButton = this.$widget.find(".file-download");
this.$openButton = this.$widget.find(".file-open"); this.$openButton = this.$widget.find(".file-open");
@ -116,11 +127,11 @@ class NoteDetailFile extends TabAwareWidget{
this.$fileType.text(this.tabContext.note.mime); this.$fileType.text(this.tabContext.note.mime);
if (this.tabContext.note.content) { if (this.tabContext.note.content) {
this.$previewRow.show(); this.$previewContent.show();
this.$previewContent.text(this.tabContext.note.content); this.$previewContent.text(this.tabContext.note.content);
} }
else { else {
this.$previewRow.hide(); this.$previewContent.empty().hide();
} }
// open doesn't work for protected notes since it works through browser which isn't in protected session // open doesn't work for protected notes since it works through browser which isn't in protected session

View File

@ -79,6 +79,10 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
// we replace the whole content in one step so there can't be any race conditions // we replace the whole content in one step so there can't be any race conditions
// (previously we saw promoted attributes doubling) // (previously we saw promoted attributes doubling)
this.$container.empty().append($tbody); this.$container.empty().append($tbody);
this.$widget.show();
}
else {
this.$widget.hide();
} }
return attributes; return attributes;

View File

@ -353,11 +353,6 @@ div.ui-tooltip {
background-color: #eeeeee background-color: #eeeeee
} }
.file-table th, .file-table td {
padding: 10px;
font-size: larger;
}
#sql-console-query { #sql-console-query {
height: 150px; height: 150px;
width: 100%; width: 100%;
@ -440,14 +435,6 @@ pre:not(.CodeMirror-line) {
white-space: pre-wrap; white-space: pre-wrap;
} }
.file-preview-content {
background-color: var(--accented-background-color);
padding: 15px;
max-width: 600px;
max-height: 300px;
overflow: auto;
}
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }