feat(plugins/iconMenu): migrate plugin

examples/iceberg/components/IcebergMap.vue

@@ -40,10 +40,11 @@ watch(map, (map) => {
 			displayComponent: true,
 			layoutTag: 'TOP_RIGHT',
 			menus: [
-				{
-					plugin: pluginFullscreen(),
-					hint: 'Full of yourself',
-				},
+				[
+					{
+						plugin: pluginFullscreen(),
+					},
+				],
 			],
 		}),
 		pluginToast({

examples/snowbox/GeoLocationMock.ce.vue

@@ -0,0 +1,37 @@
+<template>
+	<button
+		class="kern-btn kern-btn--secondary mock-button"
+		@click="clicked = !clicked"
+	>
+		<span class="kern-icon" :class="icon" aria-hidden="true" />
+		<span class="kern-label kern-sr-only"> Locate me </span>
+	</button>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const clicked = ref(false)
+const icon = computed(() =>
+	clicked.value ? 'kern-icon-fill--near-me' : 'kern-icon--near-me'
+)
+</script>
+
+<style scoped>
+.kern-btn {
+	background: var(--kern-color-layout-background-default);
+	box-shadow:
+		0 1px 1px 0 rgba(53, 57, 86, 0.16),
+		0 1px 2px 0 rgba(53, 57, 86, 0.25),
+		0 1px 6px 0 rgba(110, 117, 151, 0.25);
+	border: none;
+	pointer-events: all;
+
+	&:focus,
+	&:hover {
+		background: var(--kern-color-layout-background-default);
+		border: solid var(--kern-color-action-on-default);
+		outline: solid var(--kern-color-action-default);
+	}
+}
+</style>

examples/snowbox/YetAnotherEmptyComponent.vue

@@ -0,0 +1,7 @@
+<template>
+	<div style="background: #fff">Awesome</div>
+</template>
+
+<script setup lang="ts">
+// keep this block to enforce language
+</script>

examples/snowbox/index.js

@@ -12,6 +12,8 @@
 import EmptyComponent from './EmptyComponent.vue'
 import styleJsonUrl from './style.json?url'
 import AnotherEmptyComponent from './AnotherEmptyComponent.vue'
+import YetAnotherEmptyComponent from './YetAnotherEmptyComponent.vue'
+import GeoLocationMockCe from './GeoLocationMock.ce.vue'
 
 const basemapId = '23420'
 const basemapGreyId = '23421'
@@ -51,7 +53,7 @@
 	},
 }
 
 // TODO: Re-enable with isSelectable
 /*
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
@@ -95,7 +97,7 @@
 				visibility: true,
 			},
 		],
-		layout: 'nineRegions',
+		layout: 'standard',
 		checkServiceAvailability: true,
 		featureStyles: styleJsonUrl,
 		markers: {
@@ -118,14 +120,14 @@
 						stroke: '#FFFFFF',
 						fill: '#333333',
 					},
 					// TODO(dopenguin): Has some HMR issues, needs to be fixed
 					// isSelectable: isReportSelectable,
 				},
 			],
 			clusterClickZoom: true,
 		},
 		// theme: dataportTheme,
 		/*
 			TODO(dopenguin): Surrounding application should be able give information about dark or light mode via update of a state parameter; light mode by default
 		 */
 		locales: [
@@ -138,6 +140,12 @@
 							label_off: 'Mach klein',
 						},
 					},
+					iconMenu: {
+						hints: {
+							attributions: 'LMAO',
+							fullscreen: 'BEEEEEG YOSHEEEEE',
+						},
+					},
 				},
 			},
 		],
@@ -172,48 +180,67 @@
 	document.getElementById('secondMapContainer').innerText = ''
 })
 
