@vcmap/ui 5.0.0-rc.20 → 5.0.0-rc.22

package/src/legend/vcsLegend.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card
+  <v-sheet
     class="overflow-y-auto"
   >
     <v-expansion-panels
@@ -7,47 +7,48 @@
       multiple
       v-if="entries.length > 0"
       v-model="panels"
+      class="rounded-0"
     >
       <v-expansion-panel
         v-for="(entry,i) in entries"
         :key="i"
-        class="pa-0 ma-0"
+        class="px-2"
         @change="entry.open = !entry.open"
       >
         <v-expansion-panel-header hide-actions>
-          {{ $t(entry.title) }}
           <template #default="{ open }">
-            <div class="d-flex">
-              <v-icon :class="{ 'v-treeview-node__toggle': !open }">
-                mdi-chevron-down
-              </v-icon>
-              <VcsTreeviewLeaf class="w-full" :item="entry" />
+            <div class="d-flex justify-space-between">
+              <div class="d-flex align-center">
+                <v-icon class="mr-1" :class="{ 'rotate': !open }">
+                  mdi-chevron-down
+                </v-icon>
+                {{ $t(entry.title) }}
+              </div>
+              <VcsActionButtonList small :actions="entry.actions" />
             </div>
           </template>
         </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        <v-expansion-panel-content class="pl-6 pb-2">
           <v-list dense>
             <div v-for="(item, idx) in entry.legend" :key="idx">
-              <div v-if="item.type === LegendType.Image" class="mx-2">
+              <div v-if="item.type === LegendType.Image">
                 <img
                   :src="$t(item.src)"
-                  max-width="287"
-                  max-height="auto"
-                  class="mx-2 legend-image"
+                  class="legend-image"
                   :title="item.tooltip"
                 >
               </div>
-              <div v-else-if="item.type === LegendType.Iframe" class="mx-2">
+              <div v-else-if="item.type === LegendType.Iframe">
                 <iframe
                   :id="`legendIframe${idx}`"
                   :src="$t(item.src)"
                   scrolling="no"
-                  width="287"
+                  style="width: 100%; height: 100%;"
                   frameBorder="0"
                   @load="setIframeHeight(`legendIframe${idx}`)"
                 />
               </div>
-              <style-legend-item v-else :item="item" class="mx-2" />
+              <style-legend-item v-else :item="item" />
             </div>
           </v-list>
         </v-expansion-panel-content>
@@ -56,13 +57,12 @@
     <v-sheet v-else class="ma-2">
       {{ $t('legend.empty') }}
     </v-sheet>
