@vcmap/ui 5.0.0-rc.6 → 5.0.0-rc.9

package/src/navigation/mapNavigation.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="nav-container">
+  <v-container :class="$vuetify.breakpoint.xs ? 'nav-container mobile' : 'nav-container'">
     <v-row>
       <VcsCompass
         :view-mode="viewMode"
@@ -13,26 +13,37 @@
         v-model="heading"
       />
     </v-row>
-    <v-row justify="center">
+    <v-row justify="center" v-if="$vuetify.breakpoint.mdAndUp">
       <VcsZoomButton
         @zoom-out="zoomOut()"
         @zoom-in="zoomIn()"
       />
     </v-row>
-    <v-row v-if="is3D" justify="center">
+    <v-row justify="center" v-if="is3D && $vuetify.breakpoint.mdAndUp">
       <TiltSlider v-model="tilt" />
     </v-row>
+    <v-row justify="center" v-if="$vuetify.breakpoint.mdAndUp">
+      <OrientationToolsButton
+        :icon="overviewAction.icon"
+        :tooltip="overviewAction.title"
+        :color="overviewAction.active ? 'primary' : undefined"
+        @click.stop="overviewAction.callback($event)"
+      />
+    </v-row>
   </v-container>
 </template>
 
 <script>
-  import { computed, inject, ref } from '@vue/composition-api';
+  import { computed, inject, ref, onUnmounted } from '@vue/composition-api';
   import { ObliqueMap, CesiumMap, OpenlayersMap } from '@vcmap/core';
   import { unByKey } from 'ol/Observable.js';
+  import { createOverviewMapAction } from '../actions/actionHelper.js';
+  import { getWindowComponentOptions } from './overviewMap.js';
   import VcsCompass from './vcsCompass.vue';
   import VcsZoomButton from './vcsZoomButton.vue';
   import TiltSlider from './tiltSlider.vue';
   import ObliqueRotation from './obliqueRotation.vue';
+  import OrientationToolsButton from './orientationToolsButton.vue';
 
   /**
    * @enum {string}
@@ -99,6 +110,7 @@
 
   export default {
     components: {
+      OrientationToolsButton,
       ObliqueRotation,
       TiltSlider,
       VcsZoomButton,
@@ -145,6 +157,18 @@
         },
       });
 
+      const { action, destroy } = createOverviewMapAction(
+        app.overviewMap,
+        getWindowComponentOptions(),
+        app.windowManager,
+      );
+
+      onUnmounted(() => {
+        if (destroy) {
+          destroy();
+        }
+      });
+
       return {
         viewMode,
         heading,
@@ -155,6 +179,7 @@
         zoomOut() { zoom(app.maps.activeMap, true); },
         left: () => {},
         right: () => {},
+        overviewAction: ref(action),
       };
     },
   };
@@ -166,8 +191,12 @@
     right: 2rem;
     bottom: 2rem;
     width: unset;
+    &.mobile{
+      top: 1rem;
+      right: 1rem;
+      bottom: auto;
+    }
   }
-
   .nav-container > {
     .row {
       margin-bottom: 15px;

package/src/navigation/orientationToolsButton.vue

@@ -23,7 +23,7 @@
 }
 </style>
 <script>
-  import { VcsTooltip } from '@vcsuite/ui-components';
+  import VcsTooltip from '../components/notification/VcsTooltip.vue';
 
   /**
    * A v-card with h & w 8. Requires an icon and binds all attributes & listeners to the v-card