@panoramax/web-viewer 3.2.1-develop-b82eccc7 → 3.2.1-develop-0f0a36ec

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.1-develop-b82eccc7",
+  "version": "3.2.1-develop-0f0a36ec",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/translations/en.json

@@ -99,7 +99,7 @@
         "filter_user": "User",
         "filter_user_mypics": "My pictures",
         "filter_picture": "Picture type",
-        "filter_zoom_in": "Zoom-in for filters to be visible",
+        "filter_zoom_in": "Zoom-in to see this filter",
         "picture_flat": "Classic",
         "picture_360": "360°",
         "filter_qualityscore": "Quality score",

package/src/translations/fr.json

@@ -108,7 +108,7 @@
         "qualityscore_doc_2": "Le score est affiché sous la forme d'une lettre A/B/C/D/E (A étant le meilleur, E le moins bon), et visualisable grâce à cette échelle :",
         "qualityscore_doc_3": "Il est calculé en fonction de la précision du GPS ainsi que la résolution de la photo. Un matériel professionnel aura une note de A, une caméra sportive 360° une note de B, et un smartphone une note de C à E.",
         "qualityscore_doc_link": "Plus d'infos sur le calcul du Score Qualité dans notre documentation.",
-        "filter_zoom_in": "Zoomez plus pour voir les filtres",
+        "filter_zoom_in": "Zoomez plus pour voir ce filtre",
         "map_background": "Fond de carte",
         "map_background_aerial": "Satellite",
         "map_background_streets": "Plan",

package/src/viewer/Widgets.css

@@ -669,6 +669,7 @@ a.gvs-btn { text-decoration: none; }
 #gvs-filter-panel {
 	width: 350px;
 	max-width: 350px;
+	padding: 0;
 }
 #gvs-filter-panel .gvs-filter-active {
 	background-color: var(--widget-bg-active);
@@ -686,11 +687,32 @@ a.gvs-btn { text-decoration: none; }
 	color: var(--widget-font-active);
 	background: none;
 }
-#gvs-filter-zoomin {
+.gvs-filter-block {
+	position: relative;
+	padding: 10px 15px;
+	border-bottom: 2px solid var(--widget-border-div);
+}
+.gvs-filter-block:first-child {
+	padding-top: 15px;
+}
+.gvs-filter-block:last-child {
+	border-bottom: none;
+	padding-bottom: 15px;
+}
+.gvs-filter-zoomin {
+	z-index: 10;
+	background-color: rgba(255,255,255,0.8);
 	text-align: center;
 	font-weight: bold;
-	margin-bottom: 15px;
-	color: var(--orange);
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 25px;
 }
 
 #gvs-filter-qualityscore {

package/src/viewer/Widgets.js

