From 776f6adbfe78c1a0a90b7eeeb2f212b1d716105f Mon Sep 17 00:00:00 2001 From: Mo Bitar Date: Fri, 5 May 2017 01:35:45 -0500 Subject: [PATCH] simplified menu css --- .../app/frontend/controllers/editor.js | 2 +- .../app/frontend/controllers/notes.js | 2 +- .../services/directives/views/editorMenu.js | 2 +- app/assets/stylesheets/app/_common.scss | 70 ------ app/assets/stylesheets/app/_editor.scss | 18 +- app/assets/stylesheets/app/_extensions.scss | 90 -------- app/assets/stylesheets/app/_main.scss | 38 ---- app/assets/stylesheets/app/_menus.scss | 203 ++++++++++++++++++ app/assets/stylesheets/app/_mostrap.scss | 46 ---- app/assets/stylesheets/app/_notes.scss | 3 +- app/assets/stylesheets/frontend.css.scss | 2 +- .../directives/contextual-menu.html.haml | 8 +- .../frontend/directives/editor-menu.html.haml | 25 +-- .../templates/frontend/editor.html.haml | 34 ++- app/assets/templates/frontend/notes.html.haml | 26 ++- 15 files changed, 252 insertions(+), 317 deletions(-) delete mode 100644 app/assets/stylesheets/app/_common.scss create mode 100644 app/assets/stylesheets/app/_menus.scss diff --git a/app/assets/javascripts/app/frontend/controllers/editor.js b/app/assets/javascripts/app/frontend/controllers/editor.js index c99177866..328dba60e 100644 --- a/app/assets/javascripts/app/frontend/controllers/editor.js +++ b/app/assets/javascripts/app/frontend/controllers/editor.js @@ -253,7 +253,7 @@ angular.module('app.frontend') } } - this.selectedMenuItem = function() { + this.selectedMenuItem = function($event) { this.showMenu = false; } diff --git a/app/assets/javascripts/app/frontend/controllers/notes.js b/app/assets/javascripts/app/frontend/controllers/notes.js index 58bc072c3..7fe779a6a 100644 --- a/app/assets/javascripts/app/frontend/controllers/notes.js +++ b/app/assets/javascripts/app/frontend/controllers/notes.js @@ -114,7 +114,7 @@ angular.module('app.frontend') }.bind(this), 100) } - this.selectedMenuItem = function() { + this.selectedMenuItem = function($event) { this.showMenu = false; } diff --git a/app/assets/javascripts/app/services/directives/views/editorMenu.js b/app/assets/javascripts/app/services/directives/views/editorMenu.js index 514f9ee6f..c9c97ac16 100644 --- a/app/assets/javascripts/app/services/directives/views/editorMenu.js +++ b/app/assets/javascripts/app/services/directives/views/editorMenu.js @@ -15,7 +15,7 @@ class EditorMenu { $scope.formData = {}; $scope.editorManager = editorManager; - $scope.selectEditor = function(editor) { + $scope.selectEditor = function($event, editor) { editor.conflict_of = null; // clear conflict if applicable $scope.callback()(editor); } diff --git a/app/assets/stylesheets/app/_common.scss b/app/assets/stylesheets/app/_common.scss deleted file mode 100644 index c7c91c143..000000000 --- a/app/assets/stylesheets/app/_common.scss +++ /dev/null @@ -1,70 +0,0 @@ -.nt-dropdown-menu { - border-radius: 0; - padding: 0 0; - margin-top: 15px; - border: none; - width: 280px; - - li { - height: 35px; - overflow: hidden; - // padding-top: 2px; - - .text { - padding: 10px; - padding-top: 7px; - height: 100%; - height: 100%; - float: left; - } - - .shortcut { - float: right; - font-size: 12px; - font-weight: normal; - opacity: 0.5; - margin-top: 10px; - padding-right: 10px; - } - } -} - -.nt-dropdown-menu.dark { - background-color: white; - color: $selected-text-color; - - li { - &:hover { - background-color: #f5f5f5; - color: black; - } - a { - height: 100%; - font-weight: bold; - } - .text { - color: $selected-text-color; - } - } -} - -.nt-dropdown-menu.light { - background-color: white; - color: black; - - li { - &:hover { - background-color: $dark-gray; - color: white; - a { - color: white; - } - } - a { - color: black; - } - .text { - color: black; - } - } -} diff --git a/app/assets/stylesheets/app/_editor.scss b/app/assets/stylesheets/app/_editor.scss index 0e83e16e1..12d2a1843 100644 --- a/app/assets/stylesheets/app/_editor.scss +++ b/app/assets/stylesheets/app/_editor.scss @@ -16,7 +16,7 @@ $heading-height: 75px; padding: 0; } - .section-menu { + .section-menu-bar { flex: 1 0 28px; max-height: 28px; } @@ -125,19 +125,3 @@ $heading-height: 75px; } } } - -.nav { - padding-left: 0; - margin-bottom: 0; - list-style: none; - ul { - font-weight: bold; - } -} - -.nav>li>a { - position: relative; - display: block; - font-weight: bold; - user-select: none; -} diff --git a/app/assets/stylesheets/app/_extensions.scss b/app/assets/stylesheets/app/_extensions.scss index d35adec8e..a9519d627 100644 --- a/app/assets/stylesheets/app/_extensions.scss +++ b/app/assets/stylesheets/app/_extensions.scss @@ -23,93 +23,3 @@ overflow-y: scroll; } } - -.menu-section-footer { - background-color: #ededed; - border-top: 1px solid #d3d3d3; - position: relative; - padding: 10px; -} - -.menu-section-header { - background-color: #ededed; - border-bottom: 1px solid #d3d3d3; - position: relative; - padding-top: 12px; - padding-left: 10px; - padding-bottom: 10px; - cursor: pointer; - user-select: none; - - - > .title { - font-size: 14px; - font-weight: bold; - } - - > .subtitle { - font-size: 12px; - opacity: 0.5; - font-weight: normal; - margin-top: 2px; - } - - > .loading { - position: absolute; - height: 15px; - width: 15px; - right: 10px; - top: 20px; - } -} - -.dropdown-menu.editor-menu { - overflow-y: scroll; - max-height: calc(85vh - 90px); - - &:not(:first-child) { - margin-top: 18px; - } - - ul { - margin-top: 0px; - margin-bottom: 0px; - list-style:none; - padding-left:0; - - li { - cursor: pointer; - height: auto; - - &.menu-item { - padding: 10px; - border-bottom: 1px solid rgba(black, 0.1); - background-color: rgba(white, 0.9); - - &:hover { - background-color: rgba(gray, 0.05); - } - - &.nonactive { - cursor: default; - &:hover { - background-color: rgba(white, 0.9) !important; - } - } - - .menu-item-title { - font-weight: bold; - font-size: 14px; - margin-bottom: 3px; - } - - .menu-item-subtitle { - font-weight: normal; - opacity: 0.5; - margin-top: 1px; - font-size: 12px; - } - } - } - } -} diff --git a/app/assets/stylesheets/app/_main.scss b/app/assets/stylesheets/app/_main.scss index 621d97678..1ccca42f5 100644 --- a/app/assets/stylesheets/app/_main.scss +++ b/app/assets/stylesheets/app/_main.scss @@ -164,41 +164,3 @@ $section-header-height: 70px; } } } - -.section-menu { - width: 100%; - padding-top: 0px; - padding-left: 21px; - padding-right: 21px; - - background-color: #f1f1f1; - color: $selected-text-color; - height: 28px; - cursor: default; - - ol, ul { - margin-top: 5px; - margin-bottom: 10px; - - &.dropdown-menu { - margin-top: 10px; - } - } - - ul { - li { - text-align: left; - - &.sep { - margin: 6px; - display: block; - } - - a { - font-size: 13px; - font-weight: bold; - padding: 0 0; - } - } - } -} diff --git a/app/assets/stylesheets/app/_menus.scss b/app/assets/stylesheets/app/_menus.scss new file mode 100644 index 000000000..d659fd4ab --- /dev/null +++ b/app/assets/stylesheets/app/_menus.scss @@ -0,0 +1,203 @@ +ul.section-menu-bar { + width: 100%; + padding-top: 0px; + padding-left: 15px; + padding-right: 21px; + + background-color: #f1f1f1; + color: $selected-text-color; + height: 28px; + cursor: default; + + margin-top: 0px; + margin-bottom: 0; + list-style: none; + font-weight: bold; + font-size: 0; /* trick to remove gaps between li inline-block elements */ + + > li { + padding: 6px 8px; + text-align: left; + display: inline-block; + position: relative; + + font-size: 13px; + font-weight: bold; + user-select: none; + + &.selected { + background-color: $blue-color; + border-radius: 1px; + color: white; + } + } +} + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + float: left; + min-width: 160px; + z-index: 100; + + list-style: none; + font-size: 14px; + text-align: left; + + padding: 0 0; + border: none; + width: 280px; + + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + background-clip: padding-box; + + background-color: white; + color: $selected-text-color; + + li:hover { + background-color: $blue-color; + color: white; + } + + > li { + width: 100%; + height: 35px; + overflow: hidden; + cursor: pointer; + + color: $selected-text-color; + float: left; + + label { + padding: 10px; + padding-top: 8px; + width: 100%; + height: 100%; + display: block; + cursor: pointer; + } + + + .shortcut { + float: right; + font-size: 12px; + font-weight: normal; + opacity: 0.5; + margin-top: 10px; + padding-right: 10px; + } + } +} + + + + + + + + + +.dropdown-menu.sectioned-menu { + overflow-y: scroll; + max-height: calc(85vh - 90px); + + &:not(:first-child) { + margin-top: 18px; + } + + ul { + margin-top: 0px; + margin-bottom: 0px; + padding-left:0; + position: relative; + + li { + cursor: pointer; + height: auto; + + padding: 10px; + border-bottom: 1px solid rgba(black, 0.1); + background-color: rgba(white, 0.9); + height: auto; + + .left-side { + left: 0; + width: 60%; + display: inline-block; + vertical-align: top; + user-select: text; + } + + .right-side { + right: 12px; + width: 30%; + display: inline-block; + vertical-align: top; + text-align: right; + position: absolute; + } + + &:hover { + background-color: $blue-color; + + .blue { + color: white; + } + } + + .menu-item-title { + font-weight: bold; + font-size: 14px; + margin-bottom: 3px; + } + + .menu-item-subtitle { + font-weight: normal; + opacity: 0.5; + margin-top: 1px; + font-size: 12px; + } + } + } + + .header { + background-color: #ededed; + border-bottom: 1px solid #d3d3d3; + position: relative; + padding-top: 12px; + padding-left: 10px; + padding-bottom: 10px; + cursor: pointer; + user-select: none; + + + > .title { + font-size: 14px; + font-weight: bold; + } + + > .subtitle { + font-size: 12px; + opacity: 0.5; + font-weight: normal; + margin-top: 2px; + } + + > .loading { + position: absolute; + height: 15px; + width: 15px; + right: 10px; + top: 20px; + } + } + + .footer { + background-color: #ededed; + border-top: 1px solid #d3d3d3; + position: relative; + padding: 10px; + } +} diff --git a/app/assets/stylesheets/app/_mostrap.scss b/app/assets/stylesheets/app/_mostrap.scss index 51b315c0c..76ca64788 100644 --- a/app/assets/stylesheets/app/_mostrap.scss +++ b/app/assets/stylesheets/app/_mostrap.scss @@ -63,54 +63,8 @@ $screen-md-max: ($screen-lg-min - 1) !default; *:focus {outline:0;} -.dropup, .dropdown { - position: relative; -} - -.dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: 1000; - // display: none; - float: left; - min-width: 160px; - padding: 5px 0; - margin: 2px 0 0; - list-style: none; - font-size: 14px; - text-align: left; - background-color: #fff; - border: 1px solid #ccc; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 4px; - -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - background-clip: padding-box; -} - -.dropdown-menu>li>a { - display: block; - padding: 3px 20px; - clear: both; - font-weight: 400; - line-height: 1.42857143; - color: #333; - white-space: nowrap; -} - -.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { - text-decoration: none; - cursor: pointer; -} - button:focus {outline:0;} -.dropdown-menu-right { - left: auto; - right: 0; -} - .btn { display: inline-block; margin-bottom: 0; diff --git a/app/assets/stylesheets/app/_notes.scss b/app/assets/stylesheets/app/_notes.scss index b0682230f..e792f6041 100644 --- a/app/assets/stylesheets/app/_notes.scss +++ b/app/assets/stylesheets/app/_notes.scss @@ -24,11 +24,10 @@ right: 20px; } - .tag-menu-bar { + #tag-menu-bar { position: relative; margin: 0 -20px; width: auto; - padding-top: 1px; margin-top: 14px; } diff --git a/app/assets/stylesheets/frontend.css.scss b/app/assets/stylesheets/frontend.css.scss index 904cb614a..401325815 100644 --- a/app/assets/stylesheets/frontend.css.scss +++ b/app/assets/stylesheets/frontend.css.scss @@ -3,9 +3,9 @@ $dark-gray: #2e2e2e; @import "app/standard"; @import "app/mostrap"; @import "app/main"; -@import "app/common"; @import "app/header"; @import "app/tags"; @import "app/notes"; @import "app/editor"; @import "app/extensions"; +@import "app/menus"; diff --git a/app/assets/templates/frontend/directives/contextual-menu.html.haml b/app/assets/templates/frontend/directives/contextual-menu.html.haml index 217f191db..113596128 100644 --- a/app/assets/templates/frontend/directives/contextual-menu.html.haml +++ b/app/assets/templates/frontend/directives/contextual-menu.html.haml @@ -1,6 +1,6 @@ -%ul.dropdown-menu.dropdown-menu-left.nt-dropdown-menu.dark.editor-menu +%ul.dropdown-menu.sectioned-menu .extension{"ng-repeat" => "extension in extensions"} - .menu-section-header{"ng-click" => "extension.hide = !extension.hide"} + .header{"ng-click" => "extension.hide = !extension.hide"} .title {{extension.name}} .subtitle Will submit your note @@ -8,7 +8,7 @@ .spinner.loading{"ng-if" => "extension.loading"} %div{"ng-if" => "extension.hide"} … %ul{"ng-if" => "!extension.hide"} - %li.menu-item{"ng-repeat" => "action in extension.actionsWithContextForItem(item)", "ng-click" => "executeAction(action, extension)", + %li.menu-item{"ng-repeat" => "action in extension.actionsWithContextForItem(item)", "ng-click" => "executeAction(action, extension);", "ng-class" => "{'faded' : !isActionEnabled(action, extension)}"} .menu-item-title {{action.label}} .menu-item-subtitle {{action.desc}} @@ -18,7 +18,7 @@ %div{"ng-if" => "action.showNestedActions"} %ul.mt-10 - %li.menu-item.white-bg{"ng-repeat" => "subaction in action.subactions", "ng-click" => "executeAction(subaction, extension); $event.stopPropagation()", "style" => "margin-top: -1px;"} + %li.menu-item.white-bg{"ng-repeat" => "subaction in action.subactions", "ng-click" => "executeAction(subaction, extension);", "style" => "margin-top: -1px;"} .menu-item-title {{subaction.label}} .menu-item-subtitle {{subaction.desc}} %span{"ng-if" => "subaction.running"} diff --git a/app/assets/templates/frontend/directives/editor-menu.html.haml b/app/assets/templates/frontend/directives/editor-menu.html.haml index fae7ca3b9..4238fd52b 100644 --- a/app/assets/templates/frontend/directives/editor-menu.html.haml +++ b/app/assets/templates/frontend/directives/editor-menu.html.haml @@ -1,28 +1,29 @@ -%ul.dropdown-menu.dropdown-menu-left.nt-dropdown-menu.dark.editor-menu - .menu-section-header +%ul.dropdown-menu.sectioned-menu + .header .title System Editors %ul - %li.menu-item{"ng-repeat" => "editor in editorManager.systemEditors", "ng-click" => "selectEditor(editor)"} + %li.menu-item{"ng-repeat" => "editor in editorManager.systemEditors", "ng-click" => "selectEditor($event, editor)"} %span.pull-left.mr-10{"ng-if" => "selectedEditor === editor"} ✓ .menu-item-title.pull-left {{editor.name}} %div{"ng-if" => "editorManager.externalEditors.length > 0"} - .menu-section-header + .header .title External Editors .subtitle Can access your current note decrypted. %ul - %li.menu-item{"ng-repeat" => "editor in editorManager.externalEditors", "ng-click" => "selectEditor(editor)"} + %li.menu-item{"ng-repeat" => "editor in editorManager.externalEditors", "ng-click" => "selectEditor($event, editor)"} - .pull-left{"style" => "width: 60%"} + .left-side %strong.red.medium{"ng-if" => "editor.conflict_of"} Conflicted copy .menu-item-title {{editor.name}} %a.faded{"ng-if" => "!editor.default", "ng-click" => "setDefaultEditor(editor); $event.stopPropagation();"} Set Default - %a.red{"ng-if" => "editor.default", "ng-click" => "removeDefaultEditor(editor); $event.stopPropagation();"} Remove Default + %a.blue{"ng-if" => "editor.default", "ng-click" => "removeDefaultEditor(editor); $event.stopPropagation();"} Remove Default %a.faded{"ng-click" => "editor.showUrl = !editor.showUrl; $event.stopPropagation();"} Show URL - .menu-item-subtitle.wrap{"ng-if" => "editor.showUrl"} {{editor.url}} - %span.pull-left.ml-10{"ng-if" => "selectedEditor === editor"} ✓ - .pull-right - %button.white.medium.inline.top{"style" => "width: 50px; height: 40px;", "ng-click" => "deleteEditor(editor); $event.stopPropagation();"} ☓ - .menu-section-footer.mt-10 + .menu-item-subtitle.wrap.mt-5{"ng-if" => "editor.showUrl"} {{editor.url}} + + %span.inline.ml-10{"ng-if" => "selectedEditor === editor"} ✓ + .right-side + %button.white.medium{"style" => "width: 50px; height: 40px;", "ng-click" => "deleteEditor(editor); $event.stopPropagation();"} ☓ + .footer.mt-10 %input.form-control{"ng-model" => "formData.url", "placeholder" => "Add new editor via URL", "ng-keyup" => "$event.keyCode == 13 && submitNewEditorRequest()"} %a.block.blue{"href" => "https://standardnotes.org/extensions", "target" => "_blank"} Available Editors diff --git a/app/assets/templates/frontend/editor.html.haml b/app/assets/templates/frontend/editor.html.haml index e36e9ca9f..8e517d6bf 100644 --- a/app/assets/templates/frontend/editor.html.haml +++ b/app/assets/templates/frontend/editor.html.haml @@ -10,29 +10,23 @@ .editor-tags %input.tags-input{"type" => "text", "ng-keyup" => "$event.keyCode == 13 && $event.target.blur();", "ng-model" => "ctrl.tagsString", "placeholder" => "#tags", "ng-blur" => "ctrl.updateTagsFromTagsString($event, ctrl.tagsString)"} - .section-menu{"ng-if" => "ctrl.note"} - %ul.nav - %li.dropdown.pull-left.mr-15{"click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"} - %a.dropdown-toggle{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false; ctrl.showEditorMenu = false;"} - Menu + %ul.section-menu-bar{"ng-if" => "ctrl.note"} + %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.dropdown-menu-left.nt-dropdown-menu.dark{"ng-if" => "ctrl.showMenu"} - %li{"ng-click" => "ctrl.selectedMenuItem(); ctrl.toggleFullScreen()"} - .text Toggle Fullscreen - %li{"ng-click" => "ctrl.deleteNote()"} - .text Delete Note + %ul.dropdown-menu{"ng-if" => "ctrl.showMenu"} + %li + %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleFullScreen()"} Toggle Fullscreen + %li + %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"} Delete Note - %li.sep - %li.dropdown.pull-left.mr-15{"click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"} - %a.dropdown-toggle{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false; ctrl.showExtensions = false;"} - Editor - %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.selectedEditor", "selected-editor" => "ctrl.editor"} + %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 + %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.selectedEditor", "selected-editor" => "ctrl.editor"} - %li.sep - %li.dropdown.pull-left{"ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"} - %a.dropdown-toggle{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false; ctrl.showEditorMenu = false;"} - Actions - %contextual-extensions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"} + %li{"ng-class" => "{'selected' : ctrl.showExtensions}", "ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"} + %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", "ng-class" => "{'fullscreen' : ctrl.fullscreen }"} %iframe#editor-iframe{"ng-if" => "ctrl.editor && !ctrl.editor.systemEditor", "ng-src" => "{{ctrl.editor.url | trusted}}", "frameBorder" => "0", "style" => "width: 100%;"} diff --git a/app/assets/templates/frontend/notes.html.haml b/app/assets/templates/frontend/notes.html.haml index a597e5829..689a34bad 100644 --- a/app/assets/templates/frontend/notes.html.haml +++ b/app/assets/templates/frontend/notes.html.haml @@ -6,21 +6,19 @@ %br .filter-section %input.filter-bar{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true"} - .section-menu.tag-menu-bar - %ul.nav.nav-pills - %li.dropdown - %a.dropdown-toggle{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"} - Sort + %ul.section-menu-bar#tag-menu-bar + %li{"ng-class" => "{'selected' : ctrl.showMenu}"} + %label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"} Sort - %ul.dropdown-menu.dropdown-menu-left.nt-dropdown-menu.dark{"ng-if" => "ctrl.showMenu"} - %li - %a.text{"ng-click" => "ctrl.selectedMenuItem(); ctrl.selectedSortByCreated()"} - %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'created_at'"} ✓ - By date added - %li - %a.text{"ng-click" => "ctrl.selectedMenuItem(); ctrl.selectedSortByUpdated()"} - %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'updated_at'"} ✓ - By date modified + %ul.dropdown-menu{"ng-if" => "ctrl.showMenu"} + %li + %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()"} + %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'created_at'"} ✓ + By date added + %li + %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()"} + %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'updated_at'"} ✓ + By date modified .scrollable .infinite-scroll{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}