mirror of
https://github.com/zadam/trilium.git
synced 2025-06-06 18:08:33 +02:00
new saved search UI wip
This commit is contained in:
zadam
parent
de30095737
commit
6710476768
@ -30,7 +30,7 @@ const TPL = `
|
|||||||
border-color: red !important;
|
border-color: red !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attr-expander {
|
.area-expander {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
color: var(--muted-text-color);
|
color: var(--muted-text-color);
|
||||||
@ -47,29 +47,29 @@ const TPL = `
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attr-expander-text {
|
.area-expander-text {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attr-expander:hover {
|
.area-expander:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attr-expander:hover hr {
|
.area-expander:hover hr {
|
||||||
border-color: var(--main-text-color);
|
border-color: var(--main-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.attr-expander:hover .attr-expander-text {
|
.area-expander:hover .area-expander-text {
|
||||||
color: var(--main-text-color);
|
color: var(--main-text-color);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="attr-expander attr-promoted-expander">
|
<div class="area-expander attr-promoted-expander">
|
||||||
<hr class="w-100">
|
<hr class="w-100">
|
||||||
|
|
||||||
<div class="attr-expander-text">Promoted attributes</div>
|
<div class="area-expander-text">Promoted attributes</div>
|
||||||
|
|
||||||
<hr class="w-100">
|
<hr class="w-100">
|
||||||
</div>
|
</div>
|
||||||
@ -77,10 +77,10 @@ const TPL = `
|
|||||||
<div class="all-attr-wrapper">
|
<div class="all-attr-wrapper">
|
||||||
<div class="promoted-attributes-placeholder"></div>
|
<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">
|
<hr class="w-100">
|
||||||
|
|
||||||
<div class="attr-expander-text"></div>
|
<div class="area-expander-text"></div>
|
||||||
|
|
||||||
<hr class="w-100">
|
<hr class="w-100">
|
||||||
</div>
|
</div>
|
||||||
@ -90,10 +90,10 @@ const TPL = `
|
|||||||
|
|
||||||
<hr class="w-100 attr-inherited-empty-expander" style="margin-bottom: 10px;">
|
<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">
|
<hr class="w-100">
|
||||||
|
|
||||||
<div class="attr-expander-text"></div>
|
<div class="area-expander-text"></div>
|
||||||
|
|
||||||
<hr class="w-100">
|
<hr class="w-100">
|
||||||
</div>
|
</div>
|
||||||
@ -141,7 +141,7 @@ export default class AttributeListWidget extends TabAwareWidget {
|
|||||||
this.triggerEvent(`attributeListCollapsedStateChanged`, {collapse});
|
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');
|
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');
|
this.$inheritedEmptyExpander = this.$widget.find('.attr-inherited-empty-expander');
|
||||||
|
|
||||||
|
|||||||
@ -24,46 +24,12 @@ const TPL = `
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
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>
|
</style>
|
||||||
|
|
||||||
<div class="similar-notes-expander">
|
<div class="area-expander">
|
||||||
<hr class="w-100">
|
<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>
|
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">
|
<hr class="w-100">
|
||||||
@ -83,9 +49,9 @@ export default class SimilarNotesWidget extends TabAwareWidget {
|
|||||||
this.overflowing();
|
this.overflowing();
|
||||||
|
|
||||||
this.$similarNotesWrapper = this.$widget.find(".similar-notes-wrapper");
|
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 () => {
|
this.$expander.on('click', async () => {
|
||||||
const collapse = this.$similarNotesWrapper.is(":visible");
|
const collapse = this.$similarNotesWrapper.is(":visible");
|
||||||
|
|
||||||
@ -132,7 +98,7 @@ export default class SimilarNotesWidget extends TabAwareWidget {
|
|||||||
this.$similarNotesWrapper.show();
|
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);
|
const noteIds = similarNotes.flatMap(note => note.notePath);
|
||||||
|
|
||||||
|
|||||||
@ -1,15 +1,90 @@
|
|||||||
import TypeWidget from "./type_widget.js";
|
import TypeWidget from "./type_widget.js";
|
||||||
|
import noteAutocompleteService from "../../services/note_autocomplete.js";
|
||||||
|
|
||||||
const TPL = `
|
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: </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>
|
</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>`;
|
</div>`;
|
||||||
|
|
||||||
export default class SearchTypeWidget extends TypeWidget {
|
export default class SearchTypeWidget extends TypeWidget {
|
||||||
@ -19,7 +94,22 @@ export default class SearchTypeWidget extends TypeWidget {
|
|||||||
this.$widget = $(TPL);
|
this.$widget = $(TPL);
|
||||||
this.$searchString = this.$widget.find(".search-string");
|
this.$searchString = this.$widget.find(".search-string");
|
||||||
this.$component = this.$widget.find('.note-detail-search');
|
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) {
|
async doRefresh(note) {
|
||||||
|
|||||||
@ -856,3 +856,36 @@ ul.fancytree-container li {
|
|||||||
.ck.ck-balloon-panel {
|
.ck.ck-balloon-panel {
|
||||||
z-index: 10001;
|
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);
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user