fix options dialog which used jquery tabs

This commit is contained in:
azivner 2018-11-09 12:13:51 +01:00
parent 232f135843
commit c5113eb292
2 changed files with 170 additions and 145 deletions

View File

@ -7,7 +7,6 @@ import zoomService from "../services/zoom.js";
import utils from "../services/utils.js";
const $dialog = $("#options-dialog");
const $tabs = $("#options-tabs");
const tabHandlers = [];
@ -22,8 +21,6 @@ async function showDialog() {
$dialog.modal();
$tabs.tabs();
for (const handler of tabHandlers) {
if (handler.optionsLoaded) {
handler.optionsLoaded(options);

View File

@ -8,18 +8,34 @@
</button>
</div>
<div class="modal-body">
<div id="options-tabs">
<ul>
<li><a href="#appearance">Appearance</a></li>
<li><a href="#change-password">Change password</a></li>
<li><a href="#protected-session-timeout">Protected session</a></li>
<li><a href="#note-revision-snapshot-time-interval">Note revisions</a></li>
<li><a href="#sync-setup">Sync</a></li>
<li><a href="#advanced">Advanced</a></li>
<li><a href="#about">About Trilium</a></li>
<div>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#appearance">Appearance</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#change-password">Change password</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#protected-session-timeout">Protected session</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#note-revision-snapshot-time-interval">Note revisions</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#sync-setup">Sync</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#advanced">Advanced</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#about">About Trilium</a>
</li>
</ul>
<div id="appearance">
<p>Settings on this options tab are saved automatically after each change.</p>
<br/>
<div class="tab-content">
<div id="appearance" class="tab-pane active">
<p><strong>Settings on this options tab are saved automatically after each change.</strong></p>
<form>
<div class="form-group">
@ -57,7 +73,8 @@
</form>
</div>
<div id="change-password">
<div id="change-password" class="tab-pane">
<form id="change-password-form">
<div class="form-group">
<label for="old-password">Old password</label>
@ -74,10 +91,11 @@
<input class="form-control" id="new-password2" type="password">
</div>
<button class="btn btn-sm">Change password</button>
<button class="btn btn-primary">Change password</button>
</form>
</div>
<div id="protected-session-timeout">
<div id="protected-session-timeout" class="tab-pane">
<p>Protected session timeout is a time period after which the protected session is wiped out from
browser's memory. This is measured from the last interaction with protected notes.</p>
@ -88,13 +106,14 @@
</div>
<div style="display: flex; justify-content: space-between;">
<button class="btn btn-sm">Save</button>
<button class="btn btn-primary">Save</button>
<button class="btn btn-sm" type="button" data-help-page="Protected-notes">Help</button>
<button class="btn btn-default" type="button" data-help-page="Protected-notes">Help</button>
</div>
</form>
</div>
<div id="note-revision-snapshot-time-interval">
<div id="note-revision-snapshot-time-interval" class="tab-pane">
<p>Note revision snapshot time interval is time in seconds after which new note revision will be created for the note.</p>
<form id="note-revision-snapshot-time-interval-form">
@ -104,13 +123,14 @@
</div>
<div style="display: flex; justify-content: space-between;">
<button class="btn btn-sm">Save</button>
<button class="btn btn-primary">Save</button>
<button class="btn btn-sm" type="button" data-help-page="Note-revisions">Help</button>
<button class="btn btn-default" type="button" data-help-page="Note-revisions">Help</button>
</div>
</form>
</div>
<div id="sync-setup">
<div id="sync-setup" class="tab-pane">
<h4 style="margin-top: 0px;">Sync configuration</h4>
<form id="sync-setup-form">
@ -130,30 +150,36 @@
</div>
<div style="display: flex; justify-content: space-between;">
<button class="btn btn-sm">Save</button>
<button class="btn btn-primary">Save</button>
<button class="btn btn-sm" type="button" data-help-page="Synchronization">Help</button>
<button class="btn btn-default" type="button" data-help-page="Synchronization">Help</button>
</div>
</form>
<br/>
<h4>Sync test</h4>
<p>This will test connection and handshake to the sync server. If sync server isn't initialized, this will set it up to sync with local document.</p>
<button id="test-sync-button" class="btn btn-sm">Test sync</button>
<button id="test-sync-button" class="btn btn-default">Test sync</button>
</div>
<div id="advanced">
<div id="advanced" class="tab-pane">
<h4 style="margin-top: 0px;">Sync</h4>
<button id="force-full-sync-button" class="btn btn-sm">Force full sync</button>
<button id="force-full-sync-button" class="btn btn-default">Force full sync</button>
<br/>
<br/>
<button id="fill-sync-rows-button" class="btn btn-sm">Fill sync rows</button>
<button id="fill-sync-rows-button" class="btn btn-default">Fill sync rows</button>
<br/>
<br/>
<h4>Debugging</h4>
<button id="anonymize-button" class="btn btn-sm">Save anonymized database</button><br/><br/>
<button id="anonymize-button" class="btn btn-default">Save anonymized database</button><br/><br/>
<p>This action will create a new copy of the database and anonymise it (remove all note content and leave only structure and metadata)
for sharing online for debugging purposes without fear of leaking your personal data.</p>
@ -162,9 +188,10 @@
<p>This will rebuild database which will typically result in smaller database file. No data will be actually changed.</p>
<button id="vacuum-database-button" class="btn btn-sm">Vacuum database</button>
<button id="vacuum-database-button" class="btn btn-default">Vacuum database</button>
</div>
<div id="about">
<div id="about" class="tab-pane">
<table class="table">
<tr>
<th>App version:</th>
@ -194,3 +221,4 @@
</div>
</div>
</div>
</div>