+addPlugin(
+	map,
+	pluginToast({
+		displayComponent: true,
+		layoutTag: 'BOTTOM_MIDDLE',
+	})
+)
 addPlugin(
 	map,
 	pluginIconMenu({
 		displayComponent: true,
 		layoutTag: 'TOP_RIGHT',
 		initiallyOpen: 'kewl',
-		menus: [
-			{
-				plugin: pluginFullscreen(),
-				hint: 'Full of yourself',
-			},
-			// TODO: Delete these two including the component once another plugin is implemented
+		focusMenus: [
 			{
 				plugin: {
-					component: EmptyComponent,
-					id: 'kewl',
+					component: YetAnotherEmptyComponent,
+					id: 'attributions',
 					locales: [],
 				},
-				icon: 'kern-icon-fill--layers',
-				hint: 'Something layered',
+				icon: 'kern-icon--near-me',
 			},
-			{
-				plugin: {
-					component: AnotherEmptyComponent,
-					id: 'realKewl',
-					locales: [],
+		],
+		menus: [
+			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
+			[
+				{
+					plugin: {
+						component: GeoLocationMockCe,
+						id: 'geoLocationMock',
+						locales: [],
+					},
 				},
-				icon: 'kern-icon--layers',
-				hint: 'Something kewl',
-			},
+			],
+			[
+				{
+					plugin: {
+						component: AnotherEmptyComponent,
+						id: 'realKewl',
+						locales: [],
+					},
+					icon: 'kern-icon--share',
+				},
+			],
+			[
+				{
+					plugin: {
+						component: EmptyComponent,
+						id: 'kewl',
+						locales: [],
+					},
+					icon: 'kern-icon-fill--layers',
+				},
+				{
+					plugin: pluginFullscreen({}),
+				},
+			],
 		],
 	})
 )
 
-addPlugin(
-	map,
-	pluginToast({
-		displayComponent: true,
-		layoutTag: 'BOTTOM_MIDDLE',
-	})
-)
-
 const toastStore = getStore(map, 'toast')
 toastStore.addToast({
 	text: 'Hallo Welt',

src/components/PolarIconButton.ce.vue

@@ -0,0 +1,100 @@
+<template>
+	<button
+		class="kern-btn kern-btn--secondary polar-icon-button"
+		:class="{ 'polar-icon-button-active': active }"
+	>
+		<span
+			class="kern-icon"
+			:class="{ [icon]: true, 'polar-icon-button-icon-active': active }"
+			aria-hidden="true"
+		/>
+		<span class="kern-label kern-sr-only">{{ hint }}</span>
+		<span
+			v-if="tooltipPosition && !hasSmallDisplay"
+			class="polar-tooltip"
+			:class="`polar-tooltip-${tooltipPosition}`"
+			aria-hidden="true"
+		>
+			{{ hint }}
+		</span>
+	</button>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useCoreStore } from '@/core/stores/export'
+
+defineProps<{
+	hint: string
+	icon: string
+	active?: boolean
+	tooltipPosition?: 'left' | 'right'
+}>()
+const { hasSmallDisplay } = storeToRefs(useCoreStore())
+</script>
+
+<style scoped>
+.polar-icon-button {
+	position: relative;
+	background: var(--kern-color-layout-background-default);
+	box-shadow:
+		0 1px 1px 0 rgba(53, 57, 86, 0.16),
+		0 1px 2px 0 rgba(53, 57, 86, 0.25),
+		0 1px 6px 0 rgba(110, 117, 151, 0.25);
+	border: none;
+	pointer-events: all;
+
+	&:focus,
+	&:hover {
+		background: var(--kern-color-layout-background-default);
+		border: solid var(--kern-color-action-on-default);
+		outline: solid var(--kern-color-action-default);
+	}
+
+	.polar-icon-button-active {
+		background: var(--kern-color-action-default);
+
+		&:focus,
+		&:hover {
+			background: var(--kern-color-action-default);
+			border: solid var(--kern-color-action-on-default);
+			outline: solid var(--kern-color-action-default);
+		}
+	}
+
+	.polar-icon-button-icon-active {
+		background: var(--kern-color-layout-background-default);
+	}
+
+	.polar-tooltip {
+		z-index: 42;
+		position: absolute;
+		padding: 5px 16px;
+		font-family: sans-serif;
+		background: #616161e6;
+		color: #fff;
+		border: 2px solid #fff;
+		border-radius: 4px;
+		font-size: 14px;
+		line-height: 22px;
+		white-space: nowrap;
+		pointer-events: none;
+		transition-property: opacity, right, left;
+		transition-duration: 250ms;
+		transition-timing-function: ease;
+		opacity: 0;
+
+		&.polar-tooltip-left {
+			right: calc(100% + 0.75rem);
+		}
+		&.polar-tooltip-right {
+			left: calc(100% + 0.75rem);
+		}
+	}
+
+	&:hover .polar-tooltip,
+	&:focus-visible .polar-tooltip {
+		opacity: 1;
+	}
+}
+</style>

src/core/stores/export.ts

@@ -29,7 +29,7 @@ export const useCoreStore = defineStore('core', () => {
 		/**
 		 * The current height of the map.
 		 *
-		 * @internal
+		 * @alpha
 		 * @readonly
 		 */
 		clientHeight: computed(() => mainStore.clientHeight),
@@ -45,31 +45,40 @@ export const useCoreStore = defineStore('core', () => {
 		 * Whether a mobile device is held horizontally.
 		 * True if {@link hasSmallHeight} and {@link hasWindowSize} are true.
 		 *
-		 * @internal
+		 * @alpha
 		 * @readonly
 		 */
 		deviceIsHorizontal: computed(() => mainStore.deviceIsHorizontal),
 
+		/**
+		 * Whether the map has a maximum height of {@link SMALL_DISPLAY_HEIGHT} and
+		 * a maximum width of {@link SMALL_DISPLAY_WIDTH}.
+		 *
+		 * @alpha
+		 * @readonly
+		 */
+		hasSmallDisplay: computed(() => mainStore.hasSmallDisplay),
+
 		/**
 		 * Whether the height of the map is smaller than 480px.
 		 *
-		 * @internal
+		 * @alpha
 		 * @readonly
 		 */
 		hasSmallHeight: computed(() => mainStore.hasSmallHeight),
 
 		/**
 		 * Whether the width of the map is smaller than 768px.
 		 *
-		 * @internal
+		 * @alpha
 		 * @readonly
 		 */
 		hasSmallWidth: computed(() => mainStore.hasSmallWidth),
 
 		/**
 		 * Whether the size of the map equals the size of the browser window.
 		 *
-		 * @internal
+		 * @alpha
 		 * @readonly
 		 */
 		hasWindowSize: computed(() => mainStore.hasWindowSize),

src/plugins/fullscreen/components/FullscreenUI.ce.vue

@@ -1,29 +1,33 @@
 <template>
-	<button
-		class="kern-btn kern-btn--primary"
-		@click="fullscreenEnabled = !fullscreenEnabled"
-	>
-		<span
-			:class="[
-				'kern-icon',
-				fullscreenEnabled
-					? 'kern-icon--fullscreen-exit'
-					: 'kern-icon--fullscreen',
-			]"
-			aria-hidden="true"
-		/>
-		<span class="kern-label kern-sr-only">{{
+	<PolarIconButton
+		:class="layout === 'standard' ? 'polar-plugin-fullscreen-standard' : ''"
+		:hint="
 			$t(($) => $.button.label, {
 				ns: PluginId,
 				context: fullscreenEnabled ? 'off' : 'on',
 			})
-		}}</span>
-	</button>
+		"
+		:icon="
+			fullscreenEnabled ? 'kern-icon--fullscreen-exit' : 'kern-icon--fullscreen'
+		"
+		tooltip-position="left"
+		@click="() => (fullscreenEnabled = !fullscreenEnabled)"
+	/>
 </template>
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { useFullscreenStore } from '../store'
 import { PluginId } from '../types'
+import PolarIconButton from '@/components/PolarIconButton.ce.vue'
+import { useCoreStore } from '@/core/stores/export.ts'
+
+const { layout } = storeToRefs(useCoreStore())
 const { fullscreenEnabled } = storeToRefs(useFullscreenStore())
 </script>
+
+<style scoped>
+.polar-icon-button.polar-plugin-fullscreen-standard {
+	box-shadow: none;
+}
+</style>