From 04209182c1e40cfa2f38f86046aea8e62ee8879b Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Mon, 19 Aug 2019 21:55:08 +0200
Subject: [PATCH] options dialog view split up

---
 src/views/dialogs/options.ejs                 | 227 ++----------------
 src/views/dialogs/options/advanced.ejs        |  25 ++
 src/views/dialogs/options/appearance.ejs      |  86 +++++++
 src/views/dialogs/options/change_password.ejs |  20 ++
 src/views/dialogs/options/note_revisions.ejs  |  18 ++
 .../dialogs/options/protected_session.ejs     |  19 ++
 src/views/dialogs/options/sidebar.ejs         |   3 +
 src/views/dialogs/options/sync.ejs            |  36 +++
 8 files changed, 223 insertions(+), 211 deletions(-)
 create mode 100644 src/views/dialogs/options/advanced.ejs
 create mode 100644 src/views/dialogs/options/appearance.ejs
 create mode 100644 src/views/dialogs/options/change_password.ejs
 create mode 100644 src/views/dialogs/options/note_revisions.ejs
 create mode 100644 src/views/dialogs/options/protected_session.ejs
 create mode 100644 src/views/dialogs/options/sidebar.ejs
 create mode 100644 src/views/dialogs/options/sync.ejs

diff --git a/src/views/dialogs/options.ejs b/src/views/dialogs/options.ejs
index 87231869b..efce20784 100644
--- a/src/views/dialogs/options.ejs
+++ b/src/views/dialogs/options.ejs
@@ -11,231 +11,36 @@
                 <div>
                     <ul class="nav nav-tabs">
                         <li class="nav-item">
-                            <a class="nav-link active" data-toggle="tab" href="#appearance">Appearance</a>
+                            <a class="nav-link active" data-toggle="tab" href="#options-appearance">Appearance</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#change-password">Change password</a>
+                            <a class="nav-link" data-toggle="tab" href="#options-sidebar">Sidebar</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#protected-session-timeout">Protected session</a>
+                            <a class="nav-link" data-toggle="tab" href="#options-change-password">Change password</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#note-revision-snapshot-time-interval">Note revisions</a>
+                            <a class="nav-link" data-toggle="tab" href="#options-protected-session">Protected session</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#sync-setup">Sync</a>
+                            <a class="nav-link" data-toggle="tab" href="#options-note-revisions">Note revisions</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#advanced">Advanced</a>
+                            <a class="nav-link" data-toggle="tab" href="#options-sync-setup">Sync</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" data-toggle="tab" href="#options-advanced">Advanced</a>
                         </li>
                     </ul>
                     <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 row">
