From fb31acc8e0a3bc353cb683d8909d864ce28672f5 Mon Sep 17 00:00:00 2001 From: zadam Date: Sun, 13 Jun 2021 22:55:31 +0200 Subject: [PATCH] layout changes --- src/public/app/layouts/desktop_layout.js | 14 +++-- src/public/app/services/note_list_renderer.js | 17 +++--- src/public/app/widgets/basic_widget.js | 3 +- src/public/app/widgets/buttons/global_menu.js | 9 ++- .../app/widgets/buttons/note_actions.js | 7 ++- src/public/app/widgets/collapsible_widget.js | 1 + .../widgets/containers/left_pane_container.js | 1 + .../widgets/containers/ribbon_container.js | 6 +- .../containers/right_pane_container.js | 1 + .../widgets/containers/scrolling_container.js | 2 +- .../containers/split_note_container.js | 3 +- src/public/app/widgets/note_icon.js | 22 +++---- src/public/app/widgets/note_title.js | 9 +-- src/public/app/widgets/note_type.js | 2 +- src/public/app/widgets/quick_search.js | 3 +- .../ribbon_widgets/basic_properties.js | 7 ++- .../widgets/ribbon_widgets/book_properties.js | 2 +- .../widgets/ribbon_widgets/file_properties.js | 1 + .../ribbon_widgets/image_properties.js | 1 + .../inherited_attribute_list.js | 1 + .../app/widgets/ribbon_widgets/link_map.js | 3 +- .../ribbon_widgets/note_info_widget.js | 1 + .../app/widgets/ribbon_widgets/note_paths.js | 1 + .../widgets/ribbon_widgets/note_properties.js | 1 + .../ribbon_widgets/owned_attribute_list.js | 10 +++- .../ribbon_widgets/promoted_attributes.js | 1 + .../ribbon_widgets/search_definition.js | 2 +- .../widgets/ribbon_widgets/similar_notes.js | 1 + src/public/app/widgets/tab_row.js | 58 +++++++++---------- src/public/stylesheets/style.css | 8 +++ 30 files changed, 125 insertions(+), 73 deletions(-) diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 366dae4fb..3a2dbe76d 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -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()) diff --git a/src/public/app/services/note_list_renderer.js b/src/public/app/services/note_list_renderer.js index f29d4dc6c..bc1e4ed21 100644 --- a/src/public/app/services/note_list_renderer.js +++ b/src/public/app/services/note_list_renderer.js @@ -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 = ` -
+
diff --git a/src/public/app/widgets/note_title.js b/src/public/app/widgets/note_title.js index e20ffd102..4003b7942 100644 --- a/src/public/app/widgets/note_title.js +++ b/src/public/app/widgets/note_title.js @@ -6,20 +6,21 @@ import SpacedUpdate from "../services/spaced_update.js"; import appContext from "../services/app_context.js"; const TPL = ` -
+
diff --git a/src/public/app/widgets/note_type.js b/src/public/app/widgets/note_type.js index 91a1bf9fe..2741fd432 100644 --- a/src/public/app/widgets/note_type.js +++ b/src/public/app/widgets/note_type.js @@ -15,7 +15,7 @@ const NOTE_TYPES = [ ]; const TPL = ` -
+
-
+
Note type:  
@@ -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()); diff --git a/src/public/app/widgets/ribbon_widgets/book_properties.js b/src/public/app/widgets/ribbon_widgets/book_properties.js index 86b117fcc..0446d39b4 100644 --- a/src/public/app/widgets/ribbon_widgets/book_properties.js +++ b/src/public/app/widgets/ribbon_widgets/book_properties.js @@ -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())); diff --git a/src/public/app/widgets/ribbon_widgets/file_properties.js b/src/public/app/widgets/ribbon_widgets/file_properties.js index c4d97ed48..e7b8c49e7 100644 --- a/src/public/app/widgets/ribbon_widgets/file_properties.js +++ b/src/public/app/widgets/ribbon_widgets/file_properties.js @@ -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"); diff --git a/src/public/app/widgets/ribbon_widgets/image_properties.js b/src/public/app/widgets/ribbon_widgets/image_properties.js index d35b0f9ac..a53b3f1a7 100644 --- a/src/public/app/widgets/ribbon_widgets/image_properties.js +++ b/src/public/app/widgets/ribbon_widgets/image_properties.js @@ -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"); diff --git a/src/public/app/widgets/ribbon_widgets/inherited_attribute_list.js b/src/public/app/widgets/ribbon_widgets/inherited_attribute_list.js index d9c692d44..9ca7899e2 100644 --- a/src/public/app/widgets/ribbon_widgets/inherited_attribute_list.js +++ b/src/public/app/widgets/ribbon_widgets/inherited_attribute_list.js @@ -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()); diff --git a/src/public/app/widgets/ribbon_widgets/link_map.js b/src/public/app/widgets/ribbon_widgets/link_map.js index 126c96b11..6e7f1638c 100644 --- a/src/public/app/widgets/ribbon_widgets/link_map.js +++ b/src/public/app/widgets/ribbon_widgets/link_map.js @@ -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); } } diff --git a/src/public/app/widgets/ribbon_widgets/note_info_widget.js b/src/public/app/widgets/ribbon_widgets/note_info_widget.js index 9b4970627..5f506d98b 100644 --- a/src/public/app/widgets/ribbon_widgets/note_info_widget.js +++ b/src/public/app/widgets/ribbon_widgets/note_info_widget.js @@ -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"); diff --git a/src/public/app/widgets/ribbon_widgets/note_paths.js b/src/public/app/widgets/ribbon_widgets/note_paths.js index ab8496a3b..30809a937 100644 --- a/src/public/app/widgets/ribbon_widgets/note_paths.js +++ b/src/public/app/widgets/ribbon_widgets/note_paths.js @@ -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"); diff --git a/src/public/app/widgets/ribbon_widgets/note_properties.js b/src/public/app/widgets/ribbon_widgets/note_properties.js index 7498974d0..b151a0d1c 100644 --- a/src/public/app/widgets/ribbon_widgets/note_properties.js +++ b/src/public/app/widgets/ribbon_widgets/note_properties.js @@ -30,6 +30,7 @@ export default class NotePropertiesWidget extends NoteContextAwareWidget { doRender() { this.$widget = $(TPL); + this.contentSized(); this.$pageUrl = this.$widget.find('.page-url'); } diff --git a/src/public/app/widgets/ribbon_widgets/owned_attribute_list.js b/src/public/app/widgets/ribbon_widgets/owned_attribute_list.js index acbb62e7b..5cdd31325 100644 --- a/src/public/app/widgets/ribbon_widgets/owned_attribute_list.js +++ b/src/public/app/widgets/ribbon_widgets/owned_attribute_list.js @@ -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()); diff --git a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js index 7e11f51e0..b4be7aefe 100644 --- a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js +++ b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js @@ -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"); } diff --git a/src/public/app/widgets/ribbon_widgets/search_definition.js b/src/public/app/widgets/ribbon_widgets/search_definition.js index fba6212bc..d8809f5f8 100644 --- a/src/public/app/widgets/ribbon_widgets/search_definition.js +++ b/src/public/app/widgets/ribbon_widgets/search_definition.js @@ -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); diff --git a/src/public/app/widgets/ribbon_widgets/similar_notes.js b/src/public/app/widgets/ribbon_widgets/similar_notes.js index 57d4c830d..8f6e029d2 100644 --- a/src/public/app/widgets/ribbon_widgets/similar_notes.js +++ b/src/public/app/widgets/ribbon_widgets/similar_notes.js @@ -47,6 +47,7 @@ export default class SimilarNotesWidget extends NoteContextAwareWidget { doRender() { this.$widget = $(TPL); + this.contentSized(); this.$similarNotesWrapper = this.$widget.find(".similar-notes-wrapper"); } diff --git a/src/public/app/widgets/tab_row.js b/src/public/app/widgets/tab_row.js index 44322229e..4e26a3c8b 100644 --- a/src/public/app/widgets/tab_row.js +++ b/src/public/app/widgets/tab_row.js @@ -43,9 +43,9 @@ const NEW_TAB_BUTTON_TPL = `
`; const TAB_ROW_TPL = ` -
+
-
+
`; 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'); diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 14e66e264..fd77cbaeb 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -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 {