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

package/src/components/icons/SplitViewIcon.vue

@@ -9,11 +9,7 @@
         d="M10942,13196v-22a1,1,0,1,1,2,0v22a1,1,0,1,1-2,0Zm9.5-9.25v-.5a.5.5,0,0,0-.5-.5h-4v-2h4a.5.5,0,0,0,.5-.5v-.5a.75.75,0,0,1,1.281-.53l2,2a.747.747,0,0,1,0,1.06l-2,2a.757.757,0,0,1-.529.218A.748.748,0,0,1,10951.5,13186.75Zm-18.279.53-2-2a.75.75,0,0,1,0-1.063l2-2a.736.736,0,0,1,.526-.219.747.747,0,0,1,.752.749v.5a.5.5,0,0,0,.5.5h4v2h-4a.5.5,0,0,0-.5.5v.5a.763.763,0,0,1-.218.534.754.754,0,0,1-1.061,0Zm5.779-1.53Zm8-2Z"
         transform="translate(-10931 -13172.998)"
         fill="currentColor"
-        stroke="rgba(0,0,0,0)"
-        stroke-miterlimit="10"
-        stroke-width="1"
       />
-      <rect id="size" width="24" height="24" fill="none" />
     </g>
   </svg>
 </template>

package/src/components/icons/ToolsIcon.vue

@@ -1,9 +1,7 @@
 <!-- eslint-disable max-len -->
 <template>
   <svg id="icon_24_tools" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <g id="Gruppe_1966" transform="translate(-500.726 -577.125)">
-      <path id="Pfad_763" d="M519,578h-6a1,1,0,0,0-1,1v20a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V579A1,1,0,0,0,519,578Zm-1,20h-4v-2h1a1,1,0,0,0,0-2h-1v-2h1a1,1,0,0,0,0-2h-1v-2h1a1,1,0,0,0,0-2h-1v-2h1a1,1,0,0,0,0-2h-1v-2h4Z" transform="translate(0.726 0.125)" fill="currentColor" />
-      <path id="Pfad_764" d="M507.363,580.719a1,1,0,0,0-1.827,0l-2,4.5a1,1,0,0,0-.086.406v11.5a3,3,0,0,0,6,0v-11.5a1,1,0,0,0-.087-.406Zm-1.913,6.9h2v7.511h-2Zm1-4.027.9,2.027h-1.8Zm0,14.538a1,1,0,0,1-1-1h2A1,1,0,0,1,506.45,598.125Z" transform="translate(0.275)" fill="currentColor" />
-    </g>
+    <rect width="24" height="24" fill="none" />
+    <path d="M86.444,100.021l.363-.363a4.962,4.962,0,0,0,5.509-6.213,1,1,0,0,0-1.674-.451l-1.021,1.021a1.024,1.024,0,0,1-1.415,0,1,1,0,0,1,0-1.414l1.022-1.021a1,1,0,0,0-.451-1.674,4.962,4.962,0,0,0-6.213,5.51l-.363.363-3.03-3.03a1.008,1.008,0,0,0-.348-.227l-4.6-1.767a1,1,0,0,0-1.292,1.293l1.768,4.6a1,1,0,0,0,.226.348l3.03,3.03-.766.766A4.963,4.963,0,0,0,71.683,107a1,1,0,0,0,.707.71,1.016,1.016,0,0,0,.968-.259l1.02-1.021a1,1,0,1,1,1.415,1.414l-1.022,1.021a1,1,0,0,0,.452,1.674,5.045,5.045,0,0,0,1.286.167,4.951,4.951,0,0,0,4.926-5.677l.766-.766,4.394,4.395a3,3,0,0,0,4.244-4.242Zm-8.765-5.8L76.4,95.5l-.8-2.069Zm.07,2.757,1.414-1.414,1.624,1.624-1.414,1.414Zm1.895,7.01a1,1,0,0,0-.26.962,2.969,2.969,0,0,1-1.588,3.472,3,3,0,0,0-4-4,2.969,2.969,0,0,1,3.472-1.59,1,1,0,0,0,.963-.26l6.127-6.127a1,1,0,0,0,.259-.962A2.972,2.972,0,0,1,86.2,92.018a3.006,3.006,0,0,0,.589,3.412,3.068,3.068,0,0,0,3.412.588,2.966,2.966,0,0,1-3.471,1.588,1,1,0,0,0-.963.26Zm9.78,3.251a1.022,1.022,0,0,1-1.414,0l-4.4-4.4,1.415-1.414,4.394,4.4a1,1,0,0,1,0,1.414" transform="translate(-69.515 -87.739)" fill="currentColor" />
   </svg>
 </template>

