refactor: cleaned up the UI a bit

Author: tecoholic

src/App.vue

@@ -8,10 +8,16 @@
     @drop.stop.prevent="onDrop"
   >
     <div :style="{ 'pointer-events': overlayActive ? 'none' : 'auto' }">
-      <q-layout view="hHh lpR fFf">
+      <q-layout view="hHh lpR lFf">
         <menu-bar />
 
-        <q-drawer bordered :class="$q.dark.isActive ? 'bg-dark' : 'bg-grey-2'">
+        <q-drawer
+          behavior="desktop"
+          bordered
+          side="left"
+          :model-value="currentPage === 'annotate'"
+          :class="$q.dark.isActive ? 'bg-dark' : 'bg-grey-2'"
+        >
           <annotation-sidebar />
         </q-drawer>
 

src/components/AnnotationPage.vue

@@ -1,10 +1,7 @@
 <template>
   <div>
     <classes-block />
-    <div
-      class="q-pa-lg"
-      style="height:60vh; overflow-y:scroll;"
-    >
+    <div class="q-pa-lg" style="height: 60vh; overflow-y: scroll">
       <component
         :is="t.type === 'token' ? 'Token' : 'TokenBlock'"
         v-for="t in tm.tokens"
@@ -16,10 +13,7 @@
       />
     </div>
 
-    <div
-      class="q-pa-md"
-      style="border-top: 1px solid #ccc"
-    >
+    <div class="q-pa-md" style="border-top: 1px solid #ccc">
       <q-btn
         color="red"
         outline
@@ -67,7 +61,7 @@ export default {
     TokenBlock,
     ClassesBlock,
   },
