From 55db4db0c810fab85af3b1d4970b80eec4c260fd Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Mon, 30 Nov 2020 08:57:27 +0100
Subject: [PATCH] Hide description when field not focused

---
 htdocs/src/components/hResourceValueInput.vue    | 10 ++++++++--
 htdocs/src/components/hResourceValueInputRaw.vue |  4 ++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/htdocs/src/components/hResourceValueInput.vue b/htdocs/src/components/hResourceValueInput.vue
index b681063..f10dcc9 100644
--- a/htdocs/src/components/hResourceValueInput.vue
+++ b/htdocs/src/components/hResourceValueInput.vue
@@ -38,8 +38,8 @@
     <label v-if="specs.label" :for="'spec-' + index + '-' + specs.id" :title="specs.label" class="col-md-4 col-form-label text-truncate text-md-right text-primary">{{ specs.label }}</label>
     <label v-else :for="'spec-' + index + '-' + specs.id" :title="specs.label" class="col-md-4 col-form-label text-truncate text-md-right text-primary">{{ specs.id }}</label>
     <b-col md="8">
-      <h-resource-value-input-raw v-model="val" :edit="edit" :index="index" :specs="specs" />
-      <p v-if="specs.description" class="text-justify" style="line-height: 1.1">
+      <h-resource-value-input-raw v-model="val" :edit="edit" :index="index" :specs="specs" @focus="show_description = true" @blur="show_description = false" />
+      <p v-if="specs.description" v-show="show_description" class="text-justify" style="line-height: 1.1">
         <small class="text-muted">{{ specs.description }}</small>
       </p>
     </b-col>
@@ -77,6 +77,12 @@ export default {
     }
   },
 
+  data: function () {
+    return {
+      show_description: false
+    }
+  },
+
   computed: {
     val: {
       get () {
diff --git a/htdocs/src/components/hResourceValueInputRaw.vue b/htdocs/src/components/hResourceValueInputRaw.vue
index 49726fe..864d2a5 100644
--- a/htdocs/src/components/hResourceValueInputRaw.vue
+++ b/htdocs/src/components/hResourceValueInputRaw.vue
@@ -39,6 +39,8 @@
       v-model="val"
       :required="specs.required !== undefined && specs.required"
       :options="specs.choices"
+      @focus="$emit('focus')"
+      @blur="$emit('blur')"
     />
     <b-form-input
       v-else
@@ -49,6 +51,8 @@
       :required="specs.required !== undefined && specs.required"
       :placeholder="specs.placeholder"
       :plaintext="!edit"
+      @focus="$emit('focus')"
+      @blur="$emit('blur')"
     />
   </b-input-group>
 </template>