Added dark mode.

tecoholic · Aug 12, 2023 · 3409e79 · 3409e79
1 parent 70e1149
commit 3409e79
Show file tree

Hide file tree

Showing 13 changed files with 125 additions and 40 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -11,7 +11,7 @@
       <q-layout view="hHh lpR fFf">
         <menu-bar v-if="currentPage !== 'start'" />
 
-        <q-drawer :model-value="currentPage !== 'start'" bordered class="bg-grey-2">
+        <q-drawer :model-value="currentPage !== 'start'" bordered :class="$q.dark.isActive ? 'bg-dark' : 'bg-grey-2'">
           <annotation-sidebar />
         </q-drawer>
 

diff --git a/src/components/AboutDialog.vue b/src/components/AboutDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <q-dialog :model-value="show" @hide="$emit('hide')">
-    <q-card style="min-width: 400px">
+    <q-card style="min-width: 400px; padding: 10px; border-radius: 10px">
       <q-card-section>
         <div class="text-h6">NER Annotator</div>
       </q-card-section>

diff --git a/src/components/AnnotationPage.vue b/src/components/AnnotationPage.vue
@@ -17,26 +17,28 @@
       <q-btn
         color="red"
         outline
-        class="q-mx-md"
+        class="q-mx-sm"
         @click="resetBlocks"
         label="Reset"
       />
       <q-btn
-        class="q-mx-md"
+        class="q-mx-sm"
+        :color="$q.dark.isActive ? 'grey-3' : 'grey-9'"
         outline
         @click="backOneSentence"
         :disabled="currentIndex == 0"
         label="Back"
       />
       <q-btn
-        class="q-mx-md"
+        class="q-mx-sm"
+        :color="$q.dark.isActive ? 'grey-3' : 'grey-9'"
         outline
         @click="skipCurrentSentence"
         label="Skip"
       />
       <q-btn
-        class="q-mx-md"
-        color="green"
+        class="q-mx-sm"
+        color="green-7"
         outline
         @click="saveTags"
         label="Save"

diff --git a/src/components/ClassesBlock.vue b/src/components/ClassesBlock.vue
@@ -5,8 +5,10 @@
         <q-chip
           v-for="(cl, index) in classes"
           :key="cl.id"
+          outline
           square
-          :color="cl.id === currentClass.id ? cl.color : 'grey-3'"
+          style="height: 2rem;"
+          :color="cl.color.replace('11', '12')"
           clickable
           @click="setCurrentClass(index)"
           :removable="showDeleteButtons"
@@ -15,16 +17,18 @@
           <q-avatar
             v-if="cl.id === currentClass.id"
             :color="cl.color.replace('11', '12')"
+            style="height: 2rem"
             text-color="white"
             :icon="'fa fa-check'"
           ></q-avatar>
           <q-avatar
             v-if="cl.id !== currentClass.id"
             :color="cl.color.replace('11', '12')"
+            style="height: 2rem"
             text-color="white"
             font-size="16px"
           >{{ index + 1 }}</q-avatar>
-          {{ cl.name }}
+          <p :class="['q-mb-none', $q.dark.isActive ? 'text-grey-3' : 'text-grey-9']">{{ cl.name }}</p>
         </q-chip>
       </div>
       <q-space></q-space>
@@ -58,14 +62,19 @@
         </q-input>
       </div>
       <div class="buttons">
-        <q-btn-group>
-          <q-btn outline @click="showNewClassInput = true" label="New Tag" />
-          <q-btn
-            outline
-            @click="showDeleteButtons = !showDeleteButtons"
-            :label="showDeleteButtons ? 'Lock Tags' : 'Edit Tags'"
-          />
-        </q-btn-group>
+        <q-btn
+          outline
+          @click="showNewClassInput = true"
+          label="New Tag"
+          class="q-mr-sm"
+          :color="$q.dark.isActive ? 'grey-3' : 'grey-9'"
+        />
+        <q-btn
+          outline
+          @click="showDeleteButtons = !showDeleteButtons"
+          :label="showDeleteButtons ? 'Lock Tags' : 'Edit Tags'"
+          :color="$q.dark.isActive ? 'grey-3' : 'grey-9'"
+        />
       </div>
     </div>
   </div>

