diff --git a/src/public/javascripts/dialogs/options/sidebar.js b/src/public/javascripts/dialogs/options/sidebar.js index e7df8abcf..27372345d 100644 --- a/src/public/javascripts/dialogs/options/sidebar.js +++ b/src/public/javascripts/dialogs/options/sidebar.js @@ -194,7 +194,7 @@ export default class SidebarOptions { const sidebarMinWidth = this.$sidebarMinWidth.val(); // need to find them dynamically since they change - const $sidebar = $(".note-detail-sidebar"); + const $sidebar = $("#right-pane"); const $content = $(".note-detail-content"); diff --git a/src/public/javascripts/services/entrypoints.js b/src/public/javascripts/services/entrypoints.js index 69e5cc8ab..0b2467b88 100644 --- a/src/public/javascripts/services/entrypoints.js +++ b/src/public/javascripts/services/entrypoints.js @@ -287,10 +287,10 @@ function registerEntrypoints() { searchNotesService.searchInSubtree(node.data.noteId); }); - Split(['#left-pane', '#center-pane'], { - sizes: [25, 75], + Split(['#left-pane', '#center-pane', '#right-pane'], { + sizes: [25, 50, 25], gutterSize: 5 - }) + }); } export default { diff --git a/src/public/javascripts/services/sidebar.js b/src/public/javascripts/services/sidebar.js index 29a84f7d8..6d1575313 100644 --- a/src/public/javascripts/services/sidebar.js +++ b/src/public/javascripts/services/sidebar.js @@ -2,6 +2,23 @@ import bundleService from "./bundle.js"; import ws from "./ws.js"; import optionsService from "./options.js"; +const $sidebar = $("#right-pane"); +const $sidebarContainer = $sidebar.find('.sidebar-container'); + +const $showSideBarButton = $sidebar.find(".show-sidebar-button"); +const $hideSidebarButton = $sidebar.find(".hide-sidebar-button"); + +$hideSidebarButton.on('click', () => { + $sidebar.hide(); + $showSideBarButton.show(); +}); + +// FIXME shoud run note loaded! +$showSideBarButton.on('click', () => { + $sidebar.show(); + $showSideBarButton.hide(); +}); + class Sidebar { /** * @param {TabContext} ctx @@ -14,30 +31,18 @@ class Sidebar { widgets: [] }, state); this.widgets = []; - this.$sidebar = ctx.$tabContent.find(".note-detail-sidebar"); - this.$widgetContainer = this.$sidebar.find(".note-detail-widget-container"); - this.$showSideBarButton = this.ctx.$tabContent.find(".show-sidebar-button"); - this.$hideSidebarButton = this.$sidebar.find(".hide-sidebar-button"); - this.$hideSidebarButton.on('click', () => { - this.$sidebar.hide(); - this.$showSideBarButton.show(); - this.ctx.stateChanged(); - }); + this.$widgetContainer = $sidebar.find(`.sidebar-widget-container[data-tab-id=${this.ctx.tabId}]`); - this.$showSideBarButton.on('click', () => { - this.$sidebar.show(); - this.$showSideBarButton.hide(); - this.ctx.stateChanged(); - this.noteLoaded(); - }); + if (this.$widgetContainer.length === 0) { + this.$widgetContainer = $(`
`).attr('data-tab-id', this.ctx.tabId); - this.$showSideBarButton.toggle(!state.visible); - this.$sidebar.toggle(state.visible); + $sidebarContainer.append(this.$widgetContainer); + } } isVisible() { - return this.$sidebar.css("display") !== "none"; + return $sidebar.css("display") !== "none"; } getSidebarState() { @@ -91,6 +96,12 @@ class Sidebar { this.renderWidgets(widgets); } + show() { + $sidebarContainer.find('.sidebar-widget-container').each((i, el) => { + $(el).toggle($(el).attr('data-tab-id') === this.ctx.tabId); + }); + } + // it's important that this method is sync so that the whole render-update is atomic // otherwise we could get race issues (doubled widgets etc.) renderWidgets(widgets) { diff --git a/src/public/javascripts/services/tab_context.js b/src/public/javascripts/services/tab_context.js index 71fa6392a..a41ebc636 100644 --- a/src/public/javascripts/services/tab_context.js +++ b/src/public/javascripts/services/tab_context.js @@ -251,6 +251,10 @@ class TabContext { this.$tabContent.show(); + if (this.sidebar) { + this.sidebar.show(); + } + this.setCurrentNotePathToHash(); this.setTitleBar(); } diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css index bf0962aec..8c3b37d0d 100644 --- a/src/public/stylesheets/desktop.css +++ b/src/public/stylesheets/desktop.css @@ -410,18 +410,18 @@ body { border-color: var(--button-border-color); } -.note-detail-sidebar { +#right-pane { overflow: auto; padding-top: 12px; padding-left: 7px; font-size: 90%; } -.note-detail-sidebar .card { +#right-pane .card { border: 0; } -.note-detail-sidebar .card-header { +#right-pane .card-header { background: inherit; padding: 5px 10px 5px 10px; width: 99%; /* to give minimal right margin */ @@ -434,7 +434,7 @@ body { justify-content: space-between; } -.note-detail-sidebar .widget-title { +#right-pane .widget-title { border-radius: 0; padding: 0; border: 0; @@ -444,29 +444,29 @@ body { color: var(--muted-text-color) !important; } -.note-detail-sidebar .widget-header-action { +#right-pane .widget-header-action { color: var(--link-color) !important; cursor: pointer; } -.note-detail-sidebar .widget-help { +#right-pane .widget-help { color: var(--muted-text-color); position: relative; top: 2px; } -.note-detail-sidebar .widget-help.no-link:hover { +#right-pane .widget-help.no-link:hover { cursor: default; text-decoration: none; } -.note-detail-sidebar .card-body { +#right-pane .card-body { width: 100%; padding: 8px; border: 0; } -.note-detail-sidebar .card-body ul { +#right-pane .card-body ul { padding-left: 25px; margin-bottom: 5px; } diff --git a/src/views/center.ejs b/src/views/center.ejs new file mode 100644 index 000000000..bd3c02651 --- /dev/null +++ b/src/views/center.ejs @@ -0,0 +1,39 @@ +
+
+
+
+ <% include title.ejs %> + +
+ +
+ +
+
+
+
+ +
+
+
+ + <% include details/empty.ejs %> + + <% include details/search.ejs %> + + <% include details/render.ejs %> + + <% include details/file.ejs %> + + <% include details/image.ejs %> + + <% include details/relation_map.ejs %> + + <% include details/protected_session_password.ejs %> + + <% include details/book.ejs %> +
+
+
+
+
\ No newline at end of file diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index e80d041da..bf2aecd02 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -182,9 +182,9 @@
-
- <% include tabs.ejs %> -
+ <% include center.ejs %> + + <% include sidebar.ejs %> <% include dialogs/about.ejs %> diff --git a/src/views/sidebar.ejs b/src/views/sidebar.ejs index b37a58ef5..c4f57d4e3 100644 --- a/src/views/sidebar.ejs +++ b/src/views/sidebar.ejs @@ -1,7 +1,8 @@ -
+
-
+
+
\ No newline at end of file diff --git a/src/views/tabs.ejs b/src/views/tabs.ejs deleted file mode 100644 index 2421b4fb1..000000000 --- a/src/views/tabs.ejs +++ /dev/null @@ -1,39 +0,0 @@ -
-
-
- <% include title.ejs %> - -
- -
- -
-
-
-
- -
-
-
- - <% include details/empty.ejs %> - - <% include details/search.ejs %> - - <% include details/render.ejs %> - - <% include details/file.ejs %> - - <% include details/image.ejs %> - - <% include details/relation_map.ejs %> - - <% include details/protected_session_password.ejs %> - - <% include details/book.ejs %> -
-
- - <% include sidebar.ejs %> -
-
\ No newline at end of file