fix: notebook empty

betterRunner · Sep 8, 2021 · c189c2e · c189c2e
1 parent f3e7ee9
commit c189c2e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/context-note.crx b/context-note.crx
diff --git a/src/content-scripts/renderer/popup/note-book/note-list.vue b/src/content-scripts/renderer/popup/note-book/note-list.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="note-list-wrapper">
+  <div v-if="notes.length" class="note-list-wrapper">
     <Note
       v-for="(note, i) in notes"
       :ref="
@@ -17,6 +17,10 @@
       @select="(noteId) => handleSelectNote(noteId, true)"
     ></Note>
   </div>
+  <div class="note-list-empty" v-else>
+    <h2 class="note-list-empty-title">Your notebook is empty.</h2>
+    <p class="note-list-empty-content">Take your first note by selecting any text on the webpage and then click the popup icon!</p>
+  </div>
 </template>
 
 <script lang="ts">
@@ -179,8 +183,25 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .note-list-wrapper {
   padding: 20px;
 }
+.note-list-empty {
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  color: #fff;
+
+  .note-list-empty-title {
+    font-weight: bold;
+  }
+  .note-list-empty-content {
+    font-size: 16px;
+    font-weight: 600;
+  }
+}
 </style>