Fix card options menu

js/directive/appPopoverMenuUtils.js

@@ -0,0 +1,47 @@
+/*
+ * @copyright Copyright (c) 2016 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *  
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as
+ *  published by the Free Software Foundation, either version 3 of the
+ *  License, or (at your option) any later version.
+ *  
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *  
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *  
+ */
+
+app.directive('appPopoverMenuUtils', function () {
+    'use strict';
+    return {
+        restrict: 'C',
+        link: function (scope, elm) {
+            var menu = elm.find('.popovermenu');
+            var button = elm.find('button');
+            button.click(function () {
+                menu.toggleClass('hidden');
+                if(!menu.hasClass('hidden')) {
+                    button.css('display','block');
+                } else {
+                    button.css('display','');
+                }
+            });
+            scope.$on('documentClicked', function (scope, event) {
+                if (event.target !== button) {
+                    menu.addClass('hidden');
+                }
+                button.css('display','');
+            });
+        }
+    };
+});
+

js/public/app.js

@@ -119,7 +119,7 @@ app.controller('BoardController', ["$rootScope", "$scope", "$stateParams", "Stat
   $scope.sidebar = $rootScope.sidebar;
 
   $scope.id = $stateParams.boardId;
-  $scope.status={};
+  $scope.status={},
   $scope.newLabel={};
   $scope.status.boardtab = $stateParams.detailTab;
 
@@ -642,6 +642,32 @@ app.directive('appNavigationEntryUtils', function () {
 });
 
 
+app.directive('appPopoverMenuUtils', function () {
+    'use strict';
+    return {
+        restrict: 'C',
+        link: function (scope, elm) {
+            var menu = elm.find('.popovermenu');
+            var button = elm.find('button');
+            button.click(function () {
+                menu.toggleClass('hidden');
+                if(!menu.hasClass('hidden')) {
+                    button.css('display','block');
+                } else {
+                    button.css('display','');
+                }
+            });
+            scope.$on('documentClicked', function (scope, event) {
+                if (event.target !== button) {
+                    menu.addClass('hidden');
+                }
+                button.css('display','');
+            });
+        }
+    };
+});
+
+
 app.directive('autofocusOnInsert', function () {
     'use strict';
     return function (scope, elm) {

templates/part.board.mainView.php

@@ -59,11 +59,11 @@
 							</ul>
 
 						</div>
+						<div class="app-popover-menu-utils">
 						<button class="card-options icon-more"
 								ng-click="c.status.showMenu=!c.status.showMenu; $event.stopPropagation();"
 								ng-model="card"></button>
-						<div class="popovermenu bubble"
+						<div class="popovermenu bubble hidden">
-							 ng-show="c.status.showMenu">
 							<ul>
 								<li ng-if="filter!=='archive'">
 									<a class="menuitem action action-rename permanent"
@@ -85,6 +85,7 @@
 								</li>
 							</ul>
 						</div>
+							</div>
 						<div class="card-assignees" ng-if="c.assignees">
 							<!--   <div class="avatar" avatar user="{{c.owner}}" size="24"></div>//-->
 						</div>