Merge pull request #2305 from FAIRsharing/record_tooltips_2295

Record page tooltips
FAIRsharing · Sep 11, 2024 · 1783f49 · 1783f49
2 parents 08bbce1 + 082c439
commit 1783f49
Show file tree

Hide file tree

Showing 32 changed files with 611 additions and 67 deletions.
diff --git a/src/components/Editor/GeneralInformation/BaseFields.vue b/src/components/Editor/GeneralInformation/BaseFields.vue
@@ -76,7 +76,7 @@
                   fa-question-circle
                 </v-icon>
               </template>
-              Name of the record
+              {{ tooltips['name'] }}
             </v-tooltip>
           </template>
         </v-text-field>

diff --git a/src/components/Records/Record/AdditionalInfo/DatasetArray.vue b/src/components/Records/Record/AdditionalInfo/DatasetArray.vue
@@ -9,7 +9,11 @@
       class="d-inline-block mr-2"
     >
       <template #activator="{ on }">
-        <v-icon v-on="on">
+        <v-icon
+          size="15"
+          class="mb-1"
+          v-on="on"
+        >
           fa-question-circle
         </v-icon>
       </template>

diff --git a/src/components/Records/Record/GeneralInfo/Citations.vue b/src/components/Records/Record/GeneralInfo/Citations.vue
@@ -15,10 +15,24 @@
           elevation="3"
         >
           <Icon
-            item="howToCite"
             size="20"
+            item="howToCite"
           />
-          <v-card-title class="pa-0 text--primary card-title-customize">
+          <v-card-title
+            class="pa-0 text--primary card-title-customize"
+          >
+            <v-tooltip bottom>
+              <template #activator="{ on }">
+                <v-icon
+                  class="mr-2"
+                  size="15"
+                  v-on="on"
+                >
+                  fa-question-circle
+                </v-icon>
+              </template>
+              {{ recordTooltips['how_to_cite'] }}
+            </v-tooltip>
             How to cite this record
           </v-card-title>
           <v-card-text class="ma-0 pt-8 card-text-customize">
@@ -91,6 +105,18 @@
             size="20"
           />
           <v-card-title class="pa-0 card-title-customize">
+            <v-tooltip bottom>
+              <template #activator="{ on }">
+                <v-icon
+                  class="mr-2"
+                  size="15"
+                  v-on="on"
+                >
+                  fa-question-circle
+                </v-icon>
+              </template>
+              {{ recordTooltips['publication_for_citation'] }}
+            </v-tooltip>
             Publication for citation
           </v-card-title>
           <v-card-text class="ma-0 pt-8 card-text-customize">