package/src/components/lists/VcsActionList.vue

@@ -12,7 +12,6 @@
       <template #activator="{ on, attrs }">
         <v-list-item
           :class="action.active ? 'primary--text' : ''"
-          color="primary"
           @click="action.callback($event)"
           v-bind="{...$attrs, ...attrs}"
           v-on="{...$listeners, ...on}"

package/src/components/lists/VcsList.vue

@@ -418,38 +418,19 @@
 
 <style lang="scss" scoped>
   ::v-deep {
-    .v-list{
+    .v-list {
       .v-list-item {
         padding: 4px 8px 4px 16px;
         &:after{
           display: none;
         }
-        &.font-weight-bold{
-          .v-list-item__title{
+        &.font-weight-bold {
+          .v-list-item__title {
             font-weight: 700;
           }
         }
-        &.v-list-item--active{
-          padding: 4px 8px 3px 16px;
-          &.theme--light{
-            background-color: var(--v-primary-base);
-            border-bottom: 1px solid var(--v-primary-darken1);
-          }
-        }
-        &.v-list-item.theme--dark{
-          &.v-list-item--active{
-            background-color: var(--v-primary-darken1);
-            border-bottom: 1px solid var(--v-primary-darken2);
-            &:nth-child(even){
-              background-color: var(--v-primary-darken1);
-            }
-          }
-          &:nth-child(even){
-            background-color: rgba(255, 255, 255, 0.15);
-          }
-        }
         &:nth-child(even) {
-          background-color: var(--v-accent-base);
+          background-color: var(--v-base-lighten4);
         }
         .v-list-item__action {
           .v-icon {
@@ -463,9 +444,9 @@
           .action-btn-wrap {
             flex: 1 1 auto;
           }
-          .v-icon{
+          .v-icon {
             font-size: 16px;
-            .v-icon__component{
+            .v-icon__component {
               width: 16px;
               height: 16px;
             }

package/src/components/lists/VcsTreeview.vue

@@ -32,8 +32,8 @@
       min-height: 40px;
     }
     // Border around root nodes with children included
-    > .v-treeview-node {
-      border-bottom: 1px solid var(--v-gray-200-base);
+    > .v-treeview-node:not(:last-child) {
+      border-bottom: 1px solid var(--v-base-lighten2);
     }
     // Only Root Entries have a bold font
     > .v-treeview-node > .v-treeview-node__root > .v-treeview-node__content > .v-treeview-node__label {

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -4,10 +4,11 @@
     v-if="item"
   >
     <div
-      class="position-relative col-8 pa-0 d-flex align-center vcs-treeview-leaf"
+      class="position-relative col-8 pa-0 d-flex align-center"
     >
       <span
         v-if="item.icon"
+        class="d-inline-flex"
       >
         <v-icon
           v-if="isStringIcon"
@@ -24,7 +25,7 @@
           <span
             v-bind="attrs"
             v-on="on"
-            class="vcs-treeview-item-title"
+            class="d-inline-block text-truncate"
           >{{ $t(item.title) }}</span>
         </template>
       </VcsTooltip>
@@ -41,13 +42,6 @@
     />
   </div>
 </template>
-<style lang="css" scoped>
-.vcs-treeview-leaf .vcs-treeview-item-title{
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-</style>
 
 <script>
   import { computed } from 'vue';

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pa-2 accent position-relative d-flex flex-row justify-space-between align-center">
+  <div class="pa-2 base lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0">
     <slot name="prepend">
       <v-icon
         class="search-icon my-0 ml-1"
@@ -14,7 +14,7 @@
         solo
         dense
         hide-details
-        class="searchbar outlined rounded-xl align-center d-flex justify-center white pa-1 pl-6"
+        class="searchbar outlined rounded-xl align-center d-flex justify-center base lighten-4 pa-1 pl-6"
         :placeholder="$t(placeholder)"
         :value="value"
         v-on="$listeners"
@@ -44,7 +44,7 @@
     border-radius: 9999rem;
     outline-style: none;
     font-size: 12px;
-    box-shadow: 0 0 0 1px #dedede;
+    box-shadow: 0 0 0 1px var(--v-base-lighten2);
 
     &:focus {
       box-shadow: 0 0 0 1px var(--v-primary-base);
@@ -81,7 +81,7 @@
     .v-input.outlined {
       outline-style: none;
       font-size: 12px;
-      box-shadow: 0 0 0 1px #dedede;
+      box-shadow: 0 0 0 1px var(--v-base-lighten2);
 
       &:focus,
       &.v-input--is-focused {

package/src/components/notification/VcsBadge.vue

@@ -3,9 +3,13 @@
 </template>
 
 <style lang="scss" scoped>
-  .v-application .badge {
-    border: 1px solid var(--v-basic-base) !important;
+@import '../../styles/shades.scss';
+  .v-application .theme--light .badge {
+    border: 1px solid map-get($shades, 'white') !important;
   }
+.v-application .theme--dark .badge {
+  border: 1px solid map-get($shades, 'black') !important;
+}
 </style>
 
 

package/src/components/notification/VcsHelp.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-alert
+    :value="show"
+    dense
+    text
+    class="mb-0 font-weight-regular rounded-0 px-2 pt-2"
+  >
+    <slot>
+      <span>{{ $t(text) }}</span>
+    </slot>
+  </v-alert>
+</template>
+
+<script>
+  import { VAlert } from 'vuetify/lib';
+
+  /**
+   * @description Wraps Vuetify VAlert for displaying help.
+   * @vue-data {slot} [#default] - Slot to specify html based help. Gets precedence over text prop.
+   * @vue-prop {boolean} show - If help should be displayed. If false, component is completely hidden.
+   * @vue-prop {string} [text] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over text prop.
+   */
+  export default {
+    name: 'VcsHelp',
+    components: {
+      VAlert,
+    },
+    props: {
+      text: {
+        type: String,
+        default: undefined,
+      },
+      show: {
+        type: Boolean,
+        required: true,
+      },
+    },
+  };
+</script>

package/src/components/tables/VcsTable.vue

@@ -15,27 +15,36 @@
       :search="search"
       :custom-filter="handleFilter"
       hide-default-footer
-      class="vcs-table"
+      class="vcs-table rounded-0"
     >
       <!-- eslint-disable-next-line -->
       <template #item.key="{ item }">
-        <td class="vcs-table px-2 overflow-max-width" :title="$t(item.key)">
+        <td
+          :title="$t(item.key)"
+          class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
+          :style="{'max-width': headers[0].width }"
+        >
           {{ $t(item.key) }}
         </td>
       </template>
       <!-- eslint-disable-next-line -->
       <template #item.value="{ item }">
-        <td class="vcs-table px-2 overflow-max-width" :title="$t(item.value)">
-          {{ $t(item.value) }}
+        <td
+          :title="$t(item.value)"
+          class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
+          :style="{'max-width': headers[1].width }"
+        >
+          <span :class="{ 'single-line': !/\s/.test(item.value), 'multi-line': /\s/.test(item.value), }">
+            {{ $t(item.value) }}
+          </span>
         </td>
       </template>
-      <template #footer>
+      <template #footer v-if="items.length > itemsPerPageRef">
         <v-divider />
-        <v-container class="pa-2 vcs-pagination-bar accent" v-if="items.length > itemsPerPageRef">
+        <v-container class="pa-2 vcs-pagination-bar">
           <v-row
             dense
             no-gutters
-            align="center"
             justify="center"
           >
             <v-menu offset-y dense>
@@ -291,46 +300,83 @@
 </script>
 
 <style lang="scss" scoped>
-::v-deep{
+@import '../../styles/shades.scss';
+
+.single-line {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.multi-line {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  height: auto;
+  max-height: 96px;
+}
+
+.noBorder {
+  border-bottom: none !important;
+}
+
+::v-deep {
   .vcs-table {
-    td {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      &.overflow-max-width{
-        max-width: 160px;
+    tbody tr {
+      &:hover {
+        background-color: transparent !important;
+      }
+      &:nth-child(odd) {
+        background-color: var(--v-base-lighten4) !important;
       }
-      &.v-data-table__mobile-row{
+    }
+    td {
+      font-size: 14px !important;
+      &.v-data-table__mobile-row {
         justify-content: left;
         height: 27px;
         min-height: auto;
       }
     }
-    th.sortable{
+    th.sortable {
       padding: 0 8px;
-      span{
+      span {
         vertical-align: middle;
         padding: 0 4px 0 0;
       }
     }
+    &.theme--light {
+      thead tr th {
+        color: map-get($shades, 'black') !important;
+      }
+    }
+    &.theme--dark {
+      thead tr th {
+        color: map-get($shades, 'white') !important;
+      }
+    }
   }
-  .v-data-table__mobile-row__cell{
-    td.vcs-table.overflow-max-width{
+  .v-data-table__mobile-row__cell {
+    td.vcs-table.overflow-max-width {
       max-width: 260px;
     }
   }
-  .v-btn.vcs-button--small{
+  .v-btn.vcs-button--small {
     height: 100% !important;
     display: block;
   }
 }
-.vcs-pagination-bar{
-  .vcs-button-wrap{
+
+.vcs-pagination-bar {
+  .vcs-button-wrap {
     height: 25px;
-    border: 1px solid lightgrey;
+    border: 1px solid;
     padding: 0 4px;
-    background-color: var(--v-basic-base);
     border-radius: 4px;
+    &:hover {
+      border: 1px solid var(--v-primary-base);
+    }
   }
 }
 </style>

package/src/featureInfo/AddressBalloonComponent.vue

@@ -8,7 +8,7 @@
           tile
           size="40"
         >
-          <v-icon size="20" color="secondary">
+          <v-icon size="20">
             $vcsHomePoint
           </v-icon>
         </v-list-item-avatar>

package/src/featureInfo/BalloonComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card
-    class="mx-auto mb-1 elevation-0"
+    class="mx-auto elevation-0 rounded-0"
     max-width="400"
     v-if="position"
   >
@@ -16,8 +16,10 @@
           </v-icon>
         </v-list-item-avatar>
         <v-list-item-content class="py-2 pr-1 align-self-start">
-          <v-list-item-title class="text-h6">
-            {{ $t(balloonTitle) }}
+          <v-list-item-title>
+            <h3 class="font-weight-bold">
+              {{ $t(balloonTitle) }}
+            </h3>
           </v-list-item-title>
           <v-list-item-subtitle v-if="balloonSubtitle">
             {{ $t(balloonSubtitle) }}
@@ -28,15 +30,16 @@
           small
           icon="mdi-close-thick"
           tooltip="components.close"
+          class="mt-1 mr-1"
         />
       </v-list-item>
     </slot>
 
     <v-divider />
 
-    <v-card class="overflow-y-auto py-2 elevation-0" max-height="250">
+    <v-card class="overflow-y-auto py-2 elevation-0" max-height="250" color="transparent">
       <slot :attrs="{...$props, ...$attrs}">
-        <v-list v-for="(value, name, index) in attributes" :key="`attribute-${index}`">
+        <v-list v-for="(value, name, index) in attributes" :key="`attribute-${index}`" color="transparent">
           <v-list-item class="px-2">
             <v-list-item-content>
               <v-list-item-title>
@@ -150,6 +153,8 @@
 </script>
 
 <style lang="scss">
+@import '../styles/shades.scss';
+
   .balloon {
     z-index: 0 !important;
   }
@@ -166,11 +171,11 @@
     display: block;
     width: 0;
   }
-  .v-sheet.theme--light.balloon:after{
-    border-color: #FFFFFF transparent;
+  .theme--light .balloon:after {
+    border-color: map-get($shades, 'white') transparent;
   }
-  .v-sheet.theme--dark.balloon:after{
-    border-color: #1E1E1E transparent;
+  .theme--dark .balloon:after {
+    border-color: map-get($shades, 'black') transparent;
   }
   .balloon .v-list-item .v-list-item__title,
   .balloon .v-list-item .v-list-item__subtitle {

package/src/featureInfo/featureInfo.js

@@ -33,7 +33,7 @@ import TableFeatureInfoView from './tableFeatureInfoView.js';
 import IframeFeatureInfoView from './iframeFeatureInfoView.js';
 import AddressBalloonFeatureInfoView from './addressBalloonFeatureInfoView.js';
 import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
-import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
+import { getDefaultPrimaryColor } from '../vuePlugins/vuetify.js';
 import { ToolboxType } from '../manager/toolbox/toolboxManager.js';
 
 /** @typedef {import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity} FeatureType */
@@ -126,6 +126,7 @@ export function createFeatureInfoSession(app) {
 
 /**
  * @param {VcsUiApp} app
+ * @returns {function():void}
  */
 function setupFeatureInfoTool(app) {
   /** @type {FeatureInfoSession|null} */
@@ -153,6 +154,9 @@ function setupFeatureInfoTool(app) {
     },
   };
 
+  if (app.uiConfig.getByKey('startingFeatureInfo')?.value !== false) {
+    action.callback();
+  }
   app.toolboxManager.add(
     {
       id: 'featureInfo',
@@ -161,6 +165,13 @@ function setupFeatureInfoTool(app) {
     },
     vcsAppSymbol,
   );
+
+  return () => {
+    if (session) {
+      session.stop();
+    }
+    app.toolboxManager.remove('featureInfo');
+  };
 }
 
 /**
@@ -266,7 +277,11 @@ class FeatureInfo {
           this.clear();
         }
       }),
-      this._app.contextAdded.addEventListener(() => this.clear()),
+      this._app.contextAdded.addEventListener(() => {
+        this.clear();
+        this._destroyFeatureInfoTool();
+        this._destroyFeatureInfoTool = setupFeatureInfoTool(this._app);
+      }),
       this._app.contextRemoved.addEventListener(() => this.clear()),
     ];
     /**
@@ -275,8 +290,11 @@ class FeatureInfo {
      * @private
      */
     this._scratchLayer = null;
-
-    setupFeatureInfoTool(this._app);
+    /**
+     * @type {function():void}
+     * @private
+     */
+    this._destroyFeatureInfoTool = setupFeatureInfoTool(this._app);
   }
 
   /**
@@ -386,7 +404,7 @@ class FeatureInfo {
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ?? defaultPrimaryColor,
+            this._app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(),
           ),
         });
         this._clearHighlightingCb = () => this._scratchLayer.featureVisibility.unHighlight([featureId]);
@@ -396,7 +414,7 @@ class FeatureInfo {
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ?? defaultPrimaryColor,
+            this._app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(),
           ),
         });
         this._clearHighlightingCb = () => layer.featureVisibility.unHighlight([featureId]);
@@ -458,7 +476,7 @@ class FeatureInfo {
   destroy() {
     this._clearInternal();
     this._featureChanged.destroy();
-    this._app.toolboxManager.remove('featureInfo');
+    this._destroyFeatureInfoTool();
     if (this._scratchLayer) {
       this._app.layers.remove(this._scratchLayer);
       this._scratchLayer.destroy();

package/src/featureInfo/tableFeatureInfoView.js

@@ -77,6 +77,10 @@ class TableFeatureInfoView extends AbstractFeatureInfoView {
       itemsPerPageArray: this.itemsPerPageArray,
       showSearchbar: this.showSearchbar,
       searchbarPlaceholder: this.searchbarPlaceholder,
+      headers: [
+        { text: 'components.vcsTable.key', value: 'key', width: '128px' },
+        { text: 'components.vcsTable.value', value: 'value', width: '192px' },
+      ],
     };
   }
 

package/src/i18n/de.js

@@ -65,8 +65,12 @@ const messages = {
   settings: {
     title: 'Einstellungen',
     tooltip: 'Einstellungen',
-    languageTitle: 'Spracheinstellungen',
     languageSelector: 'Sprache',
+    theme: {
+      title: 'Farbschema',
+      dark: 'Dunkel',
+      light: 'Hell',
+    },
   },
   featureInfo: {
     activateToolTitle: 'Informationstool aktivieren',

package/src/i18n/en.js

@@ -65,8 +65,12 @@ const messages = {
   settings: {
     title: 'Settings',
     tooltip: 'Settings',
-    languageTitle: 'Language settings',
     languageSelector: 'Language',
+    theme: {
+      title: 'Color theme',
+      dark: 'Dark',
+      light: 'Light',
+    },
   },
   featureInfo: {
     activateToolTitle: 'Activate Infotool',

package/src/legend/styleLegendItem.vue

@@ -6,7 +6,11 @@
         :key="idx"
         :class="{ 'w-full': item.colNr === 1, 'w-half': item.colNr !== 1 }"
       >
-        <v-list-item dense>
+        <v-list-item
+          dense
+          class="pa-0"
+          :class="determineInnerPadding(idx)"
+        >
           <v-list-item-icon class="pr-2">
             <v-img
               v-if="row.type === StyleRowType.Icon || row.type === StyleRowType.Shape"
@@ -126,7 +130,24 @@
         required: true,
       },
     },
-    setup() {
+    setup(props) {
+      /**
+       * Determines if a list item has padding right or left, so it has correct spacing to second row.
+       * @param {number} index The index of the list item. Starts with 0.
+       * @returns {string} Vuetify padding helper.
+       */
+      function determineInnerPadding(index) {
+        // check if there are more than two columns
+        if (props.item.colNr !== 1) {
+          // check if even number. If so, it is located in the left column and needs padding on the right.
+          if (index % 2 === 0) {
+            return 'pr-2';
+          } else {
+            return 'pl-2';
+          }
+        }
+        return '';
+      }
       return {
         StyleRowType,
         getImageSrcFromShape,
@@ -136,6 +157,7 @@
           }
           return null;
         },
+        determineInnerPadding,
       };
     },
   };