layout changes WIP

This commit is contained in:
zadam 2020-02-27 00:58:10 +01:00
parent 7bcae9981b
commit 637010577b
9 changed files with 101 additions and 68 deletions

View File

@ -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;

View File

@ -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());
} }

View File

@ -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;
} }
} }

View File

@ -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>

View File

@ -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;

View File

@ -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() {

View File

@ -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 = {};

View File

@ -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);

View File

@ -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);