mirror of
https://github.com/zadam/trilium.git
synced 2025-06-06 18:08:33 +02:00
layout changes WIP
This commit is contained in:
parent
7bcae9981b
commit
637010577b
@ -2,19 +2,19 @@ import utils from '../services/utils.js';
|
|||||||
import Mutex from "../services/mutex.js";
|
import Mutex from "../services/mutex.js";
|
||||||
|
|
||||||
export default class Component {
|
export default class Component {
|
||||||
/**
|
constructor() {
|
||||||
* @param {Component} parent
|
|
||||||
*/
|
|
||||||
constructor(parent) {
|
|
||||||
this.componentId = `comp-${this.constructor.name}-` + utils.randomString(6);
|
this.componentId = `comp-${this.constructor.name}-` + utils.randomString(6);
|
||||||
/** @type Component */
|
|
||||||
this.parent = parent;
|
|
||||||
/** @type Component[] */
|
/** @type Component[] */
|
||||||
this.children = [];
|
this.children = [];
|
||||||
this.initialized = Promise.resolve();
|
this.initialized = Promise.resolve();
|
||||||
this.mutex = new Mutex();
|
this.mutex = new Mutex();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setParent(parent) {
|
||||||
|
/** @type Component */
|
||||||
|
this.parent = parent;
|
||||||
|
}
|
||||||
|
|
||||||
async handleEvent(name, data) {
|
async handleEvent(name, data) {
|
||||||
await this.initialized;
|
await this.initialized;
|
||||||
|
|
||||||
|
@ -1,25 +1,62 @@
|
|||||||
import BasicWidget from "./basic_widget.js";
|
import BasicWidget from "./basic_widget.js";
|
||||||
|
|
||||||
export default class FlexContainer extends BasicWidget {
|
export default class FlexContainer extends BasicWidget {
|
||||||
constructor(parent, attrs, widgetFactories) {
|
constructor(direction) {
|
||||||
super(parent);
|
super();
|
||||||
|
|
||||||
this.attrs = attrs;
|
if (!direction) {
|
||||||
this.children = widgetFactories.map(wf => wf(this));
|
throw new Error(`Direction argument missing, use either 'row' or 'column'`);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.attrs = {
|
||||||
|
style: 'display: flex;'
|
||||||
|
};
|
||||||
|
|
||||||
|
this.children = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
id(id) {
|
||||||
|
this.attrs.id = id;
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
css(name, value) {
|
||||||
|
this.attrs.style += `${name}: ${value};`;
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
rowFlex() {
|
||||||
|
this.css('flex-direction', 'row');
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
columnFlex() {
|
||||||
|
this.css('flex-direction', 'column');
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
cssBlock(block) {
|
||||||
|
this.cssEl = block;
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
child(widgetFactory) {
|
||||||
|
this.children = widgetFactory(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
doRender() {
|
doRender() {
|
||||||
this.$widget = $(`<div style="display: flex;">`);
|
this.$widget = $(`<div>`);
|
||||||
|
|
||||||
|
if (this.cssEl) {
|
||||||
|
this.$widget.append($(`<style>`).append(this.cssEl));
|
||||||
|
}
|
||||||
|
|
||||||
for (const key in this.attrs) {
|
for (const key in this.attrs) {
|
||||||
if (key === 'id') {
|
this.$widget.attr(key, this.attrs[key]);
|
||||||
this.$widget.attr(key, this.attrs[key]);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.$widget.css(key, this.attrs[key]);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!this.children)
|
||||||
|
|
||||||
for (const widget of this.children) {
|
for (const widget of this.children) {
|
||||||
this.$widget.append(widget.render());
|
this.$widget.append(widget.render());
|
||||||
}
|
}
|
||||||
|
@ -28,43 +28,46 @@ import SidePaneToggles from "./side_pane_toggles.js";
|
|||||||
|
|
||||||
export default class Layout {
|
export default class Layout {
|
||||||
getRootWidget(appContext) {
|
getRootWidget(appContext) {
|
||||||
return new FlexContainer(appContext, { 'flex-direction': 'column', 'height': '100vh' }, [
|
const root = new FlexContainer(appContext)
|
||||||
parent => new FlexContainer(parent, { 'flex-direction': 'row' }, [
|
.child(new FlexContainer('row')
|
||||||
parent => new GlobalMenuWidget(parent),
|
.child(new GlobalMenuWidget())
|
||||||
parent => new TabRowWidget(parent),
|
.child(new TabRowWidget())
|
||||||
parent => new TitleBarButtonsWidget(parent)
|
.child(new TitleBarButtonsWidget()))
|
||||||
]),
|
.child(new StandardTopWidget())
|
||||||
parent => new StandardTopWidget(parent),
|
new FlexContainer({ 'flex-direction': 'row', 'min-height': '0' }, [
|
||||||
parent => new FlexContainer(parent, { 'flex-direction': 'row', 'min-height': '0' }, [
|
new SidePaneContainer('left', [
|
||||||
parent => new SidePaneContainer(parent, 'left', [
|
new GlobalButtonsWidget(),
|
||||||
parent => new GlobalButtonsWidget(parent),
|
new SearchBoxWidget(),
|
||||||
parent => new SearchBoxWidget(parent),
|
new SearchResultsWidget(),
|
||||||
parent => new SearchResultsWidget(parent),
|
new NoteTreeWidget()
|
||||||
parent => new NoteTreeWidget(parent)
|
|
||||||
]),
|
]),
|
||||||
parent => new FlexContainer(parent, { id: 'center-pane', 'flex-direction': 'column' }, [
|
new FlexContainer({ id: 'center-pane', 'flex-direction': 'column' }, [
|
||||||
parent => new FlexContainer(parent, { 'flex-direction': 'row' }, [
|
new FlexContainer({ 'flex-direction': 'row' }, [
|
||||||
parent => new TabCachingWidget(parent, parent => new NotePathsWidget(parent)),
|
new TabCachingWidget(new NotePathsWidget()),
|
||||||
parent => new NoteTitleWidget(parent),
|
new NoteTitleWidget(),
|
||||||
parent => new RunScriptButtonsWidget(parent),
|
new RunScriptButtonsWidget(),
|
||||||
parent => new ProtectedNoteSwitchWidget(parent),
|
new ProtectedNoteSwitchWidget(),
|
||||||
parent => new NoteTypeWidget(parent),
|
new NoteTypeWidget(),
|
||||||
parent => new NoteActionsWidget(parent)
|
new NoteActionsWidget()
|
||||||
]),
|
]),
|
||||||
parent => new TabCachingWidget(parent, parent => new PromotedAttributesWidget(parent)),
|
new TabCachingWidget(new PromotedAttributesWidget()),
|
||||||
parent => new TabCachingWidget(parent, parent => new NoteDetailWidget(parent))
|
new TabCachingWidget(new NoteDetailWidget())
|
||||||
]),
|
]),
|
||||||
parent => new SidePaneContainer(parent, 'right', [
|
new SidePaneContainer('right', [
|
||||||
parent => new NoteInfoWidget(parent),
|
new NoteInfoWidget(),
|
||||||
parent => new TabCachingWidget(parent, parent => new CalendarWidget(parent)),
|
new TabCachingWidget(() => new CalendarWidget()),
|
||||||
parent => new TabCachingWidget(parent, parent => new AttributesWidget(parent)),
|
new TabCachingWidget(() => new AttributesWidget()),
|
||||||
parent => new TabCachingWidget(parent, parent => new LinkMapWidget(parent)),
|
new TabCachingWidget(() => new LinkMapWidget()),
|
||||||
parent => new TabCachingWidget(parent, parent => new NoteRevisionsWidget(parent)),
|
new TabCachingWidget(() => new NoteRevisionsWidget()),
|
||||||
parent => new TabCachingWidget(parent, parent => new SimilarNotesWidget(parent)),
|
new TabCachingWidget(() => new SimilarNotesWidget()),
|
||||||
parent => new TabCachingWidget(parent, parent => new WhatLinksHereWidget(parent))
|
new TabCachingWidget(() => new WhatLinksHereWidget())
|
||||||
]),
|
]),
|
||||||
parent => new SidePaneToggles(parent)
|
new SidePaneToggles()
|
||||||
])
|
])
|
||||||
])
|
]);
|
||||||
|
|
||||||
|
root.setParent(appContext);
|
||||||
|
|
||||||
|
return root;
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -2,6 +2,12 @@ import TabAwareWidget from "./tab_aware_widget.js";
|
|||||||
|
|
||||||
const TPL = `
|
const TPL = `
|
||||||
<div class="dropdown note-actions">
|
<div class="dropdown note-actions">
|
||||||
|
<style>
|
||||||
|
.note-actions .dropdown-menu {
|
||||||
|
width: 15em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
|
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
|
||||||
Note actions
|
Note actions
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
|
@ -12,8 +12,6 @@ const TPL = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.note-title-container input.note-title {
|
.note-title-container input.note-title {
|
||||||
margin-left: 15px;
|
|
||||||
margin-right: 10px;
|
|
||||||
font-size: 150%;
|
font-size: 150%;
|
||||||
border: 0;
|
border: 0;
|
||||||
min-width: 5em;
|
min-width: 5em;
|
||||||
|
@ -1,10 +1,8 @@
|
|||||||
import BasicWidget from "./basic_widget.js";
|
|
||||||
import protectedSessionService from "../services/protected_session.js";
|
import protectedSessionService from "../services/protected_session.js";
|
||||||
import protectedSessionHolder from "../services/protected_session_holder.js";
|
|
||||||
import TabAwareWidget from "./tab_aware_widget.js";
|
import TabAwareWidget from "./tab_aware_widget.js";
|
||||||
|
|
||||||
const TPL = `
|
const TPL = `
|
||||||
<div class="btn-group btn-group-xs" style="margin-left: 10px; margin-right: 10px;">
|
<div class="btn-group btn-group-xs">
|
||||||
<button type="button"
|
<button type="button"
|
||||||
class="btn btn-sm icon-button bx bx-check-shield protect-button"
|
class="btn btn-sm icon-button bx bx-check-shield protect-button"
|
||||||
title="Protected note can be viewed and edited only after entering password">
|
title="Protected note can be viewed and edited only after entering password">
|
||||||
@ -14,7 +12,7 @@ const TPL = `
|
|||||||
class="btn btn-sm icon-button bx bx-shield-x unprotect-button"
|
class="btn btn-sm icon-button bx bx-shield-x unprotect-button"
|
||||||
title="Not protected note can be viewed without entering password">
|
title="Not protected note can be viewed without entering password">
|
||||||
</button>
|
</button>
|
||||||
</div>`;
|
</div>`;``;
|
||||||
|
|
||||||
export default class ProtectedNoteSwitchWidget extends TabAwareWidget {
|
export default class ProtectedNoteSwitchWidget extends TabAwareWidget {
|
||||||
doRender() {
|
doRender() {
|
||||||
|
@ -2,8 +2,8 @@ import TabAwareWidget from "./tab_aware_widget.js";
|
|||||||
import keyboardActionsService from "../services/keyboard_actions.js";
|
import keyboardActionsService from "../services/keyboard_actions.js";
|
||||||
|
|
||||||
export default class TabCachingWidget extends TabAwareWidget {
|
export default class TabCachingWidget extends TabAwareWidget {
|
||||||
constructor(parent, widgetFactory) {
|
constructor(widgetFactory) {
|
||||||
super(parent);
|
super();
|
||||||
|
|
||||||
this.widgetFactory = widgetFactory;
|
this.widgetFactory = widgetFactory;
|
||||||
this.widgets = {};
|
this.widgets = {};
|
||||||
|
@ -149,7 +149,7 @@ body {
|
|||||||
|
|
||||||
#right-pane .card-header {
|
#right-pane .card-header {
|
||||||
background: inherit;
|
background: inherit;
|
||||||
padding: 5px 10px 5px 10px;
|
padding: 3px 10px 3px 10px;
|
||||||
width: 99%; /* to give minimal right margin */
|
width: 99%; /* to give minimal right margin */
|
||||||
background-color: var(--button-background-color);
|
background-color: var(--button-background-color);
|
||||||
border-color: var(--button-border-color);
|
border-color: var(--button-border-color);
|
||||||
|
@ -380,15 +380,6 @@ button.icon-button {
|
|||||||
max-height: 34px;
|
max-height: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.note-actions {
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.note-actions .dropdown-menu {
|
|
||||||
width: 15em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ck.ck-block-toolbar-button {
|
.ck.ck-block-toolbar-button {
|
||||||
transform: translateX(7px);
|
transform: translateX(7px);
|
||||||
color: var(--muted-text-color);
|
color: var(--muted-text-color);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user