new saved search UI wip

src/public/app/widgets/attribute_list.js

@@ -30,7 +30,7 @@ const TPL = `
             border-color: red !important;
         }
         
-        .attr-expander {
+        .area-expander {
             display: flex; 
             flex-direction: row; 
             color: var(--muted-text-color); 
@@ -47,29 +47,29 @@ const TPL = `
             margin-bottom: 0;
         }
         
-        .attr-expander-text {
+        .area-expander-text {
             padding-left: 20px;
             padding-right: 20px;
             white-space: nowrap;
         }
         
-        .attr-expander:hover {
+        .area-expander:hover {
             cursor: pointer;
         }
         
-        .attr-expander:hover hr {
+        .area-expander:hover hr {
             border-color: var(--main-text-color);
         }
         
-        .attr-expander:hover .attr-expander-text {
+        .area-expander:hover .area-expander-text {
             color: var(--main-text-color);
         }
     </style>
     
-    <div class="attr-expander attr-promoted-expander">
+    <div class="area-expander attr-promoted-expander">
         <hr class="w-100">
         
-        <div class="attr-expander-text">Promoted attributes</div>
+        <div class="area-expander-text">Promoted attributes</div>
         
         <hr class="w-100">
     </div>
@@ -77,10 +77,10 @@ const TPL = `
     <div class="all-attr-wrapper">
         <div class="promoted-attributes-placeholder"></div>
     
-        <div class="attr-expander attr-owned-and-inherited-expander">
+        <div class="area-expander attr-owned-and-inherited-expander">
             <hr class="w-100">
             
-            <div class="attr-expander-text"></div>
+            <div class="area-expander-text"></div>
             
             <hr class="w-100">
         </div>
@@ -90,10 +90,10 @@ const TPL = `
             
             <hr class="w-100 attr-inherited-empty-expander" style="margin-bottom: 10px;">
             
-            <div class="attr-expander attr-inherited-expander">
+            <div class="area-expander attr-inherited-expander">
                 <hr class="w-100">
                 
-                <div class="attr-expander-text"></div>
+                <div class="area-expander-text"></div>
                 
                 <hr class="w-100">
             </div>
@@ -141,7 +141,7 @@ export default class AttributeListWidget extends TabAwareWidget {
             this.triggerEvent(`attributeListCollapsedStateChanged`, {collapse});
         });
 
-        this.$ownedExpanderText = this.$ownedExpander.find('.attr-expander-text');
+        this.$ownedExpanderText = this.$ownedExpander.find('.area-expander-text');
 
         this.$inheritedAttributesWrapper = this.$widget.find('.inherited-attributes-wrapper');
 
@@ -155,7 +155,7 @@ export default class AttributeListWidget extends TabAwareWidget {
             }
         });
 
-        this.$inheritedExpanderText = this.$inheritedExpander.find('.attr-expander-text');
+        this.$inheritedExpanderText = this.$inheritedExpander.find('.area-expander-text');
 
         this.$inheritedEmptyExpander = this.$widget.find('.attr-inherited-empty-expander');
 

src/public/app/widgets/similar_notes.js

@@ -24,46 +24,12 @@ const TPL = `
         white-space: nowrap;
         overflow: hidden;
     }
-    
-    .similar-notes-expander {
-        display: flex; 
-        flex-direction: row; 
-        color: var(--muted-text-color); 
-        font-size: 90%;
-        m
-    }
-    
-    .similar-notes-expander hr {
-        height: 1px;
-        border-color: var(--main-border-color);
-        position: relative;
-        top: 4px;
-        margin-top: 5px;
-    }
-    
-    .similar-notes-expander-text {
-        padding-left: 20px;
-        padding-right: 20px;
-        white-space: nowrap;
-    }
-    
-    .similar-notes-expander:hover {
-        cursor: pointer;
-    }
-    
-    .similar-notes-expander:hover hr {
-        border-color: var(--main-text-color);
-    }
-    
-    .similar-notes-expander:hover .similar-notes-expander-text {
-        color: var(--main-text-color);
-    }
     </style>
 
-    <div class="similar-notes-expander">
+    <div class="area-expander">
         <hr class="w-100">
         
-        <div class="similar-notes-expander-text"
+        <div class="area-expander-text"
              title="This list contains notes which might be similar to the current note based on textual similarity of note title, its labels and relations."></div>
         
         <hr class="w-100">
@@ -83,9 +49,9 @@ export default class SimilarNotesWidget extends TabAwareWidget {
         this.overflowing();
 
         this.$similarNotesWrapper = this.$widget.find(".similar-notes-wrapper");
-        this.$similarNotesExpanderText = this.$widget.find(".similar-notes-expander-text");
+        this.$expanderText = this.$widget.find(".area-expander-text");
 
-        this.$expander = this.$widget.find('.similar-notes-expander');
+        this.$expander = this.$widget.find('.area-expander');
         this.$expander.on('click', async () => {
             const collapse = this.$similarNotesWrapper.is(":visible");
 
@@ -132,7 +98,7 @@ export default class SimilarNotesWidget extends TabAwareWidget {
             this.$similarNotesWrapper.show();
         }
 
-        this.$similarNotesExpanderText.text(`${similarNotes.length} similar note${similarNotes.length === 1 ? '': "s"}`);
+        this.$expanderText.text(`${similarNotes.length} similar note${similarNotes.length === 1 ? '': "s"}`);
 
         const noteIds = similarNotes.flatMap(note => note.notePath);
 

src/public/app/widgets/type_widgets/search.js

@@ -1,15 +1,90 @@
 import TypeWidget from "./type_widget.js";
+import noteAutocompleteService from "../../services/note_autocomplete.js";
 
 const TPL = `
-<div class="note-detail-search note-detail-printable" style="padding: 20px;">
+<div class="note-detail-search note-detail-printable">
-    <div style="display: flex; align-items: center; margin-right: 20px; margin-top: 15px;">
+    <style>
-        <strong>Search string: &nbsp; &nbsp;</strong>
+    .note-detail-search {
-        <textarea rows="4" style="width: auto !important; flex-grow: 4" class="search-string form-control"></textarea>
+        padding: 7px;
+    }
+    
+    .search-setting-table {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 10px;
+    }
+    
+    .search-setting-expander {
+        display: flex; 
+        flex-direction: row; 
+        color: var(--muted-text-color); 
+        font-size: 90%;
+        margin: 3px 0 3px 0; 
+    }
+    
+    .attribute-list hr {
+        height: 1px;
+        border-color: var(--main-border-color);
+        position: relative;
+        top: 4px;
+        margin-top: 5px;
+        margin-bottom: 0;
+    }
+    
+    .search-setting-expander-text {
+        padding-left: 20px;
+        padding-right: 20px;
+        white-space: nowrap;
+    }
+    
+    .search-setting-expander:hover {
+        cursor: pointer;
+    }
+    
+    .search-setting-expander:hover hr {
+        border-color: var(--main-text-color);
+    }
+    
+    .search-setting-expander:hover .search-setting-expander-text {
+        color: var(--main-text-color);
+    }
+    </style>
+
+    <div class="area-expander">
+        <hr class="w-100">
+        
+        <div class="area-expander-text">Search settings</div>
+        
+        <hr class="w-100">
     </div>
 
-    <br />
+    <div class="search-settings">
+        <table class="search-setting-table">
+            <tr>
+                <td>Search string:</td>
+                <td colspan="3">
+                    <input type="text" class="form-control">
+                </td>
+            </tr>
+            <tr>
+                <td>Limit search to subtree:</td>
+                <td>
+                    <div class="input-group">
+                        <input class="limit-search-to-subtree form-control" placeholder="search for note by its name">
+                    </div>
+                </td>
+                <td colspan="2" style="padding-top: 9px;">
+                    <label title="By choosing to take into acount also note content, search can be slightly slower">
+                        <input class="search-within-note-content" value="1" type="checkbox" checked>
     
-    <div class="note-detail-search-help"></div>
+                        Search also within note content
+                    </label>
+                </td>
+            </tr>
+        </table>
+
+        <hr class="w-100 search-setting-empty-expander" style="margin-bottom: 10px;">
+    </div>
 </div>`;
 
 export default class SearchTypeWidget extends TypeWidget {
@@ -19,7 +94,22 @@ export default class SearchTypeWidget extends TypeWidget {
         this.$widget = $(TPL);
         this.$searchString = this.$widget.find(".search-string");
         this.$component = this.$widget.find('.note-detail-search');
-        this.$help = this.$widget.find(".note-detail-search-help");
+
+        this.$settingsArea = this.$widget.find('.search-settings');
+
+        this.$limitSearchToSubtree = this.$widget.find('.limit-search-to-subtree');
+        noteAutocompleteService.initNoteAutocomplete(this.$limitSearchToSubtree);
+
+        this.$settingExpander = this.$widget.find('.area-expander');
+        this.$settingExpander.on('click', async () => {
+            const collapse = this.$settingsArea.is(":visible");
+
+            if (collapse) {
+                this.$settingsArea.slideUp(200);
+            } else {
+                this.$settingsArea.slideDown(200);
+            }
+        });
     }
 
     async doRefresh(note) {

src/public/stylesheets/style.css

@@ -856,3 +856,36 @@ ul.fancytree-container li {
 .ck.ck-balloon-panel {
     z-index: 10001;
 }
+
+.area-expander {
+    display: flex;
+    flex-direction: row;
+    color: var(--muted-text-color);
+    font-size: 90%;
+}
+
+.area-expander hr {
+    height: 1px;
+    border-color: var(--main-border-color);
+    position: relative;
+    top: 4px;
+    margin-top: 5px;
+}
+
+.area-expander-text {
+    padding-left: 20px;
+    padding-right: 20px;
+    white-space: nowrap;
+}
+
+.area-expander:hover {
+    cursor: pointer;
+}
+
+.area-expander:hover hr {
+    border-color: var(--main-text-color);
+}
+
+.area-expander:hover .area-expander-text {
+    color: var(--main-text-color);
+}