@panoramax/web-viewer 4.3.0-develop-19c22213 → 4.3.0-develop-b0bac381

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.3.0-develop-19c22213",
+  "version": "4.3.0-develop-b0bac381",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/Basic.js

@@ -104,6 +104,8 @@ export default class Basic extends LitElement {
 					console.error(`Component attribute "${k}" has been renamed into "${v}". Old attribute "${k}" is ignored.`);
 				}
 			});
+		
+		if(isInIframe()) { this.classList.add("pnx-iframed"); }
 	}
 
 	/**

package/src/components/core/Viewer.css

@@ -44,6 +44,12 @@ pnx-viewer pnx-cornered-grid::part(corner-bottom-right) {
 		align-items: flex-start;
 		justify-content: flex-start;
 	}
+
+	/* Offset bottom buttons on smartphones */
+	pnx-viewer:not(.pnx-iframed) pnx-cornered-grid::part(corner-bottom-right),
+	pnx-viewer:not(.pnx-iframed) pnx-cornered-grid::part(corner-bottom-left) {
+		margin-bottom: 30px;
+	}
 }
 
 /* Mini component */

package/src/components/menus/LocationPrecisionDoc.js

@@ -1,7 +1,8 @@
 import { LitElement, html } from "lit";
-import { faSvg, titles } from "../styles";
+import { faSvg, titles, docPopup } from "../styles";
 import { fa } from "../../utils/widgets";
 import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons/faMapMarkerAlt";
