Resizable panels and user prefs

app/assets/templates/frontend/directives/panel-resizer.html.haml

@@ -0,0 +1 @@
+.panel-resizer-column

app/assets/templates/frontend/editor.html.haml

@@ -1,8 +1,8 @@
-.section.editor{"ng-class" => "{'fullscreen' : ctrl.fullscreen}"}
-  #editor-title-bar.section-title-bar{"ng-show" => "ctrl.note && !ctrl.note.errorDecrypting", "ng-class" => "{'fullscreen' : ctrl.fullscreen }"}
+.section.editor#editor-column
+  #editor-title-bar.section-title-bar{"ng-show" => "ctrl.note && !ctrl.note.errorDecrypting"}
     .title
       %input.input#note-title-editor{"ng-model" => "ctrl.note.title", "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTitle($event)",
-                "ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()",
+                "ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()", "ng-blur" => "ctrl.onNameBlur()",
                 "select-on-click" => "true"}
 
     #save-status{"ng-class" => "{'red bold': ctrl.saveError, 'orange bold': ctrl.syncTakingTooLong}", "ng-bind-html" => "ctrl.noteStatus"}
@@ -16,26 +16,31 @@
     %li{"ng-class" => "{'selected' : ctrl.showMenu}", "click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
       %label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false; ctrl.showEditorMenu = false;"} Menu
 
-      %ul.dropdown-menu.sectioned-menu{"ng-if" => "ctrl.showMenu"}
-        %li
-          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.togglePin()"}
-            %i.icon.ion-ios-flag
-            {{ctrl.note.pinned ? "Unpin" : "Pin"}}
-        %li
-          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleArchiveNote()"}
-            %i.icon.ion-ios-box
-            {{ctrl.note.archived ? "Unarchive" : "Archive"}}
-        %li
-          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"}
-            %i.icon.ion-trash-b
-            Delete
-        %li
-          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleFullScreen()"}
-            %i.icon.ion-arrow-expand
-            Toggle Fullscreen
-
-        %li{"ng-if" => "ctrl.hasDisabledStackComponents()"}
-          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.restoreDisabledStackComponents()"} Restore Disabled Components
+      .dropdown-menu.sectioned-menu{"ng-if" => "ctrl.showMenu"}
+        %ul
+          .header
+            .title Note
+          %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.togglePin()"}
+            %label
+              %i.icon.ion-ios-flag
+              {{ctrl.note.pinned ? "Unpin" : "Pin"}}
+          %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleArchiveNote()"}
+            %label
+              %i.icon.ion-ios-box
+              {{ctrl.note.archived ? "Unarchive" : "Archive"}}
+          %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"}
+            %label
+              %i.icon.ion-trash-b
+              Delete
+          %li{"ng-if" => "ctrl.hasDisabledComponents()"}
+            %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.restoreDisabledComponents()"} Restore Disabled Components
+        %ul{"ng-if" => "!ctrl.editor"}
+          .header
+            .title Display
+          %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('monospaceFont')"}
+            %label
+              %span.top.mt-5.mr-5{"ng-if" => "ctrl.monospaceFont == true"} ✓
+              Monospace Font
 
     %li{"ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"}
       %label{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false; ctrl.showExtensions = false;"} Editor
@@ -45,12 +50,14 @@
       %label{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false; ctrl.showEditorMenu = false;"} Actions
       %contextual-extensions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"}
 
-  .editor-content{"ng-if" => "ctrl.noteReady && !ctrl.note.errorDecrypting", "ng-class" => "{'fullscreen' : ctrl.fullscreen }"}
+  .editor-content#editor-content{"ng-if" => "ctrl.noteReady && !ctrl.note.errorDecrypting"}
+    %panel-resizer.left{"panel-id" => "'editor-content'", "on-resize-finish" => "ctrl.onPanelResizeFinish","control" => "ctrl.resizeControl", "min-width" => 300, "property" => "'left'", "hoverable" => "true"}
     %iframe#editor-iframe{"ng-if" => "ctrl.editorComponent && ctrl.editorComponent.active", "ng-src" => "{{ctrl.componentManager.urlForComponent(ctrl.editorComponent) | trusted}}", "data-component-id" => "{{ctrl.editorComponent.uuid}}", "frameBorder" => "0", "style" => "width: 100%;"}
       Loading
-    %textarea.editable#note-text-editor{"ng-if" => "!ctrl.editorComponent", "ng-class" => "{'fullscreen' : ctrl.fullscreen }", "ng-model" => "ctrl.note.text",
+    %textarea.editable#note-text-editor{"ng-if" => "!ctrl.editorComponent", "ng-model" => "ctrl.note.text",
      "ng-change" => "ctrl.contentChanged()", "ng-click" => "ctrl.clickedTextArea()", "ng-focus" => "ctrl.onContentFocus()", "dir" => "auto"}
       {{ctrl.onSystemEditorLoad()}}
+    %panel-resizer{"panel-id" => "'editor-content'", "on-resize-finish" => "ctrl.onPanelResizeFinish","control" => "ctrl.resizeControl", "min-width" => 300, "hoverable" => "true"}
 
 
   %section.section{"ng-if" => "ctrl.note.errorDecrypting"}

app/assets/templates/frontend/home.html.haml

@@ -1,6 +1,6 @@
 .main-ui-view
   %lock-screen{"ng-if" => "needsUnlock", "on-success" => "onSuccessfulUnlock"}
-  .app{"ng-if" => "!needsUnlock"}
+  .app#app{"ng-if" => "!needsUnlock"}
     %tags-section{"save" => "tagsSave", "add-new" => "tagsAddNew", "will-select" => "tagsWillMakeSelection", "selection-made" => "tagsSelectionMade",
     "all-tag" => "allTag", "archive-tag" => "archiveTag", "tags" => "tags", "remove-tag" => "removeTag"}
 

app/assets/templates/frontend/notes.html.haml

@@ -1,41 +1,58 @@
-.section.notes
+.section.notes#notes-column
   .content
     .section-title-bar#notes-title-bar
-      .title {{ctrl.tag.title}} notes
-      .add-button#notes-add-button{"ng-click" => "ctrl.createNewNote()"} +
-      %br
-      .filter-section
-        %input.filter-bar{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true"}
-          #search-clear-button{"ng-if" => "ctrl.noteFilter.text", "ng-click" => "ctrl.noteFilter.text = ''; ctrl.filterTextChanged()"} ✕
-      %ul.section-menu-bar#notes-menu-bar
-        %li.item-with-subtitle{"ng-class" => "{'selected' : ctrl.showMenu}"}
-          .wrapper{"ng-click" => "ctrl.showMenu = !ctrl.showMenu", "click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
-            %label Options
-            .subtitle {{ctrl.optionsSubtitle()}}
-
-          .sectioned-menu.dropdown-menu{"ng-if" => "ctrl.showMenu"}
+      .padded
+        .section-title-bar-header
+          .title {{ctrl.panelTitle()}}
+          .add-button#notes-add-button{"ng-click" => "ctrl.createNewNote()"} +
+        .filter-section
+          %input.filter-bar#search-bar.mousetrap{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true"}
+            #search-clear-button{"ng-if" => "ctrl.noteFilter.text", "ng-click" => "ctrl.noteFilter.text = ''; ctrl.filterTextChanged()"} ✕
+      %ul.section-menu-bar#notes-menu-bar.no-h-padding
+        %li.item-with-subtitle.full-width{"ng-class" => "{'selected' : ctrl.showMenu}"}
+          .wrapper{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"}
+            %label
+              Options
+              %span.subtitle {{ctrl.optionsSubtitle()}}
+          .sectioned-menu.dropdown-menu.full-width{"ng-if" => "ctrl.showMenu"}
             %ul
               .header
-                .title Sort by
+                .title Sort By
               %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()"}
                 %label
                   %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'created_at'"} ✓
-                  By date added
+                  By Date Added
               %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()"}
                 %label
                   %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'updated_at'"} ✓
-                  By date modified
+                  By Date Modified
               %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByTitle()"}
                 %label
                   %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'title'"} ✓
-                  By title
+                  By Title
             %ul{"ng-if" => "!ctrl.tag.archiveTag"}
               .header
-                .title Archives
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleShowArchived()"}
+                .title Display
+              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('showArchived')"}
                 %label
                   %span.top.mt-5.mr-5{"ng-if" => "ctrl.showArchived == true"} ✓
-                  Show archived notes
+                  Show Archived Notes
+              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hidePinned')"}
+                %label
+                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hidePinned == true"} ✓
+                  Hide Pinned Notes
+              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideNotePreview')"}
+                %label
+                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hideNotePreview == true"} ✓
+                  Hide Note Preview
+              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideDate')"}
+                %label
+                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hideDate == true"} ✓
+                  Hide Date
+              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideTags')"}
+                %label
+                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hideTags == true"} ✓
+                  Hide Tags
 
     .scrollable
       .infinite-scroll#notes-scrollable{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}
@@ -52,13 +69,15 @@
             %i.icon.ion-ios-box
             %strong.medium Archived
 
-          .tags-string{"ng-if" => "ctrl.tag.all"}
+          .tags-string{"ng-if" => "ctrl.tag.all && !ctrl.hideTags"}
             .faded {{note.tagsString()}}
 
           .name{"ng-if" => "note.title"}
             {{note.title}}
-          .note-preview
+          .note-preview{"ng-if" => "!ctrl.hideNotePreview"}
             {{note.text}}
-          .date.faded
+          .date.faded{"ng-if" => "!ctrl.hideDate"}
             %span{"ng-if" => "ctrl.sortBy == 'updated_at'"} Modified {{note.updatedAtString() || 'Now'}}
             %span{"ng-if" => "ctrl.sortBy != 'updated_at'"} {{note.createdAtString() || 'Now'}}
+
+  %panel-resizer{"panel-id" => "'notes-column'", "on-resize-finish" => "ctrl.onPanelResize", "control" => "ctrl.panelController", "hoverable" => "true", "collapsable" => "true"}

app/assets/templates/frontend/tags.html.haml

@@ -2,8 +2,9 @@
   %iframe#tags-list-iframe{"ng-if" => "ctrl.component && ctrl.component.active", "ng-src" => "{{ctrl.componentManager.urlForComponent(ctrl.component) | trusted}}", "frameBorder" => "0", "style" => "width: 100%; height: 100%;", "sandbox" => "allow-scripts"}
   #tags-content.content{"ng-if" => "!(ctrl.component && ctrl.component.active)"}
     #tags-title-bar.section-title-bar
-      .title Tags
-      .add-button#tag-add-button{"ng-click" => "ctrl.clickedAddNewTag()"} +
+      .section-title-bar-header
+        .title Tags
+        .add-button#tag-add-button{"ng-click" => "ctrl.createNewTag()"} +
 
     .scrollable
       .tag{"ng-if" => "ctrl.allTag", "ng-click" => "ctrl.selectTag(ctrl.allTag)", "ng-class" => "{'selected' : ctrl.selectedTag == ctrl.allTag}"}
@@ -27,3 +28,5 @@
       .tag.faded{"ng-if" => "ctrl.archiveTag", "ng-click" => "ctrl.selectTag(ctrl.archiveTag)", "ng-class" => "{'selected' : ctrl.selectedTag == ctrl.archiveTag}"}
         .info
           %input.title{"ng-disabled" => "true", "ng-model" => "ctrl.archiveTag.title"}
+
+  %panel-resizer{"panel-id" => "'tags-column'", "on-resize-finish" => "ctrl.onPanelResize", "control" => "ctrl.panelController", "hoverable" => "true", "collapsable" => "true"}