rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Resizable panels and user prefs

Browse Source
This commit is contained in:
Mo Bitar
2017-12-27 12:17:29 -06:00
parent 38f2e345d9
commit 8c15438d00
16 changed files with 603 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/app/app.frontend.js
View File

@@ -36,3 +36,7 @@ function parametersFromURL(url) {
function isDesktopApplication() {
return window && window.process && window.process.type && window.process.versions["electron"];
}
function isMacApplication() {
return window && window.process && window.process.type && window.process.platform == "darwin";
}

83
app/assets/javascripts/app/frontend/controllers/editor.js
View File

@@ -50,13 +50,20 @@ angular.module('app.frontend')
this.showMenu = false;
this.loadTagsString();
let onReady = () => {
this.noteReady = true;
$timeout(() => {
this.loadPreferences();
})
}
let associatedEditor = this.editorForNote(note);
if(associatedEditor) {
// setting note to not ready will remove the editor from view in a flash,
// so we only want to do this if switching between external editors
this.noteReady = false;
} else {
this.noteReady = true;
onReady();
}
if(this.editorComponent && this.editorComponent != associatedEditor) {
@@ -71,10 +78,10 @@ angular.module('app.frontend')
$timeout(() => {
this.enableComponent(associatedEditor);
this.editorComponent = associatedEditor;
this.noteReady = true;
onReady();
})
} else {
this.noteReady = true;
onReady();
}
if(note.safeText().length == 0 && note.dummy) {
@@ -124,6 +131,10 @@ angular.module('app.frontend')
this.note.setAppDataItem("prefersPlainEditor", true);
this.note.setDirty(true);
syncManager.sync();
$timeout(() => {
this.reloadFont();
})
}
this.editorComponent = editorComponent;
@@ -322,7 +333,73 @@ angular.module('app.frontend')
}
/* Resizability */
this.resizeControl = {};
this.onPanelResizeFinish = function(width, left, isMaxWidth) {
if(isMaxWidth) {
authManager.setUserPrefValue("editorWidth", null);
} else {
if(width !== undefined && width !== null) {
authManager.setUserPrefValue("editorWidth", width);
}
}
if(left !== undefined && left !== null) {
authManager.setUserPrefValue("editorLeft", left);
}
authManager.syncUserPreferences();
}
$rootScope.$on("user-preferences-changed", () => {
this.loadPreferences();
});
this.loadPreferences = function() {
this.monospaceFont = authManager.getUserPrefValue("monospaceFont", "monospace");
if(!document.getElementById("editor-content")) {
// Elements have not yet loaded due to ng-if around wrapper
return;
}
this.reloadFont();
let width = authManager.getUserPrefValue("editorWidth", null);
if(width !== null) {
this.resizeControl.setWidth(width);
}
let left = authManager.getUserPrefValue("editorLeft", null);
if(left !== null) {
this.resizeControl.setLeft(left);
}
}
this.reloadFont = function() {
var editable = document.getElementById("note-text-editor");
if(!editable) {
return;
}
if(this.monospaceFont) {
if(isMacApplication()) {
editable.style.fontFamily = "Menlo, Consolas, 'DejaVu Sans Mono', monospace";
} else {
editable.style.fontFamily = "monospace";
}
} else {
editable.style.fontFamily = "inherit";
}
}
this.toggleKey = function(key) {
this[key] = !this[key];
authManager.setUserPrefValue(key, this[key], true);
this.reloadFont();
}

95
app/assets/javascripts/app/frontend/controllers/notes.js
View File

