From 3591d9dfa25aae3f69a4ece07b0b224b65dee6c5 Mon Sep 17 00:00:00 2001
From: Julian Kuhlmann <j.kuhlmann@conterra.de>
Date: Tue, 15 Apr 2025 08:17:38 +0200
Subject: [PATCH 1/4] template and css cleanup

---
 .../js/bundles/dn_labeling/LabelingWidget.vue | 66 ++++++++++---------
 .../js/bundles/dn_labeling/css/styles.css     | 47 ++++++-------
 2 files changed, 59 insertions(+), 54 deletions(-)

diff --git a/src/main/js/bundles/dn_labeling/LabelingWidget.vue b/src/main/js/bundles/dn_labeling/LabelingWidget.vue
index 50b3223..8f7c590 100644
--- a/src/main/js/bundles/dn_labeling/LabelingWidget.vue
+++ b/src/main/js/bundles/dn_labeling/LabelingWidget.vue
@@ -16,10 +16,10 @@
 
 -->
 <template>
-    <div class="labelingWidgetContainer">
-        <div class="__selections-div">
-            <div>
-                <h4>{{ i18n.selectionTitle }}</h4>
+    <div class="ct-labeling-widget">
+        <div class="ct-labeling-widget__selections">
+            <v-sheet class="mb-1">
+                <h3>{{ i18n.selectionTitle }}</h3>
                 <v-autocomplete
                     v-model="selectedLayer"
                     :items="layers"
@@ -31,31 +31,32 @@
                     hide-details
                     class="pt-0 mt-0 pb-2"
                 />
-            </div>
-            <div>
-                <div v-show="edit">
-                    <v-sheet elevation="12">
-                        <v-btn
-                            id="iconRight"
-                            icon
-                            small
-                            @click="edit = !edit"
-                        >
-                            <v-icon>close</v-icon>
-                        </v-btn>
-                        <div id="editText">
-                            <v-text-field
-                                v-model="editedField.prefix"
-                                :label="i18n.prefix"
-                            />
-                            <v-text-field
-                                v-model="editedField.postfix"
-                                :label="i18n.postfix"
-                            />
-                        </div>
-                    </v-sheet>
+            </v-sheet>
+            <v-sheet
+                v-show="edit"
+                class="my-1"
+            >
+                <v-btn
+                    id="iconRight"
+                    icon
+                    small
+                    @click="edit = !edit"
+                >
+                    <v-icon>close</v-icon>
+                </v-btn>
+                <div id="editText">
+                    <v-text-field
+                        v-model="editedField.prefix"
+                        :label="i18n.prefix"
+                    />
+                    <v-text-field
+                        v-model="editedField.postfix"
+                        :label="i18n.postfix"
+                    />
                 </div>
-                <h4>{{ i18n.selectionFields }}</h4>
+            </v-sheet>
+            <v-sheet class="my-1">
+                <h3>{{ i18n.selectionFields }}</h3>
                 <v-select
                     id="autocomplete"
                     v-model="selectedFields"
@@ -72,7 +73,7 @@
                 >
                     <template #selection="data">
                         <draggable
-                            :id="data.index"
+                            :id="`ct-labeling-attribute-${data.index}`"
                             :list="selectedFields"
                             v-bind="dragOptionsChips"
                             :move="move"
@@ -108,10 +109,11 @@
                         </draggable>
                     </template>
                 </v-select>
-            </div>
+            </v-sheet>
         </div>
-        <div class="__controls-div">
-            <div>
+        <v-divider />
+        <div class="ct-labeling-widget__controls-div">
+            <div class="my-1">
                 <v-switch
                     v-model="showFeatureEdgeLengths"
                     class="controls circumference-switch"
