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

layout changes

Browse Source
This commit is contained in:
zadam 2021-06-13 22:55:31 +02:00
parent e054a1694e
commit fb31acc8e0
30 changed files with 125 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/public/app/layouts/desktop_layout.js
View File

@ -52,6 +52,7 @@ export default class DesktopLayout {
.setParent(appContext)
.child(new FlexContainer("column")
.id("launcher-pane")
.css("width", "53px")
.child(new GlobalMenuWidget())
.child(new ButtonWidget()
.icon("bx-file-blank")
@ -71,12 +72,12 @@ export default class DesktopLayout {
.command("showRecentChanges"))
.child(new SpacerWidget(40, 0))
.child(new FlexContainer("column")
.id("plugin-buttons"))
.id("plugin-buttons")
.contentSized())
.child(new SpacerWidget(0, 1000))
.child(new ProtectedSessionStatusWidget())
.child(new SyncStatusWidget())
.child(new LeftPaneToggleWidget())
.css("width", "54px")
)
.child(new LeftPaneContainer()
.child(new QuickSearchWidget())
@ -93,14 +94,18 @@ export default class DesktopLayout {
)
.child(new FlexContainer('row')
.filling()
.collapsible()
.child(new FlexContainer('column')
.filling()
.collapsible()
.id('center-pane')
.child(new SplitNoteContainer(() =>
new FlexContainer('column')
.css("flex-grow", "1")
.collapsible()
.child(new FlexContainer('row').class('title-row')
.css('align-items: center;')
.css("height", "50px")
.css('align-items', "center")
.cssBlock('.title-row > * { margin: 5px; }')
.child(new NoteIconWidget())
.child(new NoteTitleWidget())
@ -130,9 +135,10 @@ export default class DesktopLayout {
.titlePlacement("bottom"))
.button(new NoteActionsWidget())
)
.child(new NoteUpdateStatusWidget())
.child(new NoteUpdateStatusWidget())
.child(
new ScrollingContainer()
.filling()
.child(new SqlTableSchemasWidget())
.child(new NoteDetailWidget())
.child(new NoteListWidget())

17
src/public/app/services/note_list_renderer.js
View File

@ -1,37 +1,36 @@
import linkService from "./link.js";
import noteContentRenderer from "./note_content_renderer.js";
import froca from "./froca.js";
import attributeService from "./attributes.js";
import attributeRenderer from "./attribute_renderer.js";
const TPL = `
<div class="note-list">
<div class="note-list-widget">
<style>
.note-list {
.note-list-widget {
overflow: hidden;
position: relative;
height: 100%;
}
.note-list.grid-view .note-list-container {
.note-list-widget.grid-view .note-list-widget-container {
display: flex;
flex-wrap: wrap;
}
.note-list.grid-view .note-book-card {
.note-list-widget.grid-view .note-book-card {
flex-basis: 300px;
border: 1px solid transparent;
}
.note-list.grid-view .note-expander {
.note-list-widget.grid-view .note-expander {
display: none;
}
.note-list.grid-view .note-book-card {
.note-list-widget.grid-view .note-book-card {
max-height: 300px;
}
.note-list.grid-view .note-book-card:hover {
.note-list-widget.grid-view .note-book-card:hover {
cursor: pointer;
border: 1px solid var(--main-border-color);
background: var(--more-accented-background-color);
@ -199,7 +198,7 @@ class NoteListRenderer {
this.$noteList.show();
const $container = this.$noteList.find('.note-list-container').empty();
const $container = this.$noteList.find('.note-list-widget-container').empty();
const startIdx = (this.page - 1) * this.pageSize;
const endIdx = startIdx + this.pageSize;

3
src/public/app/widgets/basic_widget.js
View File

@ -26,7 +26,7 @@ class BasicWidget extends Component {
}
contentSized() {
console.log("Using contentSized() is deprecated NOOP and it is recommended to remove its use.");
this.css("contain", "none");
return this;
}
@ -39,6 +39,7 @@ class BasicWidget extends Component {
collapsible() {
this.css('min-height', '0');
this.css('min-width', '0');
return this;
}

9
src/public/app/widgets/buttons/global_menu.js
View File

@ -4,6 +4,11 @@ import utils from "../../services/utils.js";
const TPL = `
<div class="dropdown global-menu dropright">
<style>
.global-menu {
width: 53px;
height: 53px;
}
.global-menu .dropdown-menu {
width: 20em;
}
@ -12,8 +17,8 @@ const TPL = `
background-image: url("images/icon-bw.png");
background-repeat: no-repeat;
background-position: 50% 45%;
width: 53px;
height: 53px;
width: 100%;
height: 100%;
}
.global-menu-button:hover {

7
src/public/app/widgets/buttons/note_actions.js
View File

@ -3,7 +3,12 @@ import utils from "../../services/utils.js";
const TPL = `
<div class="dropdown note-actions">
<style>
<style>
.note-actions {
width: 35px;
height: 35px;
}
.note-actions .dropdown-menu {
width: 15em;
}

1
src/public/app/widgets/collapsible_widget.js
View File

@ -16,6 +16,7 @@ export default class CollapsibleWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(WIDGET_TPL);
this.contentSized();
this.$widget.find('[data-target]').attr('data-target', "#" + this.componentId);
this.$bodyWrapper = this.$widget.find('.body-wrapper');

1
src/public/app/widgets/containers/left_pane_container.js
View File

@ -7,6 +7,7 @@ export default class LeftPaneContainer extends FlexContainer {
this.id('left-pane');
this.css('height', '100%');
this.collapsible();
}
isEnabled() {

6
src/public/app/widgets/containers/ribbon_container.js
View File

@ -4,7 +4,7 @@ const TPL = `
<div class="ribbon-container">
<style>
.ribbon-container {
margin-bottom: 5px;
margin-bottom: 5px;
}
.ribbon-top-row {
@ -78,6 +78,9 @@ const TPL = `
.ribbon-button-container .icon-action {
padding: 5px;
}
.ribbon-button-container > * {
position: relative;
top: -3px;
margin-left: 10px;
@ -115,6 +118,7 @@ export default class RibbonContainer extends NoteContextAwareWidget {
constructor() {
super();
this.contentSized();
this.ribbonWidgets = [];
this.buttonWidgets = [];
}

1
src/public/app/widgets/containers/right_pane_container.js
View File

@ -7,6 +7,7 @@ export default class RightPaneContainer extends FlexContainer {
this.id('right-pane');
this.css('height', '100%');
this.collapsible();
}
isEnabled() {

2
src/public/app/widgets/containers/scrolling_container.js
View File

@ -4,7 +4,7 @@ export default class ScrollingContainer extends Container {
constructor() {
super();
this.css('height: 100%; overflow: auto;');
this.css('overflow', 'auto');
}
async noteSwitchedEvent({noteContext, notePath}) {

3
src/public/app/widgets/containers/split_note_container.js
View File

@ -8,8 +8,9 @@ export default class SplitNoteContainer extends FlexContainer {
this.widgetFactory = widgetFactory;
this.widgets = {};
this.class('note-split-container-widget');
this.class('split-note-container-widget');
this.css('flex-grow', '1');
this.collapsible();
}
async newNoteContextCreatedEvent({noteContext}) {

22
src/public/app/widgets/note_icon.js
View File

@ -2,15 +2,17 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js";
import attributeService from "../services/attributes.js";
const TPL = `
<div class="note-icon-container dropdown">
<div class="note-icon-widget dropdown">
<style>
.note-icon-container {
.note-icon-widget {
padding-top: 3px;
padding-left: 7px;
margin-right: 0;
width: 50px;
height: 50px;
}
.note-icon-container button.note-icon {
.note-icon-widget button.note-icon {
font-size: 180%;
background-color: transparent;
border: 1px solid transparent;
@ -19,18 +21,18 @@ const TPL = `
color: var(--main-text-color);
}
.note-icon-container button.note-icon:hover {
.note-icon-widget button.note-icon:hover {
border: 1px solid var(--main-border-color);
}
.note-icon-container .dropdown-menu {
.note-icon-widget .dropdown-menu {
border-radius: 10px;
border-width: 2px;
box-shadow: 10px 10px 93px -25px black;
padding: 10px 15px 10px 15px !important;
}
.note-icon-container .filter-row {
.note-icon-widget .filter-row {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
@ -38,19 +40,19 @@ const TPL = `
align-items: baseline;
}
.note-icon-container .filter-row span {
.note-icon-widget .filter-row span {
display: block;
padding-left: 15px;
padding-right: 15px;
font-weight: bold;
}
.note-icon-container .icon-list {
.note-icon-widget .icon-list {
height: 500px;
overflow: auto;
}
.note-icon-container .icon-list span {
.note-icon-widget .icon-list span {
display: inline-block;
padding: 10px;
cursor: pointer;
@ -58,7 +60,7 @@ const TPL = `
font-size: 180%;
}
.note-icon-container .icon-list span:hover {
.note-icon-widget .icon-list span:hover {
border: 1px solid var(--main-border-color);
}
</style>

9
src/public/app/widgets/note_title.js
View File

@ -6,20 +6,21 @@ import SpacedUpdate from "../services/spaced_update.js";
import appContext from "../services/app_context.js";
const TPL = `
<div class="note-title-container">
<div class="note-title-widget">
<style>
.note-title-container {
.note-title-widget {
flex-grow: 1000;
height: 100%;
}
.note-title-container input.note-title {
.note-title-widget input.note-title {
font-size: 180%;
border: 0;
min-width: 5em;
width: 100%;
}
.note-title-container input.note-title.protected {
.note-title-widget input.note-title.protected {
text-shadow: 4px 4px 4px var(--muted-text-color);
}
</style>

2
src/public/app/widgets/note_type.js
View File

@ -15,7 +15,7 @@ const NOTE_TYPES = [
];
const TPL = `
<div class="dropdown note-type">
<div class="dropdown note-type-widget">
<style>
.note-type-dropdown {
max-height: 500px;

3
src/public/app/widgets/quick_search.js
View File

@ -10,7 +10,8 @@ const TPL = `
<div class="quick-search input-group input-group-sm">
<style>
.quick-search {
padding: 10px 10px 10px 10px;
padding: 10px 10px 10px 0px;
height: 50px;
}
.quick-search button, .quick-search input {

7
src/public/app/widgets/ribbon_widgets/basic_properties.js
View File

@ -21,7 +21,7 @@ const TPL = `
}
</style>
<div class="note-type-container" style="display: flex">
<div class="note-type-container">
<span>Note type:</span> &nbsp;
</div>
@ -32,8 +32,8 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {
constructor() {
super();
this.noteTypeWidget = new NoteTypeWidget();
this.protectedNoteSwitchWidget = new ProtectedNoteSwitchWidget();
this.noteTypeWidget = new NoteTypeWidget().contentSized();
this.protectedNoteSwitchWidget = new ProtectedNoteSwitchWidget().contentSized();
this.child(this.noteTypeWidget, this.protectedNoteSwitchWidget);
}
@ -52,6 +52,7 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$widget.find(".note-type-container").append(this.noteTypeWidget.render());
this.$widget.find(".protected-note-switch-container").append(this.protectedNoteSwitchWidget.render());

2
src/public/app/widgets/ribbon_widgets/book_properties.js
View File

@ -1,5 +1,4 @@
import NoteContextAwareWidget from "../note_context_aware_widget.js";
import server from "../../services/server.js";
import attributeService from "../../services/attributes.js";
const TPL = `
@ -58,6 +57,7 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$viewTypeSelect = this.$widget.find('.view-type-select');
this.$viewTypeSelect.on('change', () => this.toggleViewType(this.$viewTypeSelect.val()));

1
src/public/app/widgets/ribbon_widgets/file_properties.js
View File

@ -70,6 +70,7 @@ export default class FilePropertiesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$fileNoteId = this.$widget.find(".file-note-id");
this.$fileName = this.$widget.find(".file-filename");
this.$fileType = this.$widget.find(".file-filetype");

1
src/public/app/widgets/ribbon_widgets/image_properties.js
View File

@ -52,6 +52,7 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$copyToClipboardButton = this.$widget.find(".image-copy-to-clipboard");
this.$uploadNewRevisionButton = this.$widget.find(".image-upload-new-revision");
this.$uploadNewRevisionInput = this.$widget.find(".image-upload-new-revision-input");

1
src/public/app/widgets/ribbon_widgets/inherited_attribute_list.js
View File

@ -38,6 +38,7 @@ export default class InheritedAttributesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$container = this.$widget.find('.inherited-attributes-container');
this.$widget.append(this.attributeDetailWidget.render());

3
src/public/app/widgets/ribbon_widgets/link_map.js
View File

@ -52,6 +52,7 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$container = this.$widget.find(".link-map-container");
this.openState = 'small';
@ -177,7 +178,7 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
renderData(data, zoomToFit = true, zoomPadding = 10) {
this.graph.graphData(data);
if (zoomToFit) {
if (zoomToFit && data.nodes.length > 1) {
setTimeout(() => this.graph.zoomToFit(400, zoomPadding), 1000);
}
}

1
src/public/app/widgets/ribbon_widgets/note_info_widget.js
View File

@ -76,6 +76,7 @@ export default class NoteInfoWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$noteId = this.$widget.find(".note-info-note-id");
this.$dateCreated = this.$widget.find(".note-info-date-created");

1
src/public/app/widgets/ribbon_widgets/note_paths.js
View File

@ -50,6 +50,7 @@ export default class NotePathsWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$notePathIntro = this.$widget.find(".note-path-intro");
this.$notePathList = this.$widget.find(".note-path-list");

1
src/public/app/widgets/ribbon_widgets/note_properties.js
View File

@ -30,6 +30,7 @@ export default class NotePropertiesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$pageUrl = this.$widget.find('.page-url');
}

10
src/public/app/widgets/ribbon_widgets/owned_attribute_list.js
View File

@ -25,8 +25,13 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
constructor() {
super();
this.attributeDetailWidget = new AttributeDetailWidget().setParent(this);
this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget).setParent(this);
this.attributeDetailWidget = new AttributeDetailWidget()
.contentSized()
.setParent(this);
this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget)
.contentSized()
.setParent(this);
this.child(this.attributeEditorWidget, this.attributeDetailWidget);
}
@ -41,6 +46,7 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$widget.find('.attr-editor-placeholder').replaceWith(this.attributeEditorWidget.render());
this.$widget.append(this.attributeDetailWidget.render());

1
src/public/app/widgets/ribbon_widgets/promoted_attributes.js
View File

@ -37,6 +37,7 @@ const TPL = `
export default class PromotedAttributesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$container = this.$widget.find(".promoted-attributes-container");
}

2
src/public/app/widgets/ribbon_widgets/search_definition.js
View File

@ -223,9 +223,9 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$component = this.$widget.find('.search-definition-widget');
this.$widget.on('click', '[data-search-option-add]', async event => {
const searchOptionName = $(event.target).attr('data-search-option-add');
const clazz = OPTION_CLASSES.find(SearchOptionClass => SearchOptionClass.optionName === searchOptionName);

1
src/public/app/widgets/ribbon_widgets/similar_notes.js
View File

@ -47,6 +47,7 @@ export default class SimilarNotesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$similarNotesWrapper = this.$widget.find(".similar-notes-wrapper");
}

58
src/public/app/widgets/tab_row.js
View File

@ -43,9 +43,9 @@ const NEW_TAB_BUTTON_TPL = `<div class="note-new-tab" data-trigger-command="open
const FILLER_TPL = `<div class="tab-row-filler"></div>`;
const TAB_ROW_TPL = `
<div class="note-tab-row">
<div class="tab-row-widget">
<style>
.note-tab-row {
.tab-row-widget {
box-sizing: border-box;
position: relative;
width: 100%;
@ -54,19 +54,19 @@ const TAB_ROW_TPL = `
margin-top: 2px;
}
.note-tab-row * {
.tab-row-widget * {
box-sizing: inherit;
font: inherit;
}
.note-tab-row .note-tab-row-container {
.tab-row-widget .tab-row-widget-container {
box-sizing: border-box;
position: relative;
width: 100%;
height: 100%;
}
.note-tab-row .note-tab {
.tab-row-widget .note-tab {
position: absolute;
left: 0;
width: 240px;
@ -103,22 +103,22 @@ const TAB_ROW_TPL = `
left: 0;
}
.note-tab-row .note-tab[active] {
.tab-row-widget .note-tab[active] {
z-index: 5;
}
.note-tab-row .note-tab,
.note-tab-row .note-tab * {
.tab-row-widget .note-tab,
.tab-row-widget .note-tab * {
user-select: none;
cursor: default;
}
.note-tab-row .note-tab.note-tab-was-just-added {
.tab-row-widget .note-tab.note-tab-was-just-added {
top: 10px;
animation: note-tab-was-just-added 120ms forwards ease-in-out;
}
.note-tab-row .note-tab .note-tab-wrapper {
.tab-row-widget .note-tab .note-tab-wrapper {
position: absolute;
display: flex;
top: 0;
@ -134,35 +134,35 @@ const TAB_ROW_TPL = `
background-color: var(--inactive-tab-background-color);
}
.note-tab-row .note-tab[active] .note-tab-wrapper {
.tab-row-widget .note-tab[active] .note-tab-wrapper {
font-weight: bold;
color: var(--active-tab-text-color);
background-color : var(--active-tab-background-color);
}
.note-tab-row .note-tab[is-mini] .note-tab-wrapper {
.tab-row-widget .note-tab[is-mini] .note-tab-wrapper {
padding-left: 2px;
padding-right: 2px;
}
.note-tab-row .note-tab .note-tab-title {
.tab-row-widget .note-tab .note-tab-title {
flex: 1;
vertical-align: top;
overflow: hidden;
white-space: nowrap;
}
.note-tab-row .note-tab .note-tab-icon {
.tab-row-widget .note-tab .note-tab-icon {
position: relative;
top: -1px;
padding-right: 3px;
}
.note-tab-row .note-tab[is-small] .note-tab-title {
.tab-row-widget .note-tab[is-small] .note-tab-title {
margin-left: 0;
}
.note-tab-row .note-tab .note-tab-drag-handle {
.tab-row-widget .note-tab .note-tab-drag-handle {
position: absolute;
top: 0;
bottom: 0;
@ -172,7 +172,7 @@ const TAB_ROW_TPL = `
border-top-right-radius: 8px;
}
.note-tab-row .note-tab .note-tab-close {
.tab-row-widget .note-tab .note-tab-close {
flex-grow: 0;
flex-shrink: 0;
border-radius: 50%;
@ -180,24 +180,24 @@ const TAB_ROW_TPL = `
text-align: center;
}
.note-tab-row .note-tab .note-tab-close span {
.tab-row-widget .note-tab .note-tab-close span {
font-size: 24px;
position: relative;
top: -6px;
}
.note-tab-row .note-tab .note-tab-close:hover {
.tab-row-widget .note-tab .note-tab-close:hover {
background-color: var(--hover-item-background-color);
color: var(--hover-item-text-color);
}
.note-tab-row .note-tab[is-smaller] .note-tab-close {
.tab-row-widget .note-tab[is-smaller] .note-tab-close {
margin-left: auto;
}
.note-tab-row .note-tab[is-mini]:not([active]) .note-tab-close {
.tab-row-widget .note-tab[is-mini]:not([active]) .note-tab-close {
display: none;
}
.note-tab-row .note-tab[is-mini][active] .note-tab-close {
.tab-row-widget .note-tab[is-mini][active] .note-tab-close {
margin-left: auto;
margin-right: auto;
}
@ -221,13 +221,13 @@ const TAB_ROW_TPL = `
top: 0;
}
}
.note-tab-row.note-tab-row-is-sorting .note-tab:not(.note-tab-is-dragging),
.note-tab-row:not(.note-tab-row-is-sorting) .note-tab.note-tab-was-just-dragged {
.tab-row-widget.tab-row-widget-is-sorting .note-tab:not(.note-tab-is-dragging),
.tab-row-widget:not(.tab-row-widget-is-sorting) .note-tab.note-tab-was-just-dragged {
transition: transform 120ms ease-in-out;
}
</style>
<div class="note-tab-row-container"></div>
<div class="tab-row-widget-container"></div>
</div>`;
export default class TabRowWidget extends BasicWidget {
@ -296,7 +296,7 @@ export default class TabRowWidget extends BasicWidget {
}
get $tabContainer() {
return this.$widget.find('.note-tab-row-container');
return this.$widget.find('.tab-row-widget-container');
}
get tabWidths() {
@ -482,7 +482,7 @@ export default class TabRowWidget extends BasicWidget {
if (this.isDragging) {
this.isDragging = false;
this.$widget.removeClass('note-tab-row-is-sorting');
this.$widget.removeClass('tab-row-widget-is-sorting');
this.draggabillyDragging.element.classList.remove('note-tab-is-dragging');
this.draggabillyDragging.element.style.transform = '';
this.draggabillyDragging.dragEnd();
@ -512,7 +512,7 @@ export default class TabRowWidget extends BasicWidget {
this.isDragging = true;
this.draggabillyDragging = draggabilly;
tabEl.classList.add('note-tab-is-dragging');
this.$widget.addClass('note-tab-row-is-sorting');
this.$widget.addClass('tab-row-widget-is-sorting');
});
draggabilly.on('dragEnd', _ => {
@ -527,7 +527,7 @@ export default class TabRowWidget extends BasicWidget {
requestAnimationFrame(_ => {
tabEl.classList.remove('note-tab-is-dragging');
this.$widget.removeClass('note-tab-row-is-sorting');
this.$widget.removeClass('tab-row-widget-is-sorting');
tabEl.classList.add('note-tab-was-just-dragged');

8
src/public/stylesheets/style.css
View File

@ -20,6 +20,10 @@ body {
width: 100%;
}
.component {
contain: size;
}
code, kbd, pre, samp {
font-family: var(--font-family-monospace);
}
@ -65,6 +69,8 @@ button.close:hover {
border: 1px solid transparent;
border-radius: 3px;
padding: 5px;
width: 35px;
height: 35px;
cursor: pointer;
font-size: 1.5em;
color: var(--button-text-color);
@ -879,6 +885,8 @@ ul.fancytree-container li {
cursor: pointer;
border: none;
color: var(--launcher-pane-text-color);
width: 53px;
height: 53px;
}
#launcher-pane .icon-action:hover {