@@ -33,21 +33,61 @@ angular.module('app.frontend')
})
.controller('NotesCtrl', function (authManager, $timeout, $rootScope, modelManager, storageManager) {
this.sortBy = storageManager.getItem("sortBy") || "created_at";
this.showArchived = storageManager.getBooleanValue("showArchived") || false;
this.sortDescending = this.sortBy != "title";
this.panelController = {};
$rootScope.$on("user-preferences-changed", () => {
this.loadPreferences();
});
this.loadPreferences = function() {
this.sortBy = authManager.getUserPrefValue("sortBy", "created_at");
this.sortDescending = this.sortBy != "title";
this.showArchived = authManager.getUserPrefValue("showArchived", false);
this.hidePinned = authManager.getUserPrefValue("hidePinned", false);
this.hideNotePreview = authManager.getUserPrefValue("hideNotePreview", false);
this.hideDate = authManager.getUserPrefValue("hideDate", false);
this.hideTags = authManager.getUserPrefValue("hideTags", false);
let width = authManager.getUserPrefValue("notesPanelWidth");
if(width) {
this.panelController.setWidth(width);
}
}
this.loadPreferences();
this.onPanelResize = function(newWidth) {
authManager.setUserPrefValue("notesPanelWidth", newWidth);
authManager.syncUserPreferences();
}
angular.element(document).ready(() => {
this.loadPreferences();
});
$rootScope.$on("editorFocused", function(){
this.showMenu = false;
}.bind(this))
$rootScope.$on("noteDeleted", function() {
this.selectFirstNote(false);
$timeout(this.onNoteRemoval.bind(this));
}.bind(this))
$rootScope.$on("noteArchived", function() {
this.selectFirstNote(false);
}.bind(this))
$timeout(this.onNoteRemoval.bind(this));
}.bind(this));
// When a note is removed from the list
this.onNoteRemoval = function() {
let visibleNotes = this.visibleNotes();
if(this.selectedIndex < visibleNotes.length) {
this.selectNote(visibleNotes[this.selectedIndex]);
} else {
this.selectNote(visibleNotes[visibleNotes.length - 1]);
}
}
this.DefaultNotesToDisplayValue = 20;
@@ -56,26 +96,39 @@ angular.module('app.frontend')
this.notesToDisplay += this.DefaultNotesToDisplayValue
}
this.panelTitle = function() {
if(this.noteFilter.text.length) {
return `${this.tag.notes.filter((i) => {return i.visible;}).length} search results`;
} else if(this.tag) {
return `${this.tag.title} notes`;
}
}
this.optionsSubtitle = function() {
var base = "Sorting by";
var base = "";
if(this.sortBy == "created_at") {
base += " date added";
base += " Date Added";
} else if(this.sortBy == "updated_at") {
base += " date modifed";
base += " Date Modifed";
} else if(this.sortBy == "title") {
base += " title";
base += " Title";
}
if(this.showArchived && (!this.tag || !this.tag.archiveTag)) {
base += " | Including archived"
base += " | + Archived"
}
if(this.hidePinned) {
base += " | – Pinned"
}
return base;
}
this.toggleShowArchived = function() {
this.showArchived = !this.showArchived;
storageManager.setBooleanValue("showArchived", this.showArchived);
this.toggleKey = function(key) {
this[key] = !this[key];
authManager.setUserPrefValue(key, this[key]);
authManager.syncUserPreferences();
}
this.tagDidChange = function(tag, oldTag) {
@@ -108,10 +161,14 @@ angular.module('app.frontend')
this.selectFirstNote(createNew);
}
this.selectFirstNote = function(createNew) {
var visibleNotes = this.sortedNotes.filter(function(note){
this.visibleNotes = function() {
return this.sortedNotes.filter(function(note){
return note.visible;
});
}
this.selectFirstNote = function(createNew) {
var visibleNotes = this.visibleNotes();
if(visibleNotes.length > 0) {
this.selectNote(visibleNotes[0]);
@@ -121,6 +178,7 @@ angular.module('app.frontend')
}
this.selectNote = function(note) {
if(!note) { return; }
this.selectedNote = note;
note.conflict_of = null; // clear conflict
this.selectionMade()(note);
@@ -142,7 +200,7 @@ angular.module('app.frontend')
return note.visible;
}
if(note.archived && !this.showArchived) {
if((note.archived && !this.showArchived) || (note.pinned && this.hidePinned)) {
note.visible = false;
return note.visible;
}
@@ -188,7 +246,8 @@ angular.module('app.frontend')
this.setSortBy = function(type) {
this.sortBy = type;
storageManager.setItem("sortBy", type);
authManager.setUserPrefValue("sortBy", this.sortBy);
authManager.syncUserPreferences();
}
});

22
app/assets/javascripts/app/frontend/controllers/tags.js
View File

@@ -34,10 +34,30 @@ angular.module('app.frontend')
}
}
})
.controller('TagsCtrl', function ($rootScope, modelManager, $timeout, componentManager) {
.controller('TagsCtrl', function ($rootScope, modelManager, $timeout, componentManager, authManager) {
var initialLoad = true;
this.panelController = {};
$rootScope.$on("user-preferences-changed", () => {
this.loadPreferences();
});
this.loadPreferences = function() {
let width = authManager.getUserPrefValue("tagsPanelWidth");
if(width) {
this.panelController.setWidth(width);
}
}
this.loadPreferences();
this.onPanelResize = function(newWidth) {
authManager.setUserPrefValue("tagsPanelWidth", newWidth);
authManager.syncUserPreferences();
}
this.componentManager = componentManager;
componentManager.registerHandler({identifier: "tags", areas: ["tags-list"], activationHandler: function(component){

24
app/assets/javascripts/app/services/authManager.js
View File

@@ -298,6 +298,7 @@ angular.module('app.frontend')
singletonManager.registerSingleton({content_type: prefsContentType}, (resolvedSingleton) => {
console.log("AuthManager received resolved UserPreferences", resolvedSingleton);
this.userPreferences = resolvedSingleton;
this.userPreferencesDidChange();
}, () => {
// Safe to create. Create and return object.
var prefs = new Item({content_type: prefsContentType});
@@ -308,5 +309,28 @@ angular.module('app.frontend')
return prefs;
});
this.userPreferencesDidChange = function() {
$rootScope.$broadcast("user-preferences-changed");
}
this.syncUserPreferences = function() {
this.userPreferences.setDirty(true);
$rootScope.sync();
}
this.getUserPrefValue = function(key, defaultValue) {
if(!this.userPreferences) { return; }
var value = this.userPreferences.getAppDataItem(key);
return (value !== undefined && value != null) ? value : defaultValue;
}
this.setUserPrefValue = function(key, value, sync) {
if(!this.userPreferences) { console.log("Prefs are null, not setting value", key); return; }
this.userPreferences.setAppDataItem(key, value);
if(sync) {
this.syncUserPreferences();
}
}
}
});

201
app/assets/javascripts/app/services/directives/views/panelResizer.js Normal file
View File

@@ -0,0 +1,201 @@
class PanelResizer {
constructor() {
this.restrict = "E";
this.templateUrl = "frontend/directives/panel-resizer.html";
this.scope = {
index: "=",
panelId: "=",
onResize: "&",
onResizeFinish: "&",
control: "=",
alwaysVisible: "=",
minWidth: "=",
property: "=",
hoverable: "=",
collapsable: "="
};
}
link(scope, elem, attrs, ctrl) {
scope.elem = elem;
scope.control.setWidth = function(value) {
scope.setWidth(value, true);
}
scope.control.setLeft = function(value) {
scope.setLeft(value);
}
}
controller($scope, $element, modelManager, extensionManager) {
'ngInject';
let panel = document.getElementById($scope.panelId);
if(!panel) {
console.log("Panel not found for", $scope.panelId);
}
let resizerColumn = $element[0];
let resizerWidth = resizerColumn.offsetWidth;
let minWidth = $scope.minWidth || resizerWidth;
function getParentRect() {
return panel.parentNode.getBoundingClientRect();
}
var pressed = false;
var startWidth = panel.scrollWidth, startX, lastDownX, collapsed, lastWidth = startWidth, startLeft, lastLeft;
let appFrame = document.getElementById("app").getBoundingClientRect();
if($scope.alwaysVisible) {
console.log("Adding always visible", $scope.alwaysVisible);
resizerColumn.classList.add("always-visible");
}
if($scope.hoverable) {
resizerColumn.classList.add("hoverable");
}
$scope.setWidth = function(width, finish) {
if(width < minWidth) {
width = minWidth;
}
let parentRect = getParentRect();
if(width > parentRect.width) {
width = parentRect.width;
}
if(width == parentRect.width) {
panel.style.width = "100%";
panel.style.flexBasis = "100%";
} else {
panel.style.flexBasis = width + "px";
panel.style.width = width + "px";
}
lastWidth = width;
if(finish) {
$scope.finishSettingWidth();
}
}
$scope.setLeft = function(left) {
panel.style.left = left + "px";
lastLeft = left;
}
$scope.finishSettingWidth = function() {
if(!$scope.collapsable) {
return;
}
if(lastWidth <= minWidth) {
collapsed = true;
} else {
collapsed = false;
}
if(collapsed) {
resizerColumn.classList.add("collapsed");
} else {
resizerColumn.classList.remove("collapsed");
}
}
resizerColumn.addEventListener("mousedown", function(event){
pressed = true;
lastDownX = event.clientX;
startWidth = panel.scrollWidth;
startLeft = panel.offsetLeft;
panel.classList.add("no-selection");
if($scope.hoverable) {
resizerColumn.classList.add("dragging");
}
})
document.addEventListener("mousemove", function(event){
if(!pressed) {
return;
}
event.preventDefault();
if($scope.property && $scope.property == 'left') {
handleLeftEvent(event);
} else {
handleWidthEvent(event);
}
})
function handleWidthEvent(event) {
var rect = panel.getBoundingClientRect();
var panelMaxX = rect.left + (startWidth || panel.style.maxWidth);
var x = event.clientX;
let deltaX = x - lastDownX;
var newWidth = startWidth + deltaX;
$scope.setWidth(newWidth, false);
if($scope.onResize()) {
$scope.onResize()(lastWidth, panel);
}
}
function handleLeftEvent(event) {
var panelRect = panel.getBoundingClientRect();
var x = event.clientX;
let deltaX = x - lastDownX;
var newLeft = startLeft + deltaX;
if(newLeft < 0) {
newLeft = 0;
deltaX = -startLeft;
}
let parentRect = getParentRect();
var newWidth = startWidth - deltaX;
if(newWidth < minWidth) {
newWidth = minWidth;
}
if(newWidth > parentRect.width) {
newWidth = parentRect.width;
}
if(newLeft + newWidth > parentRect.width) {
newLeft = parentRect.width - newWidth;
}
$scope.setLeft(newLeft, false);
$scope.setWidth(newWidth, false);
}
document.addEventListener("mouseup", function(event){
if(pressed) {
pressed = false;
resizerColumn.classList.remove("dragging");
panel.classList.remove("no-selection");
let isMaxWidth = lastWidth == getParentRect().width;
if($scope.onResizeFinish) {
$scope.onResizeFinish()(lastWidth, lastLeft, isMaxWidth);
}
$scope.finishSettingWidth();
}
})
}
}
angular.module('app.frontend').directive('panelResizer', () => new PanelResizer);

29
app/assets/stylesheets/app/_editor.scss
View File

@@ -1,21 +1,11 @@
$heading-height: 75px;
.editor {
flex: 1 50%;
min-width: 300px;
display: flex;
flex-direction: column;
overflow-y: hidden;
background-color: white;
&.fullscreen {
width: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 200;
padding: 0;
}
.section-menu-bar {
flex: 1 0 28px;
max-height: 28px;
@@ -37,10 +27,6 @@ $heading-height: 75px;
height: auto;
overflow: visible;
&.fullscreen {
position: relative;
}
> .title {
font-size: 18px;
font-weight: bold;
@@ -103,7 +89,7 @@ $heading-height: 75px;
}
}
.editor-content {
.editor-content, #editor-content {
flex: 1;
z-index: 10;
overflow-y: hidden;
@@ -111,9 +97,7 @@ $heading-height: 75px;
display: flex;
background-color: white;
&.fullscreen {
padding-top: 0px;
}
position: relative;
#editor-iframe {
flex: 1;
@@ -122,7 +106,6 @@ $heading-height: 75px;
.editable {
font-family: monospace;
flex: 1;
overflow-y: scroll;
width: 100%;
@@ -132,14 +115,6 @@ $heading-height: 75px;
padding-top: 11px;
font-size: 17px;
resize: none;
&.fullscreen {
padding: 85px 10%;
max-width: 1200px;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
}
}

90
app/assets/stylesheets/app/_main.scss
View File

@@ -110,10 +110,7 @@ p {
$footer-height: 25px;
$section-header-height: 70px;
.app {
// height: 100%;
height: calc(100% - #{$footer-height});
width: 100%;
display: flex;
@@ -136,11 +133,48 @@ $section-header-height: 70px;
}
}
panel-resizer {
top: 0;
right: 0;
z-index: 1;
width: 8px;
height: 100%;
position: absolute;
cursor: col-resize;
background-color: rgb(224, 224, 224);
opacity: 0;
&.left {
left: 0;
right: none;
}
&.always-visible {
opacity: 1;
}
&.collapsed {
opacity: 1;
}
&.dragging {
opacity: 1;
}
&.hoverable {
&:hover {
opacity: 1;
}
}
}
.section {
padding-bottom: 0px;
height: 100%;
max-height: calc(100vh - #{$footer-height});
font-size: 17px;
position: relative;
overflow: hidden;
.scrollable {
overflow-y: auto;
@@ -155,34 +189,40 @@ $section-header-height: 70px;
}
.section-title-bar {
padding: 20px;
height: $section-header-height;
font-weight: bold;
font-size: 14px;
> .title {
float: left;
white-space: nowrap;
text-overflow: ellipsis;
width: 80%;
overflow: hidden;
.padded {
padding: 0 14px;
}
> .add-button {
float: right;
font-size: 18px;
width: 45px;
height: 24px;
cursor: pointer;
background-color: #e9e9e9;
border-radius: 4px;
font-weight: normal;
text-align: center;
position: absolute;
right: 12px;
.section-title-bar-header {
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
&:hover {
background-color: rgba(#e9e9e9, 0.8);
> .title {
white-space: nowrap;
text-overflow: ellipsis;
width: 80%;
overflow: hidden;
}
> .add-button {
font-size: 18px;
width: 45px;
height: 24px;
cursor: pointer;
background-color: #e9e9e9;
border-radius: 4px;
font-weight: normal;
text-align: center;
&:hover {
background-color: rgba(#e9e9e9, 0.8);
}
}
}
}

30
app/assets/stylesheets/app/_menus.scss
View File

@@ -4,6 +4,11 @@ ul.section-menu-bar {
padding-left: 6px;
padding-right: 21px;
&.no-h-padding {
padding-left: 0px;
padding-right: 0px;
}
user-select: none;
background-color: #f1f1f1;
@@ -29,6 +34,7 @@ ul.section-menu-bar {
&.full-width {
width: 100%;
padding-left: 14px;
}
&.item-with-subtitle {
@@ -43,14 +49,14 @@ ul.section-menu-bar {
font-weight: normal;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* number of lines to show */
$line-height: 18px;
line-height: $line-height; /* fallback */
max-height: calc(#{$line-height} * 1); /* fallback */
// overflow: hidden;
// text-overflow: ellipsis;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 1; /* number of lines to show */
// $line-height: 18px;
// line-height: $line-height; /* fallback */
// max-height: calc(#{$line-height} * 1); /* fallback */
}
}
@@ -79,9 +85,15 @@ ul.section-menu-bar {
border: none;
width: 280px;
&.full-width {
width: 100%;
}
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 50px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background-color: white;
color: $selected-text-color;

29
app/assets/stylesheets/app/_notes.scss
View File

@@ -1,21 +1,23 @@
.notes {
#notes-column, .notes {
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
flex: 1 20%;
max-width: 350px;
min-width: 170px;
width: 350px;
flex-grow: 0;
user-select: none;
$notes-title-bar-height: 148px;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
.content {
display: flex;
flex-direction: column;
}
#notes-title-bar {
color: rgba(black, 0.40);
padding-top: 16px;
padding-left: 14px;
padding-right: 14px;
height: $notes-title-bar-height;
font-weight: normal;
font-size: 18px;
@@ -25,21 +27,20 @@
}
#notes-add-button {
right: 14px;
}
#notes-menu-bar {
position: relative;
margin: 0 -14px;
margin-top: 14px;
height: 45px;
height: auto;
width: auto;
}
.filter-section {
clear: left;
height: 32px;
margin-top: 20px;
margin-top: 14px;
position: relative;
.filter-bar {
@@ -80,7 +81,7 @@
}
.scrollable {
height: calc(100vh - (#{$notes-title-bar-height} + #{$footer-height}));
height: 100%;
}
.infinite-scroll {

25
app/assets/stylesheets/app/_tags.scss
View File

@@ -1,21 +1,20 @@
.tags {
flex: 1 10%;
max-width: 180px;
min-width: 100px;
width: 180px;
background-color: #f6f6f6;
user-select: none;
flex-grow: 0;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
$tags-title-bar-height: 55px;
#tags-title-bar {
color: black;
height: $tags-title-bar-height;
padding-left: 12px;
padding-right: 12px;
font-size: 12px;
color: rgba(black, 0.8);
color: black;
height: $tags-title-bar-height;
padding-top: 14px;
padding-left: 12px;
padding-right: 12px;
font-size: 12px;
color: rgba(black, 0.8);
}
#tags-content {
@@ -23,9 +22,7 @@
}
#tag-add-button {
margin-top: -6px;
background-color: #d7d7d7;
float: right;
&:hover {
background-color: rgba(#d7d7d7, 0.8);

1
app/assets/templates/frontend/directives/panel-resizer.html.haml Normal file
View File

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

57
app/assets/templates/frontend/editor.html.haml
View File

@@ -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"}

2
app/assets/templates/frontend/home.html.haml
View File

@@ -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"}

67
app/assets/templates/frontend/notes.html.haml
View File

@@ -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"}

7
app/assets/templates/frontend/tags.html.haml
View File

@@ -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"}