Improve attribute labeling edit section with tooltip and aria label. Additionally, remove usages of id selectors in css and further BEMing

Author: julkuh

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"
                 >

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;
     }
 

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",

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",