Fix issue about menu not disappearing on firmware page
In firmware update page "More info” dialog did not disappear until
it is clicked again. With this push users can click anywhere outside
the menu and it disappears.
Resolves openbmc/phosphor-webui#32
Change-Id: I1519caf2428c702af03fb0e4dd8a08d0c0588abf
Signed-off-by: Ryan Arnell <iffy.ryan@ibm.com>
diff --git a/app/common/directives/click-outside.js b/app/common/directives/click-outside.js
new file mode 100644
index 0000000..ffe1464
--- /dev/null
+++ b/app/common/directives/click-outside.js
@@ -0,0 +1,24 @@
+window.angular && (function(angular) {
+ 'use strict';
+
+ angular.module('app.common.directives')
+ .directive('clickOutside', function($document) {
+ return {
+ restrict: 'A', scope: {clickOutside: '&'},
+ link: function(scope, el, attr) {
+ function clickEvent(e) {
+ if (el !== e.target && !el[0].contains(e.target)) {
+ scope.$apply(function() {
+ scope.$eval(scope.clickOutside);
+ });
+ }
+ }
+ $document.bind('click', clickEvent);
+
+ scope.$on('$destroy', function() {
+ $document.unbind('click', clickEvent);
+ });
+ }
+ }
+ });
+})(window.angular);
\ No newline at end of file
diff --git a/app/common/directives/firmware-list.html b/app/common/directives/firmware-list.html
index 00fb8f2..1227a20 100644
--- a/app/common/directives/firmware-list.html
+++ b/app/common/directives/firmware-list.html
@@ -39,7 +39,7 @@
</div>
<div class="table__cell firmware__version" ng-class="{'active':firmware.isExtended}">
<span class="table__cell-label">Version:</span>{{firmware.Version}}
- <div class="icon icon__more" ng-click="firmware.extended.show = ! firmware.extended.show"
+ <div class="icon icon__more" ng-click="toggleMoreDropdown($event, firmware)"
ng-class="{'active':firmware.isExtended}" ng-show="firmware.isExtended">
<svg version="1.1" x="0px" y="0px" viewBox="0 0 24.3 24.6">
<path d="M12.1,23C6.1,23,1.3,18.2,1.3,12.3S6.1,1.6,12.1,1.6s10.7,4.8,10.7,10.7S18,23,12.1,23z M12.1,2.6c-5.4,0-9.7,4.4-9.7,9.7 S6.7,22,12.1,22s9.7-4.4,9.7-9.7S17.4,2.6,12.1,2.6z"/>
@@ -51,7 +51,7 @@
</svg>
</div>
</div>
- <div class="icon__more-dropdown" ng-show="firmware.extended.show">
+ <div class="icon__more-dropdown" ng-show="firmware.extended.show" click-outside="firmware.extended.show=false;">
<h5 class="bold">Extended version information</h5>
<p class="no-margin" ng-repeat="version in firmware.extended.versions">{{version.title}}: {{version.version}}</p>
</div>
diff --git a/app/common/directives/firmware-list.js b/app/common/directives/firmware-list.js
index a08ef8d..ec3a30e 100644
--- a/app/common/directives/firmware-list.js
+++ b/app/common/directives/firmware-list.js
@@ -24,6 +24,11 @@
$scope.changePriority = function(imageId, imageVersion, from, to) {
$scope.$parent.changePriority(imageId, imageVersion, from, to);
};
+
+ $scope.toggleMoreDropdown = function(event, firmware) {
+ firmware.extended.show = !firmware.extended.show;
+ event.stopPropagation();
+ };
}
]
};
diff --git a/app/index.js b/app/index.js
index 68ef68d..4bb6a4c 100644
--- a/app/index.js
+++ b/app/index.js
@@ -44,6 +44,7 @@
import firmware_list from './common/directives/firmware-list.js';
import file from './common/directives/file.js';
import input from './common/directives/input.js';
+import click_outside from './common/directives/click-outside.js';
import loader from './common/directives/loader.js';
import paginate from './common/directives/paginate.js';
import serial_console from './common/directives/serial-console.js';