gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-05 09:28:45 +02:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

bit better right pane layout

Browse Source
This commit is contained in:
zadam 2020-03-01 18:47:20 +01:00
parent 0f4ba43463
commit 4c82e882e0
5 changed files with 78 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/public/javascripts/widgets/collapsible_widget.js
View File

@ -58,11 +58,16 @@ export default class CollapsibleWidget extends TabAwareWidget {
this.$headerActions = this.$widget.find('.widget-header-actions');
this.$headerActions.append(...this.getHeaderActions());
this.decorateWidget();
this.initialized = this.doRenderBody();
return this.$widget;
}
/** for overriding */
decorateWidget() {}
/** for overriding */
async doRenderBody() {}

71
src/public/javascripts/widgets/desktop_layout.js
View File

@ -26,6 +26,75 @@ import SimilarNotesWidget from "./similar_notes.js";
import WhatLinksHereWidget from "./what_links_here.js";
import SidePaneToggles from "./side_pane_toggles.js";
const RIGHT_PANE_CSS = `
<style>
#right-pane .card {
border: 0;
min-height: 0;
max-height: 30%;
display: flex;
flex-grow: 1;
flex-shrink: 1;
flex-direction: column;
}
#right-pane .card-header {
background: inherit;
padding: 3px 10px 3px 10px;
width: 99%; /* to give minimal right margin */
background-color: var(--button-background-color);
border-color: var(--button-border-color);
border-width: 1px;
border-radius: 4px;
border-style: solid;
display: flex;
justify-content: space-between;
}
#right-pane .widget-title {
border-radius: 0;
padding: 0;
border: 0;
background: inherit;
font-weight: bold;
text-transform: uppercase;
color: var(--muted-text-color) !important;
}
#right-pane .widget-header-action {
color: var(--link-color) !important;
cursor: pointer;
}
#right-pane .widget-help {
color: var(--muted-text-color);
position: relative;
top: 2px;
}
#right-pane .widget-help.no-link:hover {
cursor: default;
text-decoration: none;
}
#right-pane .body-wrapper {
overflow: auto;
}
#right-pane .card-body {
width: 100%;
padding: 8px;
border: 0;
height: 100%;
overflow: auto;
}
#right-pane .card-body ul {
padding-left: 25px;
margin-bottom: 5px;
}
</style>`;
export default class DesktopLayout {
getRootWidget(appContext) {
return new FlexContainer('column')
@ -57,7 +126,7 @@ export default class DesktopLayout {
.child(new TabCachingWidget(() => new PromotedAttributesWidget()))
.child(new TabCachingWidget(() => new NoteDetailWidget()))
)
.child(new SidePaneContainer('right')
.child(new SidePaneContainer('right').cssBlock(RIGHT_PANE_CSS)
.child(new NoteInfoWidget())
.child(new TabCachingWidget(() => new CalendarWidget()))
.child(new TabCachingWidget(() => new AttributesWidget()))

4
src/public/javascripts/widgets/flex_container.js
View File

@ -46,7 +46,9 @@ export default class FlexContainer extends BasicWidget {
this.$widget = $(`<div>`);
if (this.cssEl) {
this.$widget.append($(`<style>`).append(this.cssEl));
const css = this.cssEl.trim().startsWith('<style>') ? this.cssEl : `<style>${this.cssEl}</style>`;
this.$widget.append(css);
}
for (const key in this.attrs) {

4
src/public/javascripts/widgets/note_tree.js
View File

@ -818,8 +818,4 @@ export default class NoteTreeWidget extends TabAwareWidget {
noteCreateService.duplicateNote(noteId, branch.parentNoteId);
}
activeScreenChangedEvent({activeScreen}) {
this.toggle(activeScreen === 'tree');
}
}

63
src/public/stylesheets/desktop.css
View File

@ -141,69 +141,6 @@ body {
border-color: var(--button-border-color);
}
#right-pane .card {
border: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
#right-pane .card-header {
background: inherit;
padding: 3px 10px 3px 10px;
width: 99%; /* to give minimal right margin */
background-color: var(--button-background-color);
border-color: var(--button-border-color);
border-width: 1px;
border-radius: 4px;
border-style: solid;
display: flex;
justify-content: space-between;
}
#right-pane .widget-title {
border-radius: 0;
padding: 0;
border: 0;
background: inherit;
font-weight: bold;
text-transform: uppercase;
color: var(--muted-text-color) !important;
}
#right-pane .widget-header-action {
color: var(--link-color) !important;
cursor: pointer;
}
#right-pane .widget-help {
color: var(--muted-text-color);
position: relative;
top: 2px;
}
#right-pane .widget-help.no-link:hover {
cursor: default;
text-decoration: none;
}
#right-pane .body-wrapper {
overflow: auto;
}
#right-pane .card-body {
width: 100%;
padding: 8px;
border: 0;
height: 100%;
overflow: auto;
}
#right-pane .card-body ul {
padding-left: 25px;
margin-bottom: 5px;
}
#widgets-configuration {
margin: 0;
}