From 404f953d88b9bcfefbdbe1170d03166fddf33e48 Mon Sep 17 00:00:00 2001 From: Candid Dauth Date: Sat, 13 May 2017 23:24:13 +0200 Subject: [PATCH] Improve styling of infoBox, do not use layers anymore --- frontend/app/map/infoBox/infoBox.html | 7 +- frontend/app/map/infoBox/infoBox.js | 159 ++++++++++++-------------- frontend/app/map/infoBox/infoBox.scss | 10 +- frontend/app/map/markers/markers.js | 2 +- 4 files changed, 80 insertions(+), 98 deletions(-) diff --git a/frontend/app/map/infoBox/infoBox.html b/frontend/app/map/infoBox/infoBox.html index 83f73ec5..b43ac003 100644 --- a/frontend/app/map/infoBox/infoBox.html +++ b/frontend/app/map/infoBox/infoBox.html @@ -1,9 +1,6 @@
-
-
- -
-
+
+
\ No newline at end of file diff --git a/frontend/app/map/infoBox/infoBox.js b/frontend/app/map/infoBox/infoBox.js index d3001d5b..737b969d 100644 --- a/frontend/app/map/infoBox/infoBox.js +++ b/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) { - let obj = { - html, - onClose, - scope: htmlScope || $rootScope, - hide() { - let newLayers = scope.layers.filter((it) => (!ng.equals(it, obj))); // Can't use !== because ng-repeat adds $$hashKey - onClose && onClose(); - Promise.resolve().then(() => { - if(newLayers.length == 0) - return hide(); - }).then(() => { - scope.layers = newLayers; + show(html, htmlScope, onClose) { + if(currentObj) + currentObj.onClose && currentObj.onClose(); + + let htmlEl = $(".html", el).empty().append(html); + if(htmlScope !== false) + $compile(htmlEl)(htmlScope); + + if(!currentObj) { + 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 + }, 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() { - return hide().then(() => { - scope.layers.forEach((layer) => { - layer.onClose && layer.onClose(); - }); + hide() { + if(!currentObj) + return Promise.resolve(); - 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); }); } }; diff --git a/frontend/app/map/infoBox/infoBox.scss b/frontend/app/map/infoBox/infoBox.scss index a14b3b3c..e9f3f3be 100644 --- a/frontend/app/map/infoBox/infoBox.scss +++ b/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: 20px 0 7px 15px; + margin: 2px 0 28px 0; + 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) */ diff --git a/frontend/app/map/markers/markers.js b/frontend/app/map/markers/markers.js index 25a66349..4dad88ed 100644 --- a/frontend/app/map/markers/markers.js +++ b/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)); });