added top header

2025-03-01 14:22:32 +01:00 · 2017-10-06 22:46:30 -04:00 · 2017-10-06 22:46:30 -04:00 · 5b3dafd395
commit 5b3dafd395
parent b7a5dca803
5 changed files with 42 additions and 65 deletions
--- a/39
+++ b/39
@ -1,39 +0,0 @@
- pick new name for the project
-
-New features:
- what links here
-  - link between encrypted notes could be done by encrypting note_ids of both sides of relations. Encryption must be
-    deterministic to allow lookup by cipher text
- db upgrade / migration
- db backup into directory
-  - basic impl done
-  - configurable backup time interval
-  - delete old backups
-  - configurable backup deletion
- might do the same thing with alt-j and alt-l
- ctrl-b nad linkem by mohlo byt goto do notu
- potencialne nova navigace back - forward
- javascript editor
- persisted recent notes (is wiped out after reload)
- sync of current page?
- create new subnote from inside the editor - possibly with selection of text
-
-Refactorings:
- modularize frontend
-  - unify handling of global variables
- unify handling of dialogs and their forms - they all follow the same pattern - e.g. have one main dialog window/el
-
-UI:
- need to represent global actions somehow - e.g. recent changes, settings
- better way how to represent per-note actions - what links here, encryption
-
-Encryption:
- we don't have IV or encryption specific counter
-
-Bugs:
- deleting cloned nodes ends with 500 (probably only on folders)
- Uncaught Error: cannot call methods on fancytree prior to initialization; attempted to call method 'getTree'
-
-Others:
- dates should be stored in UTC to work correctly with time zones
-  - we should also record timezone info so that we display the date correctly with respect to the local date at the time of recording it
--- a/src/templates/app.html
+++ b/src/templates/app.html
@ -6,6 +6,30 @@
  </head>
  <body>
    <div id="container">
+      <div class="hide-toggle" style="grid-area: header; background-color: #f1f1f1;">
+        <div style="display: flex; align-items: center;">
+          <div id="header-title">
+            Trilium
+          </div>
+
+          <div style="flex-grow: 100;">
+            <button class="btn btn-xs" onclick="showRecentChanges();">Recent changes</button>
+            <button class="btn btn-xs" onclick="showRecentNotes();">Recent notes</button>
+          </div>
+
+          <div>
+            <span id="top-message"></span>
+            <span id="error-message"></span>
+
+            <button class="btn btn-xs" onclick="displaySettings();">Settings</button>
+
+            <form action="logout" method="POST" style="display: inline;">
+              <input type="submit" class="btn btn-xs" value="Logout">
+            </form>
+          </div>
+        </div>
+      </div>
+
      <div class="hide-toggle" style="grid-area: tree-actions">
        <a onclick="createNewTopLevelNote()" title="Create new top level note" class="icon-action">
          <img src="stat/icons/file-plus.png" alt="Create new top level note"/>
@ -57,19 +81,6 @@
          &nbsp;

          <input autocomplete="off" value="" id="noteTitle" style="font-size: x-large; border: 0; flex-grow: 100;" tabindex="1">
-
-          <div>
-            <span id="top-message"></span>
-            <span id="error-message"></span>
-
-            <button class="btn btn-sm" onclick="displaySettings();">Settings</button>
-
-            &nbsp;
-
-            <form action="logout" method="POST" style="display: inline;">
-              <input type="submit" class="btn btn-sm" value="Logout">
-            </form>
-          </div>
        </div>
      </div>

--- a/static/js/recent_changes.js
+++ b/static/js/recent_changes.js
@ -1,4 +1,4 @@
-$(document).bind('keydown', 'alt+r', function() {
+function showRecentChanges() {
    $("#recentChangesDialog").dialog({
        modal: true,
        width: 400,
@ -74,7 +74,9 @@ $(document).bind('keydown', 'alt+r', function() {
        },
        error: () => alert("Error getting recent changes.")
    });
-});
+}
+
+$(document).bind('keydown', 'alt+r', showRecentChanges);

 $(document).on('click', '#recentChangesDialog a', function(e) {
    goToInternalNote(e, () => {
--- a/static/js/recent_notes.js
+++ b/static/js/recent_notes.js
@ -14,7 +14,7 @@ function addRecentNote(noteTreeId, noteContentId) {
    }, 1500);
 }

-$(document).bind('keydown', 'alt+q', function() {
+function showRecentNotes() {
    $('#noteDetail').summernote('editor.saveRange');

    $("#recentNotesDialog").dialog({
@ -47,7 +47,9 @@ $(document).bind('keydown', 'alt+q', function() {

        recentNotesSelectBox.append(option);
    });
-});
+}
+
+$(document).bind('keydown', 'alt+q', showRecentNotes);

 function getSelectedNoteIdFromRecentNotes() {
    return $("#recentNotesSelectBox option:selected").val();
--- a/static/style.css
+++ b/static/style.css
@ -4,10 +4,12 @@
    height: 100vh;

    display: grid;
-    grid-template-areas: "tree-actions title"
+    grid-template-areas: "header header"
+                         "tree-actions title"
                         "tree note-content";
    grid-template-columns: 2fr 5fr;
    grid-template-rows: auto
+                        auto
                        1fr;
    justify-content: center;
    grid-gap: 10px;
@ -25,19 +27,12 @@

 #top-message {
    display: none; /* initial state is hidden */
-    background-color: #e0e0e0;
    color: #333;
-    padding: 5px;
-    border-radius: 10px;
 }

 #error-message {
-    margin-top: 2px;
    display: none; /* initial state is hidden */
-    background-color: red;
-    color: white;
-    padding: 5px;
-    border-radius: 10px;
+    color: red;
 }

 .note-editable p {
@ -89,4 +84,10 @@ span.fancytree-node.encrypted.fancytree-folder > span.fancytree-icon {

 .ui-widget-content a {
    color: #337ab7 !important;
+}
+
+#header-title {
+    padding: 5px 50px 5px 10px;
+    font-size: large;
+    font-weight: bold;
 }