gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 09:58:32 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

new saved search UI wip

Browse Source
This commit is contained in:
zadam 2020-09-25 23:52:24 +02:00
parent de30095737
commit 6710476768
4 changed files with 148 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/public/app/widgets/attribute_list.js
View File

@ -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');

44
src/public/app/widgets/similar_notes.js
View File

@ -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);

104
src/public/app/widgets/type_widgets/search.js
View File

@ -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 style="display: flex; align-items: center; margin-right: 20px; margin-top: 15px;">
<strong>Search string: &nbsp; &nbsp;</strong>
<textarea rows="4" style="width: auto !important; flex-grow: 4" class="search-string form-control"></textarea>
<div class="note-detail-search note-detail-printable">
<style>
.note-detail-search {
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>
Search also within note content
</label>
</td>
</tr>
</table>
<div class="note-detail-search-help"></div>
<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) {

33
src/public/stylesheets/style.css
View File

@ -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);
}