@@ -167,6 +193,7 @@ export default {
   },
   computed: {
     ...mapState("record", ["currentRecord"]),
+    ...mapState("editor", ["recordTooltips"]),
     ...mapGetters("record", ["getField"]),
   },
   methods: {

diff --git a/src/components/Records/Record/GeneralInfo/ContactsData.vue b/src/components/Records/Record/GeneralInfo/ContactsData.vue
@@ -3,7 +3,23 @@
     v-if="getField('metadata').contacts && getField('metadata').contacts.length"
     class="d-flex align-center flex-wrap"
   >
-    <b class="width-15-percent-flex">Contacts</b>
+    <span
+      class="d-flex align-baseline width-15-percent-flex"
+    >
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-icon
+            class="mr-2"
+            size="15"
+            v-on="on"
+          >
+            fa-question-circle
+          </v-icon>
+        </template>
+        {{ recordTooltips['contacts'] }}
+      </v-tooltip>
+      <b class="width-15-percent-flex">Contacts</b>
+    </span>
     <div class="d-flex flex-wrap ml-md-12 ml-13">
       <div
         v-for="(contact,index) in getField('metadata').contacts"
@@ -41,20 +57,37 @@
     v-else
     class="align-center d-flex flex-row mb-2"
   >
-    <b class="width-15-percent-flex">Contacts</b>
+    <span
+      class="d-flex align-baseline width-15-percent-flex"
+    >
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-icon
+            class="mr-2"
+            size="15"
+            v-on="on"
+          >
+            fa-question-circle
+          </v-icon>
+        </template>
+        {{ recordTooltips['contacts'] }}
+      </v-tooltip>
+      <b class="width-15-percent-flex">Contacts</b>
+    </span>
     <span class="ma-0 full-width ml-md-12 ml-13">None</span>
   </div>
 </template>
 
 <script>
-import {mapGetters} from "vuex";
+import {mapGetters, mapState} from "vuex";
 
 import Icon from "@/components/Icon";
 export default {
   name: "ContactsData",
   components:{Icon},
   computed: {
     ...mapGetters("record", ["getField"]),
+    ...mapState("editor", ["recordTooltips"])
   }
 }
 </script>
diff --git a/src/components/Records/Record/GeneralInfo/Countries.vue b/src/components/Records/Record/GeneralInfo/Countries.vue
@@ -1,7 +1,26 @@
 <template>
   <div class="d-flex flex-row mt-4 min-height-40">
-    <b class="width-15-percent-flex">Countries developing this resource</b>
-    <div class="d-flex full-width flex-wrap ml-md-12 ml-13">
+    <span
+      class="d-flex align-baseline width-15-percent-flex"
+    >
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-icon
+            class="mr-2"
+            size="15"
+            v-on="on"
+          >
+            fa-question-circle
+          </v-icon>
+        </template>
+        {{ recordTooltips['countries'] }}
+      </v-tooltip>
+      <b>Countries developing this resource</b>
+    </span>
+    <div
+      class="d-flex full-width flex-wrap ml-md-12 ml-13"
+      :class="{'justify-end' : $vuetify.breakpoint.smAndDown}"
+    >
       <NoneFound
         v-if="!getField('countries')"
         :data-field="getField('countries')"
@@ -36,7 +55,7 @@
 </template>
 
 <script>
-import {mapGetters} from "vuex";
+import {mapGetters, mapState} from "vuex";
 
 import NoneFound from "@/components/Records/Record/NoneFound";
 
@@ -50,6 +69,7 @@ export default {
   },
   computed: {
     ...mapGetters("record", ["getField"]),
+    ...mapState("editor", ["recordTooltips"])
   },
   methods: {
     sortCountries() {

diff --git a/src/components/Records/Record/GeneralInfo/Description.vue b/src/components/Records/Record/GeneralInfo/Description.vue
@@ -1,21 +1,41 @@
 <template>
   <div class="d-flex flex-row mt-4 min-height-40">
-    <b class="width-15-percent-flex">Description</b>
-    <p class="ma-0 full-width ml-md-12 ml-13 text-justify">
+    <span
+      class="d-flex align-baseline width-15-percent-flex"
+    >
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-icon
+            class="mr-2"
+            size="15"
+            v-on="on"
+          >
+            fa-question-circle
+          </v-icon>
+        </template>
+        {{ recordTooltips['description'] }}
+      </v-tooltip>
+      <b>Description</b>
+    </span>
+    <p
+      class="ma-0 full-width ml-md-12 ml-8"
+      :class="{'text-end' : $vuetify.breakpoint.smAndDown}"
+    >
       {{ getField('description') | capitalize }}
     </p>
   </div>
 </template>
 
 <script>
-import {mapGetters} from "vuex";
+import {mapGetters, mapState} from "vuex";
 
 import stringUtils from "@/utils/stringUtils";
 export default {
   name: "Description",
   mixins: [stringUtils],
   computed: {
     ...mapGetters("record", ["getField"]),
+    ...mapState("editor", ["recordTooltips"]),
   }
 }
 </script>
diff --git a/src/components/Records/Record/GeneralInfo/HomePage.vue b/src/components/Records/Record/GeneralInfo/HomePage.vue
@@ -3,8 +3,27 @@
     v-if="getField('homepage')"
     class="d-flex flex-row mt-4 align-center min-height-40"
   >
-    <b class="width-15-percent-flex">Homepage</b>
-    <div class="d-flex full-width ml-md-12 ml-13">
+    <span
+      class="d-flex align-baseline width-15-percent-flex"
+    >
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-icon
+            class="mr-2"
+            size="15"
+            v-on="on"
+          >
+            fa-question-circle
+          </v-icon>
+        </template>
+        {{ recordTooltips['homepage'] }}
+      </v-tooltip>
+      <b>Homepage</b>
+    </span>
+    <div
+      class="d-flex ma-0 full-width ml-md-12 ml-8"
+      :class="{'justify-end' : $vuetify.breakpoint.smAndDown}"
+    >
       <a
         v-if="getField('homepage')"
         :href="getField('homepage')"
@@ -20,14 +39,15 @@
 </template>
 
 <script>
-import {mapGetters} from "vuex";
+import {mapGetters, mapState} from "vuex";
 
 import NoneFound from "@/components/Records/Record/NoneFound";
 export default {
   name: "HomePage",
   components: {NoneFound},
   computed: {
     ...mapGetters("record", ["getField"]),
+    ...mapState("editor", ["recordTooltips"]),
   }
 }
 </script>