zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-01-16 20:21:43 +08:00
Code Issues Projects Releases Packages Wiki Activity

layout changes WIP

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/public/javascripts/widgets/component.js
View file

@ -2,19 +2,19 @@ import utils from '../services/utils.js';
import Mutex from "../services/mutex.js";
export default class Component {
/**
* @param {Component} parent
*/
constructor(parent) {
constructor() {
this.componentId = `comp-${this.constructor.name}-` + utils.randomString(6);
/** @type Component */
this.parent = parent;
/** @type Component[] */
this.children = [];
this.initialized = Promise.resolve();
this.mutex = new Mutex();
}
setParent(parent) {
/** @type Component */
this.parent = parent;
}
async handleEvent(name, data) {
await this.initialized;

59
src/public/javascripts/widgets/flex_container.js
View file

@ -1,25 +1,62 @@
import BasicWidget from "./basic_widget.js";
export default class FlexContainer extends BasicWidget {
constructor(parent, attrs, widgetFactories) {
super(parent);
constructor(direction) {
super();
this.attrs = attrs;
this.children = widgetFactories.map(wf => wf(this));
if (!direction) {
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() {
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) {
if (key === 'id') {
this.$widget.attr(key, this.attrs[key]);
}
else {
this.$widget.css(key, this.attrs[key]);
}
this.$widget.attr(key, this.attrs[key]);
}
if (!this.children)
for (const widget of this.children) {
this.$widget.append(widget.render());
}

69
src/public/javascripts/widgets/layout.js
View file

@ -28,43 +28,46 @@ import SidePaneToggles from "./side_pane_toggles.js";
export default class Layout {
getRootWidget(appContext) {
return new FlexContainer(appContext, { 'flex-direction': 'column', 'height': '100vh' }, [
parent => new FlexContainer(parent, { 'flex-direction': 'row' }, [
parent => new GlobalMenuWidget(parent),
parent => new TabRowWidget(parent),
parent => new TitleBarButtonsWidget(parent)
]),
parent => new StandardTopWidget(parent),
parent => new FlexContainer(parent, { 'flex-direction': 'row', 'min-height': '0' }, [
parent => new SidePaneContainer(parent, 'left', [
parent => new GlobalButtonsWidget(parent),
parent => new SearchBoxWidget(parent),
parent => new SearchResultsWidget(parent),
parent => new NoteTreeWidget(parent)
const root = new FlexContainer(appContext)
.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()
]),
parent => new FlexContainer(parent, { id: 'center-pane', 'flex-direction': 'column' }, [
parent => new FlexContainer(parent, { 'flex-direction': 'row' }, [
parent => new TabCachingWidget(parent, parent => new NotePathsWidget(parent)),
parent => new NoteTitleWidget(parent),
parent => new RunScriptButtonsWidget(parent),
parent => new ProtectedNoteSwitchWidget(parent),
parent => new NoteTypeWidget(parent),
parent => new NoteActionsWidget(parent)
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()
]),
parent => new TabCachingWidget(parent, parent => new PromotedAttributesWidget(parent)),
parent => new TabCachingWidget(parent, parent => new NoteDetailWidget(parent))
new TabCachingWidget(new PromotedAttributesWidget()),
new TabCachingWidget(new NoteDetailWidget())
]),
parent => new SidePaneContainer(parent, 'right', [
parent => new NoteInfoWidget(parent),
parent => new TabCachingWidget(parent, parent => new CalendarWidget(parent)),
parent => new TabCachingWidget(parent, parent => new AttributesWidget(parent)),
parent => new TabCachingWidget(parent, parent => new LinkMapWidget(parent)),
parent => new TabCachingWidget(parent, parent => new NoteRevisionsWidget(parent)),
parent => new TabCachingWidget(parent, parent => new SimilarNotesWidget(parent)),
parent => new TabCachingWidget(parent, parent => new WhatLinksHereWidget(parent))
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())
]),
parent => new SidePaneToggles(parent)
new SidePaneToggles()
])
])
]);
root.setParent(appContext);
return root;
}
}

6
src/public/javascripts/widgets/note_actions.js
View file

@ -2,6 +2,12 @@ import TabAwareWidget from "./tab_aware_widget.js";
const TPL = `
<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">
Note actions
<span class="caret"></span>

2
src/public/javascripts/widgets/note_title.js
View file

@ -12,8 +12,6 @@ const TPL = `
}
.note-title-container input.note-title {
margin-left: 15px;
margin-right: 10px;
font-size: 150%;
border: 0;
min-width: 5em;

6
src/public/javascripts/widgets/protected_note_switch.js
View file

@ -1,10 +1,8 @@
import BasicWidget from "./basic_widget.js";
import protectedSessionService from "../services/protected_session.js";
import protectedSessionHolder from "../services/protected_session_holder.js";
import TabAwareWidget from "./tab_aware_widget.js";
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"
class="btn btn-sm icon-button bx bx-check-shield protect-button"
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"
title="Not protected note can be viewed without entering password">
</button>
</div>`;
</div>`;``;
export default class ProtectedNoteSwitchWidget extends TabAwareWidget {
doRender() {

4
src/public/javascripts/widgets/tab_caching_widget.js
View file

@ -2,8 +2,8 @@ import TabAwareWidget from "./tab_aware_widget.js";
import keyboardActionsService from "../services/keyboard_actions.js";
export default class TabCachingWidget extends TabAwareWidget {
constructor(parent, widgetFactory) {
super(parent);
constructor(widgetFactory) {
super();
this.widgetFactory = widgetFactory;
this.widgets = {};

2
src/public/stylesheets/desktop.css
View file

@ -149,7 +149,7 @@ body {
#right-pane .card-header {
background: inherit;
padding: 5px 10px 5px 10px;
padding: 3px 10px 3px 10px;
width: 99%; /* to give minimal right margin */
background-color: var(--button-background-color);
border-color: var(--button-border-color);

9
src/public/stylesheets/style.css
View file

@ -380,15 +380,6 @@ button.icon-button {
max-height: 34px;
}
.note-actions {
margin-left: 10px;
margin-right: 10px;
}
.note-actions .dropdown-menu {
width: 15em;
}
.ck.ck-block-toolbar-button {
transform: translateX(7px);
color: var(--muted-text-color);