fix: UI improvements for commenting section of event tracking details

Refs iris-connect/iris-backlog#60
iris-connect · May 21, 2021 · 4a5ee20 · 4a5ee20
1 parent 3b17258
commit 4a5ee20
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/iris-client-fe/src/components/form/editable-field.vue b/iris-client-fe/src/components/form/editable-field.vue
@@ -5,10 +5,9 @@
         @click="isEditing = true"
         :class="['d-flex editable-button', hover ? 'hover' : '']"
       >
-        <div>
+        <div class="editable-button_text">
           <slot v-bind="{ entry: model || '-' }" />
         </div>
-        <v-spacer />
         <v-icon class="ml-3">mdi-pencil</v-icon>
       </div>
     </v-hover>
@@ -25,6 +24,7 @@
         hide-details="auto"
         :error-messages="error"
         outlined
+        @keypress.enter="keyEnter"
       ></component>
     </template>
   </v-form>
@@ -119,6 +119,11 @@ export default class EditableField extends EditableFieldProps {
     };
     this.$emit("submit", payload, resolve, reject);
   }
+  keyEnter(): void {
+    if (this.$props.component != "v-textarea") {
+      this.submit();
+    }
+  }
 }
 </script>
 <style scoped lang="scss">
@@ -129,4 +134,7 @@ export default class EditableField extends EditableFieldProps {
     border-bottom-color: rgba(0, 0, 0, 0.12);
   }
 }
+.editable-button_text {
+  width: 100%;
+}
 </style>
diff --git a/...lient-fe/src/views/event-tracking-details/components/event-tracking-details.component.vue b/...lient-fe/src/views/event-tracking-details/components/event-tracking-details.component.vue
@@ -41,7 +41,9 @@
             default-value="-"
           >
             <strong> Kommentar: </strong><br />
-            {{ entry }}
+            <div class="white-space-pre-line">
+              {{ entry }}
+            </div>
           </editable-field>
         </v-col>
       </v-row>
@@ -309,3 +311,11 @@ export default class EventTrackingDetailsComponent extends EventTrackingDetailsC
   }
 }
 </script>
+<style scoped lang="scss">
+.white-space-pre-line {
+  white-space: pre-line;
+  max-height: 150px;
+  width: 100%;
+  overflow-y: auto;
+}
+</style>