diff --git a/src/main/js/bundles/dn_labeling/css/styles.css b/src/main/js/bundles/dn_labeling/css/styles.css
index 52e5367..51fbf16 100644
--- a/src/main/js/bundles/dn_labeling/css/styles.css
+++ b/src/main/js/bundles/dn_labeling/css/styles.css
@@ -13,12 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.ctAppRoot .labelingWidget .labelingWidgetContainer {
+.ctAppRoot .ct-labeling-widget {
     display: flex;
     flex-direction: column;
     height: 100%;
 
-    .__selections-div {
+    .ct-labeling-widget__selections {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
@@ -34,12 +34,13 @@
                 .v-chip__content{
                     width: 100%;
                     padding: 0;
+                    cursor: pointer;
                 }
             }
         }
     }
 
-    .__controls-div {
+    .ct-labeling-widget__controls-div {
         display: flex;
         flex-direction: column;
         flex-shrink: 1;
@@ -53,30 +54,32 @@
             margin-left: 0;
         }
     }
-}
 
-.ctAppRoot .labelingWidget .v-btn--icon{
-    margin: 0;
-}
+    .v-btn--icon{
+        margin: 0;
+    }
 
-.ctAppRoot .labelingWidget #editText{
-    padding: 5px;
-    margin: 10px;
-}
+    /* TODO: remove usages of ID slectors */
+    #editText{
+        padding: 5px;
+        margin: 10px;
+    }
 
-.ctAppRoot .labelingWidget #iconRight{
-    float:  right;
-}
+    #iconRight{
+        float:  right;
+    }
 
-.ctAppRoot .labelingWidget #autocomplete {
-    display: none;
-}
+    #autocomplete {
+        display: none;
+    }
 
-.ctAppRoot .labelingWidget .draggableSelect.v-input--is-dirty .v-input__slot:before {
-    display: none;
-}
+    .draggableSelect.v-input--is-dirty .v-input__slot:before {
+        display: none;
+    }
 
-.ctAppRoot .labelingWidget .labelingWidgetContainer .__selections-div .v-select__selections .v-chip span {
-    color: #45474d;
+    .ct-labeling-widget__selections .v-select__selections .v-chip span {
+        color: #45474d;
+    }
 }
 
+

From 4390430826e75a8c1ec0c80f1bc5ac0bf5afc76f Mon Sep 17 00:00:00 2001
From: Julian Kuhlmann <j.kuhlmann@conterra.de>
Date: Tue, 15 Apr 2025 15:07:28 +0200
Subject: [PATCH 2/4] adding aria-labels, tooltips and disable buttons when no
 layer and field is selected

---
 .../js/bundles/dn_labeling/LabelingWidget.vue | 60 ++++++++++++-------
 .../js/bundles/dn_labeling/css/styles.css     |  2 +-
 src/main/js/bundles/dn_labeling/nls/bundle.ts |  2 +
 .../js/bundles/dn_labeling/nls/de/bundle.ts   |  2 +
 4 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/main/js/bundles/dn_labeling/LabelingWidget.vue b/src/main/js/bundles/dn_labeling/LabelingWidget.vue
index 8f7c590..b878d13 100644
--- a/src/main/js/bundles/dn_labeling/LabelingWidget.vue
+++ b/src/main/js/bundles/dn_labeling/LabelingWidget.vue
@@ -57,6 +57,7 @@
             </v-sheet>
             <v-sheet class="my-1">
                 <h3>{{ i18n.selectionFields }}</h3>
+                <!--TODO: Element not focusable with keyboard, even when not disabled-->
                 <v-select
                     id="autocomplete"
                     v-model="selectedFields"
@@ -92,18 +93,38 @@
 
                                 <span>{{ data.item.name }}</span>
                                 <span>
-                                    <v-btn
-                                        icon
-                                        @click="setEdit(data.item)"
+                                    <v-tooltip
+                                        top
+                                        open-delay="800"
                                     >
-                                        <v-icon small>edit</v-icon>
-                                    </v-btn>
-                                    <v-btn
-                                        icon
-                                        @click="remove(data.item)"
+                                        <template #activator="{ on }">
+                                            <v-btn
+                                                icon
+                                                :aria-label="i18n.editAttributeLabel"
+                                                v-on="on"
+                                                @click="setEdit(data.item)"
+                                            >
+                                                <v-icon small>edit</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>{{ i18n.editAttributeLabel }}</span>
+                                    </v-tooltip>
+                                    <v-tooltip
+                                        top
+                                        open-delay="800"
                                     >