diff --git a/src/components/ExitDialog.vue b/src/components/ExitDialog.vue
@@ -11,8 +11,8 @@
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn flat label="Cancel" color="negative" v-close-popup @click="$emit('hide')"/>
-        <q-btn flat label="OK" color="primary" v-close-popup @click="$emit('confirm')"/>
+        <q-btn flat label="Cancel" color="red" v-close-popup @click="$emit('hide')"/>
+        <q-btn flat label="OK" color="light-blue" v-close-popup @click="$emit('confirm')"/>
       </q-card-actions>
     </q-card>
   </q-dialog>

diff --git a/src/components/StartPage.vue b/src/components/StartPage.vue
@@ -1,31 +1,39 @@
 <template>
+  <q-icon
+    :name="$q.dark.isActive ? 'fas fa-sun' : 'fas fa-moon'"
+    :class="[
+      $q.dark.isActive ? 'text-white' : 'text-black',
+      'cursor-pointer fixed-top-right q-mx-xl q-my-lg text-h5',
+    ]"
+    @click="toggleDarkMode"
+  />
   <div class="q-mx-auto q-my-xl" style="max-width: 600px">
-    <h5 class="text-h5">NER Text Annotator</h5>
-    <p class="text-subtitle1 text-grey-7">
+    <h5 class="text-h4 q-mb-sm">NER Text Annotator</h5>
+    <p :class="['text-subtitle1', $q.dark.isActive ? 'text-grey-4' : 'text-grey-7']">
       Annotate text for spaCy NER Model training
     </p>
 
-    <div class="q-my-xl q-py-md">
+    <div class="q-my-xl q-py-md" style="margin-top: 7rem">
       <q-file
         v-model="textFile"
         accept=".txt"
         @rejected="fileSelectionError"
         filled
         @update:model-value="onFileSelected"
         label="Open a text file to begin"
-        bg-color="light-blue-1"
+        :bg-color="$q.dark.isActive ? 'black-1' : 'light-blue-1'"
       >
         <template v-slot:prepend>
           <q-icon name="fas fa-upload" />
         </template>
       </q-file>
-      <p class="text-subtitle1 text-grey-7 q-my-sm">
+      <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>
   </div>
   <q-separator />
-  <div class="bg-grey-1 q-pa-lg">
+  <div :class="[$q.dark.isActive ? 'bg-dark' : 'bg-grey-1', 'q-pa-lg']">
     <div class="q-mx-auto" style="max-width: 600px">
       <h4 class="text-h4">
         How to use the NER Annotator?
@@ -109,8 +117,13 @@
         >
           <p>
             See the spaCy documentation
-            <a href="https://spacy.io/api/data-formats#json-input">here</a> on
-            how to convert the annotations from JSON to DocBin format.
+            <a
+              :class="$q.dark.isActive ? 'text-light-blue-4' : 'text-dark-blue'"
+              href="https://spacy.io/api/data-formats#json-input"
+            >
+              here
+            </a>
+            on how to convert the annotations from JSON to DocBin format.
           </p>
         </q-timeline-entry>
       </q-timeline>
@@ -152,7 +165,10 @@ export default {
         timeout: 2000,
         actions: [{label: "Dismiss", color: "white"}],
       });
-    }
+    },
+    toggleDarkMode() {
+      this.$q.dark.toggle();
+    },
   },
 };
 </script>
