@panoramax/web-viewer 4.0.3-develop-ffa0bd32 → 4.0.3-develop-798f53e7

package/docs/reference/components/ui/Button.md

@@ -32,7 +32,7 @@ Component properties.
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | [active] | <code>boolean</code> | <code>false</code> | Whether the button is in an active state. |
-| [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat, inline, superinline) |
+| [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline) |
 | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
 | [disabled] | <code>boolean</code> | <code>false</code> | Whether the button is disabled. |
 | [type] | <code>string</code> |  | The button type (e.g., 'submit'). |

package/docs/reference/components/ui/CopyButton.md

@@ -32,7 +32,7 @@ Component properties.
 | --- | --- | --- | --- |
 | [text] | <code>string</code> |  | Text to copy in clipboard on click (use either this parameter or input, not both) |
 | [input] | <code>input</code> |  | ID of a HTML input field to copy content from in clipboard (use either this parameter or text, not both) |
-| [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat, inline, superinline) |
+| [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline) |
 | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
 | [unstyled] | <code>boolean</code> | <code>false</code> | Disable all styling (for list group integration) |
 | [title] | <code>string</code> |  | Tooltip text displayed when hovering over the button |

package/docs/reference/components/ui/LinkButton.md

@@ -40,6 +40,6 @@ Component properties.
 | [title] | <code>string</code> |  | Tooltip text displayed when hovering over the button |
 | [download] | <code>string</code> |  | Indicates if the linked resource should be downloaded |
 | [class] | <code>string</code> |  | Custom CSS class for additional styling |
-| [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat) |
+| [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, fullwarn, outline, flat, superflat) |
 | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
 

package/docs/reference.md

@@ -71,7 +71,6 @@ 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,7 +84,6 @@ 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-ffa0bd32",
+  "version": "4.0.3-develop-798f53e7",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/Basic.css

@@ -28,11 +28,13 @@
 	--widget-bg-inactive: var(--grey-pale);
 	--widget-bg-primary: var(--blue-semi);
 	--widget-bg-primary-hover: #e0e7ff;
+	--widget-bg-warn: #FFECB3;
 	--widget-border-div: var(--grey-pale);
 	--widget-border-btn: var(--blue);
 	--widget-font: var(--grey-dark);
 	--widget-font-active: var(--white);
 	--widget-font-direct: var(--blue);
+	--widget-font-warn: #FF8F00;
 	--font-family: "Atkinson Hyperlegible Next", sans-serif;
 	overscroll-behavior-y: contain;
 }

package/src/components/menus/PictureLegend.js

@@ -211,11 +211,14 @@ export default class PictureLegend extends LitElement {
 					${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>
+				<pnx-button
+					title=${this._parent?._t.pnx.share}
+					size="sm"
+					@click=${() => this._parent._showShareOptions()}
+					class=${hiddenExpanded}
+				>
+					${fa(faShareNodes)}
+				</pnx-button>
 			</div>
 
 			<div id="pic-legend-info" class=${hiddenExpanded}>
@@ -231,16 +234,16 @@ export default class PictureLegend extends LitElement {
 			</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>

package/src/components/menus/Share.js

@@ -1,10 +1,13 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } 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.
@@ -25,6 +28,16 @@ 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;
@@ -37,6 +50,7 @@ export default class ShareMenu extends LitElement {
 	/** @private */
 	static properties = {
 		_url: {state: true},
+		_meta: { state: true },
 	};
 
 	constructor() {
@@ -50,6 +64,11 @@ 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();
+			});
 		});
 	}
 
@@ -59,6 +78,12 @@ 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>`;
@@ -66,12 +91,36 @@ 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_page}</h4>
+				<h4 slot="title">${fa(faLink)} ${this._parent?._t.pnx.share_picture}</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%;
-		height: 100%;
+		max-height: 100%;
 		min-width: 26px;
 	}
 
@@ -212,6 +212,17 @@ export const btn = css`
 		background-color: var(--widget-bg-primary-hover);
 	}
 
+	/* Fully-filled warning style */
+	.pnx-btn-fullwarn {
+		background-color: var(--widget-bg-warn);
+		color: var(--widget-font-warn);
+		border: none;
+	}
+
+	.pnx-btn-fullwarn:not(:disabled):hover {
+		background-color: var(--widget-bg-warn);
+	}
+
 	/* Outline style */
 	.pnx-btn-outline {
 		border: 1px solid var(--widget-border-btn);

package/src/components/ui/Button.js

@@ -23,7 +23,7 @@ export default class Button extends LitElement {
 	 * @memberof Panoramax.components.ui.Button#
 	 * @type {Object}
 	 * @property {boolean} [active=false] Whether the button is in an active state.
-	 * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat, inline, superinline)
+	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline)
 	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
 	 * @property {boolean} [disabled=false] Whether the button is disabled.
 	 * @property {string} [type] The button type (e.g., 'submit').

package/src/components/ui/CopyButton.js

@@ -38,7 +38,7 @@ export default class CopyButton extends LitElement {
      * @type {Object}
      * @property {string} [text] Text to copy in clipboard on click (use either this parameter or input, not both)
 	 * @property {input} [input] ID of a HTML input field to copy content from in clipboard (use either this parameter or text, not both)
-	 * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat, inline, superinline)
+	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline)
 	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
 	 * @property {boolean} [unstyled=false] Disable all styling (for list group integration)
 	 * @property {string} [title] Tooltip text displayed when hovering over the button

package/src/components/ui/LinkButton.js

@@ -31,7 +31,7 @@ export default class LinkButton extends LitElement {
 	 * @property {string} [title] Tooltip text displayed when hovering over the button
 	 * @property {string} [download] Indicates if the linked resource should be downloaded
 	 * @property {string} [class] Custom CSS class for additional styling
-	 * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat)
+	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, outline, flat, superflat)
 	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
 	 */
 	static properties = {

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

@@ -9,6 +9,5 @@ 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,6 +33,7 @@
         "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,6 +31,7 @@
         "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",

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

@@ -1,32 +0,0 @@
-<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/src/components/ui/widgets/PictureLegendActions.js

@@ -1,117 +0,0 @@
-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 */
-	_onShareClick() {
-		this._closeGroup();
-		this._parent._showShareOptions();
-	}
-
-	/** @private */
-	_onReportClick() {
-		this._closeGroup();
-		this._parent._showReportForm();
-	}
-
-	/** @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.full ? html`
-					<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>
-					`}
-				` : html`
-					<button @click=${this._onReportClick}>
-						${this._parent?._t.pnx.report}
-					</button>
-					<button @click=${this._onShareClick}>
-						${this._parent?._t.pnx.share}
-					</button>
-					${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}
-				` }
-			</pnx-list-group>
-		</pnx-togglable-group>`;
-	}
-}
-
-customElements.define("pnx-picture-legend-actions", PictureLegendActions);