-                                        <v-icon small>close</v-icon>
-                                    </v-btn>
+                                        <template #activator="{ on }">
+                                            <v-btn
+                                                icon
+                                                :aria-label="i18n.deleteAttributeLabel"
+                                                v-on="on"
+                                                @click="remove(data.item)"
+                                            >
+                                                <v-icon small>close</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>{{ i18n.deleteAttributeLabel }}</span>
+                                    </v-tooltip>
                                 </span>
                             </v-chip>
                         </draggable>
@@ -124,23 +145,18 @@
             </div>
             <div>
                 <v-btn
-                    v-if="!active"
                     color="primary"
+                    :aria-pressed="active"
+                    :disabled="selectedFields.length === 0"
                     @click.native="setLabeling"
                 >
-                    <v-icon>icon-play</v-icon>
-                    {{ i18n.labeling.start }}
+                    <v-icon>{{ !active ? "icon-play" : "icon-pause" }}</v-icon>
+                    {{ !active ? i18n.labeling.start : i18n.labeling.stop }}
                 </v-btn>
                 <v-btn
-                    v-else
-                    color="primary"
-                    @click.native="setLabeling"
-                >
-                    <v-icon>icon-pause</v-icon>
-                    {{ i18n.labeling.stop }}
-                </v-btn>
-                <v-btn
-                    color="secondary"
+                    color="error"
+                    outline
+                    :disabled="!selectedLayer || (selectedLayer && selectedFields.length === 0)"
                     @click.native="deleteLabel"
                 >
                     <v-icon>icon-trashcan-detailed</v-icon>
diff --git a/src/main/js/bundles/dn_labeling/css/styles.css b/src/main/js/bundles/dn_labeling/css/styles.css
index 51fbf16..bfa39ee 100644
--- a/src/main/js/bundles/dn_labeling/css/styles.css
+++ b/src/main/js/bundles/dn_labeling/css/styles.css
@@ -34,7 +34,7 @@
                 .v-chip__content{
                     width: 100%;
                     padding: 0;
-                    cursor: pointer;
+                    cursor: move;
                 }
             }
         }
