@panoramax/web-viewer 4.0.3-develop-a19dd3c4 → 4.0.3-develop-05bbd331

package/docs/reference/components/ui/widgets/PictureLegendActions.md

@@ -0,0 +1,32 @@
+<a name="Panoramax.components.ui.widgets.PictureLegendActions"></a>
+
+## Panoramax.components.ui.widgets.PictureLegendActions ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui.widgets</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-picture-legend-actions  
+
+* [.PictureLegendActions](#Panoramax.components.ui.widgets.PictureLegendActions) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new PictureLegendActions()](#new_Panoramax.components.ui.widgets.PictureLegendActions_new)
+    * [.properties](#Panoramax.components.ui.widgets.PictureLegendActions+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.widgets.PictureLegendActions_new"></a>
+
+### new PictureLegendActions()
+Picture Legend Actions is a menu showing up complementary actions for picture legend.
+
+**Example**  
+```html
+<pnx-picture-legend-actions _parent=${viewer} />
+```
+<a name="Panoramax.components.ui.widgets.PictureLegendActions+properties"></a>
+
+### pictureLegendActions.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>PictureLegendActions</code>](#Panoramax.components.ui.widgets.PictureLegendActions)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [full] | <code>boolean</code> | <code>false</code> | Show advanced actions |
+

package/docs/reference.md

@@ -71,6 +71,7 @@ More complex UI components (but not menus):
 - [MapFiltersButton](./reference/components/ui/widgets/MapFiltersButton.md) : a togglable map filters button & menu.
 - [MapLayersButton](./reference/components/ui/widgets/MapLayersButton.md) : a togglable map layers button & menu.
 - [OSMEditors](./reference/components/ui/widgets/OSMEditors.md) : shortcuts for OpenStreetMap editing tools.
+- [PictureLegendActions](./reference/components/ui/widgets/PictureLegendActions.md) : various actions from picture legend.
 - [Player](./reference/components/ui/widgets/Player.md) : the previous/next/play/pause toolbar.
 - [Zoom](./reference/components/ui/widgets/Zoom.md) : the +/- zoom toolbar.
 

package/mkdocs.yml

@@ -84,6 +84,7 @@ nav:
           - MapFiltersButton: 'reference/components/ui/widgets/MapFiltersButton.md'
           - MapLayersButton: 'reference/components/ui/widgets/MapLayersButton.md'
           - OSMEditors: 'reference/components/ui/widgets/OSMEditors.md'
+          - PictureLegendActions: 'reference/components/ui/widgets/PictureLegendActions.md'
           - Player: 'reference/components/ui/widgets/Player.md'
           - Zoom: 'reference/components/ui/widgets/Zoom.md'
         - Button: 'reference/components/ui/Button.md'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.3-develop-a19dd3c4",
+  "version": "4.0.3-develop-05bbd331",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/Basic.css

@@ -34,7 +34,7 @@
 	--widget-font: var(--grey-dark);
 	--widget-font-active: var(--white);
 	--widget-font-direct: var(--blue);
-	--widget-font-warn: #FF8F00;
+	--widget-font-warn: #BF360C;
 	--font-family: "Atkinson Hyperlegible Next", sans-serif;
 	overscroll-behavior-y: contain;
 }

package/src/components/menus/PictureLegend.js

@@ -47,6 +47,11 @@ export default class PictureLegend extends LitElement {
 			justify-content: space-between;
 		}
 
+		.headline-buttons {
+			display: flex;
+			gap: 5px;
+		}
+
 		/* Address line */
 		#pic-legend-addr {
 			line-height: 1.2em;
@@ -211,14 +216,22 @@ export default class PictureLegend extends LitElement {
 					${this._addr?.length > 0 ? this._addr : html`<span class="pnx-placeholder-loading">&nbsp;</span>`}
 				</div>
 
-				<pnx-button
-					title=${this._parent?._t.pnx.share}
-					size="sm"
-					@click=${() => this._parent._showShareOptions()}
-					class=${hiddenExpanded}
-				>
-					${fa(faShareNodes)}
-				</pnx-button>
+				<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}>

package/src/components/menus/Share.js

@@ -1,13 +1,10 @@
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html } from "lit";
 import { fa } from "../../utils/widgets";
 import { faSvg, textarea, titles, input } from "../styles";
 import { faMap } from "@fortawesome/free-solid-svg-icons/faMap";
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
 import { faShareAlt } from "@fortawesome/free-solid-svg-icons/faShareAlt";
 import { faLink } from "@fortawesome/free-solid-svg-icons/faLink";
