added note info into section container

This commit is contained in:
zadam 2021-05-26 23:00:40 +02:00
parent c4987c4fd1
commit b7ca3dec54
7 changed files with 64 additions and 130 deletions

View File

@ -1,26 +0,0 @@
import utils from "../services/utils.js";
import appContext from "../services/app_context.js";
const $dialog = $("#note-info-dialog");
const $noteId = $("#note-info-note-id");
const $dateCreated = $("#note-info-date-created");
const $dateModified = $("#note-info-date-modified");
const $type = $("#note-info-type");
const $mime = $("#note-info-mime");
const $okButton = $("#note-info-ok-button");
export async function showDialog() {
utils.openDialog($dialog);
const activeNoteContext = appContext.tabManager.getActiveContext();
const {note} = activeNoteContext;
const noteComplement = await activeNoteContext.getNoteComplement();
$noteId.text(note.noteId);
$dateCreated.text(noteComplement.dateCreated);
$dateModified.text(noteComplement.dateModified);
$type.text(note.type);
$mime.text(note.mime);
}
$okButton.on('click', () => $dialog.modal('hide'));

View File

@ -33,6 +33,7 @@ import SidebarToggleWidget from "../widgets/buttons/sidebar_toggle.js";
import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
import BasicPropertiesWidget from "../widgets/type_property_widgets/basic_properties.js";
import NoteInfoWidget from "../widgets/type_property_widgets/note_info_widget.js";
export default class DesktopLayout {
constructor(customWidgets) {
@ -107,6 +108,7 @@ export default class DesktopLayout {
.section(new PromotedAttributesWidget())
.section(new OwnedAttributeListWidget())
.section(new InheritedAttributesWidget())
.section(new NoteInfoWidget())
.button(new NoteActionsWidget())
)
.child(new NoteUpdateStatusWidget())

View File

@ -14,10 +14,6 @@ export default class RootCommandExecutor extends Component {
import("../dialogs/recent_changes.js").then(d => d.showDialog());
}
showNoteInfoCommand() {
import("../dialogs/note_info.js").then(d => d.showDialog());
}
showNoteRevisionsCommand() {
import("../dialogs/note_revisions.js").then(d => d.showCurrentNoteRevisions());
}

View File

@ -1,9 +1,13 @@
import CollapsibleWidget from "../collapsible_widget.js";
import NoteContextAwareWidget from "../note_context_aware_widget.js";
import server from "../../services/server.js";
const TPL = `
<table class="note-info-widget-table">
<div class="note-info-widget">
<style>
.note-info-widget {
padding: 12px;
}
.note-info-widget-table {
max-width: 100%;
display: block;
@ -23,61 +27,71 @@ const TPL = `
}
</style>
<tr>
<th>Note ID:</th>
<td class="note-info-note-id"></td>
<th>Type:</th>
<td>
<span class="note-info-type"></span>
<span class="note-info-mime"></span>
</td>
</tr>
<tr>
<th>Created:</th>
<td class="note-info-date-created"></td>
<th>Modified:</th>
<td class="note-info-date-modified"></td>
</tr>
<tr title="Note size provides rough estimate of storage requirements for this note. It takes into account note's content and content of its note revisions.">
<th>Note size:</th>
<td colspan="3">
<button class="btn btn-sm calculate-button" style="padding: 0px 10px 0px 10px;">
<span class="bx bx-calculator"></span> calculate
</button>
<span class="note-sizes-wrapper">
<span class="note-size"></span>
<table class="note-info-widget-table">
<tr>
<th>Note ID:</th>
<td class="note-info-note-id"></td>
<th>Created:</th>
<td class="note-info-date-created"></td>
<th>Modified:</th>
<td class="note-info-date-modified"></td>
</tr>
<tr>
<th>Type:</th>
<td>
<span class="note-info-type"></span>
<span class="subtree-size"></span>
</span>
</td>
</tr>
</table>
`;
<span class="note-info-mime"></span>
</td>
<th title="Note size provides rough estimate of storage requirements for this note. It takes into account note's content and content of its note revisions.">Note size:</th>
<td>
<button class="btn btn-sm calculate-button" style="padding: 0px 10px 0px 10px;">
<span class="bx bx-calculator"></span> calculate
</button>
<span class="note-sizes-wrapper">
<span class="note-size"></span>
<span class="subtree-size"></span>
</span>
</td>
</tr>
</table>
</div>
`;
export default class NoteInfoWidget extends NoteContextAwareWidget {
static getType() { return "note-info"; }
export default class NoteInfoWidget extends CollapsibleWidget {
isEnabled() {
return super.isEnabled() && !this.note.hasLabel('noteInfoWidgetDisabled');
return this.note;
}
get widgetTitle() { return "Note info"; }
getTitle() {
return {
show: this.isEnabled(),
activate: true,
title: 'Note Info',
icon: 'bx bx-info-circle'
};
}
async doRenderBody() {
this.$body.html(TPL);
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$noteId = this.$body.find(".note-info-note-id");
this.$dateCreated = this.$body.find(".note-info-date-created");
this.$dateModified = this.$body.find(".note-info-date-modified");
this.$type = this.$body.find(".note-info-type");
this.$mime = this.$body.find(".note-info-mime");
this.$noteId = this.$widget.find(".note-info-note-id");
this.$dateCreated = this.$widget.find(".note-info-date-created");
this.$dateModified = this.$widget.find(".note-info-date-modified");
this.$type = this.$widget.find(".note-info-type");
this.$mime = this.$widget.find(".note-info-mime");
this.$noteSizesWrapper = this.$body.find('.note-sizes-wrapper');
this.$noteSize = this.$body.find(".note-size");
this.$subTreeSize = this.$body.find(".subtree-size");
this.$noteSizesWrapper = this.$widget.find('.note-sizes-wrapper');
this.$noteSize = this.$widget.find(".note-size");
this.$subTreeSize = this.$widget.find(".subtree-size");
this.$calculateButton = this.$body.find(".calculate-button");
this.$calculateButton = this.$widget.find(".calculate-button");
this.$calculateButton.on('click', async () => {
this.$noteSizesWrapper.show();
this.$calculateButton.hide();

View File

@ -230,12 +230,6 @@ const DEFAULT_KEYBOARD_ACTIONS = [
{
separator: "Dialogs"
},
{
actionName: "showNoteInfo",
defaultShortcuts: [],
description: "Shows Note Info dialog",
scope: "window"
},
{
actionName: "showNoteSource",
defaultShortcuts: [],

View File

@ -33,7 +33,6 @@
<%- include('dialogs/prompt.ejs') %>
<%- include('dialogs/confirm.ejs') %>
<%- include('dialogs/help.ejs') %>
<%- include('dialogs/note_info.ejs') %>
<%- include('dialogs/link_map.ejs') %>
<%- include('dialogs/clone_to.ejs') %>
<%- include('dialogs/move_to.ejs') %>

View File

@ -1,45 +0,0 @@
<style>
#note-info-table td, #note-info-table th {
padding: 15px;
}
</style>
<div id="note-info-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Note info</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<table id="note-info-table">
<tr>
<th>Note ID</th>
<td id="note-info-note-id"></td>
</tr>
<tr>
<th>Date created</th>
<td id="note-info-date-created"></td>
</tr>
<tr>
<th>Date modified</th>
<td id="note-info-date-modified"></td>
</tr>
<tr>
<th>Type</th>
<td id="note-info-type"></td>
</tr>
<tr>
<th>MIME</th>
<td id="note-info-mime"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="note-info-ok-button">OK</button>
</div>
</div>
</div>
</div>