search definition more fixed layout

This commit is contained in:
zadam 2021-01-26 14:10:34 +01:00
parent 87925f72a3
commit 80354d09fb
14 changed files with 52 additions and 56 deletions

View File

@ -7,16 +7,13 @@ const TPL = `
Delete label: Delete label:
</td> </td>
<td> <td>
<div style="display: flex; align-items: center">
<div style="margin-right: 15px;" class="text-nowrap">Label name:</div>
<input type="text" <input type="text"
class="form-control label-name" class="form-control label-name"
pattern="[\\p{L}\\p{N}_:]+" pattern="[\\p{L}\\p{N}_:]+"
title="Alphanumeric characters, underscore and colon are allowed characters."/> title="Alphanumeric characters, underscore and colon are allowed characters."
</div> placeholder="label name"/>
</td> </td>
<td> <td class="button-column">
<span class="bx bx-x icon-action action-conf-del"></span> <span class="bx bx-x icon-action action-conf-del"></span>
</td> </td>
</tr>`; </tr>`;

View File

@ -7,7 +7,7 @@ const TPL = `
Delete matched note Delete matched note
</td> </td>
<td> <td class="button-column">
<span class="bx bx-x icon-action action-conf-del"></span> <span class="bx bx-x icon-action action-conf-del"></span>
</td> </td>
</tr>`; </tr>`;

View File

@ -8,15 +8,14 @@ const TPL = `
</td> </td>
<td> <td>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<div style="margin-right: 15px;" class="text-nowrap">Relation name:</div>
<input type="text" <input type="text"
class="form-control relation-name" class="form-control relation-name"
pattern="[\\p{L}\\p{N}_:]+" pattern="[\\p{L}\\p{N}_:]+"
placeholder="relation name"
title="Alphanumeric characters, underscore and colon are allowed characters."/> title="Alphanumeric characters, underscore and colon are allowed characters."/>
</div> </div>
</td> </td>
<td> <td class="button-column">
<span class="bx bx-x icon-action action-conf-del"></span> <span class="bx bx-x icon-action action-conf-del"></span>
</td> </td>
</tr>`; </tr>`;

View File

@ -7,15 +7,11 @@ const TPL = `
Execute script: Execute script:
</td> </td>
<td> <td>
<div style="display: flex; align-items: center">
<div style="margin-right: 15px;" class="text-nowrap">Script: </div>
<input type="text" <input type="text"
class="form-control script" class="form-control script"
placeholder="note.title = note.title + '- suffix';"/> placeholder="note.title = note.title + '- suffix';"/>
</div>
</td> </td>
<td> <td class="button-column">
<span class="bx bx-x icon-action action-conf-del"></span> <span class="bx bx-x icon-action action-conf-del"></span>
</td> </td>
</tr>`; </tr>`;

View File

@ -3,13 +3,10 @@ import AbstractSearchAction from "./abstract_search_action.js";
const TPL = ` const TPL = `
<tr> <tr>
<td> <td colspan="2">
Rename label:
</td>
<td>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<div style="margin-right: 15px;">From:</div> <div style="margin-right: 15px;">Rename label from:</div>
<input type="text" <input type="text"
class="form-control old-label-name" class="form-control old-label-name"
@ -27,7 +24,7 @@ const TPL = `
</div> </div>
</div> </div>
</td> </td>
<td> <td class="button-column">
<span class="bx bx-x icon-action action-conf-del"></span> <span class="bx bx-x icon-action action-conf-del"></span>
</td> </td>
</tr>`; </tr>`;

View File

@ -3,13 +3,10 @@ import AbstractSearchAction from "./abstract_search_action.js";
const TPL = ` const TPL = `
<tr> <tr>
<td> <td colspan="2">
Rename relation:
</td>
<td>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<div style="margin-right: 15px;">From:</div> <div style="margin-right: 15px;">Rename relation from:</div>
<input type="text" <input type="text"
class="form-control old-relation-name" class="form-control old-relation-name"
@ -27,7 +24,7 @@ const TPL = `
</div> </div>
</div> </div>
</td> </td>
<td> <td class="button-column">
<span class="bx bx-x icon-action action-conf-del"></span> <span class="bx bx-x icon-action action-conf-del"></span>
</td> </td>
</tr>`; </tr>`;

View File

