Improve styling of infoBox, do not use layers anymore

frontend/app/map/infoBox/infoBox.html

@@ -1,9 +1,6 @@
 <div class="fm-info-box panel panel-default" ng-class="className">
 	<div class="panel-body">
-		<div class="layer" ng-repeat="layer in layers">
+		<div class="html"></div>
-			<div class="cover" ng-if="!$last"></div>
+		<button type="button" class="btn btn-link close-button" ng-click="hide()">&times;</button>
-			<button type="button" class="btn btn-link close-button" ng-click="layer.hide()">&times;</button>
-			<div fm-info-box-bind="layer"></div>
-		</div>
 	</div>
 </div>

frontend/app/map/infoBox/infoBox.js

@@ -7,7 +7,8 @@ fm.app.factory("fmInfoBox", function($rootScope, $compile, $timeout) {
 	return function(map) {
 		let scope = $rootScope.$new();
 		scope.className = css.className;
-		scope.layers = [];
+
+		let currentObj = null;
 
 		let el = $(require("./infoBox.html"));
 
@@ -16,102 +17,86 @@ fm.app.factory("fmInfoBox", function($rootScope, $compile, $timeout) {
 			$compile(el)(scope);
 		});
 
-		let show = () => {
-			return new Promise((resolve) => {
-				let legendEl = map.el.find(".fm-map-legend");
-				let legendPanelEl = legendEl.find("> .panel");
-
-				if(legendEl.length > 0 && !legendPanelEl.hasClass("ng-hide")) {
-					let legendSize = legendPanelEl[0].getBoundingClientRect();
-
-					el.show();
-
-					el.css({ transform: "", "transition": "all 0s ease 0s" });
-					el.css("transform", `scale(${legendSize.width/el.width()}, ${legendSize.height/el.height()})`);
-
-					setTimeout(() => { // We have to run this after the transform applies
-						legendEl.addClass("fm-infoBox-hidden");
-						el.css("transition", "");
-						el.css("transform", ""); // Gets animated by CSS transition
-						el.one("transitionend", resolve);
-					}, 0);
-				} else {
-					el.css("transition", "all 0s ease 0s");
-					el.fadeIn(700, () => {
-						el.css("transition", "");
-						resolve();
-					});
-				}
-			});
-		};
-
-		let hide = () => {
-			return new Promise((resolve) => {
-				let legendEl = map.el.find(".fm-map-legend");
-				let legendPanelEl = legendEl.find("> .panel");
-
-				if(legendEl.length > 0 && !legendPanelEl.hasClass("ng-hide")) {
-					let legendSize = legendPanelEl[0].getBoundingClientRect();
-
-					el.css("transform", `scale(${legendSize.width/el.width()}, ${legendSize.height/el.height()})`).one("transitionend", () => {
-						el.css("transform", "").hide();
-						el.hide();
-						legendEl.removeClass("fm-infoBox-hidden");
-						resolve();
-					});
-				} else {
-					el.css("transition", "all 0s ease 0s");
-					el.fadeOut(700, () => {
-						el.css("transition", "");
-						resolve();
-					});
-				}
-			});
-		};
-
 		let infoBox = {
-			show(html, htmlScope, clearOpenLayers, onClose) {
+			show(html, htmlScope, onClose) {
-				let obj = {
+				if(currentObj)
-					html,
+					currentObj.onClose && currentObj.onClose();
-					onClose,
+
-					scope: htmlScope || $rootScope,
+				let htmlEl = $(".html", el).empty().append(html);
-					hide() {
+				if(htmlScope !== false)
-						let newLayers = scope.layers.filter((it) => (!ng.equals(it, obj))); // Can't use !== because ng-repeat adds $$hashKey
+					$compile(htmlEl)(htmlScope);
-						onClose && onClose();
+
-						Promise.resolve().then(() => {
+				if(!currentObj) {
-							if(newLayers.length == 0)
+					let legendEl = map.el.find(".fm-map-legend");
-								return hide();
+					let legendPanelEl = legendEl.find("> .panel");
-						}).then(() => {
+
-							scope.layers = newLayers;
+					if(legendEl.length > 0 && !legendPanelEl.hasClass("ng-hide")) {
+						let legendSize = legendPanelEl[0].getBoundingClientRect();
+
+						el.show();
+
+						el.css({ transform: "", "transition": "all 0s ease 0s" });
+						el.css("transform", `scale(${legendSize.width/el.width()}, ${legendSize.height/el.height()})`);
+
+						setTimeout(() => { // We have to run this after the transform applies
+							legendEl.addClass("fm-infoBox-hidden");
+							el.css("transition", "");
+							el.css("transform", ""); // Gets animated by CSS transition
+						}, 0);
+					} else {
+						el.css("transition", "all 0s ease 0s");
+						el.fadeIn(700, () => {
+							el.css("transition", "");
 						});
 					}
-				};
-
-				if(scope.layers.length == 0)
-					scope.$evalAsync(() => { $timeout(show); });
-
-				if(clearOpenLayers) {
-					scope.layers.forEach((layer) => {
-						layer.onClose && layer.onClose();
-					});
-					scope.layers = [];
 				}
 
-				scope.layers.push(obj);
+				let thisCurrentObj = currentObj = {
+					onClose
+				};
 
-				return obj;
+				return {
+					hide: () => {
+						if(currentObj !== thisCurrentObj)
+							return;
+
+						infoBox.hide();
+					}
+				};
 			},
-			hideAll() {
+			hide() {
-				return hide().then(() => {
+				if(!currentObj)
-					scope.layers.forEach((layer) => {
+					return Promise.resolve();
-						layer.onClose && layer.onClose();
-					});
 
-					scope.layers = [ ];
+				return new Promise((resolve) => {
+					let legendEl = map.el.find(".fm-map-legend");
+					let legendPanelEl = legendEl.find("> .panel");
+
+					if(legendEl.length > 0 && !legendPanelEl.hasClass("ng-hide")) {
+						let legendSize = legendPanelEl[0].getBoundingClientRect();
+
+						el.css("transform", `scale(${legendSize.width/el.width()}, ${legendSize.height/el.height()})`).one("transitionend", () => {
+							el.css("transform", "").hide();
+							el.hide();
+							legendEl.removeClass("fm-infoBox-hidden");
+							resolve();
+						});
+					} else {
+						el.css("transition", "all 0s ease 0s");
+						el.fadeOut(700, () => {
+							el.css("transition", "");
+							resolve();
+						});
+					}
+				}).then(() => {
+					currentObj.onClose && currentObj.onClose();
+					currentObj = null;
 				});
 			}
 		};
 
+		scope.hide = infoBox.hide;
+
 		return infoBox;
 	};
 });
@@ -126,7 +111,9 @@ fm.app.directive("fmInfoBoxBind", function($compile) {
 			scope.$watchGroup(["layer.html", "layer.scope"], () => {
 				let el = $(scope.layer.html);
 				element.empty().append(el);
-				$compile(el)(scope.layer.scope);
+
+				if(scope.layer.scope !== false)
+					$compile(el)(scope.layer.scope);
 			});
 		}
 	};

frontend/app/map/infoBox/infoBox.scss

@@ -25,7 +25,7 @@
 		.close-button {
 			position: absolute;
 			top: 0;
-			right: 0;
+			right: 5px;
 			color: #000;
 			text-decoration: none;
 			font-size: 1.5em;
@@ -37,16 +37,14 @@
 			height: 200px;
 			overflow: auto;
 
-			/* Make space for buttons at the bottom */
-			padding-bottom: 1.5em;
-
 			/* Replace padding by margin to move horizontal scrollbar a bit to the left so that it can be covered by .buttons */
 			/* Make space for close button on the top and don't cover round corners on top and bottom */
-			padding-left: 0;
+			margin: 2px 0 28px 0;
-			margin: 20px 0 7px 15px;
+			padding: 15px;
 
 			h2 {
 				margin-top: 0;
+				font-size: 1.6em;
 			}
 
 			/* Copy dl-horizontal styles, modify sizing, also apply for small screens (as popup size is always the same) */

frontend/app/map/markers/markers.js

@@ -73,7 +73,7 @@ fm.app.factory("fmMapMarkers", function($uibModal, fmUtils, $compile, $timeout,
 					markersUi.deleteMarker(scope.marker);
 				};
 
-				map.infoBox.show(require("./view-marker.html"), scope, true, () => {
+				map.infoBox.show(require("./view-marker.html"), scope, () => {
 					openMarkerId = null;
 					markersById[marker.id].setIcon(fmUtils.createMarkerIcon(marker.colour, marker.size, marker.symbol));
 				});