@panoramax/web-viewer 4.0.3 → 4.1.0

package/src/components/core/Viewer.js

@@ -2,11 +2,10 @@
 
 import "./Viewer.css";
 import { linkMapAndPhoto, saveMapParamsToLocalStorage, getMapParamsFromLocalStorage } from "../../utils/map";
-import PhotoViewer from "./PhotoViewer";
-import Basic from "./Basic";
+import PhotoViewer, {KEYBOARD_SKIP_FOCUS_WIDGETS} from "./PhotoViewer";
 import MapMore from "../ui/MapMore";
 import { initMapKeyboardHandler } from "../../utils/map";
-import { isNullId } from "../../utils/utils";
+import { isNullId, isInIframe } from "../../utils/utils";
 import { createWebComp } from "../../utils/widgets";
 import { fa } from "../../utils/widgets";
 import { faPanorama } from "@fortawesome/free-solid-svg-icons/faPanorama";
@@ -16,7 +15,6 @@ import { default as InitParameters, alterMapState, alterViewerState } from "../.
 
 
 export const PSV_ZOOM_DELTA = 20;
-const PSV_MOVE_DELTA = Math.PI / 6;
 const MAP_MOVE_DELTA = 100;
 
 
@@ -95,6 +93,7 @@ export default class Viewer extends PhotoViewer {
 	 * @property {object} [map] An object with [any map option available in Map or MapMore class](#Panoramax.components.ui.MapMore).<br />Example: `map="{'background': 'aerial', 'theme': 'age'}"`
 	 * @property {object} [psv] [Any option to pass to Photo component](#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"`
 	 * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
+	 * @property {string} [keyboard-shortcuts=true] Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts.
 	 * @property {string} [focus=pic] The component showing up as main component (pic, map)
 	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API)
 	 * @property {string} [widgets=true] Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like.
@@ -149,20 +148,25 @@ export default class Viewer extends PhotoViewer {
 				_parent: this
 			}));
 			
-			if(!this.isWidthSmall()) {
+			if(isInIframe()) {
 				this.legend = createWebComp("pnx-widget-legend", {
-					slot: this.isWidthSmall() ? "top" : "top-left",
+					slot: "bottom-right",
+					light: true,
 					_parent: this,
 					focus: this._initParams.getParentPostInit().focus,
 					picture: this._initParams.getParentPostInit().picture,
 				});
 				this.grid.appendChild(this.legend);
-
-				this.grid.appendChild(createWebComp("pnx-hashtags", {
-					slot: "top-right",
+			}
+			else if(!this.isWidthSmall()) {
+				this.legend = createWebComp("pnx-widget-legend", {
+					slot: this.isWidthSmall() ? "top" : "top-left",
 					_parent: this,
-					class: "pnx-only-psv pnx-print-hidden",
-				}));
+					focus: this._initParams.getParentPostInit().focus,
+					picture: this._initParams.getParentPostInit().picture,
+				});
+				this._miniPicLegend = createWebComp("pnx-mini-picture-legend", { _parent: this });
+				this.grid.appendChild(this.legend);
 			}
 			else {
 				this.legend = createWebComp("pnx-picture-legend", { _parent: this });
@@ -179,30 +183,47 @@ export default class Viewer extends PhotoViewer {
 				});
 			}
 
