mirror of
https://github.com/zadam/trilium.git
synced 2025-10-31 19:49:01 +01:00
sidebar pulled outside of the tab content and added splitter
This commit is contained in:
zadam
parent
81e2baeee5
commit
d29c5c4758
@ -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");
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 = $(`<div class="sidebar-widget-container">`).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) {
|
||||
|
||||
@ -251,6 +251,10 @@ class TabContext {
|
||||
|
||||
this.$tabContent.show();
|
||||
|
||||
if (this.sidebar) {
|
||||
this.sidebar.show();
|
||||
}
|
||||
|
||||
this.setCurrentNotePathToHash();
|
||||
this.setTitleBar();
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
39
src/views/center.ejs
Normal file
39
src/views/center.ejs
Normal file
@ -0,0 +1,39 @@
|
||||
<div id="center-pane">
|
||||
<div id="note-tab-container">
|
||||
<div class="note-tab-content note-tab-content-template">
|
||||
<div class="note-detail-content" style="width: <%= contentWidthPercent %>%">
|
||||
<% include title.ejs %>
|
||||
|
||||
<div class="note-detail-script-area"></div>
|
||||
|
||||
<table class="note-detail-promoted-attributes"></table>
|
||||
|
||||
<div class="note-detail-component-wrapper">
|
||||
<div class="note-detail-text note-detail-component">
|
||||
<div class="note-detail-text-editor" tabindex="10000"></div>
|
||||
</div>
|
||||
|
||||
<div class="note-detail-code note-detail-component">
|
||||
<div class="note-detail-code-editor"></div>
|
||||
</div>
|
||||
|
||||
<% 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 %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -182,9 +182,9 @@
|
||||
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="center-pane">
|
||||
<% include tabs.ejs %>
|
||||
</div>
|
||||
<% include center.ejs %>
|
||||
|
||||
<% include sidebar.ejs %>
|
||||
</div>
|
||||
|
||||
<% include dialogs/about.ejs %>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<div class="note-detail-sidebar hide-in-zen-mode" style="width: <%= sidebarWidthPercent %>%; min-width: <%= sidebarMinWidth %>px">
|
||||
<div id="right-pane" class="hide-in-zen-mode">
|
||||
<div style="text-align: center; margin-bottom: 5px;">
|
||||
<button class="hide-sidebar-button">hide sidebar <span class="bx bx-chevrons-right"></span></button>
|
||||
</div>
|
||||
|
||||
<div class="note-detail-widget-container"></div>
|
||||
<div class="sidebar-container">
|
||||
</div>
|
||||
</div>
|
||||
@ -1,39 +0,0 @@
|
||||
<div id="note-tab-container">
|
||||
<div class="note-tab-content note-tab-content-template">
|
||||
<div class="note-detail-content" style="width: <%= contentWidthPercent %>%">
|
||||
<% include title.ejs %>
|
||||
|
||||
<div class="note-detail-script-area"></div>
|
||||
|
||||
<table class="note-detail-promoted-attributes"></table>
|
||||
|
||||
<div class="note-detail-component-wrapper">
|
||||
<div class="note-detail-text note-detail-component">
|
||||
<div class="note-detail-text-editor" tabindex="10000"></div>
|
||||
</div>
|
||||
|
||||
<div class="note-detail-code note-detail-component">
|
||||
<div class="note-detail-code-editor"></div>
|
||||
</div>
|
||||
|
||||
<% 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 %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% include sidebar.ejs %>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user