-                                    <div class="col-4">
-                                        <label for="theme-select">Theme</label>
-                                        <select class="form-control" id="theme-select"></select>
-                                    </div>
-
-                                    <div class="col-4">
-                                        <label for="zoom-factor-select">Zoom factor (desktop build only)</label>
-
-                                        <input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
-                                    </div>
-
-                                    <div class="col-4">
-                                        <label for="one-tab-display-select">If there's only one tab, then...</label>
-                                        <select class="form-control" id="one-tab-display-select">
-                                            <option value="show">show the tab bar</option>
-                                            <option value="hide">hide the tab bar</option>
-                                        </select>
-                                    </div>
-                                </div>
-
-                                <p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
-
-                                <h3>Font sizes</h3>
-
-                                <div class="form-group row">
-                                    <div class="col-4">
-                                        <label for="main-font-size">Main font size</label>
-
-                                        <div class="input-group">
-                                            <input type="number" class="form-control" id="main-font-size" min="50" max="200" step="10"/>
-                                            <div class="input-group-append">
-                                                <span class="input-group-text">%</span>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div class="col-4">
-                                        <label for="tree-font-size">Note tree font size</label>
-
-                                        <div class="input-group">
-                                            <input type="number" class="form-control" id="tree-font-size" min="50" max="200" step="10"/>
-                                            <div class="input-group-append">
-                                                <span class="input-group-text">%</span>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div class="col-4">
-                                        <label for="detail-font-size">Note detail font size</label>
-
-                                        <div class="input-group">
-                                            <input type="number" class="form-control" id="detail-font-size" min="50" max="200" step="10"/>
-                                            <div class="input-group-append">
-                                                <span class="input-group-text">%</span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <p>Note that tree and detail font sizing is relative to the main font size setting.</p>
-
-                                <h3>Left pane sizing</h3>
-
-                                <div class="form-group row">
-                                    <div class="col-6">
-                                        <label for="left-pane-min-width">Left pane minimum width (in pixels)</label>
-
-                                        <input type="number" class="form-control" id="left-pane-min-width" min="100" max="2000" step="1"/>
-                                    </div>
-
-                                    <div class="col-6">
-                                        <label for="left-pane-min-width">Left pane width percent of window size</label>
-
-                                        <input type="number" class="form-control" id="left-pane-width-percent" min="0" max="99" step="1"/>
-                                    </div>
-                                </div>
-
-                                <p>Left pane width is calculated from the percent of window size, if this is smaller than minimum width, then minimum width is used. If you want to have fixed width left pane, set minimum width to the desired width and set percent to 0.</p>
-
-                            </form>
-                        </div>
-
-                        <div id="change-password" class="tab-pane">
-                            <form id="change-password-form">
-                                <div class="form-group">
-                                    <label for="old-password">Old password</label>
-                                    <input class="form-control" id="old-password" type="password">
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="new-password1">New password</label>
-                                    <input class="form-control" id="new-password1" type="password">
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="new-password2">New password once more</label>
-                                    <input class="form-control" id="new-password2" type="password">
-                                </div>
-
-                                <button class="btn btn-primary">Change password</button>
-                            </form>
-                        </div>
-
-                        <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>
-
-                            <form id="protected-session-timeout-form">
-                                <div class="form-group">
-                                    <label for="protected-session-timeout-in-seconds">Protected session timeout (in seconds)</label>
-                                    <input class="form-control" id="protected-session-timeout-in-seconds" type="number">
-                                </div>
-
-                                <div style="display: flex; justify-content: space-between;">
-                                    <button class="btn btn-primary">Save</button>
-
-                                    <button class="btn btn-secondary" type="button" data-help-page="Protected-notes">Help</button>
-                                </div>
-                            </form>
-                        </div>
-
-                        <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">
-                                <div class="form-group">
-                                    <label for="note-revision-snapshot-time-interval-in-seconds">Note revision snapshot time interval (in seconds)</label>
-                                    <input class="form-control" id="note-revision-snapshot-time-interval-in-seconds" type="number">
-                                </div>
-
-                                <div style="display: flex; justify-content: space-between;">
-                                    <button class="btn btn-primary">Save</button>
-
-                                    <button class="btn btn-secondary" type="button" data-help-page="Note-revisions">Help</button>
-                                </div>
-                            </form>
-                        </div>
-
-                        <div id="sync-setup" class="tab-pane">
-                            <h4 style="margin-top: 0px;">Sync configuration</h4>
-
-                            <form id="sync-setup-form">
-                                <div class="form-group">
-                                    <label for="sync-server-host">Server instance address</label>
-                                    <input class="form-control" id="sync-server-host" placeholder="https://<host>:<port>">
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="sync-server-timeout">Sync timeout (milliseconds)</label>
-                                    <input class="form-control" id="sync-server-timeout" min="1" max="10000000" type="number">
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="sync-proxy">Sync proxy server (optional)</label>
-                                    <input class="form-control" id="sync-proxy" placeholder="https://<host>:<port>">
-
-                                    <p><strong>Note:</strong> If you leave proxy setting blank, system proxy will be used (applies to desktop/electron build only)</p>
-                                </div>
-
-                                <div style="display: flex; justify-content: space-between;">
-                                    <button class="btn btn-primary">Save</button>
-
-                                    <button class="btn btn-secondary" 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-secondary">Test sync</button>
-                        </div>
-
-                        <div id="advanced" class="tab-pane">
-                            <h4 style="margin-top: 0px;">Sync</h4>
-                            <button id="force-full-sync-button" class="btn btn-secondary">Force full sync</button>
-
-                            <br/>
-                            <br/>
-
-                            <button id="fill-sync-rows-button" class="btn btn-secondary">Fill sync rows</button>
-
-                            <br/>
-                            <br/>
-
-                            <h4>Debugging</h4>
-
-                            <button id="anonymize-button" class="btn btn-secondary">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>
-
-                            <h4>Vacuum database</h4>
-
-                            <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-secondary">Vacuum database</button>
-                        </div>
+                        <% include options/appearance.ejs %>
+                        <% include options/sidebar.ejs %>
+                        <% include options/change_password.ejs %>
+                        <% include options/protected_session.ejs %>
+                        <% include options/note_revisions.ejs %>
+                        <% include options/sync.ejs %>
+                        <% include options/advanced.ejs %>
                     </div>
                 </div>
             </div>
