diff --git a/src/public/javascripts/dialogs/options/sidebar.js b/src/public/javascripts/dialogs/options/sidebar.js index 630f409be..5acd41139 100644 --- a/src/public/javascripts/dialogs/options/sidebar.js +++ b/src/public/javascripts/dialogs/options/sidebar.js @@ -136,7 +136,11 @@ export default class SidebarOptions { // need to find them dynamically since they change const $sidebar = $(".note-detail-sidebar"); + const $content = $(".note-detail-content"); + $sidebar.css("width", sidebarWidthPercent + '%'); $sidebar.css("min-width", sidebarMinWidth + 'px'); + + $content.css("width", (100 - sidebarWidthPercent) + '%'); } } \ No newline at end of file diff --git a/src/public/javascripts/services/link_map.js b/src/public/javascripts/services/link_map.js index 29cc7e1c6..9191e113f 100644 --- a/src/public/javascripts/services/link_map.js +++ b/src/public/javascripts/services/link_map.js @@ -63,9 +63,10 @@ export default class LinkMap { const layout = new Springy.Layout.ForceDirected( graph, - 400.0, // Spring stiffness + // param explanation here: https://github.com/dhotson/springy/issues/58 + 800.0, // Spring stiffness 400.0, // Node repulsion - 0.5 // Damping + 0.2 // Damping ); const getNoteBox = noteId => { @@ -123,7 +124,12 @@ export default class LinkMap { type: 'link' }); - connection.canvas.id = connectionId; + if (connection) { + connection.canvas.id = connectionId; + } + else { + console.log(`connection not created for`, edge); + } }, (node, p) => { const $noteBox = getNoteBox(node.id); diff --git a/src/public/javascripts/services/sidebar.js b/src/public/javascripts/services/sidebar.js index 878de8eac..8102fe888 100644 --- a/src/public/javascripts/services/sidebar.js +++ b/src/public/javascripts/services/sidebar.js @@ -53,6 +53,10 @@ class Sidebar { return; } + for (const widget of this.widgets) { + widget.cleanup(); + } + this.widgets = []; this.$widgetContainer.empty(); diff --git a/src/public/javascripts/widgets/link_map.js b/src/public/javascripts/widgets/link_map.js index 2a1738044..af96d1288 100644 --- a/src/public/javascripts/widgets/link_map.js +++ b/src/public/javascripts/widgets/link_map.js @@ -30,12 +30,18 @@ class LinkMapWidget extends StandardWidget { const LinkMapServiceClass = (await import('../services/link_map.js')).default; - const linkMapService = new LinkMapServiceClass(this.ctx.note, $linkMapContainer, { + this.linkMapService = new LinkMapServiceClass(this.ctx.note, $linkMapContainer, { maxDepth: 1, zoom: 0.7 }); - await linkMapService.render(); + await this.linkMapService.render(); + } + + cleanup() { + if (this.linkMapService) { + this.linkMapService.cleanup(); + } } } diff --git a/src/public/javascripts/widgets/standard_widget.js b/src/public/javascripts/widgets/standard_widget.js index b5e8b1b89..0e0ea9019 100644 --- a/src/public/javascripts/widgets/standard_widget.js +++ b/src/public/javascripts/widgets/standard_widget.js @@ -104,6 +104,8 @@ class StandardWidget { } syncDataReceived(syncData) {} + + cleanup() {} } export default StandardWidget; \ No newline at end of file diff --git a/src/public/javascripts/widgets/what_links_here.js b/src/public/javascripts/widgets/what_links_here.js index 283d0ad9f..9cbd1d9ea 100644 --- a/src/public/javascripts/widgets/what_links_here.js +++ b/src/public/javascripts/widgets/what_links_here.js @@ -6,6 +6,16 @@ class WhatLinksHereWidget extends StandardWidget { getMaxHeight() { return "200px"; } + getHeaderActions() { + const $showFullButton = $("").append("show link map").addClass('widget-header-action'); + $showFullButton.click(async () => { + const linkMapDialog = await import("../dialogs/link_map.js"); + linkMapDialog.showDialog(); + }); + + return [$showFullButton]; + } + async doRenderBody() { const targetRelations = await this.ctx.note.getTargetRelations(); diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css index 5746a8ccc..e29af6af1 100644 --- a/src/public/stylesheets/desktop.css +++ b/src/public/stylesheets/desktop.css @@ -345,6 +345,57 @@ body { transition: transform 120ms ease-in-out; } +.hide-sidebar-button { + color: var(--main-text-color); +} + +.note-detail-sidebar { + overflow: auto; + padding-top: 12px; + padding-left: 7px; + font-size: 90%; +} + +.note-detail-sidebar .card { + border: 0; +} + +.note-detail-sidebar .card-header { + background: inherit; + padding: 5px 10px 5px 10px; + width: 99%; /* to give minimal right margin */ + background-color: var(--button-background-color); + border-color: var(--button-border-color); + border-width: 1px 0 1px 0; + border-radius: 3px; + border-style: solid; + display: flex; + justify-content: space-between; +} + +.note-detail-sidebar .widget-title { + border-radius: 0; + padding: 0; + border: 0; + background: inherit; + font-weight: bold; +} + +.note-detail-sidebar .widget-header-actions { + padding-right: 10px; +} + +.note-detail-sidebar .widget-header-action { + color: var(--link-color) !important; + cursor: pointer; +} + +.note-detail-sidebar .card-body { + width: 100%; + padding: 8px; + border: 0; +} + #widgets-configuration { margin: 0; } diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 2e4851f05..8b19ec093 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -100,54 +100,6 @@ ul.fancytree-container { height: 100%; } -.note-detail-sidebar { - min-width: 350px; - width: 50%; - overflow: auto; - padding-top: 12px; - padding-left: 7px; - font-size: 90%; -} - -.note-detail-sidebar .card { - border: 0; -} - -.note-detail-sidebar .card-header { - background: inherit; - padding: 3px 10px 3px 10px; - width: 100%; - background-color: var(--button-background-color); - border-color: var(--button-border-color); - border-width: 1px 0 1px 0; - border-style: solid; - display: flex; - justify-content: space-between; -} - -.note-detail-sidebar .widget-title { - border-radius: 0; - padding: 0; - border: 0; - background: inherit; - font-weight: bold; -} - -.note-detail-sidebar .widget-header-actions { - padding-right: 10px; -} - -.note-detail-sidebar .widget-header-action { - color: var(--link-color) !important; - cursor: pointer; -} - -.note-detail-sidebar .card-body { - width: 100%; - padding: 8px; - border: 0; -} - .note-detail-component-wrapper { flex-grow: 100; position: relative; @@ -865,8 +817,4 @@ a.external:after, a[href^="http://"]:after, a[href^="https://"]:after { .modal-header { padding: 0.7rem 1rem !important; /* make modal header padding slightly smaller */ -} - -.hide-sidebar-button { - color: var(--main-text-color); } \ No newline at end of file diff --git a/src/routes/index.js b/src/routes/index.js index d92418914..2896a3b62 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -23,6 +23,7 @@ async function index(req, res) { rightPaneWidthPercent: 100 - parseInt(options.leftPaneWidthPercent), sidebarMinWidth: parseInt(options.sidebarMinWidth), sidebarWidthPercent: parseInt(options.sidebarWidthPercent), + contentWidthPercent: 100 - parseInt(options.sidebarWidthPercent), mainFontSize: parseInt(options.mainFontSize), treeFontSize: parseInt(options.treeFontSize), detailFontSize: parseInt(options.detailFontSize), diff --git a/src/views/tabs.ejs b/src/views/tabs.ejs index 55343ecc4..5db78c230 100644 --- a/src/views/tabs.ejs +++ b/src/views/tabs.ejs @@ -4,7 +4,7 @@
-
+
<% include title.ejs %>