-			this.grid.appendChild(createWebComp("pnx-widget-player", {
-				slot: "top",
-				_parent: this,
-				class: "pnx-only-psv pnx-print-hidden",
-				size: this.isHeightSmall() ? "md": "xl",
-			}));
+			if(!isInIframe()) {
+				this.grid.appendChild(createWebComp("pnx-widget-player", {
+					slot: "top",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+					size: this.isHeightSmall() ? "md": "xl",
+				}));
+			
+				this.grid.appendChild(createWebComp("pnx-annotations-switch", {
+					slot: "top",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+					size: this.isHeightSmall() ? "md": "xl",
+				}));
 
-			this.grid.appendChild(createWebComp("pnx-widget-geosearch", {
-				slot: this.isWidthSmall() ? "top-right" : "top-left",
-				_parent: this,
-				class: "pnx-only-map pnx-print-hidden",
-				geocoder: this._initParams.getParentPostInit().geocoder,
-			}));
-			this.grid.appendChild(createWebComp("pnx-widget-mapfilters", {
-				slot: this.isWidthSmall() ? "top-right" : "top-left",
-				_parent: this,
-				"user-search": this.api._endpoints.user_search !== null && this.api._endpoints.user_tiles !== null,
-				"quality-score": this.map?._hasQualityScore?.() || false,
-				class: "pnx-only-map pnx-print-hidden",
-			}));
-			this.grid.appendChild(createWebComp("pnx-widget-maplayers", { slot: "top-right", _parent: this, class: "pnx-only-map pnx-print-hidden" }));
+				this.grid.appendChild(createWebComp("pnx-widget-geosearch", {
+					slot: this.isWidthSmall() ? "top-right" : "top-left",
+					_parent: this,
+					class: "pnx-only-map pnx-print-hidden",
+					geocoder: this._initParams.getParentPostInit().geocoder,
+				}));
+
+				this.grid.appendChild(createWebComp("pnx-widget-mapfilters", {
+					slot: this.isWidthSmall() ? "top-right" : "top-left",
+					_parent: this,
+					"user-search": this.api._endpoints.user_search !== null && this.api._endpoints.user_tiles !== null,
+					"quality-score": this.map?._hasQualityScore?.() || false,
+					class: "pnx-only-map pnx-print-hidden",
+				}));
+				
+				this.grid.appendChild(createWebComp("pnx-widget-maplayers", { slot: "top-right", _parent: this, class: "pnx-only-map pnx-print-hidden" }));
+			}
 		}
 	}
 
+	/** @private */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.map?.destroy();
+	}
+
 	getClassName() {
 		return "Viewer";
 	}
