From 03072a29e917ec0c4df3e7e5b7202d55ddc2cf0a Mon Sep 17 00:00:00 2001
From: Candid Dauth <cdauth@cdauth.eu>
Date: Tue, 5 Mar 2024 06:12:57 +0100
Subject: [PATCH] Refine toolbox wording

---
 .../toolbox/toolbox-help-dropdown.vue         | 29 ++++++++++++-----
 .../toolbox/toolbox-map-style-dropdown.vue    | 31 +++++++++++++------
 .../toolbox/toolbox-tools-dropdown.vue        |  2 +-
 .../src/lib/components/toolbox/toolbox.vue    | 14 +++++++++
 .../assets/icons/glyphicons/new-window.svg    |  1 +
 leaflet/rollup-icons.ts                       |  6 ++--
 6 files changed, 62 insertions(+), 21 deletions(-)
 create mode 100644 leaflet/assets/icons/glyphicons/new-window.svg

diff --git a/frontend/src/lib/components/toolbox/toolbox-help-dropdown.vue b/frontend/src/lib/components/toolbox/toolbox-help-dropdown.vue
index 8c20c64e..65818d3d 100644
--- a/frontend/src/lib/components/toolbox/toolbox-help-dropdown.vue
+++ b/frontend/src/lib/components/toolbox/toolbox-help-dropdown.vue
@@ -3,6 +3,7 @@
 	import { ref } from "vue";
 	import DropdownMenu from "../ui/dropdown-menu.vue";
 	import { injectContextRequired } from "../facil-map-context-provider/facil-map-context-provider.vue";
+	import Icon from "../ui/icon.vue";
 
 	const context = injectContextRequired();
 
@@ -26,38 +27,50 @@
 	>
 		<li>
 			<a
-				class="dropdown-item"
+				class="dropdown-item fm-toolbox-new-window-item"
 				href="https://docs.facilmap.org/users/"
 				target="_blank"
 				draggable="false"
-			>Documentation</a>
+			>
+				<span>Documentation</span>
+				<Icon icon="new-window"></Icon>
+			</a>
 		</li>
 
 		<li>
 			<a
-				class="dropdown-item"
+				class="dropdown-item fm-toolbox-new-window-item"
 				href="https://matrix.to/#/#facilmap:rankenste.in"
 				target="_blank"
 				draggable="false"
-			>Matrix chat room</a>
+			>
+				<span>Matrix chat room</span>
+				<Icon icon="new-window"></Icon>
+			</a>
 		</li>
 
 		<li>
 			<a
-				class="dropdown-item"
+				class="dropdown-item fm-toolbox-new-window-item"
 				href="https://github.com/FacilMap/facilmap/issues"
 				target="_blank"
 				draggable="false"
-			>Report a problem</a>
+			>
+				<span>Report a problem</span>
+				<Icon icon="new-window"></Icon>
+			</a>
 		</li>
 
 		<li>
 			<a
-				class="dropdown-item"
+				class="dropdown-item fm-toolbox-new-window-item"
 				href="https://github.com/FacilMap/facilmap/discussions"
 				target="_blank"
 				draggable="false"
-			>Ask a question</a>
+			>
+				<span>Ask a question</span>
+				<Icon icon="new-window"></Icon>
+			</a>
 		</li>
 
 		<li>
diff --git a/frontend/src/lib/components/toolbox/toolbox-map-style-dropdown.vue b/frontend/src/lib/components/toolbox/toolbox-map-style-dropdown.vue
index f0c704ed..a0f25b1e 100644
--- a/frontend/src/lib/components/toolbox/toolbox-map-style-dropdown.vue
+++ b/frontend/src/lib/components/toolbox/toolbox-map-style-dropdown.vue
@@ -3,6 +3,7 @@
 	import { computed } from "vue";
 	import DropdownMenu from "../ui/dropdown-menu.vue";
 	import { injectContextRequired, requireMapContext } from "../facil-map-context-provider/facil-map-context-provider.vue";
+	import Icon from "../ui/icon.vue";
 
 	const context = injectContextRequired();
 	const mapContext = requireMapContext(context);
@@ -47,7 +48,7 @@
 <template>
 	<DropdownMenu
 		tag="li"
-		class="nav-item"
+		class="nav-item fm-toolbox-map-style-dropdown"
 		isLink
 		buttonClass="nav-link"
 		menuClass="dropdown-menu-end"
@@ -83,38 +84,50 @@
 
 		<li>
 			<a
-				class="dropdown-item"
+				class="dropdown-item fm-toolbox-new-window-item"
 				:href="links.osm"
 				target="_blank"
 				draggable="false"
-			>Open this on OpenStreetMap</a>
+			>
+				<span>OpenStreetMap</span>
+				<Icon icon="new-window"></Icon>
+			</a>
 		</li>
 
 		<li v-if="!context.hideCommercialMapLinks">
 			<a
