From 71f70ec2657c017d3799df9e0b107fb6da5c1280 Mon Sep 17 00:00:00 2001
From: Abel Soares Siqueira <abel.s.siqueira@gmail.com>
Date: Wed, 24 Aug 2022 10:44:24 +0200
Subject: [PATCH] Use InfoDialog on Abstract screen

---
 src/components/ScreenAbstract.vue | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/ScreenAbstract.vue b/src/components/ScreenAbstract.vue
index f34e3e94..f1e1ef3c 100644
--- a/src/components/ScreenAbstract.vue
+++ b/src/components/ScreenAbstract.vue
@@ -8,7 +8,13 @@
     <div id="form-content">
         <h2 class="question">
             Please provide a description of the work
-            <SchemaGuideLink anchor="#abstract" />
+            <q-icon
+                name="ion-information-circle-outline"
+                size="24px"
+                color="primary"
+                v-on:click="showAbstractHelp = true"
+                style="cursor:pointer;"
+            />
         </h2>
         <q-input
             autogrow
@@ -21,24 +27,37 @@
             v-bind:model-value="abstract"
             v-on:update:modelValue="setAbstract"
         />
+        <InfoDialog
+            v-model="showAbstractHelp"
+            v-bind:data="helpData.abstract"
+        />
     </div>
 </template>
 
 <script lang="ts">
-import SchemaGuideLink from 'components/SchemaGuideLink.vue'
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
+import InfoDialog from 'components/InfoDialog.vue'
 import { useCff } from 'src/store/cff'
 
 export default defineComponent({
     name: 'ScreenAbstract',
     components: {
-        SchemaGuideLink
+        InfoDialog
     },
     setup () {
         const { abstract, setAbstract } = useCff()
+        const helpData = {
+            abstract: {
+                title: 'abstract',
+                url: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#abstract',
+                description: 'A description or summary of the work.'
+            }
+        }
         return {
             abstract,
-            setAbstract
+            helpData,
+            setAbstract,
+            showAbstractHelp: ref(false)
         }
     }
 })