diff --git a/src/main/js/bundles/dn_labeling/nls/bundle.ts b/src/main/js/bundles/dn_labeling/nls/bundle.ts
index 12e1dd0..ad2e640 100644
--- a/src/main/js/bundles/dn_labeling/nls/bundle.ts
+++ b/src/main/js/bundles/dn_labeling/nls/bundle.ts
@@ -38,6 +38,8 @@ const i18n = {
             tooltip: "Labeling Tool",
             selectionTitle: "Select Layer",
             selectionFields: "Select Fields",
+            editAttributeLabel: "Edit attribute label",
+            deleteAttributeLabel: "Delete attribute label",
             edgesLabel: "Label Edge Lengths",
             autoUpdate: "Keep updated",
             prefix: "Prefix",
diff --git a/src/main/js/bundles/dn_labeling/nls/de/bundle.ts b/src/main/js/bundles/dn_labeling/nls/de/bundle.ts
index d1a08e7..568f7b9 100644
--- a/src/main/js/bundles/dn_labeling/nls/de/bundle.ts
+++ b/src/main/js/bundles/dn_labeling/nls/de/bundle.ts
@@ -40,6 +40,8 @@ export default {
         tooltip: "Beschriftungswerkzeug",
         selectionTitle: "Layer auswählen",
         selectionFields: "Felder auswählen",
+        editAttributeLabel: "Attributbeschriftung bearbeiten",
+        deleteAttributeLabel: "Attributebeschriftung entfernen",
         edgesLabel: "Kantenlängen beschriften",
         autoUpdate: "Änderungen automatisch anwenden",
         prefix: "Präfix",

From a1019ada6a4584f3946ed0f5bc3e564b7bf97ccd Mon Sep 17 00:00:00 2001
From: Julian Kuhlmann <j.kuhlmann@conterra.de>
Date: Wed, 16 Apr 2025 08:02:58 +0200
Subject: [PATCH 3/4] Improve attribute labeling edit section with tooltip and
 aria label. Additionally, remove usages of id selectors in css and further
 BEMing

---
 .../js/bundles/dn_labeling/LabelingWidget.vue | 35 ++++++++++++-------
 .../js/bundles/dn_labeling/css/styles.css     | 17 +++------
 src/main/js/bundles/dn_labeling/nls/bundle.ts |  1 +
 .../js/bundles/dn_labeling/nls/de/bundle.ts   |  3 +-
 4 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/main/js/bundles/dn_labeling/LabelingWidget.vue b/src/main/js/bundles/dn_labeling/LabelingWidget.vue
index b878d13..ee68a79 100644
--- a/src/main/js/bundles/dn_labeling/LabelingWidget.vue
+++ b/src/main/js/bundles/dn_labeling/LabelingWidget.vue
@@ -34,17 +34,29 @@
             </v-sheet>
             <v-sheet
                 v-show="edit"
-                class="my-1"
+                class="my-1 ct-labeling-widget__edit-section"
             >
-                <v-btn
-                    id="iconRight"
-                    icon
-                    small
-                    @click="edit = !edit"
-                >
-                    <v-icon>close</v-icon>
-                </v-btn>
-                <div id="editText">
+                <div class="align-right">
+                    <v-tooltip
+                        top
+                        open-delay="800"
+                    >
+                        <template #activator="{ on }">
+                            <v-btn
+                                class="ct-labeling-widget__edit-close-section mr-2"
+                                icon
+                                small
+                                v-on="on"
+                                :aria-label="i18n.finishEditingAttributeLabel"
+                                @click="edit = !edit"
+                            >
+                                <v-icon>close</v-icon>
+                            </v-btn>
+                        </template>
+                        <span>{{ i18n.finishEditingAttributeLabel }}</span>
+                    </v-tooltip>
+                </div>
+                <div class="ct-labeling-widget__edit-inputs">
                     <v-text-field
                         v-model="editedField.prefix"
                         :label="i18n.prefix"
@@ -59,7 +71,6 @@
                 <h3>{{ i18n.selectionFields }}</h3>
                 <!--TODO: Element not focusable with keyboard, even when not disabled-->
                 <v-select
-                    id="autocomplete"
                     v-model="selectedFields"
                     :items="fields"
                     rounded
@@ -68,7 +79,7 @@
                     label="Felder auswählen"
                     item-text="name"
                     return-object
-                    class="draggableSelect pt-1 mt-0"
+                    class="ct-labeling-widget__draggable-select pt-1 mt-0"
                     clearable
                     :disabled="!selectedLayer"
                 >
diff --git a/src/main/js/bundles/dn_labeling/css/styles.css b/src/main/js/bundles/dn_labeling/css/styles.css
index bfa39ee..b5d73fd 100644
--- a/src/main/js/bundles/dn_labeling/css/styles.css
+++ b/src/main/js/bundles/dn_labeling/css/styles.css
@@ -31,7 +31,7 @@
             .v-chip {
                 width: 98%;
 
-                .v-chip__content{
+                .v-chip__content {
                     width: 100%;
                     padding: 0;
                     cursor: move;
@@ -55,25 +55,16 @@
         }
     }
 
-    .v-btn--icon{
+    .v-btn--icon {
         margin: 0;
     }
 
-    /* TODO: remove usages of ID slectors */
-    #editText{
+    .ct-labeling-widget__edit-inputs {
         padding: 5px;
         margin: 10px;
     }
 
-    #iconRight{
-        float:  right;
-    }
-
-    #autocomplete {
-        display: none;
-    }
-
-    .draggableSelect.v-input--is-dirty .v-input__slot:before {
+    .ct-labeling-widget__draggable-select.v-input--is-dirty .v-input__slot:before {
         display: none;
     }
 
diff --git a/src/main/js/bundles/dn_labeling/nls/bundle.ts b/src/main/js/bundles/dn_labeling/nls/bundle.ts
index ad2e640..a6c68ac 100644
--- a/src/main/js/bundles/dn_labeling/nls/bundle.ts
+++ b/src/main/js/bundles/dn_labeling/nls/bundle.ts
@@ -39,6 +39,7 @@ const i18n = {
             selectionTitle: "Select Layer",
             selectionFields: "Select Fields",
             editAttributeLabel: "Edit attribute label",
+            finishEditingAttributeLabel: "Finish editing attribute label",
             deleteAttributeLabel: "Delete attribute label",
             edgesLabel: "Label Edge Lengths",
             autoUpdate: "Keep updated",
diff --git a/src/main/js/bundles/dn_labeling/nls/de/bundle.ts b/src/main/js/bundles/dn_labeling/nls/de/bundle.ts
index 568f7b9..70e3aa0 100644
--- a/src/main/js/bundles/dn_labeling/nls/de/bundle.ts
+++ b/src/main/js/bundles/dn_labeling/nls/de/bundle.ts
@@ -41,7 +41,8 @@ export default {
         selectionTitle: "Layer auswählen",
         selectionFields: "Felder auswählen",
         editAttributeLabel: "Attributbeschriftung bearbeiten",
-        deleteAttributeLabel: "Attributebeschriftung entfernen",
+        finishEditingAttributeLabel: "Bearbeitung der Attributbeschriftung beenden",
+        deleteAttributeLabel: "Attributbeschriftung entfernen",
         edgesLabel: "Kantenlängen beschriften",
         autoUpdate: "Änderungen automatisch anwenden",
         prefix: "Präfix",

From b79f6f0ef2ed9ce09369e13a980807baa68460a4 Mon Sep 17 00:00:00 2001
From: Julian Kuhlmann <j.kuhlmann@conterra.de>
Date: Wed, 16 Apr 2025 08:09:26 +0200
Subject: [PATCH 4/4] implement default map.apps scroll behavior (fixed button
 bar at the bottom and a scrollable container on top)

---
 src/main/js/bundles/dn_labeling/LabelingWidget.vue | 3 ++-
 src/main/js/bundles/dn_labeling/css/styles.css     | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/main/js/bundles/dn_labeling/LabelingWidget.vue b/src/main/js/bundles/dn_labeling/LabelingWidget.vue
index ee68a79..536e44b 100644
--- a/src/main/js/bundles/dn_labeling/LabelingWidget.vue
+++ b/src/main/js/bundles/dn_labeling/LabelingWidget.vue
@@ -46,10 +46,11 @@
                                 class="ct-labeling-widget__edit-close-section mr-2"
                                 icon
                                 small
-                                v-on="on"
                                 :aria-label="i18n.finishEditingAttributeLabel"
+                                v-on="on"
                                 @click="edit = !edit"
                             >
+                                <!--TODO: maybe change Icon!-->
                                 <v-icon>close</v-icon>
                             </v-btn>
                         </template>
diff --git a/src/main/js/bundles/dn_labeling/css/styles.css b/src/main/js/bundles/dn_labeling/css/styles.css
index b5d73fd..775aee9 100644
--- a/src/main/js/bundles/dn_labeling/css/styles.css
+++ b/src/main/js/bundles/dn_labeling/css/styles.css
@@ -17,11 +17,13 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    justify-content: space-between;
 
     .ct-labeling-widget__selections {
         display: flex;
         flex-direction: column;
-        flex-grow: 1;
+        flex: 1 1 auto;
+        overflow: auto;
 
         .v-select__selections {
             display: grid;
@@ -43,7 +45,7 @@
     .ct-labeling-widget__controls-div {
         display: flex;
         flex-direction: column;
-        flex-shrink: 1;
+        flex: 0 0 auto;
 
         .circumference-switch {
             margin-top: 0;