-				class="dropdown-item"
+				class="dropdown-item fm-toolbox-new-window-item"
 				:href="links.google"
 				target="_blank"
 				draggable="false"
-			>Open this on Google Maps</a>
+			>
+				<span>Google Maps</span>
+				<Icon icon="new-window"></Icon>
+			</a>
 		</li>
 
 		<li v-if="!context.hideCommercialMapLinks">
 			<a
-				class="dropdown-item"
+				class="dropdown-item fm-toolbox-new-window-item"
 				:href="links.googleSatellite"
 				target="_blank"
 				draggable="false"
-			>Open this on Google Maps (Satellite)</a>
+			>
+				<span>Google Maps (Satellite)</span>
+				<Icon icon="new-window"></Icon>
+			</a>
 		</li>
 
 		<li v-if="!context.hideCommercialMapLinks">
 			<a
-				class="dropdown-item"
+				class="dropdown-item fm-toolbox-new-window-item"
 				:href="links.bing"
 				target="_blank"
 				draggable="false"
-			>Open this on Bing Maps</a>
+			>
+				<span>Bing Maps</span>
+				<Icon icon="new-window"></Icon>
+			</a>
 		</li>
 	</DropdownMenu>
 </template>
\ No newline at end of file
diff --git a/frontend/src/lib/components/toolbox/toolbox-tools-dropdown.vue b/frontend/src/lib/components/toolbox/toolbox-tools-dropdown.vue
index 9fc01a08..5fa36b4b 100644
--- a/frontend/src/lib/components/toolbox/toolbox-tools-dropdown.vue
+++ b/frontend/src/lib/components/toolbox/toolbox-tools-dropdown.vue
@@ -93,7 +93,7 @@
 				href="javascript:"
 				@click="dialog = 'history'; emit('hide-sidebar')"
 				draggable="false"
-			>Show edit history</a>
+			>History</a>
 		</li>
 	</DropdownMenu>
 
diff --git a/frontend/src/lib/components/toolbox/toolbox.vue b/frontend/src/lib/components/toolbox/toolbox.vue
index 136c8050..4087aeef 100644
--- a/frontend/src/lib/components/toolbox/toolbox.vue
+++ b/frontend/src/lib/components/toolbox/toolbox.vue
@@ -106,6 +106,20 @@
 			}
 		}
 
+		.fm-toolbox-new-window-item {
+			display: flex;
+			align-items: center;
+
+			> span:nth-child(1) {
+				flex-grow: 1;
+			}
+
+			> span:nth-child(2) {
+				display: inline-flex;
+				margin-left: 0.5rem;
+			}
+		}
+
 		@media print {
 			display: none;
 		}
diff --git a/leaflet/assets/icons/glyphicons/new-window.svg b/leaflet/assets/icons/glyphicons/new-window.svg
new file mode 100644
index 00000000..942ce3e2
--- /dev/null
+++ b/leaflet/assets/icons/glyphicons/new-window.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200"><path d="M750 0h400q21 0 35.5 14.5T1200 50v400q0 21-10.5 25t-24.5-10l-109-109-312 312q-15 15-35.5 15T673 668L532 527q-15-15-15-35.5t15-35.5l312-312L735 35q-14-14-10-24.5T750 0M456 300H300q-41 0-70.5 29.5T200 400v500q0 41 29.5 70.5T300 1000h500q41 0 70.5-29.5T900 900V752l200-200v298q0 165-93.5 257.5T750 1200H350q-165 0-257.5-92.5T0 850V450q0-165 92.5-257.5T350 100h300z"/></svg>
\ No newline at end of file
diff --git a/leaflet/rollup-icons.ts b/leaflet/rollup-icons.ts
index ad50c7ea..8bc97089 100644
--- a/leaflet/rollup-icons.ts
+++ b/leaflet/rollup-icons.ts
@@ -11,9 +11,9 @@ const require = createRequire(import.meta.url);
 
 const coreIcons = [
 	"arrow-left", "arrow-right", "car", "check", "circle-info", "cog", "copy", "info-sign",
-	"menu-hamburger", "minus", "person-biking", "person-walking", "plus", "question-sign", "qrcode",
-	"remove", "resize-horizontal", "resize-vertical", "screenshot", "search", "slash",
-	"triangle-bottom", "triangle-top", "unchecked", "zoom-in"
+	"menu-hamburger", "minus", "new-window", "person-biking", "person-walking", "plus",
+	"question-sign", "qrcode", "remove", "resize-horizontal", "resize-vertical", "screenshot",
+	"search", "slash", "triangle-bottom", "triangle-top", "unchecked", "zoom-in"
 ];
 
 async function getIconFilenames(): Promise<Record<string, Record<string, string>>> {