From f17c5995c63d0d9d6483ffd16e123f2da0c39481 Mon Sep 17 00:00:00 2001 From: Mo Bitar Date: Thu, 31 May 2018 11:26:30 -0500 Subject: [PATCH] Interface tooltip titles --- .../app/directives/views/menuRow.js | 5 ++-- .../directives/actions-menu.html.haml | 4 +-- .../directives/editor-menu.html.haml | 8 +++--- .../templates/directives/menu-row.html.haml | 6 ++--- app/assets/templates/editor.html.haml | 14 +++++------ app/assets/templates/notes.html.haml | 25 ++++++++++--------- app/assets/templates/tags.html.haml | 4 +-- 7 files changed, 34 insertions(+), 32 deletions(-) diff --git a/app/assets/javascripts/app/directives/views/menuRow.js b/app/assets/javascripts/app/directives/views/menuRow.js index fe7a988f0..468212fd2 100644 --- a/app/assets/javascripts/app/directives/views/menuRow.js +++ b/app/assets/javascripts/app/directives/views/menuRow.js @@ -6,7 +6,7 @@ class MenuRow { this.templateUrl = "directives/menu-row.html"; this.scope = { circle: "=", - title: "=", + label: "=", subtite: "=", hasButton: "=", buttonText: "=", @@ -14,7 +14,8 @@ class MenuRow { buttonAction: "&", spinnerClass: "=", subRows: "=", - faded: "=" + faded: "=", + desc: "=" }; } diff --git a/app/assets/templates/directives/actions-menu.html.haml b/app/assets/templates/directives/actions-menu.html.haml index 166d479c9..9fe6397b1 100644 --- a/app/assets/templates/directives/actions-menu.html.haml +++ b/app/assets/templates/directives/actions-menu.html.haml @@ -2,7 +2,7 @@ .menu-panel.dropdown-menu %a.no-decoration{"ng-if" => "extensions.length == 0", "href" => "https://standardnotes.org/extensions", "target" => "blank"} - %menu-row{"title" => "'Download Actions'"} + %menu-row{"label" => "'Download Actions'"} %div{"ng-repeat" => "extension in extensions"} .header{"ng-click" => "extension.hide = !extension.hide; $event.stopPropagation();"} @@ -12,7 +12,7 @@ %div{"ng-if" => "extension.hide"} … %menu-row{"ng-if" => "!extension.hide", "ng-repeat" => "action in extension.actionsWithContextForItem(item)", - "ng-click" => "executeAction(action, extension); $event.stopPropagation();", "title" => "action.label", "subtitle" => "action.desc", + "ng-click" => "executeAction(action, extension); $event.stopPropagation();", "label" => "action.label", "subtitle" => "action.desc", "spinner-class" => "action.running ? 'info' : null", "sub-rows" => "action.subrows"} .sublabel{"ng-if" => "action.access_type"} Uses diff --git a/app/assets/templates/directives/editor-menu.html.haml b/app/assets/templates/directives/editor-menu.html.haml index e70f4b80b..0a7c544df 100644 --- a/app/assets/templates/directives/editor-menu.html.haml +++ b/app/assets/templates/directives/editor-menu.html.haml @@ -3,9 +3,9 @@ .section .header %h4.title Note Editor - %menu-row{"title" => "'Plain Editor'", "circle" => "selectedEditor == null && 'success'", "ng-click" => "selectComponent($event, null)"} + %menu-row{"label" => "'Plain Editor'", "circle" => "selectedEditor == null && 'success'", "ng-click" => "selectComponent($event, null)"} - %menu-row{"ng-repeat" => "editor in editors", "ng-click" => "selectComponent($event, editor)", "title" => "editor.name", + %menu-row{"ng-repeat" => "editor in editors", "ng-click" => "selectComponent($event, editor)", "label" => "editor.name", "circle" => "selectedEditor === editor && 'success'", "has-button" => "selectedEditor == editor || defaultEditor == editor", "button-text" => "defaultEditor == editor ? 'Undefault' : 'Set Default'", "button-action" => "toggleDefaultForEditor(editor)", "button-class" => "defaultEditor == editor ? 'warning' : 'info'"} @@ -14,12 +14,12 @@ .sublabel{"ng-if" => "shouldDisplayRunningLocallyLabel(editor)"} Running Locally %a.no-decoration{"ng-if" => "editors.length == 0", "href" => "https://standardnotes.org/extensions", "target" => "blank"} - %menu-row{"title" => "'Download More Editors'"} + %menu-row{"label" => "'Download More Editors'"} .section{"ng-if" => "stack.length > 0"} .header %h4.title Editor Stack - %menu-row{"ng-repeat" => "component in stack", "ng-click" => "selectComponent($event, component)", "title" => "component.name", + %menu-row{"ng-repeat" => "component in stack", "ng-click" => "selectComponent($event, component)", "label" => "component.name", "circle" => "stackComponentEnabled(component) ? 'success' : 'danger'"} .column{"ng-if" => "component.conflict_of || shouldDisplayRunningLocallyLabel(component)"} %strong.red.medium-text{"ng-if" => "component.conflict_of"} Conflicted copy diff --git a/app/assets/templates/directives/menu-row.html.haml b/app/assets/templates/directives/menu-row.html.haml index 7bbff5528..970b6f723 100644 --- a/app/assets/templates/directives/menu-row.html.haml +++ b/app/assets/templates/directives/menu-row.html.haml @@ -1,17 +1,17 @@ -.row +.row{"ng-attr-title" => "{{desc}}"} .column .left .column{"ng-if" => "circle"} .circle.small{"ng-class" => "circle"} .column{"ng-class" => "{'faded' : faded}"} .label - {{title}} + {{label}} .sublabel{"ng-if" => "subtitle"} {{subtitle}} %ng-transclude .subrows{"ng-if" => "subRows && subRows.length > 0"} %menu-row{"ng-repeat" => "row in subRows", "ng-click" => "row.onClick($event); $event.stopPropagation();", - "title" => "row.title", "subtitle" => "row.subtitle", "spinner-class" => "row.spinnerClass"} + "label" => "row.label", "subtitle" => "row.subtitle", "spinner-class" => "row.spinnerClass"} .column{"ng-if" => "hasButton"} .button.info{"ng-click" => "clickButton($event)", "ng-class" => "buttonClass"} diff --git a/app/assets/templates/editor.html.haml b/app/assets/templates/editor.html.haml index ee46ab7e0..1bd54c92e 100644 --- a/app/assets/templates/editor.html.haml +++ b/app/assets/templates/editor.html.haml @@ -1,4 +1,4 @@ -.section.editor#editor-column +.section.editor#editor-column{"aria-label" => "Note"} .sn-component .app-bar.no-edges{"ng-if" => "ctrl.note.locked", "ng-init" => "ctrl.lockText = 'Note Locked'", "ng-mouseover" => "ctrl.lockText = 'Unlock'", "ng-mouseleave" => "ctrl.lockText = 'Note Locked'"} .left @@ -31,16 +31,16 @@ .section .header %h4.title Note Options - %menu-row{"title" => "ctrl.note.pinned ? 'Unpin' : 'Pin'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.togglePin()"} - %menu-row{"title" => "ctrl.note.archived ? 'Unarchive' : 'Archive'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.toggleArchiveNote()"} - %menu-row{"title" => "ctrl.note.locked ? 'Unlock' : 'Lock'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.toggleLockNote()"} - %menu-row{"title" => "'Delete'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"} + %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.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.locked ? 'Unlock' : 'Lock'", "ng-click" => "ctrl.selectedMenuItem($event, 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'"} .section{"ng-if" => "!ctrl.selectedEditor"} .header %h4.title Global Display - %menu-row{"title" => "'Monospace Font'", "circle" => "ctrl.monospaceFont ? 'success' : 'default'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.toggleKey('monospaceFont')"} - %menu-row{"title" => "'Spellcheck'", "circle" => "ctrl.spellcheck ? 'success' : 'default'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.toggleKey('spellcheck')"} + %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'"} .item{"ng-click" => "ctrl.onEditorMenuClick()", "ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"} .label Editor diff --git a/app/assets/templates/notes.html.haml b/app/assets/templates/notes.html.haml index bdcb4cacf..ac2c81dcb 100644 --- a/app/assets/templates/notes.html.haml +++ b/app/assets/templates/notes.html.haml @@ -1,13 +1,14 @@ -.section.notes#notes-column +.section.notes#notes-column{"aria-label" => "Notes"} .content .section-title-bar#notes-title-bar .padded .section-title-bar-header .title {{ctrl.panelTitle()}} - .add-button#notes-add-button{"ng-click" => "ctrl.createNewNote()"} + - .filter-section + .add-button#notes-add-button{"ng-click" => "ctrl.createNewNote()", "title" => "Create a new note in the selected tag"} + + .filter-section{"role" => "search"} %input.filter-bar#search-bar.mousetrap{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", - "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true", "ng-blur" => "ctrl.onFilterEnter()", "ng-keyup" => "$event.keyCode == 13 && ctrl.onFilterEnter();"} + "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true", "ng-blur" => "ctrl.onFilterEnter()", "ng-keyup" => "$event.keyCode == 13 && ctrl.onFilterEnter();", + "title" => "Searches notes in the currently selected tag"} #search-clear-button{"ng-if" => "ctrl.noteFilter.text", "ng-click" => "ctrl.clearFilterText();"} ✕ .sn-component#notes-menu-bar .app-bar.no-edges @@ -25,19 +26,19 @@ .header %h4.title Sort By - %menu-row{"title" => "'Date Added'", "circle" => "ctrl.sortBy == 'created_at' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()"} - %menu-row{"title" => "'Date Modified'", "circle" => "ctrl.sortBy == 'updated_at' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()"} - %menu-row{"title" => "'Title'", "circle" => "ctrl.sortBy == 'title' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByTitle()"} + %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 Modified'", "circle" => "ctrl.sortBy == 'updated_at' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); 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'"} .section{"ng-if" => "!ctrl.tag.archiveTag"} .header %h4.title Display - %menu-row{"title" => "'Archived Notes'", "circle" => "ctrl.showArchived ? 'success' : 'danger'", "faded" => "!ctrl.showArchived", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('showArchived')"} - %menu-row{"title" => "'Pinned Notes'", "circle" => "ctrl.hidePinned ? 'danger' : 'success'", "faded" => "ctrl.hidePinned", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hidePinned')"} - %menu-row{"title" => "'Note Preview'", "circle" => "ctrl.hideNotePreview ? 'danger' : 'success'", "faded" => "ctrl.hideNotePreview", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideNotePreview')"} - %menu-row{"title" => "'Date'", "circle" => "ctrl.hideDate ? 'danger' : 'success'","faded" => "ctrl.hideDate", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideDate')"} - %menu-row{"title" => "'Tags'", "circle" => "ctrl.hideTags ? 'danger' : 'success'","faded" => "ctrl.hideTags", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideTags')"} + %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" => "'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" => "'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" => "'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" => "'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'"} .scrollable diff --git a/app/assets/templates/tags.html.haml b/app/assets/templates/tags.html.haml index 80c48767d..9f04c49e4 100644 --- a/app/assets/templates/tags.html.haml +++ b/app/assets/templates/tags.html.haml @@ -1,4 +1,4 @@ -.section.tags#tags-column +.section.tags#tags-column{"aria-label" => "Tags"} .component-view-container{"ng-if" => "ctrl.component.active"} %component-view.component-view{"component" => "ctrl.component"} @@ -7,7 +7,7 @@ #tags-title-bar.section-title-bar .section-title-bar-header .title Tags - .add-button#tag-add-button{"ng-click" => "ctrl.clickedAddNewTag()"} + + .add-button#tag-add-button{"ng-click" => "ctrl.clickedAddNewTag()", "title" => "Create a new tag"} + .scrollable .infinite-scroll