diff --git a/src/components/TokenBlock.vue b/src/components/TokenBlock.vue
@@ -52,12 +52,14 @@ mark {
   padding: 0.5rem;
   position: relative;
   background-color: burlywood;
-  border-radius: 4px;
+  border: 1px solid $grey-7;
+  border-radius: 0.35rem;
 }
 .tag {
   background-color: whitesmoke;
   padding: 4px 0 4px 8px;
-  border-radius: 2px;
+  border: 1px solid grey;
+  border-radius: 0.35rem;
   font-size: x-small;
 }
 .close-btn {

diff --git a/src/components/menubar/MenuBar.vue b/src/components/menubar/MenuBar.vue
@@ -42,7 +42,7 @@
         <span>
           File
         </span>
-        <q-menu>
+        <q-menu style="border-radius: 0.5rem;">
           <q-list dense style="min-width: 100px">
             <q-item clickable v-close-popup @click="pendingClick = $refs.file">
               <q-item-section>Open File</q-item-section>
@@ -62,7 +62,7 @@
         <span>
           Annotations
         </span>
-        <q-menu>
+        <q-menu style="border-radius: 0.5rem;">
           <q-list dense style="min-width: 100px">
             <export-annotations />
             <q-item clickable v-close-popup @click="pendingClick = $refs.file">
@@ -83,7 +83,7 @@
         <span>
           Tags
         </span>
-        <q-menu>
+        <q-menu style="border-radius: 0.5rem;">
           <q-list dense style="min-width: 100px">
             <q-item clickable v-close-popup @click="exportTags()">
               <q-item-section>Export</q-item-section>
@@ -104,10 +104,18 @@
 
       <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 cursor-pointer non-selectable">
         <span>Help</span>
 
-        <q-menu>
+        <q-menu style="border-radius: 0.5rem;">
           <q-list dense style="min-width: 100px">
             <q-item
               clickable
@@ -256,6 +264,9 @@ export default {
       };
       filereader.readAsText(file);
     },
+    toggleDarkMode: function() {
+      this.$q.dark.toggle();
+    },
   },
 };
 </script>
diff --git a/src/components/sidebar/AnnotationPrecisionSelector.vue b/src/components/sidebar/AnnotationPrecisionSelector.vue
@@ -3,7 +3,7 @@
     <div class="q-px-md q-pb-md">
       <q-select
         outlined
-        bg-color="white"
+        :bg-color="$q.dark.isActive ? 'dark' : 'white'"
         v-model="precisionType"
         :options="precisionOptions"
         :map-options="true"

diff --git a/src/components/sidebar/KeyboardShortcuts.vue b/src/components/sidebar/KeyboardShortcuts.vue
@@ -7,8 +7,8 @@
       @click="enableKeyboardShortcutsChanged"
     />
     <q-icon
-      style="margin: 0px 5px"
-      color="grey-10"
+      style="margin-left: 5px; margin-top: 3px"
+      :color="$q.dark.isActive ? 'grey-4' : 'grey-10'"
       name="far fa-question-circle"
       @click="showShortcutHelp = true"
     />

diff --git a/src/components/sidebar/ProgressBar.vue b/src/components/sidebar/ProgressBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="q-mx-md">
-    <p class="is-size-6">Tagging Progress ({{ completed }}/{{ total }})</p>
-    <q-linear-progress size="md" color="primary" :value="completed / total" />
+    <p class="is-size-6 q-mb-sm">Tagging Progress ({{ completed }}/{{ total }})</p>
+    <q-linear-progress rounded size="md" color="primary" :value="completed / total" />
   </div>
 </template>
 

diff --git a/src/components/sidebar/SplitTypeSelector.vue b/src/components/sidebar/SplitTypeSelector.vue
@@ -3,7 +3,7 @@
     <div class="q-pa-md">
       <q-select
         outlined
-        bg-color="white"
+        :bg-color="$q.dark.isActive ? 'dark' : 'white'"
         v-model="splitType"
         :options="splitOptions"
         :map-options="true"

diff --git a/src/styles/quasar.scss b/src/styles/quasar.scss
@@ -6,3 +6,48 @@
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
+
+body.body--dark {
+  background: #1D1D1D;
+}
+
+.q-btn--outline::before {
+  border: 0.1rem solid currentColor;
+}
+
+.q-btn--rectangle {
+  border-radius: 0.5rem;
+}
+
+.q-chip--square {
+  border-radius: 0.35rem;
+  border-width: 0.1rem;
+}
+
+.q-chip--square .q-avatar {
+  border-radius: 0.35rem 0 0 0.35rem;
+}
+
+.q-card {
+  box-shadow: none;
+}
+
+.q-field--outlined .q-field__control {
+  border-radius: 0.75rem;
+}
+
+.q-field--outlined .q-field__control::before {
+  border-width: 0.1rem;
+  border-radius: 0.75rem;
+}
+
+.q-field--outlined .q-field__control:hover::before {
+  border-color: $grey-7;
+}
+
+.q-menu {
+  box-shadow: none;
+  border: 0.1rem solid $grey-5;
+  border-radius: 0.75rem;
+  margin-top: 0.2rem !important;
+}