@vcmap/ui 6.1.0-rc.6 → 6.1.0

package/src/i18n/de.d.ts

@@ -123,33 +123,37 @@ declare namespace messages {
             export { tooltip_1 as tooltip };
         }
     }
-    export namespace content {
+    export namespace mobileMenu {
         let title: string;
-        let empty: string;
-        namespace search {
+    }
+    export namespace content {
+        let title_1: string;
+        export { title_1 as title };
+        export let empty: string;
+        export namespace search {
             let placeholder: string;
         }
-        namespace helpAction {
-            let title_1: string;
-            export { title_1 as title };
-        }
-        namespace infoAction {
+        export namespace helpAction {
             let title_2: string;
             export { title_2 as title };
         }
-        namespace viewpointAction {
+        export namespace infoAction {
             let title_3: string;
             export { title_3 as title };
         }
-        namespace styleAction {
+        export namespace viewpointAction {
             let title_4: string;
             export { title_4 as title };
         }
-        namespace layerExtentAction {
-            export let name: string;
+        export namespace styleAction {
             let title_5: string;
             export { title_5 as title };
         }
+        export namespace layerExtentAction {
+            export let name: string;
+            let title_6: string;
+            export { title_6 as title };
+        }
     }
     export namespace navigation {
         let rotateButton: string;
@@ -174,13 +178,13 @@ declare namespace messages {
         }
         namespace obliqueFallback {
             export let message: string;
-            let title_6: string;
-            export { title_6 as title };
+            let title_7: string;
+            export { title_7 as title };
         }
     }
     export namespace categoryManager {
-        let title_7: string;
-        export { title_7 as title };
+        let title_8: string;
+        export { title_8 as title };
         let tooltip_2: string;
         export { tooltip_2 as tooltip };
     }
@@ -257,8 +261,8 @@ declare namespace messages {
             export let general: string;
             let name_1: string;
             export { name_1 as name };
-            let title_8: string;
-            export { title_8 as title };
+            let title_9: string;
+            export { title_9 as title };
             export let titlePlaceholder: string;
             export let interpolation: string;
             export let duration: string;
@@ -292,8 +296,8 @@ declare namespace messages {
         export namespace viewpoint {
             let name_4: string;
             export { name_4 as name };
-            let title_9: string;
-            export { title_9 as title };
+            let title_10: string;
+            export { title_10 as title };
             let titlePlaceholder_1: string;
             export { titlePlaceholder_1 as titlePlaceholder };
             export let groundPosition: string;
@@ -318,8 +322,8 @@ declare namespace messages {
             let outOfRange: string;
         }
         export namespace extent {
-            let title_10: string;
-            export { title_10 as title };
+            let title_11: string;
+            export { title_11 as title };
             export let projection: string;
             export let min: string;
             export let max: string;
@@ -334,8 +338,8 @@ declare namespace messages {
             export let toggle: string;
         }
         export namespace projection_1 {
-            let title_11: string;
-            export { title_11 as title };
+            let title_12: string;
+            export { title_12 as title };
             export let epsg: string;
             export let proj4: string;
             export let proj4Tooltip: string;
@@ -363,8 +367,8 @@ declare namespace messages {
             export let modifyInfo: string;
             export let styleHeader: string;
             export namespace snapping {
-                let title_12: string;
-                export { title_12 as title };
+                let title_13: string;
+                export { title_13 as title };
                 let help_1: string;
                 export { help_1 as help };
                 export let orthogonalTooltip: string;
@@ -432,14 +436,14 @@ declare namespace messages {
         }
     }
     export namespace settings {
-        let title_13: string;
-        export { title_13 as title };
+        let title_14: string;
+        export { title_14 as title };
         let tooltip_3: string;
         export { tooltip_3 as tooltip };
         export let languageSelector: string;
         export namespace displayQuality {
-            let title_14: string;
-            export { title_14 as title };
+            let title_15: string;
+            export { title_15 as title };
             export namespace level {
                 let low: string;
                 let medium: string;
@@ -447,15 +451,15 @@ declare namespace messages {
             }
         }
         export namespace theme {
-            let title_15: string;
-            export { title_15 as title };
+            let title_16: string;
+            export { title_16 as title };
             export let dark: string;
             export let light: string;
         }
     }
     export namespace help_3 {
-        let title_16: string;
-        export { title_16 as title };
+        let title_17: string;
+        export { title_17 as title };
         let tooltip_4: string;
         export { tooltip_4 as tooltip };
     }
@@ -470,10 +474,16 @@ declare namespace messages {
             let empty_2: string;
             export { empty_2 as empty };
         }
+        namespace deepPicking {
+            let title_18: string;
+            export { title_18 as title };
+            let headerTitle_1: string;
+            export { headerTitle_1 as headerTitle };
+        }
     }
     export namespace legend {
-        let title_17: string;
-        export { title_17 as title };
+        let title_19: string;
+        export { title_19 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
         let empty_3: string;
@@ -482,8 +492,8 @@ declare namespace messages {
         export let defaultLabelText: string;
     }
     export namespace search_1 {
-        let title_18: string;
-        export { title_18 as title };
+        let title_20: string;
+        export { title_20 as title };
         let tooltip_6: string;
         export { tooltip_6 as tooltip };
         export let select: string;
@@ -491,41 +501,42 @@ declare namespace messages {
         export { placeholder_1 as placeholder };
         export let zoomToFeatureAction: string;
         export let zoomToAll: string;
+        export let zoomToAllMobile: string;
     }
     export { search_1 as search };
     export namespace toolbox {
-        let title_19: string;
-        export { title_19 as title };
+        let title_21: string;
+        export { title_21 as title };
         let flight_1: string;
         export { flight_1 as flight };
         export let miscellaneous: string;
     }
     export namespace footer {
-        let title_20: string;
-        export { title_20 as title };
+        let title_22: string;
+        export { title_22 as title };
         export namespace attributions {
-            let title_21: string;
-            export { title_21 as title };
+            let title_23: string;
+            export { title_23 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
             let empty_4: string;
             export { empty_4 as empty };
         }
         export namespace imprint {
-            let title_22: string;
-            export { title_22 as title };
+            let title_24: string;
+            export { title_24 as title };
             let tooltip_8: string;
             export { tooltip_8 as tooltip };
         }
         export namespace dataProtection {
-            let title_23: string;
-            export { title_23 as title };
+            let title_25: string;
+            export { title_25 as title };
             let tooltip_9: string;
             export { tooltip_9 as tooltip };
         }
         export namespace positionDisplay {
-            let title_24: string;
-            export { title_24 as title };
+            let title_26: string;
+            export { title_26 as title };
             let projection_2: string;
             export { projection_2 as projection };
         }
@@ -537,6 +548,9 @@ declare namespace messages {
             let west: string;
             let nadir: string;
         }
+        export namespace mobile {
+            let rotationWarning: string;
+        }
     }
     export namespace notification {
         let error: string;

package/src/i18n/de.js

@@ -22,6 +22,7 @@ const messages = {
       tooltip: 'Aktuellen Kartenausschnitt teilen',
     },
   },
+  mobileMenu: { title: 'Menü' },
   content: {
     title: 'Inhalte',
     empty: 'Aktuell sind keine Einträge verfügbar.',
@@ -332,6 +333,10 @@ const messages = {
       collapse: 'Informationsliste minimieren',
       empty: 'Keine Informationen verfügbar',
     },
+    deepPicking: {
+      title: 'Was ist hier?',
+      headerTitle: 'Verfügbare Informationen',
+    },
   },
   legend: {
     title: 'Legende',
@@ -347,6 +352,7 @@ const messages = {
     placeholder: 'Suche nach Adresse oder Ort/Sehenswürdigkeit',
     zoomToFeatureAction: 'Auf Ergebnis zoomen',
     zoomToAll: 'Auf alle Ergebnisse zoomen',
+    zoomToAllMobile: 'Auf alle zoomen',
   },
   toolbox: {
     title: 'Werkzeugkasten',
@@ -380,6 +386,9 @@ const messages = {
       west: 'West',
       nadir: 'Nadir',
     },
+    mobile: {
+      rotationWarning: 'Rotieren um alle Feature zu benutzen',
+    },
   },
   notification: {
     error: 'Fehler',

package/src/i18n/en.d.ts

@@ -123,33 +123,37 @@ declare namespace messages {
             export { tooltip_1 as tooltip };
         }
     }
-    export namespace content {
+    export namespace mobileMenu {
         let title: string;
-        let empty: string;
-        namespace search {
+    }
+    export namespace content {
+        let title_1: string;
+        export { title_1 as title };
+        export let empty: string;
+        export namespace search {
             let placeholder: string;
         }
-        namespace helpAction {
-            let title_1: string;
-            export { title_1 as title };
-        }
-        namespace infoAction {
+        export namespace helpAction {
             let title_2: string;
             export { title_2 as title };
         }
-        namespace viewpointAction {
+        export namespace infoAction {
             let title_3: string;
             export { title_3 as title };
         }
-        namespace styleAction {
+        export namespace viewpointAction {
             let title_4: string;
             export { title_4 as title };
         }
-        namespace layerExtentAction {
-            export let name: string;
+        export namespace styleAction {
             let title_5: string;
             export { title_5 as title };
         }
+        export namespace layerExtentAction {
+            export let name: string;
+            let title_6: string;
+            export { title_6 as title };
+        }
     }
     export namespace navigation {
         let rotateButton: string;
@@ -174,13 +178,13 @@ declare namespace messages {
         }
         namespace obliqueFallback {
             export let message: string;
-            let title_6: string;
-            export { title_6 as title };
+            let title_7: string;
+            export { title_7 as title };
         }
     }
     export namespace categoryManager {
-        let title_7: string;
-        export { title_7 as title };
+        let title_8: string;
+        export { title_8 as title };
         let tooltip_2: string;
         export { tooltip_2 as tooltip };
     }
@@ -257,8 +261,8 @@ declare namespace messages {
             export let general: string;
             let name_1: string;
             export { name_1 as name };
-            let title_8: string;
-            export { title_8 as title };
+            let title_9: string;
+            export { title_9 as title };
             export let titlePlaceholder: string;
             export let interpolation: string;
             export let duration: string;
@@ -292,8 +296,8 @@ declare namespace messages {
         export namespace viewpoint {
             let name_4: string;
             export { name_4 as name };
-            let title_9: string;
-            export { title_9 as title };
+            let title_10: string;
+            export { title_10 as title };
             let titlePlaceholder_1: string;
             export { titlePlaceholder_1 as titlePlaceholder };
             export let groundPosition: string;
@@ -318,8 +322,8 @@ declare namespace messages {
             let outOfRange: string;
         }
         export namespace extent {
-            let title_10: string;
-            export { title_10 as title };
+            let title_11: string;
+            export { title_11 as title };
             export let projection: string;
             export let min: string;
             export let max: string;
@@ -334,8 +338,8 @@ declare namespace messages {
             export let toggle: string;
         }
         export namespace projection_1 {
-            let title_11: string;
-            export { title_11 as title };
+            let title_12: string;
+            export { title_12 as title };
             export let epsg: string;
             export let proj4: string;
             export let proj4Tooltip: string;
@@ -363,8 +367,8 @@ declare namespace messages {
             export let modifyInfo: string;
             export let styleHeader: string;
             export namespace snapping {
-                let title_12: string;
-                export { title_12 as title };
+                let title_13: string;
+                export { title_13 as title };
                 let help_1: string;
                 export { help_1 as help };
                 export let orthogonalTooltip: string;
@@ -432,14 +436,14 @@ declare namespace messages {
         }
     }
     export namespace settings {
-        let title_13: string;
-        export { title_13 as title };
+        let title_14: string;
+        export { title_14 as title };
         let tooltip_3: string;
         export { tooltip_3 as tooltip };
         export let languageSelector: string;
         export namespace displayQuality {
-            let title_14: string;
-            export { title_14 as title };
+            let title_15: string;
+            export { title_15 as title };
             export namespace level {
                 let low: string;
                 let medium: string;
@@ -447,15 +451,15 @@ declare namespace messages {
             }
         }
         export namespace theme {
-            let title_15: string;
-            export { title_15 as title };
+            let title_16: string;
+            export { title_16 as title };
             export let dark: string;
             export let light: string;
         }
     }
     export namespace help_3 {
-        let title_16: string;
-        export { title_16 as title };
+        let title_17: string;
+        export { title_17 as title };
         let tooltip_4: string;
         export { tooltip_4 as tooltip };
     }
@@ -470,10 +474,16 @@ declare namespace messages {
             let empty_2: string;
             export { empty_2 as empty };
         }
+        namespace deepPicking {
+            let title_18: string;
+            export { title_18 as title };
+            let headerTitle_1: string;
+            export { headerTitle_1 as headerTitle };
+        }
     }
     export namespace legend {
-        let title_17: string;
-        export { title_17 as title };
+        let title_19: string;
+        export { title_19 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
         let empty_3: string;
@@ -482,50 +492,51 @@ declare namespace messages {
         export let defaultLabelText: string;
     }
     export namespace search_1 {
-        let title_18: string;
-        export { title_18 as title };
+        let title_20: string;
+        export { title_20 as title };
         let tooltip_6: string;
         export { tooltip_6 as tooltip };
         export let select: string;
         let placeholder_1: string;
         export { placeholder_1 as placeholder };
         export let zoomToFeatureAction: string;
+        export let zoomToAllMobile: string;
         export let zoomToAll: string;
     }
     export { search_1 as search };
     export namespace toolbox {
-        let title_19: string;
-        export { title_19 as title };
+        let title_21: string;
+        export { title_21 as title };
         let flight_1: string;
         export { flight_1 as flight };
         export let miscellaneous: string;
     }
     export namespace footer {
-        let title_20: string;
-        export { title_20 as title };
+        let title_22: string;
+        export { title_22 as title };
         export namespace attributions {
-            let title_21: string;
-            export { title_21 as title };
+            let title_23: string;
+            export { title_23 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
             let empty_4: string;
             export { empty_4 as empty };
         }
         export namespace imprint {
-            let title_22: string;
-            export { title_22 as title };
+            let title_24: string;
+            export { title_24 as title };
             let tooltip_8: string;
             export { tooltip_8 as tooltip };
         }
         export namespace dataProtection {
-            let title_23: string;
-            export { title_23 as title };
+            let title_25: string;
+            export { title_25 as title };
             let tooltip_9: string;
             export { tooltip_9 as tooltip };
         }
         export namespace positionDisplay {
-            let title_24: string;
-            export { title_24 as title };
+            let title_26: string;
+            export { title_26 as title };
             let projection_2: string;
             export { projection_2 as projection };
         }
@@ -537,6 +548,9 @@ declare namespace messages {
             let west: string;
             let nadir: string;
         }
+        export namespace mobile {
+            let rotationWarning: string;
+        }
     }
     export namespace notification {
         let error: string;

package/src/i18n/en.js

@@ -22,6 +22,7 @@ const messages = {
       tooltip: 'Share current view of the map',
     },
   },
+  mobileMenu: { title: 'Menu' },
   content: {
     title: 'Content',
     empty: 'Currently there are no entries available.',
@@ -332,6 +333,10 @@ const messages = {
       collapse: 'Collapse information list',
       empty: 'No information available',
     },
+    deepPicking: {
+      title: "What's here?",
+      headerTitle: 'Available information',
+    },
   },
   legend: {
     title: 'Legend',
@@ -346,6 +351,7 @@ const messages = {
     select: 'Select result item',
     placeholder: 'Search for address or landmark/point of interest',
     zoomToFeatureAction: 'Zoom to result',
+    zoomToAllMobile: 'Zoom to all',
     zoomToAll: 'Zoom to all',
   },
   toolbox: {
@@ -380,6 +386,9 @@ const messages = {
       west: 'west',
       nadir: 'nadir',
     },
+    mobile: {
+      rotationWarning: 'Rotate to use all features',
+    },
   },
   notification: {
     error: 'Error',

package/src/legend/VcsLegend.vue

@@ -12,10 +12,16 @@
         :key="i"
         :value="entry.key"
         :heading="entry.title"
-        :header-actions="entry.actions"
       >
-        <v-list class="pl-6 pb-2">
+        <v-list class="pl-6 pb-2 pr-2">
           <div v-for="(item, idx) in entry.legend" :key="idx">
+            <VcsButton
+              v-if="item.popoutBtn && item.src"
+              class="popout-button ma-1"
+              icon="mdi-open-in-new"
+              tooltip="legend.openInNew"
+              @click="openInNew(item.src)"
+            />
             <div v-if="item.type === LegendType.Image">
               <img
                 :src="$st(item.src)"
@@ -51,6 +57,7 @@
   import { useComponentId } from '../components/composables.js';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './StyleLegendItem.vue';
+  import VcsButton from '../components/buttons/VcsButton.vue';
   import VcsExpansionPanel from '../components/section/VcsExpansionPanel.vue';
 
   /**
@@ -61,6 +68,7 @@
   export default {
     name: 'VcsLegend',
     components: {
+      VcsButton,
       VcsExpansionPanel,
       StyleLegendItem,
       VExpansionPanels,
@@ -113,6 +121,9 @@
         setIframeHeight,
         panels,
         cid,
+        openInNew(src) {
+          window.open(src, '_blank');
+        },
       };
     },
   };
@@ -122,5 +133,13 @@
   .legend-image {
     max-width: 100%;
     height: auto;
+    position: relative;
+  }
+  .popout-button {
+    position: absolute;
+    // Matches the pr-2 padding of the LegendItem
+    right: 8px;
+    background-color: rgb(var(--v-theme-base-lighten-2));
+    z-index: 1;
   }
 </style>

package/src/legend/VcsLegend.vue.d.ts

@@ -12,6 +12,7 @@ declare const _default: import("vue").DefineComponent<{
     setIframeHeight: (id: string) => void;
     panels: import("vue").Ref<string[]>;
     cid: string;
+    openInNew(src: any): void;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     entries: {
         type: ArrayConstructor;

package/src/legend/legendHelper.d.ts

@@ -61,16 +61,7 @@ export function getImageSrcFromShape(image: import("ol/style/Image.js").Options)
  * @property {string} title - layer or entry name
  * @property {boolean} [open=true] - panel state of entry
  * @property {Array<LegendItem>} legend - legend properties
- * @property {Array<import("../actions/actionHelper.js").VcsAction>} actions - popout actions
  */
-/**
- * creates a LegendEntry with title, options and optionally popout action to the entries array
- * @param {string} key - layerName
- * @param {string} title
- * @param {Array<LegendItem>} legend
- * @returns {LegendEntry}
- */
-export function createLegendEntry(key: string, title: string, legend: Array<LegendItem>): LegendEntry;
 /**
  *
  * @param {import("../vcsUiApp.js").default} app
@@ -165,8 +156,4 @@ export type LegendEntry = {
      * - legend properties
      */
     legend: Array<LegendItem>;
-    /**
-     * - popout actions
-     */
-    actions: Array<import("../actions/actionHelper.js").VcsAction>;
 };