From ad7166f576a2442a94087072d1f87179f4eb3be0 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 20 Apr 2023 12:18:29 +0200
Subject: [PATCH] Made custom outlined fields work on backgrounds

---
 .../viewers/shared/OutlinedInput.vue          | 44 ++++++++++++++-----
 .../viewers/shared/PropertyField.vue          | 21 ++++++---
 2 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/app/imports/client/ui/properties/viewers/shared/OutlinedInput.vue b/app/imports/client/ui/properties/viewers/shared/OutlinedInput.vue
index 343412d7..3fd9a795 100644
--- a/app/imports/client/ui/properties/viewers/shared/OutlinedInput.vue
+++ b/app/imports/client/ui/properties/viewers/shared/OutlinedInput.vue
@@ -1,23 +1,29 @@
 <template>
-  <v-sheet
-    outlined
-    rounded
-    style="position: relative;"
+  <fieldset
+    :class="theme.isDark? 'theme--dark' :'theme--light'"
+    class="outlined-input rounded v-sheet--outlined"
     @click="$emit('click', $event)"
   >
-    <v-sheet
+    <legend
       v-if="name"
       class="text-caption px-1 ml-2 name"
-      style="top: 0; left: 0; margin-top: -10px; position: absolute;"
+      style="line-height: 0;"
     >
       {{ name }}
-    </v-sheet>
-    <slot />
-  </v-sheet>
+    </legend>
+    <slot style="margin-top: -10px;" />
+  </fieldset>
 </template>
 
 <script lang="js">
 export default {
+  inject: {
+    theme: {
+      default: {
+        isDark: false,
+      },
+    },
+  },
   props: {
     name: {
       type: String,
@@ -25,4 +31,22 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="css" scoped>
+.outlined-input{
+  transition: border-color .15s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.outlined-input.theme--light {
+  border-color: rgba(0,0,0,.38);
+}
+.outlined-input.theme--dark {
+  border-color: rgba(255,255,255,.24);
+}
+.outlined-input.theme--light:hover {
+  border-color: rgba(0,0,0,.86);
+}
+.outlined-input.theme--dark:hover {
+  border-color: #fff;
+}
+</style>
diff --git a/app/imports/client/ui/properties/viewers/shared/PropertyField.vue b/app/imports/client/ui/properties/viewers/shared/PropertyField.vue
index f72a91a5..9daf1d04 100644
--- a/app/imports/client/ui/properties/viewers/shared/PropertyField.vue
+++ b/app/imports/client/ui/properties/viewers/shared/PropertyField.vue
@@ -6,18 +6,18 @@
     v-bind="cols"
     class="mb-3"
   >
-    <v-sheet
-      outlined
-      class="pa-2 layout column align-start fill-height"
+    <fieldset
+      :class="theme.isDark? 'theme--dark' :'theme--light'"
+      class="rounded v-sheet--outlined pa-2 layout column align-start fill-height"
       @click="$emit('click', $event)"
     >
-      <v-sheet
+      <legend
         v-if="name"
         class="text-caption px-1 name"
-        style="margin-top: -18px;"
+        style="line-height: 0;"
       >
         {{ name }}
-      </v-sheet>
+      </legend>
       <div
         class="flex-grow-1 d-flex align-center flex-wrap"
         style="width: 100%;"
@@ -72,7 +72,7 @@
           />
         </div>
       </div>
-    </v-sheet>
+    </fieldset>
   </v-col>
 </template>
 
@@ -84,6 +84,13 @@ export default {
   components: {
     InlineEffect,
   },
+  inject: {
+    theme: {
+      default: {
+        isDark: false,
+      },
+    },
+  },
   props: {
     name: {
       type: String,