information field collabsable

conterra · Nov 23, 2023 · f77dd85 · f77dd85
1 parent d6bc93d
commit f77dd85
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 26 deletions.
diff --git a/src/main/js/bundles/dn_printingenhanced/LayoutWidget.vue b/src/main/js/bundles/dn_printingenhanced/LayoutWidget.vue
@@ -86,14 +86,33 @@
                 v-if="visibleUiElements.printPreviewCheckbox"
                 md12
             >
-                <v-checkbox
-                    v-model="enablePrintPreviewValue"
-                    :label="i18n.showPrintPreview"
-                    :disabled="!scaleEnabled"
-                    color="primary"
-                    hide-details
-                    class="pa-0 ma-0"
-                />
+                <div class="pa-0 ma-0 infoContainer">
+                    <v-checkbox
+                        v-model="enablePrintPreviewValue"
+                        :label="i18n.showPrintPreview"
+                        :disabled="!scaleEnabled"
+                        color="primary"
+                        hide-details
+                        class="pa-0 ma-0"
+                    />
+                    <v-btn
+                        v-if="!scaleEnabled"
+                        icon
+                        small
+                        top
+                        class="infoButton"
+                        @click="showInfo=!showInfo"
+                    >
+                        <v-icon color="primary">info</v-icon>
+                    </v-btn>
+                </div>
+                <div
+                    v-if="showInfo && !scaleEnabled"
+                    aria-live="polite"
+                    class="ct-message ct-message--info mt-2"
+                >
+                    {{ i18n.helperTextScaleEnabled }}
+                </div>
             </v-flex>
             <v-flex
                 v-if="visibleUiElements.scaleEnabled"
@@ -169,13 +188,6 @@
                     class="pa-0 ma-0"
                 />
             </v-flex>
-            <div
-                v-if="!scaleEnabled"
-                aria-live="polite"
-                class="ct-message ct-message--info mt-2"
-            >
-                {{ i18n.helperTextScaleEnabled }}
-            </div>
         </v-layout>
     </v-container>
 </template>
@@ -255,7 +267,8 @@
         },
         data() {
             return {
-                advancedOptions: [0]
+                advancedOptions: [0],
+                showInfo: false
             };
         },
         computed: {

diff --git a/src/main/js/bundles/dn_printingenhanced/MapOnlyWidget.vue b/src/main/js/bundles/dn_printingenhanced/MapOnlyWidget.vue
@@ -103,14 +103,33 @@
                 v-if="visibleUiElements.printPreviewCheckbox"
                 md12
             >
-                <v-checkbox
-                    v-model="enablePrintPreviewValue"
-                    disabled
-                    :label="i18n.showPrintPreview"
-                    color="primary"
-                    hide-details
-                    class="pa-0 ma-0"
-                />
+                <div class="pa-0 ma-0 infoContainer">
+                    <v-checkbox
+                        v-model="enablePrintPreviewValue"
+                        :label="i18n.showPrintPreview"
+                        :disabled="!scaleEnabled"
+                        color="primary"
+                        hide-details
+                        class="pa-0 ma-0"
+                    />
+                    <v-btn
+                        v-if="!scaleEnabled"
+                        icon
+                        small
+                        top
+                        class="infoButton"
+                        @click="showInfo=!showInfo"
+                    >
+                        <v-icon color="primary">info</v-icon>
+                    </v-btn>
+                </div>
+                <div
+                    v-if="showInfo && !scaleEnabled"
+                    aria-live="polite"
+                    class="ct-message ct-message--info mt-2"
+                >
+                    {{ i18n.helperTextScaleEnabled }}
+                </div>
             </v-flex>
             <v-flex
                 v-if="visibleUiElements.scaleEnabled"
@@ -253,7 +272,8 @@
         },
         data() {
             return {
-                advancedOptions: [0]
+                advancedOptions: [0],
+                showInfo: false
             };
         },
         computed: {

diff --git a/src/main/js/bundles/dn_printingenhanced/css/styles.css b/src/main/js/bundles/dn_printingenhanced/css/styles.css
@@ -49,4 +49,13 @@
     border: none;
 }
 
+.ctAppRoot .vue-base.printing-enhanced-widget .infoContainer {
+
+    display: inline-flex;
+}
+
+.ctAppRoot .vue-base.printing-enhanced-widget .infoButton {
+    margin: 0px;
+    top: 0px
+}
 
diff --git a/src/main/js/bundles/dn_printingenhanced/nls/de/bundle.js b/src/main/js/bundles/dn_printingenhanced/nls/de/bundle.js
@@ -64,6 +64,6 @@ module.exports = {
         medium: "Mittel",
         high: "Hoch",
         graphicsLayerTitle: "Druckvorschau",
-        helperTextScaleEnabled: "Druckrahmen kann nur angezeigt werden, wenn ein Maßstab festgelegt ist."
+        helperTextScaleEnabled: "Der Druckrahmen kann nur angezeigt werden, wenn ein Maßstab festgelegt ist."
     }
 };