mirror of
https://github.com/zadam/trilium.git
synced 2025-01-17 20:48:12 +08:00
full screen help dialog
This commit is contained in:
zadam
parent
c849d719e9
commit
a1b610fc50
3 changed files with 132 additions and 132 deletions
|
|
@ -668,12 +668,6 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
|
|||
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 */
|
||||
.tooltip {
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -1,149 +1,155 @@
|
|||
<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-header">
|
||||
<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;">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<form data-bind="submit: save">
|
||||
<div class="modal-body">
|
||||
<div style="height: 97%; overflow: auto">
|
||||
<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"/>
|
||||
<div class="modal-body">
|
||||
<form data-bind="submit: save">
|
||||
<input type="submit" style="display: none"/>
|
||||
|
||||
<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
|
||||
<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;"
|
||||
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.
|
||||
</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>
|
||||
|
||||
<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 data-bind="visible: type == 'label-definition'">
|
||||
<select data-bind="options: $parent.availableLabelTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.labelType"></select>
|
||||
|
||||
<div style="color: red" data-bind="if: $parent.isEmptyRelationTarget($index())">Relation target note
|
||||
can't be empty.
|
||||
</div>
|
||||
<select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.multiplicityType"></select>
|
||||
|
||||
<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 data-bind="visible: type == 'label-definition'">
|
||||
<select data-bind="options: $parent.availableLabelTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.labelType"></select>
|
||||
<div data-bind="visible: type == 'relation-definition'">
|
||||
<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="checkbox" value="true"
|
||||
data-bind="checked: labelDefinition.isPromoted"/>
|
||||
Promoted
|
||||
</label>
|
||||
<input type="text" value="true" class="attribute-name"
|
||||
data-bind="value: relationDefinition.inverseRelation"/>
|
||||
</label>
|
||||
</div>
|
||||
</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'">
|
||||
<select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: relationDefinition.multiplicityType"></select>
|
||||
<span title="Delete" style="padding: 13px; cursor: pointer;" class="jam jam-trash"
|
||||
data-bind="click: $parent.deleteAttribute"></span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="true"
|
||||
data-bind="checked: relationDefinition.isPromoted"/>
|
||||
Promoted
|
||||
</label>
|
||||
<br/>
|
||||
<label>
|
||||
Inverse relation:
|
||||
<div data-bind="if: inheritedAttributes().length > 0">
|
||||
<h4>Inherited attributes</h4>
|
||||
|
||||
<input type="text" value="true" class="attribute-name" data-bind="value: relationDefinition.inverseRelation"/>
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
<td title="Inheritable relations are automatically inherited to the child notes">
|
||||
<input type="checkbox" value="1" data-bind="checked: isInheritable"/>
|
||||
|
||||
|
||||
|
||||
<span title="Delete" style="padding: 13px; cursor: pointer;" class="jam jam-trash"
|
||||
data-bind="click: $parent.deleteAttribute"></span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div data-bind="if: inheritedAttributes().length > 0">
|
||||
<h4>Inherited attributes</h4>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Name</th>
|
||||
<th>Value</th>
|
||||
<th>Owning note</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-bind="foreach: inheritedAttributes">
|
||||
<tr>
|
||||
<td data-bind="text: type"></td>
|
||||
<td data-bind="text: name"></td>
|
||||
<td>
|
||||
<span data-bind="if: type == 'label'">
|
||||
<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>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Name</th>
|
||||
<th>Value</th>
|
||||
<th>Owning note</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-bind="foreach: inheritedAttributes">
|
||||
<tr>
|
||||
<td data-bind="text: type"></td>
|
||||
<td data-bind="text: name"></td>
|
||||
<td>
|
||||
<span data-bind="if: type == 'label'">
|
||||
<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 class="modal-footer">
|
||||
<button class="btn btn-primary btn-large" style="width: 200px;" id="save-attributes-button" type="submit">
|
||||
Save changes <kbd>enter</kbd></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary btn-large" style="width: 200px;" id="save-attributes-button"
|
||||
data-bind="click: save">
|
||||
Save changes <kbd>enter</kbd></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div id="help-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-xl" role="document" style="max-width: 95%; height: 90%;">
|
||||
<div class="modal-content" style="min-height: 100%">
|
||||
<div id="help-dialog" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document" style="min-width: 100%; height: 100%; margin: 0;">
|
||||
<div class="modal-content" style="height: auto;">
|
||||
<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>
|
||||
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</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">
|
||||
<div class="card-body">
|
||||
|
|
|
|||
Loading…
Reference in a new issue