mirror of
https://github.com/zadam/trilium.git
synced 2025-06-06 18:08:33 +02:00
full screen help dialog
This commit is contained in:
zadam
parent
c849d719e9
commit
a1b610fc50
@ -668,12 +668,6 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* if modal height overflows, then only modal body scrolls */
|
|
||||||
.modal-body {
|
|
||||||
max-height: calc(100vh - 200px);
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* this should help with tooltip flickering */
|
/* this should help with tooltip flickering */
|
||||||
.tooltip {
|
.tooltip {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|||||||
@ -1,149 +1,155 @@
|
|||||||
<div id="attributes-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
|
<div id="attributes-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
|
||||||
<div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
|
<div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h5 class="modal-title mr-auto">Note attributes</h5>
|
<h5 class="modal-title mr-auto">Note attributes</h5>
|
||||||
|
|
||||||
<button class="help-button" type="button" data-help-page="Attributes" title="Help on Attributes">?</button>
|
<button class="help-button" type="button" data-help-page="Attributes" title="Help on Attributes">?
|
||||||
|
</button>
|
||||||
|
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0;">
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0;">
|
||||||
<span aria-hidden="true">×</span>
|
<span aria-hidden="true">×</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<form data-bind="submit: save">
|
<div class="modal-body">
|
||||||
<div class="modal-body">
|
<form data-bind="submit: save">
|
||||||
<div style="height: 97%; overflow: auto">
|
<input type="submit" style="display: none"/>
|
||||||
<table id="owned-attributes-table" class="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Type</th>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Value</th>
|
|
||||||
<th>Inheritable</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody data-bind="foreach: ownedAttributes">
|
|
||||||
<tr data-bind="if: !isDeleted">
|
|
||||||
<td>
|
|
||||||
<input type="hidden" name="position" data-bind="value: position"/>
|
|
||||||
|
|
||||||
<select class="form-control attribute-type-select" style="width: auto;"
|
<table id="owned-attributes-table" class="table">
|
||||||
data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
|
<thead>
|
||||||
</td>
|
<tr>
|
||||||
<td>
|
<th>Type</th>
|
||||||
<!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
|
<th>Name</th>
|
||||||
<input type="text" class="attribute-name form-control"
|
<th>Value</th>
|
||||||
data-bind="value: name, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }"/>
|
<th>Inheritable</th>
|
||||||
<div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody data-bind="foreach: ownedAttributes">
|
||||||
|
<tr data-bind="if: !isDeleted">
|
||||||
|
<td>
|
||||||
|
<input type="hidden" name="position" data-bind="value: position"/>
|
||||||
|
|
||||||
|
<select class="form-control attribute-type-select" style="width: auto;"
|
||||||
|
data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
|
||||||
|
<input type="text" class="attribute-name form-control"
|
||||||
|
data-bind="value: name, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }"/>
|
||||||
|
<div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name
|
||||||
|
can't be empty.
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input type="text" class="label-value form-control"
|
||||||
|
data-bind="visible: type == 'label', value: labelValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }"
|
||||||
|
style="width: 300px"/>
|
||||||
|
|
||||||
|
<div class="relation-value input-group" data-bind="visible: type == 'relation'"
|
||||||
|
style="width: 300px;">
|
||||||
|
<input class="form-control relation-target-note-id"
|
||||||
|
placeholder="search for note by its name"
|
||||||
|
data-bind="noteAutocomplete, value: relationValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }">
|
||||||
|
|
||||||
|
<div style="color: red" data-bind="if: $parent.isEmptyRelationTarget($index())">Relation
|
||||||
|
target note
|
||||||
can't be empty.
|
can't be empty.
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
<td>
|
|
||||||
<input type="text" class="label-value form-control"
|
|
||||||
data-bind="visible: type == 'label', value: labelValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }"
|
|
||||||
style="width: 300px"/>
|
|
||||||
|
|
||||||
<div class="relation-value input-group" data-bind="visible: type == 'relation'"
|
<div data-bind="visible: type == 'label-definition'">
|
||||||
style="width: 300px;">
|
<select data-bind="options: $parent.availableLabelTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.labelType"></select>
|
||||||
<input class="form-control relation-target-note-id"
|
|
||||||
placeholder="search for note by its name"
|
|
||||||
data-bind="noteAutocomplete, value: relationValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }">
|
|
||||||
|
|
||||||
<div style="color: red" data-bind="if: $parent.isEmptyRelationTarget($index())">Relation target note
|
<select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.multiplicityType"></select>
|
||||||
can't be empty.
|
|
||||||
</div>
|
<label>
|
||||||
|
<input type="checkbox" value="true"
|
||||||
|
data-bind="checked: labelDefinition.isPromoted"/>
|
||||||
|
Promoted
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div data-bind="visible: labelDefinition.labelType === 'number'"
|
||||||
|
title="Precision of floating point numbers - 0 means effectively integer, 2 allows entering e.g. 1.23">
|
||||||
|
Number precision: <input type="number" min="0" max="9"
|
||||||
|
data-bind="value: labelDefinition.numberPrecision"
|
||||||
|
style="width: 50px;"/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div data-bind="visible: type == 'label-definition'">
|
<div data-bind="visible: type == 'relation-definition'">
|
||||||
<select data-bind="options: $parent.availableLabelTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.labelType"></select>
|
<select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: relationDefinition.multiplicityType"></select>
|
||||||
|
|
||||||
<select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.multiplicityType"></select>
|
<label>
|
||||||
|
<input type="checkbox" value="true"
|
||||||
|
data-bind="checked: relationDefinition.isPromoted"/>
|
||||||
|
Promoted
|
||||||
|
</label>
|
||||||
|
<br/>
|
||||||
|
<label>
|
||||||
|
Inverse relation:
|
||||||
|
|
||||||
<label>
|
<input type="text" value="true" class="attribute-name"
|
||||||
<input type="checkbox" value="true"
|
data-bind="value: relationDefinition.inverseRelation"/>
|
||||||
data-bind="checked: labelDefinition.isPromoted"/>
|
</label>
|
||||||
Promoted
|
</div>
|
||||||
</label>
|
</td>
|
||||||
|
<td title="Inheritable relations are automatically inherited to the child notes">
|
||||||
|
<input type="checkbox" value="1" data-bind="checked: isInheritable"/>
|
||||||
|
|
||||||
<div data-bind="visible: labelDefinition.labelType === 'number'"
|
|
||||||
title="Precision of floating point numbers - 0 means effectively integer, 2 allows entering e.g. 1.23">
|
|
||||||
Number precision: <input type="number" min="0" max="9" data-bind="value: labelDefinition.numberPrecision" style="width: 50px;"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div data-bind="visible: type == 'relation-definition'">
|
<span title="Delete" style="padding: 13px; cursor: pointer;" class="jam jam-trash"
|
||||||
<select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: relationDefinition.multiplicityType"></select>
|
data-bind="click: $parent.deleteAttribute"></span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</form>
|
||||||
|
|
||||||
<label>
|
<div data-bind="if: inheritedAttributes().length > 0">
|
||||||
<input type="checkbox" value="true"
|
<h4>Inherited attributes</h4>
|
||||||
data-bind="checked: relationDefinition.isPromoted"/>
|
|
||||||
Promoted
|
|
||||||
</label>
|
|
||||||
<br/>
|
|
||||||
<label>
|
|
||||||
Inverse relation:
|
|
||||||
|
|
||||||
<input type="text" value="true" class="attribute-name" data-bind="value: relationDefinition.inverseRelation"/>
|
<table class="table">
|
||||||
</label>
|
<thead>
|
||||||
</div>
|
<tr>
|
||||||
</td>
|
<th>Type</th>
|
||||||
<td title="Inheritable relations are automatically inherited to the child notes">
|
<th>Name</th>
|
||||||
<input type="checkbox" value="1" data-bind="checked: isInheritable"/>
|
<th>Value</th>
|
||||||
|
<th>Owning note</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
<span title="Delete" style="padding: 13px; cursor: pointer;" class="jam jam-trash"
|
<tbody data-bind="foreach: inheritedAttributes">
|
||||||
data-bind="click: $parent.deleteAttribute"></span>
|
<tr>
|
||||||
</td>
|
<td data-bind="text: type"></td>
|
||||||
</tr>
|
<td data-bind="text: name"></td>
|
||||||
</tbody>
|
<td>
|
||||||
</table>
|
<span data-bind="if: type == 'label'">
|
||||||
|
<span data-bind="text: value"></span>
|
||||||
<div data-bind="if: inheritedAttributes().length > 0">
|
</span>
|
||||||
<h4>Inherited attributes</h4>
|
<span data-bind="if: type == 'relation'">
|
||||||
|
<span data-bind="noteLink: value"></span>
|
||||||
<table class="table">
|
</span>
|
||||||
<thead>
|
<span data-bind="if: type == 'label-definition'">
|
||||||
<tr>
|
<span data-bind="text: value.labelType"></span>
|
||||||
<th>Type</th>
|
<span data-bind="text: value.multiplicityType"></span>
|
||||||
<th>Name</th>
|
promoted: <span data-bind="text: value.isPromoted"></span>
|
||||||
<th>Value</th>
|
</span>
|
||||||
<th>Owning note</th>
|
<span data-bind="if: type == 'relation-definition'">
|
||||||
</tr>
|
<span data-bind="text: value.multiplicityType"></span>
|
||||||
</thead>
|
promoted: <span data-bind="text: value.isPromoted"></span>
|
||||||
<tbody data-bind="foreach: inheritedAttributes">
|
</span>
|
||||||
<tr>
|
</td>
|
||||||
<td data-bind="text: type"></td>
|
<td data-bind="noteLink: noteId"></td>
|
||||||
<td data-bind="text: name"></td>
|
</tr>
|
||||||
<td>
|
</tbody>
|
||||||
<span data-bind="if: type == 'label'">
|
</table>
|
||||||
<span data-bind="text: value"></span>
|
|
||||||
</span>
|
|
||||||
<span data-bind="if: type == 'relation'">
|
|
||||||
<span data-bind="noteLink: value"></span>
|
|
||||||
</span>
|
|
||||||
<span data-bind="if: type == 'label-definition'">
|
|
||||||
<span data-bind="text: value.labelType"></span>
|
|
||||||
<span data-bind="text: value.multiplicityType"></span>
|
|
||||||
promoted: <span data-bind="text: value.isPromoted"></span>
|
|
||||||
</span>
|
|
||||||
<span data-bind="if: type == 'relation-definition'">
|
|
||||||
<span data-bind="text: value.multiplicityType"></span>
|
|
||||||
promoted: <span data-bind="text: value.isPromoted"></span>
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td data-bind="noteLink: noteId"></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
</div>
|
||||||
<button class="btn btn-primary btn-large" style="width: 200px;" id="save-attributes-button" type="submit">
|
<div class="modal-footer">
|
||||||
Save changes <kbd>enter</kbd></button>
|
<button class="btn btn-primary btn-large" style="width: 200px;" id="save-attributes-button"
|
||||||
</div>
|
data-bind="click: save">
|
||||||
</form>
|
Save changes <kbd>enter</kbd></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<div id="help-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
|
<div id="help-dialog" class="modal" tabindex="-1" role="dialog">
|
||||||
<div class="modal-dialog modal-xl" role="document" style="max-width: 95%; height: 90%;">
|
<div class="modal-dialog" role="document" style="min-width: 100%; height: 100%; margin: 0;">
|
||||||
<div class="modal-content" style="min-height: 100%">
|
<div class="modal-content" style="height: auto;">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h5 class="modal-title mr-auto">Help (full documentation is available <a class="external" href="https://github.com/zadam/trilium/wiki">online</a>)</h5>
|
<h5 class="modal-title mr-auto">Help (full documentation is available <a class="external" href="https://github.com/zadam/trilium/wiki">online</a>)</h5>
|
||||||
|
|
||||||
@ -8,7 +8,7 @@
|
|||||||
<span aria-hidden="true">×</span>
|
<span aria-hidden="true">×</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body" style="overflow: auto; height: calc(100vh - 70px);">
|
||||||
<div class="card-columns help-cards">
|
<div class="card-columns help-cards">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user