-  </v-card>
+  </v-sheet>
 </template>
 
 <script>
 
   import {
-    VCard,
     VExpansionPanels,
     VExpansionPanel,
     VExpansionPanelHeader,
@@ -74,7 +74,7 @@
   import { computed } from 'vue';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './styleLegendItem.vue';
-  import VcsTreeviewLeaf from '../components/lists/VcsTreeviewLeaf.vue';
+  import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
 
   /**
    * @description A component rendering configured legend information for active layers.
@@ -84,9 +84,8 @@
   export default {
     name: 'VcsLegend',
     components: {
-      VcsTreeviewLeaf,
+      VcsActionButtonList,
       StyleLegendItem,
-      VCard,
       VExpansionPanels,
       VExpansionPanel,
       VExpansionPanelHeader,
@@ -130,17 +129,11 @@
 </script>
 
 <style lang="scss" scoped>
-.v-list-item--dense {
-  height: 32px;
-}
-::v-deep {
-  .treeview-label {
-    max-width: 189px;
-  }
-}
 .legend-image {
-  max-width: 287px;
+  max-width: 100%;
   height: auto;
-  width: auto;
+}
+.rotate {
+  transform: rotate(-90deg);
 }
 </style>

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -14,12 +14,12 @@
           :icon="group.icon"
           :tooltip="group.title"
           :active="open || hasActiveAction"
-          :color="hasActiveAction ? 'primary' : 'basic'"
+          :color="hasActiveAction ? 'primary' : ''"
           v-bind="attrs"
           v-on="on"
           large
         >
-          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" color="accent" class="text--darken-3" />
+          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
         </VcsButton>
       </template>
 
@@ -28,7 +28,6 @@
         class="vcs-toolbox-2 toolbar__secondary mx-auto v-sheet marginToTop"
         :height="40"
         width="fit-content"
-        color="basic"
         dense
       >
         <v-toolbar-items class="w-full">

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -33,7 +33,7 @@
           :width="16"
           large
         >
-          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" color="accent" class="text--darken-3" />
+          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
         </VcsButton>
       </template>
 
@@ -41,7 +41,6 @@
         class="vcs-toolbox-2 toolbar__secondary mx-auto v-sheet marginToTop justify-center"
         :height="40"
         width="fit-content"
-        color="basic"
         dense
       >
         <v-toolbar-items class="w-full">
@@ -62,6 +61,8 @@
   </div>
 </template>
 <style lang="scss">
+@import '../../styles/shades.scss';
+
 .vcs-toolbox-action-selected > .v-btn.vcs-button--large {
   max-width: 40px;
 }
@@ -71,9 +72,14 @@
 }
 
 .vcs-toolbox-action-select-button--active {
-  //border: 2px solid var(--v-basic-base);
-  border-radius: 5px;
-  background: var(--v-basic-base);
+  //border: 2px solid var(--v-shades-base);
+  border-radius: 4px;
+}
+.theme--light .vcs-toolbox-action-select-button--active {
+  background: map-get($shades, 'white');
+}
+.theme--dark .vcs-toolbox-action-select-button--active {
+  background: map-get($shades, 'black');
 }
 
 .vcs-toolbox-2 {

package/src/manager/toolbox/ToolboxManager.vue

@@ -50,13 +50,6 @@
         padding: 0;
       }
     }
-
-    &.theme--light.v-toolbar.v-sheet {
-      background-color: #ffffffda;
-    }
-    &.theme--dark.v-toolbar.v-sheet {
-      background-color: #000000da;
-    }
   }
 
   .marginToTop {

package/src/manager/window/WindowComponent.vue

@@ -20,7 +20,6 @@
       class="pa-2"
       :class="{
         'cursor-grab': isDynamic,
-        'grey--text': !isOnTop,
       }"
     >
       <slot name="headerComponent" :props="$attrs" />

package/src/manager/window/WindowComponentHeader.vue

@@ -4,11 +4,11 @@
       <v-icon
         v-if="windowState.headerIcon"
         class="mr-2"
-        :class="{ 'text--primary': isOnTop }"
+        :class="{ 'primary--text': isOnTop }"
         v-text="windowState.headerIcon"
       />
       <h3
-        class="font-size-14 d-inline-block user-select-none font-weight-bold"
+        class="d-inline-block user-select-none font-weight-bold"
         :class="{ 'text--primary': isOnTop }"
       >
         {{ $t(windowState.headerTitle) }}

package/src/navigation/overviewMap.js

@@ -20,7 +20,7 @@ import VectorSource from 'ol/source/Vector.js';
 import { Icon } from 'ol/style.js';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import OverviewMapClickedInteraction from './overviewMapClickedInteraction.js';
-import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
+import { getDefaultPrimaryColor, getColorByKey } from '../vuePlugins/vuetify.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import VcsMap from '../application/VcsMap.vue';
 
@@ -112,7 +112,7 @@ class OverviewMap {
      */
     this._obliqueSelectedImageLayer = null;
 
-    const primary = app.uiConfig.config.value.primaryColor ?? defaultPrimaryColor;
+    const primary = app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor();
     const fillColor = Color.fromCssColorString('#EDEDED');
 
     /**
@@ -165,7 +165,7 @@ class OverviewMap {
      * @type {import("@vcmap/core").VectorStyleItem}
      */
     this.cameraIconStyle = new VectorStyleItem({
-      image: getCameraIcon(defaultPrimaryColor),
+      image: getCameraIcon(getDefaultPrimaryColor()),
     });
 
     /**
@@ -229,16 +229,7 @@ class OverviewMap {
           this._map.layerCollection.remove(clone);
         }
       }),
-      this._app.uiConfig.added.addEventListener((item) => {
-        if (item?.name === 'primaryColor') {
-          this._updatePrimaryColor(item.value);
-        }
-      }),
-      this._app.uiConfig.removed.addEventListener((item) => {
-        if (item?.name === 'primaryColor') {
-          this._updatePrimaryColor(defaultPrimaryColor);
-        }
-      }),
+      this._app.themeChanged.addEventListener(this._updatePrimaryColor.bind(this)),
     ];
   }
 
@@ -275,10 +266,10 @@ class OverviewMap {
   }
 
   /**
-   * @param {string} color
    * @private
    */
-  _updatePrimaryColor(color) {
+  _updatePrimaryColor() {
+    const color = getColorByKey('primary');
     this.obliqueUnselectedStyle?.stroke?.setColor(color);
     this.obliqueSelectedStyle?.stroke?.setColor(color);
     this._obliqueTileLayer?.forceRedraw?.();

package/src/navigation/tiltSlider.vue

@@ -10,8 +10,7 @@
         v-bind="attrs"
       >
         <v-slider
-          color="secondary"
-          track-color="accent"
+          track-color="base lighten-3"
           v-model="tilt"
           :max="0"
           :min="-90"
@@ -24,6 +23,7 @@
   </VcsTooltip>
 </template>
 <style lang="scss" scoped>
+  @import '../styles/shades.scss';
   .vcs-slider{
     ::v-deep {
       .v-slider {
@@ -44,6 +44,34 @@
       }
     }
   }
+  .v-application .theme--light.vcs-slider {
+    ::v-deep {
+      .v-slider {
+        .v-slider__track-container{
+          .v-slider__track-fill {
+            background-color: map-get($shades, 'black') !important;
+          }
+        }
+        .v-slider__thumb {
+          background-color: map-get($shades, 'black') !important;
+        }
+      }
+    }
+  }
+  .v-application .theme--dark.vcs-slider {
+    ::v-deep {
+      .v-slider {
+        .v-slider__track-container{
+          .v-slider__track-fill {
+            background-color: map-get($shades, 'white') !important;
+          }
+        }
+        .v-slider__thumb {
+          background-color: map-get($shades, 'white') !important;
+        }
+      }
+    }
+  }
 </style>
 <script>
   import { clamp } from 'ol/math.js';
@@ -93,7 +121,3 @@
     },
   };
 </script>
-
-<style scoped>
-
-</style>

package/src/search/resultsComponent.vue

@@ -6,7 +6,6 @@
       <v-list-item
         v-for="(item, index) in results"
         :key="index"
-        color="secondary"
         class="px-0"
       >
         <v-list-item-content>

package/src/search/search.js

@@ -13,7 +13,7 @@ import { check } from '@vcsuite/check';
 import { Icon } from 'ol/style.js';
 import { getLogger } from '@vcsuite/logger';
 import { vcsAppSymbol } from '../pluginHelper.js';
-import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
+import { getDefaultPrimaryColor, getColorByKey } from '../vuePlugins/vuetify.js';
 import { getViewpointFromFeature } from '../actions/actionHelper.js';
 
 /**
@@ -70,39 +70,29 @@ function setupSearchResultLayer(app) {
   app.layers.add(resultLayer);
 
   const style = new VectorStyleItem({
-    image: getPointResultIcon(defaultPrimaryColor),
+    image: getPointResultIcon(getDefaultPrimaryColor()),
     fill: {
       color: 'rgba(237, 237, 237, 0.1)',
     },
     stroke: {
-      color: defaultPrimaryColor,
+      color: getDefaultPrimaryColor(),
       width: 5,
     },
   });
   resultLayer.setStyle(style);
 
-  function setResultColor(color) {
+  function setResultColor() {
+    const color = getColorByKey('primary');
     style.stroke?.setColor(color);
     style.image = new Icon(getPointResultIcon(color));
     resultLayer.forceRedraw();
   }
 
-  const listeners = [
-    app.uiConfig.added.addEventListener((item) => {
-      if (item.name === 'primaryColor') {
-        setResultColor(item.value);
-      }
-    }),
-    app.uiConfig.removed.addEventListener((item) => {
-      if (item.name === 'primaryColor') {
-        setResultColor(defaultPrimaryColor);
-      }
-    }),
-  ];
+  const themChangedListener = app.themeChanged.addEventListener(setResultColor);
 
   const destroy = () => {
     resultLayer.destroy();
-    listeners.forEach(cb => cb());
+    themChangedListener();
   };
 
   return { resultLayer, destroy };

package/src/search/searchComponent.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-card>
-    <span class="d-flex justify-space-between align-center ma-1">
+  <v-sheet>
+    <span class="d-flex justify-space-between align-center mt-1 mx-1">
       <v-icon
         class="mx-2"
       >
@@ -15,13 +15,12 @@
         :placeholder="$t('search.placeholder')"
         v-model.trim="query"
         @keydown.enter="search"
-        @keydown.esc="clear"
         @input="reset"
       />
     </span>
-    <v-divider />
+    <v-divider class="mt-1" v-if="!!results.length" />
     <ResultsComponent :query="query" :results="results" />
-  </v-card>
+  </v-sheet>
 </template>
 
 <style>
@@ -31,7 +30,7 @@
 <script>
   import { inject, onUnmounted, ref } from 'vue';
   import { getLogger } from '@vcsuite/logger';
-  import { VCard, VDivider, VIcon } from 'vuetify/lib';
+  import { VSheet, VDivider, VIcon } from 'vuetify/lib';
   import VcsTextField from '../components/form-inputs-controls/VcsTextField.vue';
   import ResultsComponent from './resultsComponent.vue';
 
@@ -39,7 +38,7 @@
     components: {
       ResultsComponent,
       VcsTextField,
-      VCard,
+      VSheet,
       VIcon,
       VDivider,
     },

package/src/styles/_theming.scss

@@ -14,7 +14,76 @@
   width: 70px;
 }
 
-// Dev-Only!
-.bg-dev.theme--light.v-application {
-  background-color: var(--v-primary-base);
+.v-application .base {
+  background-color: var(--v-base-base) !important;
+  border-color: var(--v-base-base) !important;
+}
+.v-application .base.lighten-1 {
+  background-color: var(--v-base-lighten1) !important;
+  border-color: var(--v-base-lighten1) !important;
+}
+.v-application .base.lighten-2 {
+  background-color: var(--v-base-lighten2) !important;
+  border-color: var(--v-base-lighten2) !important;
+}
+.v-application .base.lighten-3 {
+  background-color: var(--v-base-lighten3) !important;
+  border-color: var(--v-base-lighten3) !important;
+}
+.v-application .base.lighten-4 {
+  background-color: var(--v-base-lighten4) !important;
+  border-color: var(--v-base-lighten4) !important;
+}
+.v-application .base.darken-1 {
+  background-color: var(--v-base-darken1) !important;
+  border-color: var(--v-base-darken1) !important;
+}
+.v-application .base.darken-2 {
+  background-color: var(--v-base-darken2) !important;
+  border-color: var(--v-base-darken2) !important;
+}
+.v-application .base.darken-3 {
+  background-color: var(--v-base-darken3) !important;
+  border-color: var(--v-base-darken3) !important;
+}
+.v-application .base.darken-4 {
+  background-color: var(--v-base-darken4) !important;
+  border-color: var(--v-base-darken4) !important;
+}
+
+.v-application .base--text {
+  color: var(--v-base-base) !important;
+  caret-color: var(--v-base-base) !important;
+}
+.v-application .base--text.text--lighten-1 {
+  color: var(--v-base-lighten1) !important;
+  caret-color: var(--v-base-lighten1) !important;
+}
+.v-application .base--text.text--lighten-2 {
+  color: var(--v-base-lighten2) !important;
+  caret-color: var(--v-base-lighten2) !important;
+}
+.v-application .base--text.text--lighten-3 {
+  color: var(--v-base-lighten3) !important;
+  caret-color: var(--v-base-lighten3) !important;
+}
+.v-application .base--text.text--lighten-4 {
+  color: var(--v-base-lighten4) !important;
+  caret-color: var(--v-base-lighten4) !important;
+}
+.v-application .base--text.text--darken-1 {
+  color: var(--v-base-darken1) !important;
+  caret-color: var(--v-base-darken1) !important;
+}
+.v-application .base--text.text--darken-2 {
+  color: var(--v-base-darken2) !important;
+  caret-color: var(--v-base-darken2) !important;
+}
+.v-application .base--text.text--darken-3 {
+  color: var(--v-base-darken3) !important;
+  caret-color: var(--v-base-darken3) !important;
+}
+.v-application .base--text.text--darken-4 {
+  color: var(--v-base-darken4) !important;
+  caret-color: var(--v-base-darken4) !important;
 }

package/src/styles/_typography.scss

@@ -29,17 +29,12 @@
   }
 
   h3 {
-    font-size: 12px;
     font-weight: normal;
   }
 
   h4 {
     font-size: 12px;
     font-weight: normal;
-    color: rgba(#222222, 0.5);
   }
 
-  .text--disabled {
-    color: rgba(0, 0, 0, 0.38) !important;
-  }
 }

package/src/styles/main.scss

@@ -2,6 +2,7 @@
 
 @import './theming';
 @import './typography';
+@import './shades';
 @import './variables';
 @import './vcsFont';
 @import './vcsGrid';

package/src/styles/shades.scss

@@ -0,0 +1,2 @@
+
+$shades: ('black': #222222, 'white': #FFFFFF);

package/src/styles/variables.scss

@@ -1,7 +1,43 @@
+@import 'shades.scss';
+
 /** Global **/
 $font-size: 14px;
 $font-size-root: 14px;
 
+$material-dark: (
+        'background': map-get($shades, 'black'),
+        'cards': map-get($shades, 'black'),
+        'text-fields': (
+                'outlined': var(--v-base-base),
+                'outlined-hover': var(--v-base-base),
+        ),
+        'input-bottom-line': var(--v-base-base),
+        'dividers': var(--v-base-lighten2),
+        'toolbar': rgba(map-get($shades, 'black'), 0.8),
+        'table': (
+                'hover': var(--v-base-lighten4),
+        ),
+);
+$material-light: (
+        'text-fields': (
+                'outlined': var(--v-base-base),
+                'outlined-hover': var(--v-base-base),
+        ),
+        'input-bottom-line': var(--v-base-base),
+        'text': (
+                'primary': map-get($shades, 'black'),
+                'disabled': rgba(map-get($shades, 'black'), 0.3),
+        ),
+        'buttons': (
+                'disabled': rgba(map-get($shades, 'black'), 0.5),
+        ),
+        'dividers': var(--v-base-lighten2),
+        'toolbar': rgba(map-get($shades, 'white'), 0.8),
+        'table': (
+                'hover': var(--v-base-lighten4),
+        ),
+);
+
 // input font and icon
 $input-font-size: $font-size;
 $input-icon-height: 16px; // 24px !default;
@@ -20,14 +56,14 @@ $text-field-solo-dense-control-min-height: 22px; //38px !default;
 $text-field-outlined-fieldset-border: 1px solid currentColor; // 2px solid currentColor !default;
 
 // dense non outlined
-$text-field-dense-padding: 2px 0px 1px; //4px 0 2px !default;
+$text-field-dense-padding: 2px 0 1px; //4px 0 2px !default;
 
 // clear icon non dense
 $text-field-enclosed-prepend-append-margin-top: 9px;
 
 // tooltip icon in append slot
 $text-field-outlined-append-prepend-outer-margin-top: 4px; // 18px !default;
-$text-field-append-prepend-margin: 0px; // 4px !default;
+$text-field-append-prepend-margin: 0; // 4px !default;
 $text-field-outlined-prepend-append-margin-top: 4px; // 8px !default;
 
 // label position for outlined Label dense and non-dense
@@ -39,8 +75,8 @@ $text-field-label-top: 2px; // 6px !default;
 $text-field-label-active-transform: translateY(-14px) scale(.75); //translateY(-18px) scale(.75) !default;
 
 /** VcsTextarea **/
-$textarea-box-enclosed-single-outlined-margin-top: 0px; // 10px !default;
-$textarea-dense-box-enclosed-single-outlined-margin-top: 0px; // 6px !default;
+$textarea-box-enclosed-single-outlined-margin-top: 0; // 10px !default;
+$textarea-dense-box-enclosed-single-outlined-margin-top: 0; // 6px !default;
 
 /** VcsCheckbox **/
 $icon-size: 20px; // 24px !default;

package/src/uiConfig.js

@@ -13,6 +13,7 @@ import { ref } from 'vue';
  * @property {string} [mobileLogo] - an alternative logo to display in mobile view
  * @property {string} [appTitle] - an optional title to display next to the company logo
  * @property {string} [primaryColor] - an optional primary color to use in all themes
+ * @property {boolean} [startingFeatureInfo] - an optional flag whether to activate feature info on startup (default active)
  */
 
 /**

package/src/vcsUiApp.js

@@ -106,6 +106,11 @@ class VcsUiApp extends VcsApp {
 
   constructor() {
     super();
+    /**
+     * An event triggered when the vuetify theme mode changes or the primary color is updated by a new uiConfig entry.
+     * @type {VcsEvent<void>}
+     */
+    this.themeChanged = new VcsEvent();
     /**
      * @type {import("@vcmap/core").OverrideCollection<VcsPlugin>}
      * @private