From 1f5e4530c3fa0ccbb577cf99712037c7a9640638 Mon Sep 17 00:00:00 2001 From: zadam Date: Mon, 24 May 2021 14:39:44 +0200 Subject: [PATCH] moved note actions button into section container --- package-lock.json | 81 ++++++++----------- package.json | 2 +- src/public/app/layouts/desktop_layout.js | 28 ++----- .../collapsible_section_container.js | 68 ++++++++++------ src/public/app/widgets/note_tree.js | 2 +- 5 files changed, 85 insertions(+), 96 deletions(-) diff --git a/package-lock.json b/package-lock.json index 45e18986a..c9a61f46b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1040,7 +1040,8 @@ "acorn": { "version": "8.2.2", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.2.2.tgz", - "integrity": "sha512-VrMS8kxT0e7J1EX0p6rI/E0FbfOVcvBpbIqHThFv+f8YrZIlMfVotYcXKVPmTvPW8sW5miJzfUFrrvthUZg8VQ==" + "integrity": "sha512-VrMS8kxT0e7J1EX0p6rI/E0FbfOVcvBpbIqHThFv+f8YrZIlMfVotYcXKVPmTvPW8sW5miJzfUFrrvthUZg8VQ==", + "dev": true }, "acorn-globals": { "version": "6.0.0", @@ -5092,9 +5093,9 @@ "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==" }, "is-potential-custom-element-name": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz", - "integrity": "sha1-DFLlS8yjkbssSUsh6GJtczbG45c=" + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", + "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==" }, "is-stream": { "version": "2.0.0", @@ -5303,12 +5304,12 @@ } }, "jsdom": { - "version": "16.5.3", - "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.5.3.tgz", - "integrity": "sha512-Qj1H+PEvUsOtdPJ056ewXM4UJPCi4hhLA8wpiz9F2YvsRBhuFsXxtrIFAgGBDynQA9isAMGE91PfUYbdMPXuTA==", + "version": "16.6.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.6.0.tgz", + "integrity": "sha512-Ty1vmF4NHJkolaEmdjtxTfSfkdb8Ywarwf63f+F8/mDD1uLSSWDxDuMiZxiPhwunLrn9LOSVItWj4bLYsLN3Dg==", "requires": { "abab": "^2.0.5", - "acorn": "^8.1.0", + "acorn": "^8.2.4", "acorn-globals": "^6.0.0", "cssom": "^0.4.4", "cssstyle": "^2.3.0", @@ -5316,12 +5317,13 @@ "decimal.js": "^10.2.1", "domexception": "^2.0.1", "escodegen": "^2.0.0", + "form-data": "^3.0.0", "html-encoding-sniffer": "^2.0.1", - "is-potential-custom-element-name": "^1.0.0", + "http-proxy-agent": "^4.0.1", + "https-proxy-agent": "^5.0.0", + "is-potential-custom-element-name": "^1.0.1", "nwsapi": "^2.2.0", "parse5": "6.0.1", - "request": "^2.88.2", - "request-promise-native": "^1.0.9", "saxes": "^5.0.1", "symbol-tree": "^3.2.4", "tough-cookie": "^4.0.0", @@ -5331,10 +5333,25 @@ "whatwg-encoding": "^1.0.5", "whatwg-mimetype": "^2.3.0", "whatwg-url": "^8.5.0", - "ws": "^7.4.4", + "ws": "^7.4.5", "xml-name-validator": "^3.0.0" }, "dependencies": { + "acorn": { + "version": "8.2.4", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.2.4.tgz", + "integrity": "sha512-Ibt84YwBDDA890eDiDCEqcbwvHlBvzzDkU2cGBBDDI1QWT12jTiXIOn2CIw5KK4i6N5Z2HUxwYjzriDyqaqqZg==" + }, + "form-data": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz", + "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + }, "parse5": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", @@ -6941,35 +6958,6 @@ } } }, - "request-promise-core": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.4.tgz", - "integrity": "sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==", - "requires": { - "lodash": "^4.17.19" - } - }, - "request-promise-native": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.9.tgz", - "integrity": "sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==", - "requires": { - "request-promise-core": "1.1.4", - "stealthy-require": "^1.1.1", - "tough-cookie": "^2.3.3" - }, - "dependencies": { - "tough-cookie": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz", - "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==", - "requires": { - "psl": "^1.1.28", - "punycode": "^2.1.1" - } - } - } - }, "require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -7602,11 +7590,6 @@ "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=" }, - "stealthy-require": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz", - "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=" - }, "stream-throttle": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/stream-throttle/-/stream-throttle-0.1.3.tgz", @@ -7928,9 +7911,9 @@ } }, "tr46": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.0.2.tgz", - "integrity": "sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz", + "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==", "requires": { "punycode": "^2.1.1" } diff --git a/package.json b/package.json index 341db369a..3d7deb412 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "is-svg": "4.3.1", "jimp": "0.16.1", "joplin-turndown-plugin-gfm": "1.0.12", - "jsdom": "16.5.3", + "jsdom": "16.6.0", "mime-types": "2.1.30", "multer": "1.4.2", "node-abi": "2.26.0", diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 61444dd85..8707b9086 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -2,24 +2,12 @@ import FlexContainer from "../widgets/containers/flex_container.js"; import GlobalMenuWidget from "../widgets/global_menu.js"; import TabRowWidget from "../widgets/tab_row.js"; import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js"; -import StandardTopWidget from "../widgets/standard_top_widget.js"; import SidePaneContainer from "../widgets/containers/side_pane_container.js"; import NoteTreeWidget from "../widgets/note_tree.js"; -import NoteContextCachingWidget from "../widgets/note_context_caching_widget.js"; -import NotePathsWidget from "../widgets/note_paths.js"; import NoteTitleWidget from "../widgets/note_title.js"; import OwnedAttributeListWidget from "../widgets/type_property_widgets/owned_attribute_list.js"; -import NoteTypeWidget from "../widgets/note_type.js"; import NoteActionsWidget from "../widgets/note_actions.js"; import NoteDetailWidget from "../widgets/note_detail.js"; -import NoteInfoWidget from "../widgets/collapsible_widgets/note_info.js"; -import CalendarWidget from "../widgets/collapsible_widgets/calendar.js"; -import LinkMapWidget from "../widgets/collapsible_widgets/link_map.js"; -import NoteRevisionsWidget from "../widgets/collapsible_widgets/note_revisions.js"; -import SimilarNotesWidget from "../widgets/similar_notes.js"; -import WhatLinksHereWidget from "../widgets/collapsible_widgets/what_links_here.js"; -import SidePaneToggles from "../widgets/side_pane_toggles.js"; -import EditedNotesWidget from "../widgets/collapsible_widgets/edited_notes.js"; import CollapsibleSectionContainer from "../widgets/containers/collapsible_section_container.js"; import PromotedAttributesWidget from "../widgets/type_property_widgets/promoted_attributes.js"; import InheritedAttributesWidget from "../widgets/type_property_widgets/inherited_attribute_list.js"; @@ -194,7 +182,6 @@ export default class DesktopLayout { .overflowing() .child(new NoteIconWidget()) .child(new NoteTitleWidget()) - .child(new NoteActionsWidget().hideInZenMode()) .child(new ButtonWidget() .icon("bx-window-open bx-rotate-90") .title("Create new pane") @@ -204,13 +191,14 @@ export default class DesktopLayout { ) .child( new CollapsibleSectionContainer() - .child(new SearchDefinitionWidget()) - .child(new NotePropertiesWidget()) - .child(new FilePropertiesWidget()) - .child(new ImagePropertiesWidget()) - .child(new PromotedAttributesWidget()) - .child(new OwnedAttributeListWidget()) - .child(new InheritedAttributesWidget()) + .section(new SearchDefinitionWidget()) + .section(new NotePropertiesWidget()) + .section(new FilePropertiesWidget()) + .section(new ImagePropertiesWidget()) + .section(new PromotedAttributesWidget()) + .section(new OwnedAttributeListWidget()) + .section(new InheritedAttributesWidget()) + .button(new NoteActionsWidget()) ) .child(new NoteUpdateStatusWidget()) .child( diff --git a/src/public/app/widgets/containers/collapsible_section_container.js b/src/public/app/widgets/containers/collapsible_section_container.js index 534ab23ae..5fab1e299 100644 --- a/src/public/app/widgets/containers/collapsible_section_container.js +++ b/src/public/app/widgets/containers/collapsible_section_container.js @@ -7,13 +7,16 @@ const TPL = ` margin-bottom: 5px; } + .section-top-row { + display: flex; + } + .section-title-container { display: flex; flex-direction: row; justify-content: center; - margin-top: 7px; margin-left: 10px; - margin-right: 10px; + flex-grow: 1; } .section-title { @@ -51,6 +54,16 @@ const TPL = ` flex-grow: 1; } + .section-button-container { + border-bottom: 1px solid var(--main-border-color); + margin-right: 10px; + } + + .section-button-container .bx { + position: relative; + top: 6px; + } + .section-body { display: none; border-bottom: 1px solid var(--main-border-color); @@ -71,7 +84,11 @@ const TPL = ` } -
+
+
+
+
+
`; @@ -79,26 +96,22 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget constructor() { super(); - this.children = []; - - this.positionCounter = 10; + this.sectionWidgets = []; + this.buttonWidgets = []; } - child(...components) { - if (!components) { - return this; - } + section(widget) { + super.child(widget); - super.child(...components); + this.sectionWidgets.push(widget); - for (const component of components) { - if (!component.position) { - component.position = this.positionCounter; - this.positionCounter += 10; - } - } + return this; + } - this.children.sort((a, b) => a.position - b.position < 0 ? -1 : 1); + button(widget) { + super.child(widget); + + this.buttonWidgets.push(widget); return this; } @@ -108,16 +121,21 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget this.overflowing(); this.$titleContainer = this.$widget.find('.section-title-container'); + this.$buttonContainer = this.$widget.find('.section-button-container'); this.$bodyContainer = this.$widget.find('.section-body-container'); - for (const widget of this.children) { + for (const sectionWidget of this.sectionWidgets) { this.$bodyContainer.append( $('
') - .attr('data-section-component-id', widget.componentId) - .append(widget.render()) + .attr('data-section-component-id', sectionWidget.componentId) + .append(sectionWidget.render()) ); } + for (const buttonWidget of this.buttonWidgets) { + this.$buttonContainer.append(buttonWidget.render()); + } + this.$titleContainer.on('click', '.section-title-real', e => { const $sectionTitle = $(e.target).closest('.section-title-real'); @@ -145,15 +163,15 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget this.$titleContainer.empty().append('
'); - for (const widget of this.children) { - const ret = widget.getTitle(note); + for (const sectionWidget of this.sectionWidgets) { + const ret = sectionWidget.getTitle(note); if (!ret.show) { continue; } const $sectionTitle = $('
') - .attr('data-section-component-id', widget.componentId) + .attr('data-section-component-id', sectionWidget.componentId) .append($('') .addClass(ret.icon) .attr("title", ret.title)) @@ -167,7 +185,7 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget $sectionToActivate = $sectionTitle; } - if (this.lastActiveComponentId === widget.componentId) { + if (this.lastActiveComponentId === sectionWidget.componentId) { $lastActiveSection = $sectionTitle; } } diff --git a/src/public/app/widgets/note_tree.js b/src/public/app/widgets/note_tree.js index ad16926e2..96760e7ef 100644 --- a/src/public/app/widgets/note_tree.js +++ b/src/public/app/widgets/note_tree.js @@ -580,7 +580,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget { node.setExpanded(branch.isExpanded, {noEvents: true, noAnimation: true}); } - node.getTitle(); + node.renderTitle(); } /**