Add hint to ClusterPopupWidget

conterra · Feb 26, 2021 · d0132f9 · d0132f9
1 parent 6c8d6a9
commit d0132f9
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 2 deletions.
diff --git a/src/main/js/bundles/dn_clusterfeaturelayer/ClusterPopupWidget.vue b/src/main/js/bundles/dn_clusterfeaturelayer/ClusterPopupWidget.vue
@@ -17,6 +17,12 @@
 -->
 <template>
     <v-container pa-0>
+        <v-alert
+            :value="true"
+            type="info"
+        >
+            {{ i18n.hint }}
+        </v-alert>
         <v-list>
             <v-list-tile
                 v-for="info in clusterInfos"

diff --git a/src/main/js/bundles/dn_clusterfeaturelayer/css/styles.css b/src/main/js/bundles/dn_clusterfeaturelayer/css/styles.css
@@ -18,6 +18,17 @@
     color: #6e6e6e;
 }
 
+.ctAppRoot .esri-popup__main-container .clusterPopupWidget .v-alert.info {
+    background-color: #2196f3 !important;
+    height: 40px;
+    border: none;
+    margin: 0;
+}
+
+.ctAppRoot .esri-popup__main-container .clusterPopupWidget .v-alert.info .v-alert__icon {
+    color: #fff;
+}
+
 .ctAppRoot .esri-popup__main-container .clusterPopupWidget .v-list .v-list__tile {
     padding: 0;
 }
diff --git a/src/main/js/bundles/dn_clusterfeaturelayer/nls/bundle.js b/src/main/js/bundles/dn_clusterfeaturelayer/nls/bundle.js
@@ -18,7 +18,8 @@ module.exports = {
         bundleName: "ClusterFeatureLayer and Spiderfying",
         bundleDescription: "This bundle draws a Cluster Feature Layer and activates a Spiderfying.",
         ui: {
-            features: "Features"
+            features: "Features",
+            hint: "Zooming in on individual symbols for detailed information."
         }
     },
     de: true

diff --git a/src/main/js/bundles/dn_clusterfeaturelayer/nls/de/bundle.js b/src/main/js/bundles/dn_clusterfeaturelayer/nls/de/bundle.js
@@ -17,6 +17,7 @@ module.exports = {
     bundleName: "ClusterFeatureLayer und Spiderfying",
     bundleDescription: "Dieses Bundle erzeugt einen Cluster Feature Layer und aktiviert ein Spiderfying",
     ui: {
-        features: "Objekte"
+        features: "Objekte",
+        hint: "Zoomen auf Einzelsymbole für Detailinformationen."
     }
 };