mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
short search help in the tooltip
This commit is contained in:
parent
c6806256fd
commit
26621c0318
@ -4,8 +4,11 @@ import searchNotesService from "./search_notes.js";
|
|||||||
const $searchString = $("#search-string");
|
const $searchString = $("#search-string");
|
||||||
const $component = $('#note-detail-search');
|
const $component = $('#note-detail-search');
|
||||||
const $refreshButton = $('#note-detail-search-refresh-results-button');
|
const $refreshButton = $('#note-detail-search-refresh-results-button');
|
||||||
|
const $help = $("#note-detail-search-help");
|
||||||
|
|
||||||
function show() {
|
function show() {
|
||||||
|
$help.html(searchNotesService.getHelpText());
|
||||||
|
|
||||||
$component.show();
|
$component.show();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
@ -3,7 +3,6 @@ import treeCache from "./tree_cache.js";
|
|||||||
import server from './server.js';
|
import server from './server.js';
|
||||||
import infoService from "./info.js";
|
import infoService from "./info.js";
|
||||||
|
|
||||||
const $tree = $("#tree");
|
|
||||||
const $searchInput = $("input[name='search-text']");
|
const $searchInput = $("input[name='search-text']");
|
||||||
const $resetSearchButton = $("#reset-search-button");
|
const $resetSearchButton = $("#reset-search-button");
|
||||||
const $doSearchButton = $("#do-search-button");
|
const $doSearchButton = $("#do-search-button");
|
||||||
@ -13,20 +12,36 @@ const $searchResults = $("#search-results");
|
|||||||
const $searchResultsInner = $("#search-results-inner");
|
const $searchResultsInner = $("#search-results-inner");
|
||||||
const $closeSearchButton = $("#close-search-button");
|
const $closeSearchButton = $("#close-search-button");
|
||||||
|
|
||||||
|
const helpText = `
|
||||||
|
<strong>Search tips</strong> - also see <button class="btn btn-sm" type="button" data-help-page="Search">complete help on search</button>
|
||||||
|
<p>
|
||||||
|
<ul>
|
||||||
|
<li>Just enter any text for full text search</li>
|
||||||
|
<li><code>@abc</code> - returns notes with label abc</li>
|
||||||
|
<li><code>@year=2019</code> - matches notes with label <code>year</code> having value <code>2019</code></li>
|
||||||
|
<li><code>@rock @pop</code> - matches notes which have both <code>rock</code> and <code>pop</code> labels</li>
|
||||||
|
<li><code>@rock or @pop</code> - only one of the labels must be present</li>
|
||||||
|
<li><code>@year<=2000</code> - numerical comparison (also >, >=, <).</li>
|
||||||
|
<li><code>@dateCreated>=MONTH-1</code> - notes created in the last month</li>
|
||||||
|
<li><code>=handler</code> - will execute script defined in <code>handler</code> relation to get results</li>
|
||||||
|
</ul>
|
||||||
|
</p>`;
|
||||||
|
|
||||||
function showSearch() {
|
function showSearch() {
|
||||||
$searchBox.slideDown();
|
$searchBox.slideDown();
|
||||||
$searchInput.focus();
|
|
||||||
|
|
||||||
$searchBox.tooltip({
|
$searchBox.tooltip({
|
||||||
trigger: 'focus',
|
trigger: 'focus',
|
||||||
html: true,
|
html: true,
|
||||||
title: 'Hello! <a href="http://google.com" class="external">google</a>',
|
title: helpText,
|
||||||
placement: 'right',
|
placement: 'right',
|
||||||
delay: {
|
delay: {
|
||||||
show: 500, // necessary because sliding out may cause wrong position
|
show: 500, // necessary because sliding out may cause wrong position
|
||||||
hide: 500
|
hide: 200
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$searchInput.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideSearch() {
|
function hideSearch() {
|
||||||
@ -49,10 +64,6 @@ function resetSearch() {
|
|||||||
$searchInput.val("");
|
$searchInput.val("");
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTree() {
|
|
||||||
return $tree.fancytree('getTree');
|
|
||||||
}
|
|
||||||
|
|
||||||
async function doSearch(searchText) {
|
async function doSearch(searchText) {
|
||||||
if (searchText) {
|
if (searchText) {
|
||||||
$searchInput.val(searchText);
|
$searchInput.val(searchText);
|
||||||
@ -61,6 +72,14 @@ async function doSearch(searchText) {
|
|||||||
searchText = $searchInput.val();
|
searchText = $searchInput.val();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (searchText.trim().length === 0) {
|
||||||
|
infoService.showMessage("Please enter search criteria first.");
|
||||||
|
|
||||||
|
$searchInput.focus();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const results = await server.get('search/' + encodeURIComponent(searchText));
|
const results = await server.get('search/' + encodeURIComponent(searchText));
|
||||||
|
|
||||||
$searchResultsInner.empty();
|
$searchResultsInner.empty();
|
||||||
@ -151,5 +170,6 @@ export default {
|
|||||||
showSearch,
|
showSearch,
|
||||||
refreshSearch,
|
refreshSearch,
|
||||||
doSearch,
|
doSearch,
|
||||||
init
|
init,
|
||||||
|
getHelpText: () => helpText
|
||||||
};
|
};
|
@ -28,6 +28,7 @@
|
|||||||
--active-item-background-color: #ccc;
|
--active-item-background-color: #ccc;
|
||||||
--menu-text-color: black;
|
--menu-text-color: black;
|
||||||
--menu-background-color: white;
|
--menu-background-color: white;
|
||||||
|
--tooltip-background-color: #f8f8f8;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.theme-black {
|
body.theme-black {
|
||||||
@ -51,6 +52,7 @@ body.theme-black {
|
|||||||
--active-item-background-color: #ccc;
|
--active-item-background-color: #ccc;
|
||||||
--menu-text-color: white;
|
--menu-text-color: white;
|
||||||
--menu-background-color: #222;
|
--menu-background-color: #222;
|
||||||
|
--tooltip-background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.theme-black a, body.theme-black a:visited {
|
body.theme-black a, body.theme-black a:visited {
|
||||||
@ -82,6 +84,7 @@ body.theme-dark {
|
|||||||
--active-item-background-color: #ccc;
|
--active-item-background-color: #ccc;
|
||||||
--menu-text-color: white;
|
--menu-text-color: white;
|
||||||
--menu-background-color: #222;
|
--menu-background-color: #222;
|
||||||
|
--tooltip-background-color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.theme-dark a, body.theme-dark a:visited {
|
body.theme-dark a, body.theme-dark a:visited {
|
||||||
@ -684,22 +687,20 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* this should help with tooltip flickering */
|
.tooltip {
|
||||||
/*.tooltip {*/
|
font-size: var(--main-font-size) !important;
|
||||||
/* pointer-events: none;*/
|
}
|
||||||
/*}*/
|
|
||||||
|
|
||||||
.tooltip-inner {
|
.tooltip-inner {
|
||||||
background-color: var(--accented-background-color) !important;
|
background-color: var(--tooltip-background-color) !important;
|
||||||
max-width: 400px;
|
max-width: 500px;
|
||||||
/* height needs to stay small because tooltip has problem when it can't fit to either top or bottom of the cursor */
|
/* height needs to stay small because tooltip has problem when it can't fit to either top or bottom of the cursor */
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: var(--main-font-size);
|
|
||||||
color: var(--main-text-color);
|
|
||||||
border: 1px solid var(--main-border-color);
|
border: 1px solid var(--main-border-color);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
color: var(--main-text-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-inner img {
|
.tooltip-inner img {
|
||||||
|
@ -11,32 +11,5 @@
|
|||||||
|
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<h4>Help</h4>
|
<div id="note-detail-search-help"></div>
|
||||||
<p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<code>@abc</code> - matches notes with label abc</li>
|
|
||||||
<li>
|
|
||||||
<code>@!abc</code> - matches notes without abc label (maybe not the best syntax)</li>
|
|
||||||
<li>
|
|
||||||
<code>@abc=true</code> - matches notes with label abc having value true</li>
|
|
||||||
<li><code>@abc!=true</code></li>
|
|
||||||
<li>
|
|
||||||
<code>@"weird label"="weird value"</code> - works also with whitespace inside names values</li>
|
|
||||||
<li>
|
|
||||||
<code>@abc and @def</code> - matches notes with both abc and def</li>
|
|
||||||
<li>
|
|
||||||
<code>@abc @def</code> - AND relation is implicit when specifying multiple labels</li>
|
|
||||||
<li>
|
|
||||||
<code>@abc or @def</code> - OR relation</li>
|
|
||||||
<li>
|
|
||||||
<code>@abc<=5</code> - numerical comparison (also >, >=, <).</li>
|
|
||||||
<li>
|
|
||||||
<code>some search string @abc @def</code> - combination of fulltext and label search - both of them need to match (OR not supported)</li>
|
|
||||||
<li>
|
|
||||||
<code>@abc @def some search string</code> - same combination</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<button class="btn btn-sm" type="button" data-help-page="Search">Complete help on search</button>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
Loading…
x
Reference in New Issue
Block a user