diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js index 6cf5f68461..de497ccffe 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js @@ -155,7 +155,6 @@ angular.module('umbraco.directives') var els = ["INPUT","A","BUTTON"]; if(els.indexOf(el) >= 0){return;} - // ignore children of links and buttons // ignore clicks on new overlay var parents = $(event.target).parents("a,button,.umb-overlay"); if(parents.length > 0){ diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js new file mode 100644 index 0000000000..d6006114a6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js @@ -0,0 +1,133 @@ +/** +@ngdoc directive +@name umbraco.directives.directive:umbDropdown +@restrict E +@scope + +@description +Added in versions 7.7.0: Use this component to render a dropdown menu. + +

Markup example

+
+    

+
+        

+
+            
+            
+
+            
+                
+                    {{ item.name }}
+                
+            
+
+        

+
+    

+
+ +

Controller example

+
+    (function () {
+        "use strict";
+
+        function Controller() {
+
+            var vm = this;
+
+            vm.dropdownOpen = false;
+            vm.items = [
+                { "name": "Item 1" },
+                { "name": "Item 2" },
+                { "name": "Item 3" }
+            ];
+
+            vm.toggle = toggle;
+            vm.close = close;
+            vm.select = select;
+
+            function toggle() {
+                vm.dropdownOpen = true;
+            }
+
+            function close() {
+                vm.dropdownOpen = false;
+            }
+
+            function select(item) {
+                // Do your magic here
+            }
+
+        }
+
+        angular.module("umbraco").controller("MyDropdown.Controller", Controller);
+    })();
+
+ +

Use in combination with

+ + +@param {callback} onClose Callback when the dropdown menu closes. When you click outside or press esc. + +**/ + +(function() { + 'use strict'; + + function umbDropdown($document) { + + function link(scope, element, attr, ctrl) { + + scope.close = function() { + if (scope.onClose) { + scope.onClose(); + } + }; + + // Handle keydown events + function keydown(event) { + // press escape + if(event.keyCode === 27) { + scope.onClose(); + } + } + + // Stop to listen typing. + function stopListening() { + $document.off('keydown', keydown); + } + + // Start listening to key typing. + $document.on('keydown', keydown); + + // Stop listening when scope is destroyed. + scope.$on('$destroy', stopListening); + + } + + var directive = { + restrict: 'E', + replace: true, + transclude: true, + templateUrl: 'views/components/umb-dropdown.html', + scope: { + onClose: "&" + }, + link: link + }; + + return directive; + + } + + angular.module('umbraco.directives').directive('umbDropdown', umbDropdown); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownitem.directive.js new file mode 100644 index 0000000000..59b2b827eb --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownitem.directive.js @@ -0,0 +1,29 @@ +/** +@ngdoc directive +@name umbraco.directives.directive:umbDropdownItem +@restrict E + +@description +Added in versions 7.7.0: Use this directive to construct a dropdown item. See documentation for {@link umbraco.directives.directive:umbDropdown umbDropdown}. + +**/ + +(function() { + 'use strict'; + + function umbDropdownItem() { + + var directive = { + restrict: 'E', + replace: true, + transclude: true, + templateUrl: 'views/components/umb-dropdown-item.html', + }; + + return directive; + + } + + angular.module('umbraco.directives').directive('umbDropdownItem', umbDropdownItem); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js new file mode 100644 index 0000000000..187228f0c4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js @@ -0,0 +1,115 @@ +/** +@ngdoc directive +@name umbraco.directives.directive:umbKeyboardList +@restrict E + +@description +Added in versions 7.7.0: Use this directive to add arrow up and down keyboard shortcuts to a list. Use this together with the {@link umbraco.directives.directive:umbDropdown umbDropdown} component to make easy accessible dropdown menus. + +

Markup example

+
+    

+        
+    

+
+ +

Use in combination with

+ + +**/ + +angular.module('umbraco.directives') + .directive('umbKeyboardList', ['$document', '$timeout', function ($document, $timeout) { + + return { + restrict: 'A', + link: function (scope, element, attr) { + + var listItems = []; + var currentIndex = 0; + var focusSet = false; + + $timeout(function(){ + // get list of all links in the list + listItems = element.find("li a"); + }); + + // Handle keydown events + function keydown(event) { + $timeout(function(){ + checkFocus(); + // arrow down + if (event.keyCode === 40) { + arrowDown(); + } + // arrow up + if (event.keyCode === 38) { + arrowUp(); + } + }); + } + + function checkFocus() { + var found = false; + + // check if any element has focus + angular.forEach(listItems, function (item, index) { + if ($(item).is(":focus")) { + // if an element already has focus set the + // currentIndex so we navigate from that element + currentIndex = index; + focusSet = true; + found = true; + } + }); + + // If we don't find an element with focus we reset the currentIndex and the focusSet flag + // we do this because you can have navigated away from the list with tab and we want to reset it if you navigate back + if (!found) { + currentIndex = 0; + focusSet = false; + } + } + + function arrowDown() { + if (currentIndex < listItems.length - 1) { + // only bump the current index if the focus is already + // set else we just want to focus the first element + if (focusSet) { + currentIndex++; + } + listItems[currentIndex].focus(); + focusSet = true; + } + } + + function arrowUp() { + if (currentIndex > 0) { + currentIndex--; + listItems[currentIndex].focus(); + } + } + + // Stop to listen typing. + function stopListening() { + $document.off('keydown', keydown); + } + + // Start listening to key typing. + $document.on('keydown', keydown); + + // Stop listening when scope is destroyed. + scope.$on('$destroy', stopListening); + + } + }; + }]); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-item.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-item.html new file mode 100644 index 0000000000..11fe294919 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-item.html @@ -0,0 +1 @@ +
  • \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html new file mode 100644 index 0000000000..141793f6b1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js index abbacf5040..dd544fc94e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js @@ -68,6 +68,7 @@ } ]; + vm.toggleFilter = toggleFilter; vm.setUsersViewState = setUsersViewState; vm.selectLayout = selectLayout; vm.selectUser = selectUser; @@ -117,6 +118,28 @@ return found ? found.label : sortKey; } + function toggleFilter(type) { + // hack: on-outside-click prevents us from closing the dropdown when clicking on another link + // so I had to do this manually + switch (type) { + case "state": + vm.page.showStatusFilter = !vm.page.showStatusFilter; + vm.page.showGroupFilter = false; + vm.page.showOrderByFilter = false; + break; + case "group": + vm.page.showGroupFilter = !vm.page.showGroupFilter; + vm.page.showStatusFilter = false; + vm.page.showOrderByFilter = false; + break; + case "orderBy": + vm.page.showOrderByFilter = !vm.page.showOrderByFilter; + vm.page.showStatusFilter = false; + vm.page.showGroupFilter = false; + break; + } + } + function setUsersViewState(state) { if (state === "createUser") { diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html index 4490b33e43..1ea26e0585 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html @@ -1,7 +1,5 @@
    - - @@ -102,51 +100,51 @@
    -
    - +
    + Status: {{ vm.getFilterName(vm.userStatesFilter) }} - + +
    -
    - +
    + : {{ vm.getFilterName(vm.userGroups) }} - + +
    -
    - +