feat: add the button for variants detail

subugoe · Aug 1, 2024 · a5a0bd2 · a5a0bd2
1 parent 4e85b24
commit a5a0bd2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/examples/ahiqar-arabic-karshuni-with-variants-local.html b/examples/ahiqar-arabic-karshuni-with-variants-local.html
@@ -114,19 +114,19 @@
                 "types": [
                   {
                     "name": "Person",
-                    "icon": "biPersonFill"
+                    "icon": "person"
                   },
                   {
                     "name": "Place",
-                    "icon": "biGeoAltFill"
+                    "icon": "marker"
                   },
                   {
                     "name": "Editorial Comment",
-                    "icon": "biChatFill"
+                    "icon": "chat"
                   },
                   {
                     "name": "Reference",
-                    "icon": "biBoxArrowUpRight"
+                    "icon": "externalLink"
                   }
                 ]
               }
@@ -141,7 +141,7 @@
                 "types": [
                   {
                     "name": "Motif",
-                    "icon": "biPenFill"
+                    "icon": "pen"
                   }
                 ]
               }
@@ -156,7 +156,7 @@
                 "types": [
                   {
                     "name": "Variant",
-                    "icon": "biPenFill"
+                    "icon": "pen"
                   }
                 ]
               }

diff --git a/src/components/annotations/AnnotationVariantItem.vue b/src/components/annotations/AnnotationVariantItem.vue
@@ -9,7 +9,11 @@
             <span v-if="variant.witness" v-html="variant.witness" class="t-text-sm"/>
             <span v-else class="t-text-sm"> - </span>
           </div>
-          <span v-html="variant.entry" class="t-absolute t-right-[50%]"/>
+          <span v-html="variant.entry" class="t-absolute t-ml-[150px]"/>
+          <button class="t-bg-blue-500 t-hover:bg-blue-700 t-text-white t-text-sm t-font-bold t-py-1 t-px-2 t-rounded-full t-absolute t-ml-[250px]"
+                @click="openVariantsModel()">
+            Open detail
+          </button>
     </div>
 </template>
 
@@ -24,6 +28,10 @@ function getCurrentVariantItemColor(index){
   return colors()[index]
 }
 
+function openVariantsModel(){
+  console.log('open the variants modal')
+}
+
 
 export interface Props {
   annotation: Annotation,

diff --git a/src/utils/annotations.js b/src/utils/annotations.js
@@ -244,7 +244,6 @@ export function addWitness(element, annotation) {
   const numberVariantItems = Object.keys(variantItemsList).length
   const hexaDecimalColors = colors().slice(0, numberVariantItems)
 
-
   //let prevElement = element;
   let i = 0;
   variantItemsList.forEach((variantItem) => {
@@ -259,7 +258,6 @@ export function addWitness(element, annotation) {
     parentOfElement.insertBefore(witHtmlElement, parentOfElement.children[indexOfElement]);
   });
   //element.after(witnessesHtml)
-
 }
 
 export function removeWitness(selector, removeAnnotation) {