@@ -1013,23 +1013,27 @@ export default class Widgets {
 		const pnlFilter = createPanel(this, btnFilter, []);
 		pnlFilter.innerHTML = `
 			<form id="gvs-filter-form">
-				<div id="gvs-filter-zoomin">${fat(faTriangleExclamation)} ${this._t.gvs.filter_zoom_in}</div>
-				<h4>${fat(faCalendar)} ${this._t.gvs.filter_date}</h4>
-				<div class="gvs-input-shortcuts">
-					<button data-for="gvs-filter-date-from" data-value="${new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().split("T")[0]}">${this._t.gvs.filter_date_1month}</button>
-					<button data-for="gvs-filter-date-from" data-value="${new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().split("T")[0]}">${this._t.gvs.filter_date_1year}</button>
-				</div>
-				<div class="gvs-input-group">
-					<input type="date" id="gvs-filter-date-from" />
-					${fat(faArrowRight)}
-					<input type="date" id="gvs-filter-date-end" />
+				<div class="gvs-filter-block">
+					<div class="gvs-filter-zoomin">${this._t.gvs.filter_zoom_in}</div>
+					<h4>${fat(faCalendar)} ${this._t.gvs.filter_date}</h4>
+					<div class="gvs-input-shortcuts">
+						<button data-for="gvs-filter-date-from" data-value="${new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().split("T")[0]}">${this._t.gvs.filter_date_1month}</button>
+						<button data-for="gvs-filter-date-from" data-value="${new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().split("T")[0]}">${this._t.gvs.filter_date_1year}</button>
+					</div>
+					<div class="gvs-input-group">
+						<input type="date" id="gvs-filter-date-from" />
+						${fat(faArrowRight)}
+						<input type="date" id="gvs-filter-date-end" />
+					</div>
 				</div>
-				<h4>${fat(faImage)} ${this._t.gvs.filter_picture}</h4>
-				<div class="gvs-input-group gvs-checkbox-btns" style="justify-content: center;">
-					<input type="checkbox" id="gvs-filter-type-flat" name="flat" />
-					<label for="gvs-filter-type-flat">${fat(faImage)} ${this._t.gvs.picture_flat}</label>
-					<input type="checkbox" id="gvs-filter-type-360" name="360" />
-					<label for="gvs-filter-type-360">${fat(faPanorama)} ${this._t.gvs.picture_360}</label>
+				<div class="gvs-filter-block">
+					<h4>${fat(faImage)} ${this._t.gvs.filter_picture}</h4>
+					<div class="gvs-input-group gvs-checkbox-btns" style="justify-content: center;">
+						<input type="checkbox" id="gvs-filter-type-flat" name="flat" />
+						<label for="gvs-filter-type-flat">${fat(faImage)} ${this._t.gvs.picture_flat}</label>
+						<input type="checkbox" id="gvs-filter-type-360" name="360" />
+						<label for="gvs-filter-type-360">${fat(faPanorama)} ${this._t.gvs.picture_360}</label>
+					</div>
 				</div>
 			</form>
 		`;
@@ -1056,11 +1060,20 @@ export default class Widgets {
 
 		// Create qualityscore filter
 		if(hasQualityScore) {
+			const block = document.createElement("div");
+			block.classList.add("gvs-filter-block");
+			form.appendChild(block);
+
+			const zoomLbl = document.createElement("div");
+			zoomLbl.classList.add("gvs-filter-zoomin");
+			zoomLbl.appendChild(document.createTextNode(this._t.gvs.filter_zoom_in));
+			block.appendChild(zoomLbl);
+
 			const title = document.createElement("h4");
 			title.innerHTML = `${fat(faMedal)} ${this._t.gvs.filter_qualityscore} <button class="gvs-btn-link" title="${this._t.gvs.metadata_quality_help}">${fat(faInfoCircle)}</button>`;
 			title.style.marginBottom = "3px";
 			title.lastChild.addEventListener("click", () => this._showQualityScoreDoc());
-			form.appendChild(title);
+			block.appendChild(title);
 
 			const div = document.createElement("div");
 			div.id = "gvs-filter-qualityscore";
@@ -1083,14 +1096,18 @@ export default class Widgets {
 				div.appendChild(label);
 			});
 
-			form.appendChild(div);
+			block.appendChild(div);
 		}
 
 		// Create search bar for users
 		if(hasUserSearch) {
+			const block = document.createElement("div");
+			block.classList.add("gvs-filter-block");
+			form.appendChild(block);
+
 			const title = document.createElement("h4");
 			title.innerHTML = `${fat(faUser)} ${this._t.gvs.filter_user}`;
-			form.appendChild(title);
+			block.appendChild(title);
 
 			// Shortcut for my own pictures
 			const userAccount = getUserAccount();
@@ -1101,7 +1118,7 @@ export default class Widgets {
 				mypics = document.createElement("button");
 				mypics.appendChild(document.createTextNode(this._t.gvs.filter_user_mypics));
 				shortcuts.appendChild(mypics);
-				form.appendChild(shortcuts);
+				block.appendChild(shortcuts);
 			}
 
 			const input = document.createElement("div");
@@ -1130,12 +1147,12 @@ export default class Widgets {
 				this,
 				true
 			);
-			form.addEventListener("reset", () => {
+			block.addEventListener("reset", () => {
 				userSearch.classList.remove("gvs-filter-active");
 				userSearch.resetSearch();
 			});
 			input.appendChild(userSearch);
-			form.appendChild(input);
+			block.appendChild(input);
 
 			// Trigger "my pictures" shortcut action
 			if(userAccount) {
@@ -1300,10 +1317,12 @@ export default class Widgets {
 		});
 
 		// Show/hide zoom in warning when map zoom changes
-		const lblZoomIn = document.getElementById("gvs-filter-zoomin");
+		const lblsZoomIn = document.getElementsByClassName("gvs-filter-zoomin");
 		const changeLblZoomInDisplay = () => {
-			if(this._viewer.map.getZoom() < 7) { lblZoomIn.style.display = null; }
-			else { lblZoomIn.style.display = "none"; }
+			for(let lblZoomIn of lblsZoomIn) {
+				if(this._viewer.map.getZoom() < 7) { lblZoomIn.style.display = null; }
+				else { lblZoomIn.style.display = "none"; }
+			}
 		};
 		changeLblZoomInDisplay();
 		this._viewer.map.on("zoomend", changeLblZoomInDisplay);