use more UI icons

Author: PrinsINT

client/src/assets/main.scss

@@ -51,6 +51,7 @@ a {
 // Awesome font icons
 i.fa {
     font-size: 1.3rem;
+    padding: 0 0.2rem
 }
 
 $theme: #62b6ff;

client/src/components/input/UploadDocuments.vue

@@ -52,7 +52,7 @@
                     }
                 "
             >
-                Upload
+                <i class="fa fa-upload"></i>
             </GButton>
             <GButton title="Cancel"
                 plain
@@ -63,7 +63,7 @@
                     }
                 "
             >
-                &#10006;&nbsp;cancel
+                <i class="fa fa-close"></i>
             </GButton>
         </fieldset>
 

client/src/components/modals/DeleteModal.vue

@@ -13,7 +13,7 @@
                         $emit('hide')
                     }
                 "
-                >Confirm</GButton
+                ><i class="fa fa-check"></i></GButton
             >
         </template>
     </GModal>

client/src/components/modals/GModal.vue

@@ -10,7 +10,7 @@
             <slot></slot>
         </GCard>
         <form class="buttons" @submit.prevent>
-            <GButton red title="Close" @click="$emit('hide')">Close</GButton>
+            <GButton red title="Close" @click="$emit('hide')"><i class="fa fa-close"></i></GButton>
             <slot name="buttons"></slot>
         </form>
     </dialog>

client/src/components/modals/corpus/CorpusForm.vue

@@ -28,9 +28,6 @@
                                 v-model="eraFrom"
                                 validityDescriptor="Before end year"
                                 placeholder="YYYY"
-                                :min="-6000"
-                                :max="2100"
-                                :step="50"
                                 :validator="
                                     (v) => {
                                         return (v ?? 0) <= (eraTo ?? 0)
@@ -47,9 +44,6 @@
                                 v-model="eraTo"
                                 validityDescriptor="After start year"
                                 placeholder="YYYY"
-                                :min="-6000"
-                                :max="2100"
-                                :step="50"
                                 :validator="
                                     (v) => {
                                         return (v ?? 0) >= (eraFrom ?? 0)
@@ -117,7 +111,7 @@
         </form>
 
         <template #buttons>
-            <GButton green @click="confirm" :disabled>{{ initial ? "Update" : "Create" }}</GButton>
+            <GButton green @click="confirm" :disabled><i class="fa fa-check"></i></GButton>
         </template>
     </GModal>
 </template>

client/src/components/modals/corpus/UserList.vue

@@ -11,7 +11,7 @@
         <td>
             <div class="usersInput">
                 <GInput placeholder="CLARIN login (email)" v-model="newUser" @enter="setUser(newUser)" />
-                <GButton :disabled="!newUser.length" @click="setUser(newUser)">Add</GButton>
+                <GButton :disabled="!newUser.length" @click="setUser(newUser)"><i class="fa fa-plus"></i></GButton>
             </div>
         </td>
     </tr>
@@ -25,7 +25,7 @@
                     <div class="users">
                         <p>{{ userName }}</p>
                         <GButton plain @click="userToDelete = userName" v-if="canDelete(userName)">
-                            &#10006;&nbsp;remove
+                            <i class="fa fa-close"></i>
                         </GButton>
                     </div>
                 </li>

client/src/types/taggers.ts

@@ -2,7 +2,7 @@ export type Tagger = {
     id: string
     description: string
     tagset: string
-    langauge: string
+    language: string
     eraFrom: number
     eraTo: number
     annotations: string[]

client/src/views/annotate/subviews/CorporaView.vue

@@ -5,9 +5,9 @@
         </template>
 
         <GForm gap="0.25rem">
-            <GButton green title="New" @click="newCorpus = true"> New </GButton>
-            <GButton orange title="Edit" :disabled="!canWrite" @click="editCorpus = copy(corpus)"> Edit </GButton>
-            <GButton red title="Delete" :disabled="!canDelete" @click="deleteCorpus = corpus"> Delete </GButton>
+            <GButton green title="New" @click="newCorpus = true"><i class="fa fa-plus"></i></GButton>
+            <GButton orange title="Edit" :disabled="!canWrite" @click="editCorpus = copy(corpus)"><i class="fa fa-pencil"></i></GButton>
+            <GButton red title="Delete" :disabled="!canDelete" @click="deleteCorpus = corpus"><i class="fa fa-trash"></i></GButton>
         </GForm>
 
         <!-- Owner corpus table -->

client/src/views/annotate/subviews/evaluate/subviews/EntitiesView.vue

@@ -43,6 +43,9 @@
                 <GButton v-if="data.value" class="button" @click="selectedItem = data">
                     {{ formatNumber(data.value) }}
                 </GButton>
+                <template v-else>
+                    {{  formatNumber(data.value) }}
+                </template>
             </template>
         </GTable>
 
@@ -198,8 +201,13 @@ function convertJobsEntities(jobsEntities: JobsEntities): DocumentEntitiesRow[]
 // custom format because we are overriding the cell slot
 function formatNumber(value: unknown): string | unknown {
     // only tofixed if value is a float
-    if (typeof value === "number" && !Number.isInteger(value)) {
-        return value.toFixed(2)
+    if (typeof value === "number") {
+        if (!Number.isInteger(value)) {
+            return value.toFixed(2)
+        } 
+        if (value === 0) {
+            return ""
+        }
     }
     return value
 }