mirror of
				https://github.com/zadam/trilium.git
				synced 2025-11-04 05:28:59 +01:00 
			
		
		
		
	refactoring of layout finished
This commit is contained in:
		
							parent
							
								
									637010577b
								
							
						
					
					
						commit
						368d0c55da
					
				@ -17,7 +17,6 @@ class AppContext extends Component {
 | 
			
		||||
        super(null);
 | 
			
		||||
 | 
			
		||||
        this.layout = layout;
 | 
			
		||||
        this.tabManager = new TabManager(this);
 | 
			
		||||
        this.executors = [];
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -45,16 +44,22 @@ class AppContext extends Component {
 | 
			
		||||
            this.triggerEvent(eventName);
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        this.tabManager = new TabManager();
 | 
			
		||||
 | 
			
		||||
        this.executors = [
 | 
			
		||||
            this.tabManager,
 | 
			
		||||
            new DialogCommandExecutor(this),
 | 
			
		||||
            new Entrypoints(this)
 | 
			
		||||
            new DialogCommandExecutor(),
 | 
			
		||||
            new Entrypoints()
 | 
			
		||||
        ];
 | 
			
		||||
 | 
			
		||||
        this.children = [ rootWidget, ...this.executors ];
 | 
			
		||||
        this.child(rootWidget);
 | 
			
		||||
 | 
			
		||||
        for (const executor of this.executors) {
 | 
			
		||||
            this.child(executor);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if (utils.isElectron()) {
 | 
			
		||||
            this.children.push(new ZoomService(this));
 | 
			
		||||
            this.child(new ZoomService());
 | 
			
		||||
 | 
			
		||||
            import("./spell_check.js").then(spellCheckService => spellCheckService.initSpellCheck());
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
@ -8,8 +8,8 @@ import appContext from "./app_context.js";
 | 
			
		||||
import Component from "../widgets/component.js";
 | 
			
		||||
 | 
			
		||||
export default class Entrypoints extends Component {
 | 
			
		||||
    constructor(parent) {
 | 
			
		||||
        super(parent);
 | 
			
		||||
    constructor() {
 | 
			
		||||
        super();
 | 
			
		||||
 | 
			
		||||
        // hot keys are active also inside inputs and content editables
 | 
			
		||||
        jQuery.hotkeys.options.filterInputAcceptingElements = false;
 | 
			
		||||
 | 
			
		||||
@ -9,15 +9,12 @@ import hoistedNoteService from "./hoisted_note.js";
 | 
			
		||||
 | 
			
		||||
class TabContext extends Component {
 | 
			
		||||
    /**
 | 
			
		||||
     * @param {Component} parent
 | 
			
		||||
     * @param {string|null} tabId
 | 
			
		||||
     */
 | 
			
		||||
    constructor(parent, tabId = null) {
 | 
			
		||||
        super(parent);
 | 
			
		||||
    constructor(tabId = null) {
 | 
			
		||||
        super();
 | 
			
		||||
 | 
			
		||||
        this.tabId = tabId || utils.randomString(4);
 | 
			
		||||
 | 
			
		||||
        this.triggerEvent('newTabOpened', {tabId: this.tabId});
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    async setNote(inputNotePath) {
 | 
			
		||||
 | 
			
		||||
@ -6,11 +6,10 @@ import treeCache from "./tree_cache.js";
 | 
			
		||||
import treeService from "./tree.js";
 | 
			
		||||
import utils from "./utils.js";
 | 
			
		||||
import TabContext from "./tab_context.js";
 | 
			
		||||
import appContext from "./app_context.js";
 | 
			
		||||
 | 
			
		||||
export default class TabManager extends Component {
 | 
			
		||||
    constructor(parent) {
 | 
			
		||||
        super(parent);
 | 
			
		||||
    constructor() {
 | 
			
		||||
        super();
 | 
			
		||||
 | 
			
		||||
        this.activeTabId = null;
 | 
			
		||||
 | 
			
		||||
@ -183,8 +182,11 @@ export default class TabManager extends Component {
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    openEmptyTab(tabId) {
 | 
			
		||||
        const tabContext = new TabContext(appContext, tabId);
 | 
			
		||||
        this.children.push(tabContext);
 | 
			
		||||
        const tabContext = new TabContext(tabId);
 | 
			
		||||
        this.child(tabContext);
 | 
			
		||||
 | 
			
		||||
        this.triggerEvent('newTabOpened', {tabId: this.tabId})
 | 
			
		||||
 | 
			
		||||
        return tabContext;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -5,8 +5,8 @@ const MIN_ZOOM = 0.5;
 | 
			
		||||
const MAX_ZOOM = 2.0;
 | 
			
		||||
 | 
			
		||||
export default class ZoomService extends Component {
 | 
			
		||||
    constructor(parent) {
 | 
			
		||||
        super(parent);
 | 
			
		||||
    constructor() {
 | 
			
		||||
        super();
 | 
			
		||||
 | 
			
		||||
        this.setZoomFactor(options.getFloat('zoomFactor'));
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -13,6 +13,15 @@ export default class Component {
 | 
			
		||||
    setParent(parent) {
 | 
			
		||||
        /** @type Component */
 | 
			
		||||
        this.parent = parent;
 | 
			
		||||
        return this;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    child(component) {
 | 
			
		||||
        component.setParent(this);
 | 
			
		||||
 | 
			
		||||
        this.children.push(component);
 | 
			
		||||
 | 
			
		||||
        return this;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    async handleEvent(name, data) {
 | 
			
		||||
 | 
			
		||||
@ -4,12 +4,12 @@ export default class FlexContainer extends BasicWidget {
 | 
			
		||||
    constructor(direction) {
 | 
			
		||||
        super();
 | 
			
		||||
 | 
			
		||||
        if (!direction) {
 | 
			
		||||
            throw new Error(`Direction argument missing, use either 'row' or 'column'`);
 | 
			
		||||
        if (!direction || !['row', 'column'].includes(direction)) {
 | 
			
		||||
            throw new Error(`Direction argument given as "${direction}", use either 'row' or 'column'`);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        this.attrs = {
 | 
			
		||||
            style: 'display: flex;'
 | 
			
		||||
            style: `display: flex; flex-direction: ${direction};`,
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
        this.children = [];
 | 
			
		||||
@ -25,13 +25,8 @@ export default class FlexContainer extends BasicWidget {
 | 
			
		||||
        return this;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    rowFlex() {
 | 
			
		||||
        this.css('flex-direction', 'row');
 | 
			
		||||
        return this;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    columnFlex() {
 | 
			
		||||
        this.css('flex-direction', 'column');
 | 
			
		||||
    collapsible() {
 | 
			
		||||
        this.css('min-height', '0');
 | 
			
		||||
        return this;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -40,10 +35,6 @@ export default class FlexContainer extends BasicWidget {
 | 
			
		||||
        return this;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    child(widgetFactory) {
 | 
			
		||||
        this.children = widgetFactory(this);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    doRender() {
 | 
			
		||||
        this.$widget = $(`<div>`);
 | 
			
		||||
 | 
			
		||||
@ -55,8 +46,6 @@ export default class FlexContainer extends BasicWidget {
 | 
			
		||||
            this.$widget.attr(key, this.attrs[key]);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if (!this.children)
 | 
			
		||||
 | 
			
		||||
        for (const widget of this.children) {
 | 
			
		||||
            this.$widget.append(widget.render());
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
@ -28,43 +28,42 @@ import SidePaneToggles from "./side_pane_toggles.js";
 | 
			
		||||
 | 
			
		||||
export default class Layout {
 | 
			
		||||
    getRootWidget(appContext) {
 | 
			
		||||
        const root = new FlexContainer(appContext)
 | 
			
		||||
        const root = new FlexContainer('column').id('root-widget')
 | 
			
		||||
            .child(new FlexContainer('row')
 | 
			
		||||
                .child(new GlobalMenuWidget())
 | 
			
		||||
                .child(new TabRowWidget())
 | 
			
		||||
                .child(new TitleBarButtonsWidget()))
 | 
			
		||||
            .child(new StandardTopWidget())
 | 
			
		||||
            new FlexContainer({ 'flex-direction': 'row', 'min-height': '0' }, [
 | 
			
		||||
                new SidePaneContainer('left', [
 | 
			
		||||
                    new GlobalButtonsWidget(),
 | 
			
		||||
                    new SearchBoxWidget(),
 | 
			
		||||
                    new SearchResultsWidget(),
 | 
			
		||||
                    new NoteTreeWidget()
 | 
			
		||||
                ]),
 | 
			
		||||
                new FlexContainer({ id: 'center-pane', 'flex-direction': 'column' }, [
 | 
			
		||||
                    new FlexContainer({ 'flex-direction': 'row' }, [
 | 
			
		||||
                        new TabCachingWidget(new NotePathsWidget()),
 | 
			
		||||
                        new NoteTitleWidget(),
 | 
			
		||||
                        new RunScriptButtonsWidget(),
 | 
			
		||||
                        new ProtectedNoteSwitchWidget(),
 | 
			
		||||
                        new NoteTypeWidget(),
 | 
			
		||||
                        new NoteActionsWidget()
 | 
			
		||||
                    ]),
 | 
			
		||||
                    new TabCachingWidget(new PromotedAttributesWidget()),
 | 
			
		||||
                    new TabCachingWidget(new NoteDetailWidget())
 | 
			
		||||
                ]),
 | 
			
		||||
                new SidePaneContainer('right', [
 | 
			
		||||
                    new NoteInfoWidget(),
 | 
			
		||||
                    new TabCachingWidget(() => new CalendarWidget()),
 | 
			
		||||
                    new TabCachingWidget(() => new AttributesWidget()),
 | 
			
		||||
                    new TabCachingWidget(() => new LinkMapWidget()),
 | 
			
		||||
                    new TabCachingWidget(() => new NoteRevisionsWidget()),
 | 
			
		||||
                    new TabCachingWidget(() => new SimilarNotesWidget()),
 | 
			
		||||
                    new TabCachingWidget(() => new WhatLinksHereWidget())
 | 
			
		||||
                ]),
 | 
			
		||||
                new SidePaneToggles()
 | 
			
		||||
            ])
 | 
			
		||||
        ]);
 | 
			
		||||
            .child(new FlexContainer('row').collapsible()
 | 
			
		||||
                .child(new SidePaneContainer('left')
 | 
			
		||||
                    .child(new GlobalButtonsWidget())
 | 
			
		||||
                    .child(new SearchBoxWidget())
 | 
			
		||||
                    .child(new SearchResultsWidget())
 | 
			
		||||
                    .child(new NoteTreeWidget())
 | 
			
		||||
                )
 | 
			
		||||
                .child(new FlexContainer('column').id('center-pane')
 | 
			
		||||
                    .child(new FlexContainer('row')
 | 
			
		||||
                        .child(new TabCachingWidget(() => new NotePathsWidget()))
 | 
			
		||||
                        .child(new NoteTitleWidget())
 | 
			
		||||
                        .child(new RunScriptButtonsWidget())
 | 
			
		||||
                        .child(new ProtectedNoteSwitchWidget())
 | 
			
		||||
                        .child(new NoteTypeWidget())
 | 
			
		||||
                        .child(new NoteActionsWidget())
 | 
			
		||||
                    )
 | 
			
		||||
                    .child(new TabCachingWidget(() => new PromotedAttributesWidget()))
 | 
			
		||||
                    .child(new TabCachingWidget(() => new NoteDetailWidget()))
 | 
			
		||||
                )
 | 
			
		||||
                .child(new SidePaneContainer('right')
 | 
			
		||||
                    .child(new NoteInfoWidget())
 | 
			
		||||
                    .child(new TabCachingWidget(() => new CalendarWidget()))
 | 
			
		||||
                    .child(new TabCachingWidget(() => new AttributesWidget()))
 | 
			
		||||
                    .child(new TabCachingWidget(() => new LinkMapWidget()))
 | 
			
		||||
                    .child(new TabCachingWidget(() => new NoteRevisionsWidget()))
 | 
			
		||||
                    .child(new TabCachingWidget(() => new SimilarNotesWidget()))
 | 
			
		||||
                    .child(new TabCachingWidget(() => new WhatLinksHereWidget()))
 | 
			
		||||
                )
 | 
			
		||||
                .child(new SidePaneToggles())
 | 
			
		||||
            );
 | 
			
		||||
 | 
			
		||||
        root.setParent(appContext);
 | 
			
		||||
        
 | 
			
		||||
 | 
			
		||||
@ -43,8 +43,8 @@ const typeWidgetClasses = {
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default class NoteDetailWidget extends TabAwareWidget {
 | 
			
		||||
    constructor(parent) {
 | 
			
		||||
        super(parent);
 | 
			
		||||
    constructor() {
 | 
			
		||||
        super();
 | 
			
		||||
 | 
			
		||||
        this.typeWidgets = {};
 | 
			
		||||
 | 
			
		||||
@ -107,10 +107,10 @@ export default class NoteDetailWidget extends TabAwareWidget {
 | 
			
		||||
        if (!(this.type in this.typeWidgets)) {
 | 
			
		||||
            const clazz = typeWidgetClasses[this.type];
 | 
			
		||||
 | 
			
		||||
            const typeWidget = this.typeWidgets[this.type] = new clazz(this);
 | 
			
		||||
            const typeWidget = this.typeWidgets[this.type] = new clazz();
 | 
			
		||||
            typeWidget.spacedUpdate = this.spacedUpdate;
 | 
			
		||||
 | 
			
		||||
            this.children.push(typeWidget);
 | 
			
		||||
            this.child(typeWidget);
 | 
			
		||||
 | 
			
		||||
            const $renderedWidget = typeWidget.render();
 | 
			
		||||
            keyboardActionsService.updateDisplayedShortcuts($renderedWidget);
 | 
			
		||||
 | 
			
		||||
@ -23,8 +23,8 @@ const TPL = `
 | 
			
		||||
</div>`;
 | 
			
		||||
 | 
			
		||||
export default class NoteTitleWidget extends TabAwareWidget {
 | 
			
		||||
    constructor(parent) {
 | 
			
		||||
        super(parent);
 | 
			
		||||
    constructor() {
 | 
			
		||||
        super();
 | 
			
		||||
 | 
			
		||||
        this.spacedUpdate = new SpacedUpdate(async () => {
 | 
			
		||||
            const title = this.$noteTitle.val();
 | 
			
		||||
 | 
			
		||||
@ -2,10 +2,13 @@ import options from "../services/options.js";
 | 
			
		||||
import FlexContainer from "./flex_container.js";
 | 
			
		||||
 | 
			
		||||
export default class SidePaneContainer extends FlexContainer {
 | 
			
		||||
    constructor(parent, side, widgetFactories) {
 | 
			
		||||
        super(parent, {id: side + '-pane', 'flex-direction': 'column', 'height': '100%'}, widgetFactories);
 | 
			
		||||
    constructor(side) {
 | 
			
		||||
        super('column');
 | 
			
		||||
 | 
			
		||||
        this.side = side;
 | 
			
		||||
 | 
			
		||||
        this.id(side + '-pane');
 | 
			
		||||
        this.css('height', '100%');
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    isEnabled() {
 | 
			
		||||
 | 
			
		||||
@ -29,8 +29,8 @@ const TPL = `
 | 
			
		||||
`;
 | 
			
		||||
 | 
			
		||||
export default class SidePaneToggles extends BasicWidget {
 | 
			
		||||
    constructor(parent) {
 | 
			
		||||
        super(parent);
 | 
			
		||||
    constructor() {
 | 
			
		||||
        super();
 | 
			
		||||
 | 
			
		||||
        this.paneVisible = {};
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -1,13 +1,6 @@
 | 
			
		||||
import TabAwareWidget from "../tab_aware_widget.js";
 | 
			
		||||
 | 
			
		||||
export default class TypeWidget extends TabAwareWidget {
 | 
			
		||||
    constructor(parent) {
 | 
			
		||||
        super(parent);
 | 
			
		||||
 | 
			
		||||
        /** @var {NoteDetailWidget} */
 | 
			
		||||
        this.noteDetailWidget = parent;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // for overriding
 | 
			
		||||
    static getType() {}
 | 
			
		||||
 | 
			
		||||
@ -18,7 +11,7 @@ export default class TypeWidget extends TabAwareWidget {
 | 
			
		||||
 | 
			
		||||
    async refresh() {
 | 
			
		||||
        const thisWidgetType = this.constructor.getType();
 | 
			
		||||
        const noteWidgetType = await this.noteDetailWidget.getWidgetType();
 | 
			
		||||
        const noteWidgetType = await this.parent.getWidgetType();
 | 
			
		||||
 | 
			
		||||
        if (thisWidgetType !== noteWidgetType) {
 | 
			
		||||
            this.toggle(false);
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user