-  data: function() {
+  data: function () {
     return {
       tm: new TokenManager([]),
       currentSentence: {},
@@ -101,14 +95,14 @@ export default {
     },
     annotationPrecision() {
       this.tokenizeCurrentSentence();
-    }
+    },
   },
   created() {
     if (this.inputSentences.length) {
       this.tokenizeCurrentSentence();
     }
     document.addEventListener("mouseup", this.selectTokens);
-    document.addEventListener('keydown', this.keypress);
+    document.addEventListener("keydown", this.keypress);
   },
   beforeUnmount() {
     document.removeEventListener("mouseup", this.selectTokens);
@@ -118,19 +112,23 @@ export default {
     ...mapMutations(["nextSentence", "previousSentence", "resetIndex"]),
     keypress(event) {
       if (!this.enableKeyboardShortcuts) {
-        return
+        return;
       }
-      if (event.keyCode == 32) { // Space
+      if (event.keyCode == 32) {
+        // Space
         this.saveTags();
-      } else if (event.keyCode == 39) { // right arrow
+      } else if (event.keyCode == 39) {
+        // right arrow
         this.skipCurrentSentence();
-      } else if (event.keyCode == 37) { // left arrow
+      } else if (event.keyCode == 37) {
+        // left arrow
         this.backOneSentence();
-      } else if (event.keyCode == 82 || event.keyCode == 27) { // r / R or ESC
+      } else if (event.keyCode == 82 || event.keyCode == 27) {
+        // r / R or ESC
         this.resetBlocks();
       }
       // stop event from bubbling up
-      event.stopPropagation()
+      event.stopPropagation();
     },
     tokenizeCurrentSentence() {
       this.currentSentence = this.inputSentences[this.currentIndex];
@@ -139,8 +137,8 @@ export default {
       let tokens, spans;
 
       if (this.$store.state.annotationPrecision == "char") {
-        tokens = this.currentSentence.text.split('');
-        spans = []
+        tokens = this.currentSentence.text.split("");
+        spans = [];
         for (let i = 0; i < this.currentSentence.text.length; i++) {
           spans.push([i, i + 1]);
         }
@@ -163,22 +161,26 @@ export default {
       ) {
         return;
       }
-      
+
       const rangeStart = selection.getRangeAt(0);
       const rangeEnd = selection.getRangeAt(selection.rangeCount - 1);
       let start, end;
       try {
-        start = parseInt(rangeStart.startContainer.parentElement.id.replace("t", ""));
-        let offsetEnd = parseInt(rangeEnd.endContainer.parentElement.id.replace("t", ""));
+        start = parseInt(
+          rangeStart.startContainer.parentElement.id.replace("t", "")
+        );
+        let offsetEnd = parseInt(
+          rangeEnd.endContainer.parentElement.id.replace("t", "")
+        );
         end = offsetEnd + rangeEnd.endOffset;
-        if(!end){
-          /* 
-            If last node of selected text contains tag name 
+        if (!end) {
+          /*
+            If last node of selected text contains tag name
             Fetch the previous node
           */
           const endContainerParent = rangeEnd.endContainer.parentNode;
           const previousNode = endContainerParent.previousSibling;
-          offsetEnd = parseInt(previousNode.parentElement.id.replace("t",""))
+          offsetEnd = parseInt(previousNode.parentElement.id.replace("t", ""));
           end = offsetEnd + rangeEnd.endOffset;
         }
       } catch {
@@ -192,7 +194,7 @@ export default {
         selection.empty();
         return;
       }
-      
+
       this.tm.addNewBlock(start, end, this.currentClass);
       selection.empty();
     },

src/components/HelpDialog.vue

@@ -3,7 +3,13 @@
     <q-card>
       <q-bar>
         <q-space />
-        <q-btn dense flat icon="close" v-close-popup @click="$emit('hide')">
+        <q-btn
+          dense
+          flat
+          icon="fa fa-close"
+          v-close-popup
+          @click="$emit('hide')"
+        >
           <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>

src/components/StartPage.vue

@@ -1,66 +1,61 @@
 <template>
   <div class="q-mx-auto q-my-xl" style="max-width: 600px">
     <h1 class="text-h4 q-mb-sm text-center">NER Text Annotator</h1>
-    <p class="text-caption text-center">
+    <p class="text-subtitle1 text-center">
       Annotate text for spaCy NER Model training
     </p>
 
     <div class="q-my-xl q-py-md column">
-      <div class="row justify-between items-center">
-        <div>
-          <p
-            :class="[
-              'text-h6 q-my-md',
-              $q.dark.isActive ? 'text-grey-4' : 'text-grey-7',
-            ]"
-          >
-            Select your file(s), then press 'Begin'!
-          </p>
-          <p
-            :class="[
-              'text-subtitle1 q-my-md',
-              $q.dark.isActive ? 'text-grey-4' : 'text-grey-7',
-            ]"
-          >
-            Hint: You can also drag and drop files into this window!
-          </p>
-        </div>
-        <q-btn
-          v-close-popup
-          outline
-          label="Begin!"
-          :color="!textFile ? 'grey-7' : 'blue'"
-          :disable="!textFile"
-          @click="onConfirmation"
-        />
-      </div>
-      <div class="row items-center">
+      <div class="row justify-around q-my-xl">
         <q-file
           class="col-5 q-mx-sm"
           v-model="textFile"
           accept=".txt"
           filled
-          label="Text file"
-          :bg-color="$q.dark.isActive ? 'black-1' : 'light-blue-1'"
-          @rejected="fileSelectionError('Invalid text file')"
+          label="Open text file"
+          color="primary"
+          @rejected="
+            fileSelectionError(
+              'Only text files (.txt) can be used for creating annotations.'
+            )
+          "
         >
-          <template #prepend>
-            <q-icon name="fas fa-upload" />
-          </template>
-        </q-file>
-        <q-file
-          class="col-5 q-mx-sm"
-          v-model="annotationFile"
-          accept=".json"
-          filled
-          label="(Optional) Annotations"
-          :bg-color="$q.dark.isActive ? 'black-1' : 'light-blue-1'"
-          @rejected="fileSelectionError('Invalid annotation file')"
-        >
-          <template #prepend>
-            <q-icon name="fas fa-upload" />
+          <template v-slot:prepend>
+            <q-icon name="fas fa-file-text" />
           </template>
         </q-file>
+        <div>
+          <q-file
+            class="col-5 q-mx-sm"
+            v-model="annotationFile"
+            accept=".json"
+            filled
+            label="Load Annotations"
+            color="teal"
+            @rejected="fileSelectionError('Invalid annotation file')"
+          >
+            <template #prepend>
+              <q-icon name="fas fa-file-code" />
+            </template>
+          </q-file>
+          <p class="text-caption q-mx-sm q-my-sm text-grey-8">Optional</p>
+        </div>
+      </div>
+
+      <div class="row">
+        <p class="col-12 q-my-md text-blue-7 text-center">
+          <q-icon name="fa fa-lightbulb" />
+          You can also drag and drop files into this window!
+        </p>
+      </div>
+      <div class="row justify-center q-my-xl">
+        <q-btn
+          v-close-popup
+          label="Start Annotating"
+          class="full-width"
+          color="primary"
+          @click="onConfirmation"
+        />
       </div>
     </div>
   </div>
@@ -112,11 +107,11 @@ export default {
     },
     fileSelectionError(msg) {
       this.$q.notify({
-        icon: "fas fa-exclamation-circle",
+        type: "negative",
+        icon: "fas fa-explosion",
         message: msg,
-        color: "red-6",
-        position: "top",
-        timeout: 2000,
+        position: "center",
+        timeout: 5000,
         actions: [{ label: "Dismiss", color: "white" }],
       });
     },

src/components/TokenBlock.vue

@@ -39,7 +39,7 @@ export default {
     },
   },
   emits: ["remove-block"],
-  data: function() {
+  data: function () {
     return {
       showClose: false,
     };
@@ -48,20 +48,19 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'quasar/src/css/variables';
+@import "quasar/src/css/variables";
 
 mark {
   padding: 0.5rem;
   position: relative;
   background-color: burlywood;
-  border: 1px solid $grey-7;
-  border-radius: 0.35rem;
+  box-shadow: 2px 2px 4px rgba(180, 180, 180, 0.4);
+  border-radius: 0.25rem;
 }
 .tag {
   background-color: whitesmoke;
   padding: 4px 0 4px 8px;
-  border: 1px solid grey;
-  border-radius: 0.35rem;
+  border-radius: 0.25rem;
   font-size: x-small;
 }
 .close-btn {

src/components/menubar/MenuBar.vue

@@ -12,7 +12,7 @@
 
       <div class="q-ml-md cursor-pointer non-selectable">
         <span> File </span>
-        <q-menu style="border-radius: 0.5rem">
+        <q-menu>
           <q-list dense style="min-width: 100px">
             <q-item v-close-popup clickable @click="pendingClick = $refs.file">
               <q-item-section>Open File</q-item-section>
@@ -30,7 +30,7 @@
 
       <div class="q-ml-md cursor-pointer non-selectable">
         <span> Annotations </span>
-        <q-menu style="border-radius: 0.5rem">
+        <q-menu>
           <q-list dense style="min-width: 100px">
             <export-annotations />
             <q-item v-close-popup clickable @click="pendingClick = $refs.file">
@@ -49,7 +49,7 @@
 
       <div class="q-ml-md cursor-pointer non-selectable">
         <span> Tags </span>
-        <q-menu style="border-radius: 0.5rem">
+        <q-menu>
           <q-list dense style="min-width: 100px">
             <q-item v-close-popup clickable @click="exportTags()">
               <q-item-section>Export</q-item-section>
@@ -70,18 +70,19 @@
 
       <q-space />
 
-      <q-icon
-        style="margin-top: 5px"
-        color="white"
-        :name="$q.dark.isActive ? 'fas fa-sun' : 'fas fa-moon'"
-        class="cursor-pointer"
-        @click="toggleDarkMode"
-      />
+      <div class="q-ml-md">
+        <q-icon
+          color="white"
+          :name="$q.dark.isActive ? 'fa fa-sun' : 'fa fa-moon'"
+          class="cursor-pointer"
+          @click="toggleDarkMode"
+        />
+      </div>
 
       <div class="q-ml-md cursor-pointer non-selectable">
         <span>Help</span>
 
-        <q-menu style="border-radius: 0.5rem">
+        <q-menu>
           <q-list dense style="min-width: 100px">
             <q-item v-close-popup clickable @click="showHelp = true">
               How to use?

src/main.js

@@ -1,6 +1,5 @@
 import { createApp } from "vue";
 import { Quasar } from "quasar";
-import "@quasar/extras/material-icons/material-icons.css";
 import "quasar/src/css/index.sass";
 
 import App from "./App.vue";