-import { faFileDownload } from "@fortawesome/free-solid-svg-icons/faFileDownload";
-import { faPrint } from "@fortawesome/free-solid-svg-icons/faPrint";
-import { faRssSquare } from "@fortawesome/free-solid-svg-icons/faRssSquare";
 
 /**
  * Share Menu displays links for quick picture sharing.
@@ -28,16 +25,6 @@ export default class ShareMenu extends LitElement {
 		.links {
 			display: flex;
 			gap: 5px;
-			align-items: center;
-			margin-bottom: 10px;
-		}
-		.cta-links {
-			display: flex;
-			flex-wrap: nowrap;
-			gap: 5px;
-		}
-		.cta-links pnx-link-button {
-			flex: 1;
 		}
 		.embed {
 			display: flex;
@@ -50,7 +37,6 @@ export default class ShareMenu extends LitElement {
 	/** @private */
 	static properties = {
 		_url: {state: true},
-		_meta: { state: true },
 	};
 
 	constructor() {
@@ -64,11 +50,6 @@ export default class ShareMenu extends LitElement {
 		this._parent?.onceReady().then(() => {
 			this._onUrlChange();
 			this._parent.urlHandler.addEventListener("url-changed", this._onUrlChange.bind(this));
-
-			this._meta = this._parent.psv.getPictureMetadata();
-			this._parent.psv.addEventListener("picture-loaded", () => {
-				this._meta = this._parent.psv.getPictureMetadata();
-			});
 		});
 	}
 
@@ -78,12 +59,6 @@ export default class ShareMenu extends LitElement {
 		this._url = this._parent?.urlHandler?.nextShortLink(baseUrl) || baseUrl;
 	}
 
-	/** @private */
-	_onPrint() {
-		this._parent?.setPopup(false);
-		window.print();
-	}
-
 	/** @private */
 	render() {
 		const iframe = `<iframe src="${this._url}" style="border: none; width: 500px; height: 300px"></iframe>`;
@@ -91,36 +66,12 @@ export default class ShareMenu extends LitElement {
 		return html`
 			<h4>${fa(faShareAlt)} ${this._parent?._t.pnx.share}</h4>
 			<pnx-tabs>
-				<h4 slot="title">${fa(faLink)} ${this._parent?._t.pnx.share_picture}</h4>
+				<h4 slot="title">${fa(faLink)} ${this._parent?._t.pnx.share_page}</h4>
 				<div slot="content">
 					<div class="links">
-						<div>${this._parent?._t.pnx.share_page}</div>
 						<input type="text" readonly value=${this._url} style="flex: 2" />
 						<pnx-copy-button ._t=${this._parent?._t} text=${this._url}></pnx-copy-button>
 					</div>
-					<div class="cta-links">
-						<pnx-link-button
-							download
-							target="_blank"
-							href=${this._meta?.panorama?.hdUrl}
-							@click=${this._closeGroup}
-						>${fa(faFileDownload)} ${this._parent?._t.pnx.share_image}</pnx-link-button>
-
-						${this._parent.isWidthSmall() ? nothing : html`<pnx-link-button @click=${this._onPrint}>
-							${fa(faPrint)} ${this._parent?._t.pnx.share_print}
-						</pnx-link-button>`}
-
-						${this._parent?.api?.getRSSURL() && html`
-							<pnx-link-button
-								target="_blank"
-								href=${this._parent?.api.getRSSURL(this._parent?.map?.getBounds?.())}
-								title=${this._parent?._t.pnx.share_rss_title}
-								@click=${this._closeGroup}
-							>
-								${fa(faRssSquare)} ${this._parent?._t.pnx.share_rss}
-							</pnx-link-button>
-						`}
-					</div>
 				</div>
 					
 				<h4 slot="title">${fa(faMap)} ${this._parent?._t.pnx.share_embed}</h4>

package/src/components/styles.js

@@ -130,7 +130,7 @@ export const btn = css`
 		gap: 5px;
 		position: relative;
 		width: 100%;
-		max-height: 100%;
+		height: 100%;
 		min-width: 26px;
 	}
 

package/src/components/ui/widgets/PictureLegendActions.js

@@ -0,0 +1,99 @@
+import { LitElement, html, nothing, css } from "lit";
+import { fa } from "../../../utils/widgets";
+import { faEllipsisV } from "@fortawesome/free-solid-svg-icons/faEllipsisV";
+import { noprint } from "../../styles";
+
+/**
+ * Picture Legend Actions is a menu showing up complementary actions for picture legend.
+ * @class Panoramax.components.ui.widgets.PictureLegendActions
+ * @element pnx-picture-legend-actions
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-picture-legend-actions _parent=${viewer} />
+ * ```
+ */
+export default class PictureLegendActions extends LitElement {
+	/** @private */
+	static styles = [ noprint, css`
+		pnx-togglable-group::part(menu) {
+			border-radius: 5px;
+			min-width: unset;
+		}
+	`];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.widgets.PictureLegendActions#
+	 * @type {Object}
+	 * @property {boolean} [full=false] Show advanced actions
+	 */
+	static properties = {
+		full: { type: Boolean },
+		_meta: { state: true },
+	};
+
+	constructor() {
+		super();
+		this.full = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		this._parent?.onceReady().then(() => {
+			this._meta = this._parent.psv.getPictureMetadata();
+			this._parent.psv.addEventListener("picture-loaded", () => {
+				this._meta = this._parent.psv.getPictureMetadata();
+			});
+		});
+	}
+
+	/** @private */
+	_onPrint() {
+		this._closeGroup();
+		window.print();
+	}
+
+	/** @private */
+	_closeGroup() {
+		this.renderRoot.querySelector("#pic-legend-headline-menu").close();
+	}
+
+	/** @private */
+	render() {
+		return html`<pnx-togglable-group padded="false" id="pic-legend-headline-menu" ._parent=${this._parent}>
+			<pnx-button slot="button" kind="inline">${fa(faEllipsisV)}</pnx-button>
+			<pnx-list-group class="pnx-print-hidden" @click=${this._closeMenu}>
+				${this._meta ? html`<pnx-copy-button ._t=${this._parent?._t} text=${this._meta.id} unstyled>
+					${this._parent?._t.pnx.metadata_general_copy_picid}
+				</pnx-copy-button>` : nothing}
+
+				<a
+					download
+					target="_blank"
+					href=${this._meta?.panorama?.hdUrl}
+					@click=${this._closeGroup}
+				>${this._parent?._t.pnx.share_image}</a>
+
+				${this._parent.isWidthSmall() ? nothing : html`<button @click=${this._onPrint}>
+					${this._parent?._t.pnx.share_print}
+				</button>`}
+
+				${this._parent?.api?.getRSSURL() && html`
+					<a
+						target="_blank"
+						href=${this._parent?.api.getRSSURL(this._parent?.map?.getBounds?.())}
+						title=${this._parent?._t.pnx.share_rss_title}
+						@click=${this._closeGroup}
+					>
+						${this._parent?._t.pnx.share_rss}
+					</a>
+				`}
+			</pnx-list-group>
+		</pnx-togglable-group>`;
+	}
+}
+
+customElements.define("pnx-picture-legend-actions", PictureLegendActions);

package/src/components/ui/widgets/index.js

@@ -9,5 +9,6 @@ export {default as Legend} from "./Legend";
 export {default as MapFiltersButton} from "./MapFiltersButton";
 export {default as MapLayersButton} from "./MapLayersButton";
 export {default as OSMEditors} from "./OSMEditors";
+export {default as PictureLegendActions} from "./PictureLegendActions";
 export {default as Player} from "./Player";
 export {default as Zoom} from "./Zoom";

package/src/translations/en.json

@@ -33,7 +33,6 @@
         "share": "Share",
         "share_links": "Links",
         "share_page": "Link to this picture",
-        "share_picture": "Picture",
         "share_image": "HD Image",
         "share_rss": "RSS feed",
         "share_rss_title": "RSS feed of new sequences in the currently visible map area",

package/src/translations/fr.json

@@ -31,7 +31,6 @@
         "search_address": "Rechercher une adresse, ville…",
         "search_user": "Rechercher un nom d'utilisateur…",
         "share": "Partager",
-        "share_picture": "Photo",
         "share_links": "Liens utiles",
         "share_page": "Lien de la photo",
         "share_image": "Image HD",