Refine toolbox wording

FacilMap · Mar 5, 2024 · 03072a2 · 03072a2
1 parent 97c5b75
commit 03072a2
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 21 deletions.
diff --git 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
@@ -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>
diff --git 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
@@ -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
diff --git 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>>> {