Merge pull request #484 from citation-file-format/457-authors-screen-icons

Change layout of AuthorEdit and add SchemaGuideLinks

Author: abelsiqueira

src/components/AuthorCardEditing.vue

@@ -4,6 +4,12 @@
         bordered
         class="bg-formcard q-pa-md"
     >
+        <div class="row">
+            <q-label class="text-dark">
+                The person's given names
+                <SchemaGuideLink anchor="#definitionspersongiven-names" />
+            </q-label>
+        </div>
         <div class="row">
             <q-input
                 bg-color="white"
@@ -20,6 +26,11 @@
                 ref="givenNamesRef"
             />
         </div>
+        <div class="row">
+            <q-label class="text-dark">
+                The person's last names, split into parts
+            </q-label>
+        </div>
         <div class="row">
             <q-input
                 bg-color="white"
@@ -33,7 +44,12 @@
                 v-bind:error="nameParticleError.hasError"
                 v-bind:error-message="nameParticleError.messages.join(', ')"
                 v-on:update:modelValue="$emit('update', 'nameParticle', $event)"
-            />
+            >
+                <SchemaGuideLink
+                    anchor="#definitionspersonname-particle"
+                    class="q-pt-sm"
+                />
+            </q-input>
             <q-input
                 bg-color="white"
                 class="col"
@@ -46,7 +62,12 @@
                 v-bind:error="familyNamesError.hasError"
                 v-bind:error-message="familyNamesError.messages.join(', ')"
                 v-on:update:modelValue="$emit('update', 'familyNames', $event)"
-            />
+            >
+                <SchemaGuideLink
+                    anchor="#definitionspersonfamily-names"
+                    class="q-pt-sm"
+                />
+            </q-input>
             <q-input
                 bg-color="white"
                 class="col-3"
@@ -59,7 +80,18 @@
                 v-bind:error="nameSuffixError.hasError"
                 v-bind:error-message="nameSuffixError.messages.join(', ')"
                 v-on:update:modelValue="$emit('update', 'nameSuffix', $event)"
-            />
+            >
+                <SchemaGuideLink
+                    anchor="#definitionspersonname-suffix"
+                    class="q-pt-sm"
+                />
+            </q-input>
+        </div>
+        <div class="row">
+            <q-label class="text-dark">
+                The person's email address
+                <SchemaGuideLink anchor="#definitionsperson-email" />
+            </q-label>
         </div>
         <div class="row">
             <q-input
@@ -77,6 +109,16 @@
                 v-on:update:modelValue="$emit('update', 'email', $event)"
             />
         </div>
+        <div class="row">
+            <q-label class="text-dark col">
+                The person's affiliation
+                <SchemaGuideLink anchor="#definitionsperson-affiliation" />
+            </q-label>
+            <q-label class="text-dark col">
+                The person's ORCID
+                <SchemaGuideLink anchor="#definitionsperson-orcid" />
+            </q-label>
+        </div>
         <div class="row">
             <q-input
                 bg-color="white"
@@ -158,6 +200,7 @@
 import { computed, defineComponent, onMounted, ref } from 'vue'
 import { getMyErrors } from 'src/store/validator'
 import { authorErrors } from 'src/author-errors'
+import SchemaGuideLink from './SchemaGuideLink.vue'
 
 export default defineComponent({
     name: 'AuthorCardEditing',
@@ -214,10 +257,10 @@ export default defineComponent({
             affiliationError: computed(() => getMyErrors(`/authors/${props.index}/affiliation`)),
             orcidError: computed(() => getMyErrors(`/authors/${props.index}/orcid`)),
             authorErrors: computed(() => authorErrors(props.index))
-
         }
     },
-    emits: ['closePressed', 'removePressed', 'update', 'moveUp', 'moveDown']
+    emits: ['closePressed', 'removePressed', 'update', 'moveUp', 'moveDown'],
+    components: { SchemaGuideLink }
 })
 </script>
 <style scoped>

src/components/SchemaGuideLink.vue

@@ -1,6 +1,13 @@
 <template>
-    <a v-bind:href="'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md' + anchor">
-        <q-icon name="ion-information-circle-outline" />
+    <a
+        v-bind:href="'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md' + anchor"
+        tabindex="-1"
+    >
+        <q-icon
+            name="ion-information-circle-outline"
+            size="24px"
+            color="primary"
+        />
         <q-tooltip
             anchor="center middle"
             class="bg-primary text-body2 text-white"