moved note actions button into section container

2025-10-31 18:36:30 +01:00 · 2021-05-24 14:39:44 +02:00
parent 7d94202460
commit 1f5e4530c3
5 changed files with 85 additions and 96 deletions
--- 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"
      }
--- 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",
--- 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(
--- 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 = `
    }
    </style>

-    <div class="section-title-container"></div>
+    <div class="section-top-row">
+        <div class="section-title-container"></div>
+        <div class="section-button-container"></div>
+    </div>
+    
    <div class="section-body-container"></div>
 </div>`;

@@ -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(
                $('<div class="section-body">')
-                    .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('<div class="section-title section-title-empty">');

-        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 = $('<div class="section-title section-title-real">')
-                .attr('data-section-component-id', widget.componentId)
+                .attr('data-section-component-id', sectionWidget.componentId)
                .append($('<span class="section-title-icon">')
                            .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;
            }
        }
--- 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();
    }

    /**