@ -3,10 +3,7 @@ import AbstractSearchAction from "./abstract_search_action.js";
const TPL = ` const TPL = `
<tr> <tr>
<td> <td colspan="2">
Set label value:
</td>
<td>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<div style="margin-right: 15px;" class="text-nowrap">Set label</div> <div style="margin-right: 15px;" class="text-nowrap">Set label</div>
@ -23,7 +20,7 @@ const TPL = `
</div> </div>
</div> </div>
</td> </td>
<td> <td class="button-column">
<span class="bx bx-x icon-action action-conf-del"></span> <span class="bx bx-x icon-action action-conf-del"></span>
</td> </td>
</tr>`; </tr>`;

View File

@ -4,10 +4,7 @@ import noteAutocompleteService from "../../services/note_autocomplete.js";
const TPL = ` const TPL = `
<tr> <tr>
<td> <td colspan="2">
Set relation target note:
</td>
<td>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<div style="margin-right: 15px;" class="text-nowrap">Set relation</div> <div style="margin-right: 15px;" class="text-nowrap">Set relation</div>
@ -23,7 +20,7 @@ const TPL = `
<input type="text" class="form-control target-note"/> <input type="text" class="form-control target-note"/>
</div> </div>
</td> </td>
<td> <td class="button-column">
<span class="bx bx-x icon-action action-conf-del"></span> <span class="bx bx-x icon-action action-conf-del"></span>
</td> </td>
</tr>`; </tr>`;

View File

@ -30,6 +30,23 @@ const TPL = `
border-spacing: 10px; border-spacing: 10px;
} }
.search-setting-table .button-column {
/* minimal width so that table remains static sized and most space remains for middle column with settings */
width: 50px;
white-space: nowrap;
text-align: right;
}
.search-setting-table .title-column {
/* minimal width so that table remains static sized and most space remains for middle column with settings */
width: 50px;
white-space: nowrap;
}
.search-setting-table .button-column .dropdown-menu {
white-space: normal;
}
.attribute-list hr { .attribute-list hr {
height: 1px; height: 1px;
border-color: var(--main-border-color); border-color: var(--main-border-color);
@ -47,7 +64,7 @@ const TPL = `
<div class="search-settings"> <div class="search-settings">
<table class="search-setting-table"> <table class="search-setting-table">
<tr> <tr>
<td>Add search option:</td> <td class="title-column">Add search option:</td>
<td colspan="2" class="add-search-option"> <td colspan="2" class="add-search-option">
<button type="button" class="btn btn-sm" data-search-option-add="searchString"> <button type="button" class="btn btn-sm" data-search-option-add="searchString">
<span class="bx bx-text"></span> <span class="bx bx-text"></span>

View File

@ -3,14 +3,15 @@ import noteAutocompleteService from "../../services/note_autocomplete.js";
const TPL = ` const TPL = `
<tr> <tr>
<td title="Matched notes must be within subtree of given note."> <td class="title-column" title="Matched notes must be within subtree of given note.">
Ancestor: </td> Ancestor:
</td>
<td> <td>
<div class="input-group"> <div class="input-group">
<input class="ancestor form-control" placeholder="search for note by its name"> <input class="ancestor form-control" placeholder="search for note by its name">
</div> </div>
</td> </td>
<td> <td class="button-column">
<span class="bx bx-x icon-action search-option-del"></span> <span class="bx bx-x icon-action search-option-del"></span>
</td> </td>
</tr>`; </tr>`;

View File

@ -7,7 +7,7 @@ const TPL = `
Fast search Fast search
</td> </td>
<td> <td class="button-column">
<span class="bx bx-x icon-action search-option-del"></span> <span class="bx bx-x icon-action search-option-del"></span>
</td> </td>
</tr>`; </tr>`;

View File

@ -7,7 +7,7 @@ const TPL = `
Include archived notes Include archived notes
</td> </td>
<td> <td class="button-column">
<span class="bx bx-x icon-action search-option-del"></span> <span class="bx bx-x icon-action search-option-del"></span>
</td> </td>
</tr>`; </tr>`;

View File

@ -2,7 +2,7 @@ import AbstractSearchOption from "./abstract_search_option.js";
const TPL = ` const TPL = `
<tr data-search-option-conf="orderBy"> <tr data-search-option-conf="orderBy">
<td> <td class="title-column">
<span class="bx bx-arrow-from-top"></span> <span class="bx bx-arrow-from-top"></span>
Order by Order by
@ -23,7 +23,7 @@ const TPL = `
<option value="desc">Descending</option> <option value="desc">Descending</option>
</select> </select>
</td> </td>
<td> <td class="button-column">
<span class="bx bx-x icon-action search-option-del"></span> <span class="bx bx-x icon-action search-option-del"></span>
</td> </td>
</tr>`; </tr>`;

View File

@ -5,15 +5,13 @@ import server from "../../services/server.js";
const TPL = ` const TPL = `
<tr> <tr>
<td>Search string:</td> <td class="title-column">Search string:</td>
<td> <td>
<input type="text" class="form-control search-string"> <input type="text" class="form-control search-string">
</td> </td>
<td> <td class="button-column">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
?
</button>
<div class="dropdown-menu dropdown-menu-right p-4" style="width: 500px;"> <div class="dropdown-menu dropdown-menu-right p-4" style="width: 500px;">
<strong>Search tips</strong> - also see <button class="btn btn-sm" type="button" data-help-page="Search">complete help on search</button> <strong>Search tips</strong> - also see <button class="btn btn-sm" type="button" data-help-page="Search">complete help on search</button>
<p> <p>