diff --git a/src/views/dialogs/options/advanced.ejs b/src/views/dialogs/options/advanced.ejs
new file mode 100644
index 000000000..a3f9c79a9
--- /dev/null
+++ b/src/views/dialogs/options/advanced.ejs
@@ -0,0 +1,25 @@
+<div id="options-advanced" class="tab-pane">
+    <h4 style="margin-top: 0px;">Sync</h4>
+    <button id="force-full-sync-button" class="btn btn-secondary">Force full sync</button>
+
+    <br/>
+    <br/>
+
+    <button id="fill-sync-rows-button" class="btn btn-secondary">Fill sync rows</button>
+
+    <br/>
+    <br/>
+
+    <h4>Debugging</h4>
+
+    <button id="anonymize-button" class="btn btn-secondary">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>
+
+    <h4>Vacuum database</h4>
+
+    <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-secondary">Vacuum database</button>
+</div>
\ No newline at end of file
diff --git a/src/views/dialogs/options/appearance.ejs b/src/views/dialogs/options/appearance.ejs
new file mode 100644
index 000000000..f5f6330e1
--- /dev/null
+++ b/src/views/dialogs/options/appearance.ejs
@@ -0,0 +1,86 @@
+<div id="options-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 row">
+            <div class="col-4">
+                <label for="theme-select">Theme</label>
+                <select class="form-control" id="theme-select"></select>
+            </div>
+
+            <div class="col-4">
+                <label for="zoom-factor-select">Zoom factor (desktop build only)</label>
+
+                <input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
+            </div>
+
+            <div class="col-4">
+                <label for="one-tab-display-select">If there's only one tab, then...</label>
+                <select class="form-control" id="one-tab-display-select">
+                    <option value="show">show the tab bar</option>
+                    <option value="hide">hide the tab bar</option>
+                </select>
+            </div>
+        </div>
+
+        <p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
+
+        <h3>Font sizes</h3>
+
+        <div class="form-group row">
+            <div class="col-4">
+                <label for="main-font-size">Main font size</label>
+
+                <div class="input-group">
+                    <input type="number" class="form-control" id="main-font-size" min="50" max="200" step="10"/>
+                    <div class="input-group-append">
+                        <span class="input-group-text">%</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-4">
+                <label for="tree-font-size">Note tree font size</label>
+
+                <div class="input-group">
+                    <input type="number" class="form-control" id="tree-font-size" min="50" max="200" step="10"/>
+                    <div class="input-group-append">
+                        <span class="input-group-text">%</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-4">
+                <label for="detail-font-size">Note detail font size</label>
+
+                <div class="input-group">
+                    <input type="number" class="form-control" id="detail-font-size" min="50" max="200" step="10"/>
+                    <div class="input-group-append">
+                        <span class="input-group-text">%</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <p>Note that tree and detail font sizing is relative to the main font size setting.</p>
+
+        <h3>Left pane sizing</h3>
+
+        <div class="form-group row">
+            <div class="col-6">
+                <label for="left-pane-min-width">Left pane minimum width (in pixels)</label>
+
+                <input type="number" class="form-control" id="left-pane-min-width" min="100" max="2000" step="1"/>
+            </div>
+
+            <div class="col-6">
+                <label for="left-pane-min-width">Left pane width percent of window size</label>
+
+                <input type="number" class="form-control" id="left-pane-width-percent" min="0" max="99" step="1"/>
+            </div>
+        </div>
+
+        <p>Left pane width is calculated from the percent of window size, if this is smaller than minimum width, then minimum width is used. If you want to have fixed width left pane, set minimum width to the desired width and set percent to 0.</p>
+
+    </form>
+</div>
\ No newline at end of file
diff --git a/src/views/dialogs/options/change_password.ejs b/src/views/dialogs/options/change_password.ejs
new file mode 100644
index 000000000..a092a9ee5
--- /dev/null
+++ b/src/views/dialogs/options/change_password.ejs
@@ -0,0 +1,20 @@
+<div id="options-change-password" class="tab-pane">
+    <form id="change-password-form">
+        <div class="form-group">
+            <label for="old-password">Old password</label>
+            <input class="form-control" id="old-password" type="password">
+        </div>
+
+        <div class="form-group">
+            <label for="new-password1">New password</label>
+            <input class="form-control" id="new-password1" type="password">
+        </div>
+
+        <div class="form-group">
+            <label for="new-password2">New password once more</label>
+            <input class="form-control" id="new-password2" type="password">
+        </div>
+
+        <button class="btn btn-primary">Change password</button>
+    </form>
+</div>
\ No newline at end of file
diff --git a/src/views/dialogs/options/note_revisions.ejs b/src/views/dialogs/options/note_revisions.ejs
new file mode 100644
index 000000000..09e538a6f
--- /dev/null
+++ b/src/views/dialogs/options/note_revisions.ejs
@@ -0,0 +1,18 @@
+<div id="options-note-revisions" class="tab-pane">
+    <h3>Note revisions snapshot interval</h3>
+
+    <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">
+        <div class="form-group">
+            <label for="note-revision-snapshot-time-interval-in-seconds">Note revision snapshot time interval (in seconds)</label>
+            <input class="form-control" id="note-revision-snapshot-time-interval-in-seconds" type="number">
+        </div>
+
+        <div style="display: flex; justify-content: space-between;">
+            <button class="btn btn-primary">Save</button>
+
+            <button class="btn btn-secondary" type="button" data-help-page="Note-revisions">Help</button>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/src/views/dialogs/options/protected_session.ejs b/src/views/dialogs/options/protected_session.ejs
new file mode 100644
index 000000000..ca361c9ef
--- /dev/null
+++ b/src/views/dialogs/options/protected_session.ejs
@@ -0,0 +1,19 @@
+<div id="options-protected-session" class="tab-pane">
+    <h3>Protected session timeout</h3>
+
+    <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>
+
+    <form id="protected-session-timeout-form">
+        <div class="form-group">
+            <label for="protected-session-timeout-in-seconds">Protected session timeout (in seconds)</label>
+            <input class="form-control" id="protected-session-timeout-in-seconds" type="number">
+        </div>
+
+        <div style="display: flex; justify-content: space-between;">
+            <button class="btn btn-primary">Save</button>
+
+            <button class="btn btn-secondary" type="button" data-help-page="Protected-notes">Help</button>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/src/views/dialogs/options/sidebar.ejs b/src/views/dialogs/options/sidebar.ejs
new file mode 100644
index 000000000..1bbbd8823
--- /dev/null
+++ b/src/views/dialogs/options/sidebar.ejs
@@ -0,0 +1,3 @@
+<div id="options-sidebar" class="tab-pane">
+    Hi!
+</div>
\ No newline at end of file
diff --git a/src/views/dialogs/options/sync.ejs b/src/views/dialogs/options/sync.ejs
new file mode 100644
index 000000000..89bdaeb49
--- /dev/null
+++ b/src/views/dialogs/options/sync.ejs
@@ -0,0 +1,36 @@
+<div id="options-sync-setup" class="tab-pane">
+    <h4 style="margin-top: 0px;">Sync configuration</h4>
+
+    <form id="sync-setup-form">
+        <div class="form-group">
+            <label for="sync-server-host">Server instance address</label>
+            <input class="form-control" id="sync-server-host" placeholder="https://<host>:<port>">
+        </div>
+
+        <div class="form-group">
+            <label for="sync-server-timeout">Sync timeout (milliseconds)</label>
+            <input class="form-control" id="sync-server-timeout" min="1" max="10000000" type="number">
+        </div>
+
+        <div class="form-group">
+            <label for="sync-proxy">Sync proxy server (optional)</label>
+            <input class="form-control" id="sync-proxy" placeholder="https://<host>:<port>">
+
+            <p><strong>Note:</strong> If you leave proxy setting blank, system proxy will be used (applies to desktop/electron build only)</p>
+        </div>
+
+        <div style="display: flex; justify-content: space-between;">
+            <button class="btn btn-primary">Save</button>
+
+            <button class="btn btn-secondary" 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-secondary">Test sync</button>
+</div>
\ No newline at end of file