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

Refactor menu-row ng-click into action property

Browse Source
This commit is contained in:
Mo Bitar
2018-08-16 09:38:50 -05:00
parent 946ed40623
commit 71f4f9aba1
11 changed files with 51 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/app/controllers/editor.js
View File

@@ -366,11 +366,10 @@ angular.module('app')
this.editingName = false; this.editingName = false;
} }
this.selectedMenuItem = function($event, hide) { this.selectedMenuItem = function(hide) {
if(hide) { if(hide) {
this.showMenu = false; this.showMenu = false;
} }
$event.stopPropagation();
} }
this.deleteNote = function() { this.deleteNote = function() {

2
app/assets/javascripts/app/controllers/notes.js
View File

@@ -282,7 +282,7 @@ angular.module('app')
}.bind(this), 100) }.bind(this), 100)
} }
this.selectedMenuItem = function($event) { this.selectedMenuItem = function() {
this.showMenu = false; this.showMenu = false;
} }

3
app/assets/javascripts/app/directives/views/actionsMenu.js
View File

@@ -61,9 +61,8 @@ class ActionsMenu {
} }
return parentAction.subactions.map((subaction) => { return parentAction.subactions.map((subaction) => {
return { return {
onClick: ($event) => { onClick: () => {
this.executeAction(subaction, extension, parentAction); this.executeAction(subaction, extension, parentAction);
$event.stopPropagation();
}, },
label: subaction.label, label: subaction.label,
subtitle: subaction.desc, subtitle: subaction.desc,

3
app/assets/javascripts/app/directives/views/editorMenu.js
View File

@@ -22,8 +22,7 @@ class EditorMenu {
$scope.defaultEditor = $scope.editors.filter((e) => {return e.isDefaultEditor()})[0]; $scope.defaultEditor = $scope.editors.filter((e) => {return e.isDefaultEditor()})[0];
$scope.selectComponent = function($event, component) { $scope.selectComponent = function(component) {
$event.stopPropagation();
if(component) { if(component) {
component.conflict_of = null; // clear conflict if applicable component.conflict_of = null; // clear conflict if applicable
} }

16
app/assets/javascripts/app/directives/views/menuRow.js
View File

@@ -5,6 +5,7 @@ class MenuRow {
this.transclude = true; this.transclude = true;
this.templateUrl = "directives/menu-row.html"; this.templateUrl = "directives/menu-row.html";
this.scope = { this.scope = {
action: "&",
circle: "=", circle: "=",
label: "=", label: "=",
subtitle: "=", subtitle: "=",
@@ -15,14 +16,27 @@ class MenuRow {
spinnerClass: "=", spinnerClass: "=",
subRows: "=", subRows: "=",
faded: "=", faded: "=",
desc: "=" desc: "=",
disabled: "="
}; };
} }
controller($scope, componentManager) { controller($scope, componentManager) {
'ngInject'; 'ngInject';
$scope.onClick = function($event) {
if($scope.disabled) {
return;
}
$event.stopPropagation();
$scope.action();
}
// This is for the accessory button
$scope.clickButton = function($event) { $scope.clickButton = function($event) {
if($scope.disabled) {
return;
}
$event.stopPropagation(); $event.stopPropagation();
$scope.buttonAction(); $scope.buttonAction();
} }

2
app/assets/templates/directives/actions-menu.html.haml
View File

@@ -12,7 +12,7 @@
%div{"ng-if" => "extension.hide"} … %div{"ng-if" => "extension.hide"} …
%menu-row{"ng-if" => "!extension.hide", "ng-repeat" => "action in extension.actionsWithContextForItem(item)", %menu-row{"ng-if" => "!extension.hide", "ng-repeat" => "action in extension.actionsWithContextForItem(item)",
"ng-click" => "executeAction(action, extension); $event.stopPropagation();", "label" => "action.label", "subtitle" => "action.desc", "action" => "executeAction(action, extension);", "label" => "action.label", "subtitle" => "action.desc",
"spinner-class" => "action.running ? 'info' : null", "sub-rows" => "action.subrows"} "spinner-class" => "action.running ? 'info' : null", "sub-rows" => "action.subrows"}
.sublabel{"ng-if" => "action.access_type"} .sublabel{"ng-if" => "action.access_type"}
Uses Uses

6
app/assets/templates/directives/editor-menu.html.haml
View File

@@ -3,9 +3,9 @@
.section .section
.header .header
%h4.title Note Editor %h4.title Note Editor
%menu-row{"label" => "'Plain Editor'", "circle" => "selectedEditor == null && 'success'", "ng-click" => "selectComponent($event, null)"} %menu-row{"label" => "'Plain Editor'", "circle" => "selectedEditor == null && 'success'", "action" => "selectComponent(null)"}
%menu-row{"ng-repeat" => "editor in editors", "ng-click" => "selectComponent($event, editor)", "label" => "editor.name", %menu-row{"ng-repeat" => "editor in editors", "action" => "selectComponent(editor)", "label" => "editor.name",
"circle" => "selectedEditor === editor && 'success'", "circle" => "selectedEditor === editor && 'success'",
"has-button" => "selectedEditor == editor || defaultEditor == editor", "button-text" => "defaultEditor == editor ? 'Undefault' : 'Set Default'", "has-button" => "selectedEditor == editor || defaultEditor == editor", "button-text" => "defaultEditor == editor ? 'Undefault' : 'Set Default'",
"button-action" => "toggleDefaultForEditor(editor)", "button-class" => "defaultEditor == editor ? 'warning' : 'info'"} "button-action" => "toggleDefaultForEditor(editor)", "button-class" => "defaultEditor == editor ? 'warning' : 'info'"}
@@ -19,7 +19,7 @@
.section{"ng-if" => "stack.length > 0"} .section{"ng-if" => "stack.length > 0"}
.header .header
%h4.title Editor Stack %h4.title Editor Stack
%menu-row{"ng-repeat" => "component in stack", "ng-click" => "selectComponent($event, component)", "label" => "component.name", %menu-row{"ng-repeat" => "component in stack", "action" => "selectComponent(component)", "label" => "component.name",
"circle" => "stackComponentEnabled(component) ? 'success' : 'danger'"} "circle" => "stackComponentEnabled(component) ? 'success' : 'danger'"}
.column{"ng-if" => "component.conflict_of || shouldDisplayRunningLocallyLabel(component)"} .column{"ng-if" => "component.conflict_of || shouldDisplayRunningLocallyLabel(component)"}
%strong.red.medium-text{"ng-if" => "component.conflict_of"} Conflicted copy %strong.red.medium-text{"ng-if" => "component.conflict_of"} Conflicted copy

6
app/assets/templates/directives/menu-row.html.haml
View File

@@ -1,16 +1,16 @@
.row{"ng-attr-title" => "{{desc}}"} .row{"ng-attr-title" => "{{desc}}", "ng-click" => "onClick($event)"}
.column .column
.left .left
.column{"ng-if" => "circle"} .column{"ng-if" => "circle"}
.circle.small{"ng-class" => "circle"} .circle.small{"ng-class" => "circle"}
.column{"ng-class" => "{'faded' : faded}"} .column{"ng-class" => "{'faded' : faded || disabled}"}
.label .label
{{label}} {{label}}
.sublabel{"ng-if" => "subtitle"} .sublabel{"ng-if" => "subtitle"}
{{subtitle}} {{subtitle}}
%ng-transclude %ng-transclude
.subrows{"ng-if" => "subRows && subRows.length > 0"} .subrows{"ng-if" => "subRows && subRows.length > 0"}
%menu-row{"ng-repeat" => "row in subRows", "ng-click" => "row.onClick($event); $event.stopPropagation();", %menu-row{"ng-repeat" => "row in subRows", "action" => "row.onClick()",
"label" => "row.label", "subtitle" => "row.subtitle", "spinner-class" => "row.spinnerClass"} "label" => "row.label", "subtitle" => "row.subtitle", "spinner-class" => "row.spinnerClass"}
.column{"ng-if" => "hasButton"} .column{"ng-if" => "hasButton"}

10
app/assets/templates/directives/session-history-menu.html.haml
View File

@@ -7,17 +7,17 @@
%a Options %a Options
%div{"ng-if" => "showOptions"} %div{"ng-if" => "showOptions"}
%menu-row{"label" => "'Clear note local history'", "ng-click" => "clearItemHistory(); $event.stopPropagation();"} %menu-row{"label" => "'Clear note local history'", "action" => "clearItemHistory()"}
%menu-row{"label" => "'Clear all local history'", "ng-click" => "clearAllHistory(); $event.stopPropagation();"} %menu-row{"label" => "'Clear all local history'", "action" => "clearAllHistory()"}
%menu-row{"label" => "(autoOptimize ? 'Disable' : 'Enable') + ' auto cleanup'", "ng-click" => "toggleAutoOptimize(); $event.stopPropagation();"} %menu-row{"label" => "(autoOptimize ? 'Disable' : 'Enable') + ' auto cleanup'", "action" => "toggleAutoOptimize()"}
.sublabel .sublabel
Automatically cleans up small revisions to conserve space. Automatically cleans up small revisions to conserve space.
%menu-row{"label" => "(diskEnabled ? 'Disable' : 'Enable') + ' saving history to disk'", "ng-click" => "toggleDiskSaving(); $event.stopPropagation();"} %menu-row{"label" => "(diskEnabled ? 'Disable' : 'Enable') + ' saving history to disk'", "action" => "toggleDiskSaving()"}
.sublabel .sublabel
Saving to disk may increase app loading time and memory footprint. Saving to disk may increase app loading time and memory footprint.
%menu-row{"ng-repeat" => "revision in history.entries", %menu-row{"ng-repeat" => "revision in history.entries",
"ng-click" => "openRevision(revision); $event.stopPropagation();", "action" => "openRevision(revision);",
"label" => "revision.previewTitle()"} "label" => "revision.previewTitle()"}
.sublabel.opaque{"ng-class" => "classForRevision(revision)"} .sublabel.opaque{"ng-class" => "classForRevision(revision)"}
{{revision.previewSubTitle()}} {{revision.previewSubTitle()}}

18
app/assets/templates/editor.html.haml
View File

@@ -31,16 +31,20 @@
.section .section
.header .header
%h4.title Note Options %h4.title Note Options
%menu-row{"label" => "ctrl.note.pinned ? 'Unpin' : 'Pin'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.togglePin()", "desc" => "'Pin or unpin a note from the top of your list'"} %menu-row{"label" => "ctrl.note.pinned ? 'Unpin' : 'Pin'", "action" => "ctrl.selectedMenuItem(true); ctrl.togglePin()", "desc" => "'Pin or unpin a note from the top of your list'"}
%menu-row{"label" => "ctrl.note.archived ? 'Unarchive' : 'Archive'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.toggleArchiveNote()", "desc" => "'Archive or unarchive a note from your Archived system tag'"} %menu-row{"label" => "ctrl.note.archived ? 'Unarchive' : 'Archive'", "action" => "ctrl.selectedMenuItem(true); ctrl.toggleArchiveNote()", "desc" => "'Archive or unarchive a note from your Archived system tag'"}
%menu-row{"label" => "ctrl.note.locked ? 'Unlock' : 'Lock'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.toggleLockNote()", "desc" => "'Locking notes prevents unintentional editing'"} %menu-row{"label" => "ctrl.note.locked ? 'Unlock' : 'Lock'", "action" => "ctrl.selectedMenuItem(true); ctrl.toggleLockNote()", "desc" => "'Locking notes prevents unintentional editing'"}
%menu-row{"label" => "'Delete'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()", "desc" => "'Delete this note permanently from all your devices'"} %menu-row{"label" => "'Delete'", "action" => "ctrl.selectedMenuItem(); ctrl.deleteNote()", "desc" => "'Delete this note permanently from all your devices'"}
.section{"ng-if" => "!ctrl.selectedEditor"} .section
.header .header
%h4.title Global Display %h4.title Global Display
%menu-row{"label" => "'Monospace Font'", "circle" => "ctrl.monospaceFont ? 'success' : 'default'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.toggleKey('monospaceFont')", "desc" => "'Toggles the font style for the default editor'"}
%menu-row{"label" => "'Spellcheck'", "circle" => "ctrl.spellcheck ? 'success' : 'default'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.toggleKey('spellcheck')", "desc" => "'Toggles spellcheck for the default editor'"} %menu-row{"label" => "'Monospace Font'", "circle" => "ctrl.monospaceFont ? 'success' : 'default'", "action" => "ctrl.selectedMenuItem(true); ctrl.toggleKey('monospaceFont')",
"desc" => "'Toggles the font style for the default editor'", "subtitle" => "ctrl.selectedEditor ? 'Not available with editor extensions' : null", "disabled" => "ctrl.selectedEditor"}
%menu-row{"label" => "'Spellcheck'", "circle" => "ctrl.spellcheck ? 'success' : 'default'", "action" => "ctrl.selectedMenuItem(true); ctrl.toggleKey('spellcheck')",
"desc" => "'Toggles spellcheck for the default editor'", "subtitle" => "ctrl.selectedEditor ? 'Not available with editor extensions' : null", "disabled" => "ctrl.selectedEditor"}
.item{"ng-click" => "ctrl.onEditorMenuClick()", "ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"} .item{"ng-click" => "ctrl.onEditorMenuClick()", "ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"}
.label Editor .label Editor

16
app/assets/templates/notes.html.haml
View File

@@ -26,19 +26,19 @@
.header .header
%h4.title Sort By %h4.title Sort By
%menu-row{"label" => "'Date Added'", "circle" => "ctrl.sortBy == 'created_at' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()", "desc" => "'Sort notes by newest first'"} %menu-row{"label" => "'Date Added'", "circle" => "ctrl.sortBy == 'created_at' && 'success'", "action" => "ctrl.selectedMenuItem(); ctrl.selectedSortByCreated()", "desc" => "'Sort notes by newest first'"}
%menu-row{"label" => "'Date Modified'", "circle" => "ctrl.sortBy == 'client_updated_at' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()", "desc" => "'Sort notes with the most recently updated first'"} %menu-row{"label" => "'Date Modified'", "circle" => "ctrl.sortBy == 'client_updated_at' && 'success'", "action" => "ctrl.selectedMenuItem(); ctrl.selectedSortByUpdated()", "desc" => "'Sort notes with the most recently updated first'"}
%menu-row{"label" => "'Title'", "circle" => "ctrl.sortBy == 'title' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByTitle()", "desc" => "'Sort notes alphabetically by their title'"} %menu-row{"label" => "'Title'", "circle" => "ctrl.sortBy == 'title' && 'success'", "action" => "ctrl.selectedMenuItem(); ctrl.selectedSortByTitle()", "desc" => "'Sort notes alphabetically by their title'"}
.section{"ng-if" => "!ctrl.tag.isSmartTag()"} .section{"ng-if" => "!ctrl.tag.isSmartTag()"}
.header .header
%h4.title Display %h4.title Display
%menu-row{"label" => "'Archived Notes'", "circle" => "ctrl.showArchived ? 'success' : 'danger'", "faded" => "!ctrl.showArchived", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('showArchived')", "desc" => "'Archived notes are usually hidden. You can explicitly show them with this option.'"} %menu-row{"label" => "'Archived Notes'", "circle" => "ctrl.showArchived ? 'success' : 'danger'", "faded" => "!ctrl.showArchived", "action" => "ctrl.selectedMenuItem(); ctrl.toggleKey('showArchived')", "desc" => "'Archived notes are usually hidden. You can explicitly show them with this option.'"}
%menu-row{"label" => "'Pinned Notes'", "circle" => "ctrl.hidePinned ? 'danger' : 'success'", "faded" => "ctrl.hidePinned", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hidePinned')", "desc" => "'Pinned notes always appear on top. You can hide them temporarily with this option so you can focus on other notes in the list.'"} %menu-row{"label" => "'Pinned Notes'", "circle" => "ctrl.hidePinned ? 'danger' : 'success'", "faded" => "ctrl.hidePinned", "action" => "ctrl.selectedMenuItem(); ctrl.toggleKey('hidePinned')", "desc" => "'Pinned notes always appear on top. You can hide them temporarily with this option so you can focus on other notes in the list.'"}
%menu-row{"label" => "'Note Preview'", "circle" => "ctrl.hideNotePreview ? 'danger' : 'success'", "faded" => "ctrl.hideNotePreview", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideNotePreview')", "desc" => "'Hide the note preview for a more condensed list of notes'"} %menu-row{"label" => "'Note Preview'", "circle" => "ctrl.hideNotePreview ? 'danger' : 'success'", "faded" => "ctrl.hideNotePreview", "action" => "ctrl.selectedMenuItem(); ctrl.toggleKey('hideNotePreview')", "desc" => "'Hide the note preview for a more condensed list of notes'"}
%menu-row{"label" => "'Date'", "circle" => "ctrl.hideDate ? 'danger' : 'success'","faded" => "ctrl.hideDate", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideDate')", "desc" => "'Hide the date displayed in each row'"} %menu-row{"label" => "'Date'", "circle" => "ctrl.hideDate ? 'danger' : 'success'","faded" => "ctrl.hideDate", "action" => "ctrl.selectedMenuItem(); ctrl.toggleKey('hideDate')", "desc" => "'Hide the date displayed in each row'"}
%menu-row{"label" => "'Tags'", "circle" => "ctrl.hideTags ? 'danger' : 'success'","faded" => "ctrl.hideTags", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideTags')", "desc" => "'Hide the list of tags associated with each note'"} %menu-row{"label" => "'Tags'", "circle" => "ctrl.hideTags ? 'danger' : 'success'","faded" => "ctrl.hideTags", "action" => "ctrl.selectedMenuItem(); ctrl.toggleKey('hideTags')", "desc" => "'Hide the list of tags associated with each note'"}
.scrollable .scrollable