Skip to content

Commit

Permalink
full screen help dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@zadam
zadam committed Feb 16, 2019
1 parent c849d71 commit a1b610f
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 138 deletions.
6 changes: 0 additions & 6 deletions src/public/stylesheets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
262 changes: 134 additions & 128 deletions src/views/dialogs/attributes.ejs
View file
Original file line number Diff line number Diff line change
@@ -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">&times;</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"/>

<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
<div class="modal-body">
<form data-bind="submit: save">
<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;"
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 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>
</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 == 'label-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: labelDefinition.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: labelDefinition.isPromoted"/>
Promoted
</label>
<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 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 data-bind="visible: type == 'relation-definition'">
<select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: relationDefinition.multiplicityType"></select>

<label>
<input type="checkbox" value="true"
data-bind="checked: relationDefinition.isPromoted"/>
Promoted
</label>
<br/>
<label>
Inverse relation:

<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"/>

&nbsp;

<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>
</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>

<div data-bind="visible: type == 'relation-definition'">
<select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: relationDefinition.multiplicityType"></select>

<label>
<input type="checkbox" value="true"
data-bind="checked: relationDefinition.isPromoted"/>
Promoted
</label>
<br/>
<label>
Inverse relation:

<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"/>

&nbsp;

<span title="Delete" style="padding: 13px; cursor: pointer;" class="jam jam-trash"
data-bind="click: $parent.deleteAttribute"></span>
</td>
</tr>
</tbody>
</table>
</form>

<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>
</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>
8 changes: 4 additions & 4 deletions src/views/dialogs/help.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<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>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</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">
Expand Down

0 comments on commit a1b610f

Please sign in to comment.