+import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
 import { QUALITYSCORE_GPS_VALUES } from "../../utils/utils";
 
 /**
@@ -15,7 +16,7 @@ import { QUALITYSCORE_GPS_VALUES } from "../../utils/utils";
  * ```
  */
 export default class LocationPrecisionDoc extends LitElement {
-	static styles = [ titles, faSvg ];
+	static styles = [ titles, faSvg, docPopup ];
 
 	render() {
 		/* eslint-disable indent */
@@ -35,7 +36,7 @@ export default class LocationPrecisionDoc extends LitElement {
 				target="_blank"
 				kind="outline"
 				style="width: 100%"
-			>${this._t?.pnx.filter_gps_precision_help}</pnx-link-button>
+			>${fa(faExternalLinkAlt)} ${this._t?.pnx.filter_gps_precision_help}</pnx-link-button>
 		`;
 	}
 }

package/src/components/menus/QualityScoreDoc.js

@@ -1,7 +1,8 @@
 import { LitElement, html } from "lit";
-import { faSvg, titles } from "../styles";
+import { faSvg, titles, docPopup } from "../styles";
 import { fa } from "../../utils/widgets";
 import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
+import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
 
 /**
  * Quality Score Doc displays a synthetic summary of how Quality Score is computed.
@@ -14,21 +15,27 @@ import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
  * ```
  */
 export default class QualityScoreDoc extends LitElement {
-	static styles = [ titles, faSvg ];
+	static styles = [ titles, faSvg, docPopup ];
 
 	render() {
 		return html`
-			<h4>${fa(faMedal)} ${this._t?.pnx.qualityscore_title}</h4>
+			<h4>${fa(faMedal)} ${this._t?.pnx.filter_qualityscore}</h4>
 			<p>${this._t?.pnx.qualityscore_doc_1}</p>
 			<p>${this._t?.pnx.qualityscore_doc_2}</p>
-			<pnx-quality-score grade="5"></pnx-quality-score>
+			<pnx-quality-score grade=""></pnx-quality-score>
 			<p>${this._t?.pnx.qualityscore_doc_3}</p>
+			<p>${this._t?.pnx.qualityscore_doc_4}</p>
+			<ul>
+				<li>${this._t?.pnx.qualityscore_doc_41}</li>
+				<li>${this._t?.pnx.qualityscore_doc_42}</li>
+			</ul>
+			<p>${this._t?.pnx.qualityscore_doc_5}</p>
 			<pnx-link-button
 				href="https://docs.panoramax.fr/pictures-metadata/quality_score/"
 				target="_blank"
 				kind="outline"
 				style="width: 100%"
-			>${this._t?.pnx.qualityscore_doc_link}</pnx-link-button>
+			>${fa(faExternalLinkAlt)} ${this._t?.pnx.qualityscore_doc_link}</pnx-link-button>
 		`;
 	}
 }

package/src/components/menus/SemanticsDoc.js

@@ -1,7 +1,8 @@
 import { LitElement, html } from "lit";
-import { faSvg, titles } from "../styles";
+import { faSvg, titles, docPopup } from "../styles";
 import { fa } from "../../utils/widgets";
 import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
+import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
 
 /**
  * Semantics Doc displays a synthetic summary of what are semantics and how to use it.
@@ -14,11 +15,11 @@ import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
  * ```
  */
 export default class SemanticsDoc extends LitElement {
-	static styles = [ titles, faSvg ];
+	static styles = [ titles, faSvg, docPopup ];
 
 	render() {
 		return html`
-			<h4>${fa(faTags)} ${this._t?.pnx.semantics_doc_title}</h4>
+			<h4>${fa(faTags)} ${this._t?.pnx.semantics_title}</h4>
 			<p>${this._t?.pnx.semantics_doc_info1}</p>
 			<ul style="padding-left: 1.5em;">
 				<li>${this._t?.pnx.semantics_doc_info1u1}</li>
@@ -30,7 +31,7 @@ export default class SemanticsDoc extends LitElement {
 				target="_blank"
 				kind="outline"
 				style="width: 100%"
-			>${this._t?.pnx.semantics_doc_link}</pnx-link-button>
+			>${fa(faExternalLinkAlt)} ${this._t?.pnx.semantics_doc_link}</pnx-link-button>
 		`;
 	}
 }

package/src/components/styles.js

@@ -542,3 +542,14 @@ export const dataBlocks = css`
 		font-size: 0.8em;
 	}
 `;
+
+// Documentation popup
+export const docPopup = css`
+	h4 {
+		font-size: 1.3em;
+		font-weight: 600;
+		border-bottom: 3px solid var(--grey-pale);
+		padding-bottom: 10px;
+  		padding-top: 5px;
+	}
+`;

package/src/translations/en.json

@@ -120,10 +120,13 @@
         "picture_360_long": "Panoramic picture",
         "filter_qualityscore": "Quality score",
         "filter_qualityscore_help": "Click to enable or disable",
-        "qualityscore_title": "About the quality score",
-        "qualityscore_doc_1": "Panoramax offers a Quality Score for each picture. It allows easy map filtering and comprehensive display of high-quality pictures availability.",
-        "qualityscore_doc_2": "The grade is shown to users as a A/B/C/D/E score (A is the best, E the worst), and shown graphically through this scale:",
-        "qualityscore_doc_3": "It is computed based on GPS precision and picture resolution. A professional system will have an A-rating, a 360° action camera will have a B-rating, and a smartphone will be C/D/E-rated.",
+        "qualityscore_doc_1": "A Quality Score is computed for each picture.",
+        "qualityscore_doc_2": "The Score is shown as a letter:",
+        "qualityscore_doc_3": "\"A\" is the best grade, \"E\" the worst.",
+        "qualityscore_doc_4": "This Score is computed based on:",
+        "qualityscore_doc_41": "the GPS precision",
+        "qualityscore_doc_42": "the picture resolution",
+        "qualityscore_doc_5": "A professional device will have an A-grade, a 360° action camera a B-grade, and a smartphone a grade between C and E.",
         "qualityscore_doc_link": "Know more about the Quality Score",
         "filter_gps_precision": "Location precision",
         "filter_gps_precision_lessthan": "Less than {n} meters",
@@ -199,7 +202,6 @@
         "semantics_picture_tags": "Picture tag",
         "semantics_annotation_tags": "Object tag",
         "semantics_doc": "Help",
-        "semantics_doc_title": "About tags",
         "semantics_doc_info1": "Give context around a picture using tags.",
         "semantics_doc_info1u1": "You can tag it as captured by car with the transport=car tag.",
         "semantics_doc_info2": "You can draw objects in the picture as well: road signs, urban equipments… Mark what you see using existing tags. You can create your own ones as well if necessary.",

package/src/translations/fr.json

@@ -119,10 +119,13 @@
         "picture_360_long": "Photo panoramique",
         "filter_qualityscore": "Score de qualité",
         "filter_qualityscore_help": "Cliquez pour activer ou désactiver",
-        "qualityscore_title": "À propos du score de qualité",
-        "qualityscore_doc_1": "Panoramax propose un Score de Qualité pour chacune de ses photos. Cela facilite le filtre et la recherche de photos de bonne qualité sur la carte.",
-        "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_1": "Un Score de Qualité est calculé pour chaque image.",
+        "qualityscore_doc_2": "Le Score est affiché sous la forme d'une lettre :",
+        "qualityscore_doc_3": "\"A\" est la meilleure note, \"E\" la moins bonne.",
+        "qualityscore_doc_4": "Ce score est calculé selon :",
+        "qualityscore_doc_41": "la précision du GPS",
+        "qualityscore_doc_42": "la résolution de la photo",
+        "qualityscore_doc_5": "Un matériel professionnel aura une note de A, une caméra sportive 360° une note de B, et un smartphone une note entre C et E.",
         "qualityscore_doc_link": "En savoir plus sur le Score de Qualité",
         "filter_zoom_in": "Zoomez la carte pour voir ce filtre",
         "filter_gps_precision": "Précision du positionnement",
@@ -199,7 +202,6 @@
         "semantics_picture_tags": "Tag de photo",
         "semantics_annotation_tags": "Tag d'un objet",
         "semantics_doc": "Aide",
-        "semantics_doc_title": "À propos des tags",
         "semantics_doc_info1": "Précisez le contexte d'une photo en utilisant un tag.",
         "semantics_doc_info1u1": "Indiquez par exemple qu'elle a été prise en voiture avec le tag transport=car.",
         "semantics_doc_info2": "Vous pouvez également détourer des objets au sein d'une photo : panneaux routiers, mobilier urbain… Précisez ce que vous voyez en utilisant les tags déjà utilisés par la communauté. Vous pouvez également créer votre propre tag si besoin.",