@@ -321,7 +342,10 @@ export default class Viewer extends PhotoViewer {
 		this._moveChildToGrid();
 
 		alterViewerState(this, myPostInitParams);
-		this._handleKeyboardManagement();
+		
+		if(myPostInitParams.keyboardShortcuts) {
+			this._handleKeyboardManagement();
+		}
 		
 		if(myPostInitParams.picture) {
 			this.psv.addEventListener("picture-loaded", () => {
@@ -367,7 +391,10 @@ export default class Viewer extends PhotoViewer {
 
 		// Widgets
 		for(let cn of this.grid.childNodes) {
-			if(cn.getAttribute("slot") !== "bg") {
+			if(
+				cn.getAttribute("slot") !== "bg"
+				&& !KEYBOARD_SKIP_FOCUS_WIDGETS.includes(cn.tagName.toLowerCase())
+			) {
 				cn.addEventListener("focusin", () => keytonone());
 				cn.addEventListener("focusout", () => {
 					if(this.popup.getAttribute("visible") === null) {
@@ -471,6 +498,7 @@ export default class Viewer extends PhotoViewer {
 			// Add PSV to mini
 			this.mini.appendChild(this.psvContainer);
 			this.mini.icon = fa(faPanorama);
+			if(this._miniPicLegend) { this.mini.appendChild(this._miniPicLegend); }
 
 			// Hide mini icon if no picture selected
 			if(isNullId(this.picture)) { this.mini.classList.add("pnx-hidden"); }
@@ -488,6 +516,7 @@ export default class Viewer extends PhotoViewer {
 			// Remove PSV from mini
 			if(this.psvContainer.parentNode == this.mini) {
 				this.mini.removeChild(this.psvContainer);
+				if(this._miniPicLegend) { this.mini.removeChild(this._miniPicLegend); }
 			}
 
 			// Add PSV to grid

package/src/components/layout/BottomDrawer.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { onceParentAvailable } from "../../utils/widgets";
 
 const OPENNESS_Y_PCT = { "opened": 0, "half-opened": 0.7, "closed": 1 };
 
@@ -104,7 +105,7 @@ export default class BottomDrawer extends LitElement {
 		drawer.style.height = `${this._drawerHeight}px`;
 		drawer.style.maxHeight = `${this._drawerHeight}px`;
 
-		this._parent?.onceReady().then(() => {
+		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
 			this._parent.map?.addEventListener("click", () => this.openness = "closed");
 			this._parent.psv?.addEventListener("click", () => this.openness = "closed");
 		});

package/src/components/layout/Tabs.js

@@ -33,6 +33,10 @@ export default class Tabs extends LitElement {
 			align-items: stretch;
 			overflow-x: auto;
 			touch-action: pan-x;
+			position: sticky;
+			top: 0;
+			background: white;
+			z-index: 125;
 		}
 		nav ::slotted(*) {
 			color: var(--grey-dark);

package/src/components/menus/AnnotationsList.js

@@ -3,6 +3,7 @@ import { faSvg, iconify } from "../styles";
 import { fa, moreIcons } from "../../utils/widgets";
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
+import { onceParentAvailable } from "../../utils/widgets";
 import "iconify-icon";
 
 /**
@@ -42,15 +43,18 @@ export default class AnnotationsList extends LitElement {
 		super.connectedCallback();
 
 		this._onPicChange();
-		this._parent?.psv?.addEventListener("picture-loaded", this._onPicChange.bind(this));
-
-		this._parent?.psv?.addEventListener("annotation-click", e => {
-			const aPos = this._meta.properties?.annotations?.findIndex(a => a.id === e.detail.annotationId);
-			if(aPos >= 0) { this._onListItemClick(Object.assign({nb: aPos+1}, this._meta.properties.annotations[aPos])); }
-		});
-
-		this._parent?.psv?.addEventListener("annotations-unfocused", () => {
-			this._onListItemClick(null);
+		
+		onceParentAvailable(this).then(() => {
+			this._parent.psv?.addEventListener("picture-loaded", this._onPicChange.bind(this));
+
+			this._parent.psv?.addEventListener("annotation-click", e => {
+				const aPos = this._meta.properties?.annotations?.findIndex(a => a.id === e.detail.annotationId);
+				if(aPos >= 0) { this._onListItemClick(Object.assign({nb: aPos+1}, this._meta.properties.annotations[aPos])); }
+			});
+
+			this._parent.psv?.addEventListener("annotations-unfocused", () => {
+				this._onListItemClick(null);
+			});
 		});
 	}
 

package/src/components/menus/MapBackground.js

@@ -1,6 +1,8 @@
 import { LitElement, html, css } from "lit";
 import BackgroundAerial from "../../img/bg_aerial.jpg";
 import BackgroundStreets from "../../img/bg_streets.jpg";
+import { onceParentAvailable } from "../../utils/widgets";
+
 
 /**
  * Map Background menu allows user to select background.
@@ -60,10 +62,13 @@ export default class MapBackground extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.map?.on("background-changed", e => {
-			this.bg = e.background;
+
+		onceParentAvailable(this).then(() => {
+			this._parent.map?.on("background-changed", e => {
+				this.bg = e.background;
+			});
+			this.bg = this._parent.map?.getBackground();
 		});
-		this.bg = this._parent?.map?.getBackground();
 	}
 
 	/** @private */

package/src/components/menus/MapFilters.js

@@ -8,6 +8,7 @@ import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";
 import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
 import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
+import { onceParentAvailable } from "../../utils/widgets";
 
 /**
  * Map Filters menu allows user to select map data they want displayed.
@@ -180,12 +181,20 @@ export default class MapFilters extends LitElement {
 		}
 
 		// Map zoom
-		this._parent?.onceMapReady?.().then(() => {
+		onceParentAvailable(this).then(() => this._parent.onceMapReady?.().then(async () => {
 			this._parent.map.on("zoomend", this._onMapZoom.bind(this));
 			this._parent.map.on("filters-changed", this._onParentFilterChange.bind(this));
 			this._onMapZoom();
 			this._onParentFilterChange(this._parent.map._mapFilters);
-		});
+
+			// Load default users filter
+			const vu = this._parent.map.getVisibleUsers();
+			if(vu?.length > 0 && vu[0] != "geovisio") {
+				this.user = vu[0];
+				const username = await this._parent.api.getUserName(vu[0]);
+				if(username) { this.user = username; }
+			}
+		}));
 	}
 
 	/**

package/src/components/menus/MapLayers.js

@@ -5,6 +5,7 @@ import { COLORS } from "../../utils/utils";
 import { faEarthEurope } from "@fortawesome/free-solid-svg-icons/faEarthEurope";
 import { faPalette } from "@fortawesome/free-solid-svg-icons/faPalette";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
+import { onceParentAvailable } from "../../utils/widgets";
 
 /**
  * Map Layers menu allows user to select background and map theme.
@@ -56,10 +57,10 @@ export default class MapLayers extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.onceMapReady?.().then(() => {
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
 			this.theme = this._parent.map._mapFilters.theme;
 			this._parent.map.on("filters-changed", e => this.theme = e.theme);
-		});
+		}));
 	}
 
 	/** @private */

package/src/components/menus/MapLegend.js

@@ -14,20 +14,44 @@ export default class MapLegend extends LitElement {
 	/** @private */
 	static styles = css`
 		:host {
-			font-size: 0.9em;
+			font-size: 0.7em;
 		}
 		small {
 			font-size: 1em;
 		}
+		.maplibregl-ctrl-attrib-inner {
+			display: inline-block;
+		}
 	`;
 
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.menus.MapLegend#
+	 * @type {Object}
+	 * @property {boolean} [light=false] Lighter version (for iframes)
+	 */
+	static properties = {
+		light: {type: Boolean},
+	};
+
+	constructor() {
+		super();
+		this.light = false;
+	}
+
 	/** @private */
 	render() {
+		/* eslint-disable indent */
 		const mapAttrib = this._parent?.map?._attribution?._innerContainer;
+		const mapLabelParts = this._parent?._t.map.map_data.split("{m}");
 
-		return html`
-			${mapAttrib && mapAttrib.innerHTML.length > 0 ? html`${this._parent?._t.map.map_data}<br />${mapAttrib}` : nothing}
-		`;
+		return this.light ?
+			(mapAttrib && mapAttrib.innerHTML.length > 0 ? mapAttrib : nothing)
+			: html`
+				${mapAttrib && mapAttrib.innerHTML.length > 0
+					? html`${mapLabelParts.shift()}${mapAttrib}${mapLabelParts.shift()}`
+					: nothing}
+			`;
 	}
 }
 

package/src/components/menus/MiniPictureLegend.js

@@ -0,0 +1,74 @@
+import { LitElement, nothing, css, html } from "lit";
+import { onceParentAvailable } from "../../utils/widgets";
+import { panel } from "../styles";
+
+/**
+ * Mini picture legend shows info about picture capture date, when seen in mini component of viewer.
+ * @class Panoramax.components.menus.MiniPictureLegend
+ * @element pnx-mini-picture-legend
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-mini-picture-legend ._parent=${viewer} />
+ * ```
+ */
+export default class MiniPictureLegend extends LitElement {
+	/** @private */
+	static styles = [panel, css`
+		.pnx-panel {
+			bottom: 0;
+			right: 0;
+			width: unset;
+			min-width: unset;
+			border-radius: 10px;
+			border-top-right-radius: 0;
+			border-bottom-left-radius: 0;
+			border-right: none;
+			border-bottom: none;
+			padding: 2px 5px;
+			font-size: 0.7em;
+		}
+	`];
+
+	/** @private */
+	static properties = {
+		_caption: {state: true},
+	};
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		onceParentAvailable(this)
+			.then(() => this._parent.onceReady())
+			.then(() => {
+				this._onPicChange(this._parent.psv.getPictureMetadata());
+				this._parent.psv.addEventListener("picture-loaded", () => {
+					this._onPicChange(this._parent.psv.getPictureMetadata());
+				});
+				this._parent.psv.addEventListener("sequence-stopped", () => {
+					this._onPicChange(this._parent.psv.getPictureMetadata());
+				});
+			});
+	}
+
+	/** @private */
+	_onPicChange(picMeta) {
+		this._caption = picMeta?.caption;
+	}
+
+	/** @private */
+	render() {
+		/* eslint-disable indent */
+		return this._caption?.date ?
+			html`<div class="pnx-panel">${
+				this._caption.date.toLocaleDateString(
+					this._parent?.lang || window.navigator.language,
+					{ year: "numeric", month: "long", day: "numeric" }
+				)
+			}</div>`
+			: nothing;
+	}
+}
+
+customElements.define("pnx-mini-picture-legend", MiniPictureLegend);

package/src/components/menus/PictureLegend.js

@@ -1,6 +1,7 @@
-import { LitElement, html, nothing, css } from "lit";
+import { LitElement, nothing, css } from "lit";
+import { html, unsafeStatic } from "lit/static-html.js";
 import { classMap } from "lit/directives/class-map.js";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
 import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
@@ -26,16 +27,17 @@ export default class PictureLegend extends LitElement {
 	/** @private */
 	static styles = [placeholder, panel, hidden, css`
 		:host {
-			overflow-y: auto;
-			overflow-x: hidden;
-			display: block;
+			display: flex;
+			flex-direction: column;
 			margin: 0;
 			font-family: var(--font-family);
+			flex-wrap: nowrap;
 		}
 
 		@media screen and (min-width: 576px) {
-			:host { max-height: 70vh; }
-			pnx-picture-metadata { width: 30vw; }
+			:host {
+				max-height: 70vh;
+			}
 		}
 
 		/* Top bar */
@@ -45,6 +47,12 @@ export default class PictureLegend extends LitElement {
 			align-items: center;
 			margin: 10px 10px 5px 10px;
 			justify-content: space-between;
+			flex: 1;
+		}
+
+		.headline-buttons {
+			display: flex;
+			gap: 5px;
 		}
 
 		/* Address line */
@@ -54,6 +62,9 @@ export default class PictureLegend extends LitElement {
 			margin-bottom: 2px;
 			flex-grow: 5;
 			font-weight: 800;
+			text-overflow: ellipsis;
+			overflow: hidden;
+  			white-space: nowrap;
 		}
 
 		#pic-legend-addr span {
@@ -84,6 +95,7 @@ export default class PictureLegend extends LitElement {
 			display: block;
 			margin-top: 5px;
 			max-width: 100%;
+			flex: 1;
 		}
 		#pic-legend-expand::part(btn) {
 			border-radius: 10px;
@@ -93,10 +105,11 @@ export default class PictureLegend extends LitElement {
 
 		/* Details block */
 		pnx-picture-metadata {
-			margin: 5px 10px 10px;
+			margin: 5px 10px;
 			display: block;
-			max-width: 450px;
 			box-sizing: border-box;
+			flex: 1;
+			overflow-y: auto;
 		}
 
 		/* Details actions */
@@ -107,6 +120,7 @@ export default class PictureLegend extends LitElement {
 			border-bottom-right-radius: 10px;
 			gap: 5px;
 			flex-wrap: wrap;
+			flex: 1;
 		}
 
 		/* More options menu */
@@ -114,10 +128,22 @@ export default class PictureLegend extends LitElement {
 
 		/* Editors */
 		#pic-legend-editors { margin: 0 10px; }
+
+		/* Light version */
+		.pnx-picture-legend-light {
+			width: max-content;
+			font-size: 10px;
+		}
 	`];
 
-	/** @private */
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.menus.PictureLegend#
+	 * @type {Object}
+	 * @property {boolean} [light=false] Lighter version (for iframes)
+	 */
 	static properties = {
+		light: {type: Boolean},
 		_caption: { state: true },
 		_addr: { state: true },
 		_expanded: { state: true },
@@ -129,6 +155,7 @@ export default class PictureLegend extends LitElement {
 		super();
 		this._expanded = true;
 		this.collapsable = false;
+		this.light = false;
 	}
 
 	/** @private */
@@ -138,18 +165,20 @@ export default class PictureLegend extends LitElement {
 		this._expanded = !this.collapsable;
 		this._prevSearches = {};
 
-		this._parent.onceReady().then(() => {
-			this._onPicChange(this._parent.psv.getPictureMetadata());
-			this._parent.psv.addEventListener("picture-loaded", () => {
+		onceParentAvailable(this)
+			.then(() => this._parent.onceReady())
+			.then(() => {
 				this._onPicChange(this._parent.psv.getPictureMetadata());
+				this._parent.psv.addEventListener("picture-loaded", () => {
+					this._onPicChange(this._parent.psv.getPictureMetadata());
+				});
+				this._parent.psv.addEventListener("sequence-stopped", () => {
+					this._onPicChange(this._parent.psv.getPictureMetadata());
+				});
+				this._parent.psv.addEventListener("annotation-click", () => {
+					this._expanded = true;
+				});
 			});
-			this._parent.psv.addEventListener("sequence-stopped", () => {
-				this._onPicChange(this._parent.psv.getPictureMetadata());
-			});
-			this._parent.psv.addEventListener("annotation-click", () => {
-				this._expanded = true;
-			});
-		});
 	}
 
 	/** @private */
@@ -196,6 +225,22 @@ export default class PictureLegend extends LitElement {
 		const hiddenExpanded = classMap({"pnx-hidden": this._expanded});
 		const shownExpanded = classMap({"pnx-hidden": !this._expanded});
 
+		if(this.light) {
+			return html`<div class="pnx-picture-legend-light">
+				${this._caption.producer?.length > 0 ? html`
+					<a
+						href=${window.location.href}
+						target="_blank"
+						title=${this._parent?._t.pnx.share_page}
+					>${this._caption.producer[this._caption.producer.length-1]}</a>
+				</div>` : nothing}
+
+				${this._caption.producer?.length > 0 && this._caption?.license ? "|" : ""}
+
+				${this._caption?.license ? html`${unsafeStatic(this._caption.license)}` : nothing}
+			`;
+		}
+
 		return html`
 			<div class="headline">
 				${this._parent._setFocus ? html`
@@ -207,15 +252,26 @@ export default class PictureLegend extends LitElement {
 					</pnx-button>
 				` : nothing}
 
-				<div id="pic-legend-addr">
+				<div id="pic-legend-addr" title=${this._addr || ""}>
 					${this._addr?.length > 0 ? this._addr : html`<span class="pnx-placeholder-loading">&nbsp;</span>`}
 				</div>
 
-				<pnx-picture-legend-actions
-					@click=${e => e.stopPropagation()}
-					._parent=${this._parent}
-					?full=${this._expanded}
-				></pnx-picture-legend-actions>
+				<div class="headline-buttons">
+					<pnx-button
+						size="sm"
+						class=${hiddenExpanded}
+						title=${this._parent?._t.pnx.share}
+						@click=${() => this._parent._showShareOptions()}
+					>
+						${fa(faShareNodes)}
+					</pnx-button>
+
+					<pnx-picture-legend-actions
+						@click=${e => e.stopPropagation()}
+						._parent=${this._parent}
+						?full=${this._expanded}
+					></pnx-picture-legend-actions>
+				</div>
 			</div>
 
 			<div id="pic-legend-info" class=${hiddenExpanded}>
@@ -226,21 +282,20 @@ export default class PictureLegend extends LitElement {
 
 				${this._caption.date ? html`<div class="info-block">
 					${fa(faCalendarAlt)}
-					${this._caption.date.toLocaleDateString(this._parent?.lang || window.navigator.language, { year: "numeric", month: "long" })}
-				</div>` : nothing}
+					${this._caption.date.toLocaleDateString(this._parent?.lang || window.navigator.language, { year: "numeric", month: "long", day: "numeric" })}				</div>` : nothing}
 			</div>
 
 			<div id="pic-legend-cta" class=${shownExpanded}>
+				<pnx-button size="sm" @click=${() => this._parent._showShareOptions()}>
+					${fa(faShareNodes)} ${this._parent?._t.pnx.share}
+				</pnx-button>
+
 				${this._parent.api._endpoints.report ? html`
-						<pnx-button size="sm" @click=${() => this._parent._showReportForm()}>
+						<pnx-button kind="fullwarn" size="sm" @click=${() => this._parent._showReportForm()}>
 							${fa(faTriangleExclamation)} ${this._parent?._t.pnx.report}
 						</pnx-button>
 				` : nothing}
 
-				<pnx-button size="sm" @click=${() => this._parent._showShareOptions()}>
-					${fa(faShareNodes)} ${this._parent?._t.pnx.share}
-				</pnx-button>
-
 				<slot name="editors">
 					<pnx-widget-osmeditors ._parent=${this._parent} />
 				</slot>