feat: footer

src/content-scripts/renderer/popup/index.vue

@@ -1,12 +1,17 @@
 <template>
   <div v-show="visible">
-    <NoteBook v-clickoutside="handleClickOutside"></NoteBook>
+    <div class="popup-wrapper">
+      <NoteBook v-clickoutside="handleClickOutside" />
+      <Settings />
+    </div>
+
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, provide, ref, reactive } from "vue";
 import NoteBook from "./note-book/index.vue";
+import Settings from './settings/index.vue';
 import { Note } from "@/types/note";
 import { Tag } from "@/types/tag";
 import { Storage } from "@/types/storage";
@@ -17,6 +22,7 @@ import { StorageKeys } from "@/utils/constant";
 export default defineComponent({
   components: {
     NoteBook,
+    Settings,
   },
   setup() {
     const visible = ref(false);
@@ -53,4 +59,18 @@ export default defineComponent({
 });
 </script>
 
-<style scoped></style>
+<style lang="less" scoped>
+.popup-wrapper {
+  position: fixed;
+  right: 0px;
+  top: 1vh;
+  width: 500px;
+  min-width: 500px;
+  height: 98vh;
+  overflow-y: scroll;
+  background-color: rgba(100, 108, 255, 0.8);
+  opacity: 1;
+  border-radius: 10px;
+  z-index: 9999;
+}
+</style>

src/content-scripts/renderer/popup/note-book/index.vue

@@ -1,13 +1,11 @@
 <template>
-  <div class="note-book-wrapper">
-    <NoteList></NoteList>
-    <TagBook
-      v-show="!!curNoteId"
-      :noteId="curNoteId"
-      :coor="tagBookCoor"
-      @close="handleCloseTagBook"
-    ></TagBook>
-  </div>
+  <NoteList></NoteList>
+  <TagBook
+    v-show="!!curNoteId"
+    :noteId="curNoteId"
+    :coor="tagBookCoor"
+    @close="handleCloseTagBook"
+  ></TagBook>
 </template>
 
 <script lang="ts">
@@ -48,17 +46,4 @@ export default {
 </script>
 
 <style scoped>
-.note-book-wrapper {
-  position: fixed;
-  right: 0px;
-  top: 0px;
-  width: 500px;
-  min-width: 500px;
-  height: 100vh;
-  overflow-y: scroll;
-  background-color: rgba(100, 108, 255, 0.8);
-  opacity: 1;
-  border-radius: 10px;
-  z-index: 9999;
-}
 </style>

src/content-scripts/renderer/popup/note-book/note.vue

@@ -36,7 +36,7 @@
       <div class="note-time">{{ dayjs.unix(note.createTime).format("MM/DD HH:mm") }}</div>
     </div>
     <!-- more opers -->
-    <More :opers="moreOpers" />
+    <More direction="column" :size="2" :opers="moreOpers" />
     <!-- note content -->
     <p class="note-content">{{ note.content }}</p>
     <!-- note editor -->
@@ -75,7 +75,7 @@ import { Query } from "@/types/dom";
 import mitt from "@/utils/mitt";
 import { wrapUrlWithQuery } from "@/utils/utils";
 import TagBook from "../tag-book/index.vue";
-import More from "./more.vue";
+import More from "../shared/more.vue";
 
 export default {
   components: {

src/content-scripts/renderer/popup/settings/ex-import.vue

@@ -0,0 +1,9 @@
+<template>
+
+</template>
+
+<script lang="ts">
+export default {};
+</script>
+
+<style lang="less" scoped></style>

src/content-scripts/renderer/popup/settings/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="settings">
+    <a href="https://github.com/betterRunner/context-note" target="_blank">
+      <img class="settings-icon" :src="githubLogoSrc" height="30" />
+    </a>
+    <More direction="row" size="4" color="#666" placement="top" :opers="[]" />
+  </div>
+</template>
+
+<script lang="ts">
+import More from '../shared/more.vue';
+export default {
+  components: {
+    More,
+  },
+  setup() {
+    const githubLogoSrc = chrome.runtime.getURL("assets/github-logo.png");
+
+    return {
+      githubLogoSrc,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.settings {
+  position: absolute;
+  width: 100%;
+  height: 50px;
+  bottom: 0px;
+  border: 1px solid rgba(100, 108, 255, 0.8);
+  box-shadow: rgba(100, 108, 255, 1.0) 0px 6px 18px 0px;
+  background: #fff;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  .settings-icon {
+    margin-left: 20px;
+  }
+}
+</style>

src/content-scripts/renderer/popup/note-book/more.vue → src/content-scripts/renderer/popup/shared/more.vue

@@ -1,14 +1,19 @@
 <template>
   <el-popover
-    placement="bottom-end"
+    :placement="placement"
     :width="200"
     trigger="click"
     @click.prevent.stop="() => {}"
   >
     <template #reference>
       <div class="more-icon">
-        <div>
-          <div v-for="item in [1, 2, 3]" :key="item" class="more-icon-dot"></div>
+        <div :style="dotWrapperStyle" class="more-icon-wrapper">
+          <div
+            v-for="item in [1, 2, 3]"
+            :key="item"
+            class="more-icon-dot"
+            :style="dotStyle"
+          ></div>
         </div>
         <div class="more-popup"></div>
       </div>
@@ -29,18 +34,51 @@
 </template>
 
 <script lang="ts">
-import { PropType } from "vue";
+import { ref, PropType } from "vue";
 import { ElMessageBox } from "element-plus";
 import { Oper } from "@/types/common";
 
+enum Direction {
+  row = "row",
+  column = "column",
+}
 export default {
   props: {
+    size: {
+      type: Number,
+      default: 2,
+    },
+    direction: {
+      type: Object as PropType<Direction>,
+      default: Direction.row,
+    },
+    color: {
+      type: String,
+      default: "#999",
+    },
+    placement: {
+      type: String,
+      default: "bottom-end",
+    },
     opers: {
       type: Object as PropType<Oper[]>,
       default: [],
     },
   },
-  setup() {
+  setup(props) {
+    const px = `${props.size}px`;
+    const dotWrapperStyle = ref({
+      display: "flex",
+      "flex-direction": props.direction,
+    });
+    const dotStyle = ref({
+      width: px,
+      height: px,
+      border: `${px} solid ${props.color}`,
+      "border-radius": px,
+      margin: px,
+    });
+
     const handleClick = (oper: Oper) => {
       if (oper.isConfirm) {
         ElMessageBox.confirm("delete this note?", "Warning", {
@@ -56,6 +94,8 @@ export default {
     };
 
     return {
+      dotWrapperStyle,
+      dotStyle,
       handleClick,
     };
   },
@@ -69,16 +109,6 @@ export default {
   right: 10px;
   cursor: pointer;
   padding: 5px;
-
-  .more-icon-dot {
-    width: 2px;
-    height: 2px;
-    color: #000;
-    content: " ";
-    border: 2px solid #999;
-    border-radius: 2px;
-    margin: 2px;
-  }
 }
 .more-opers {
   .more-opers-item {

todo.md

@@ -1,13 +1,4 @@
-- [x] store note in chrome.storage
-- [x] jump to the note context
-- [x] store tag in chrome.storage
-- [x] show the rects at initial state if this page has
-- [x] delete note
-- [x] url change clear the highlights
-- [x] open link brings the note-id so can jump to note also
-- [x] delete the tag while deleting a note who is the only one that owns this tag
-- [x] searching notes
-- [x] tag search auto focus
+- [ ] export/import notes' data by json
 - [ ] more precise rects selection rather than coor (select the real dom by text)
 - [ ] screenshot features
   - https://javascript.plainenglish.io/a-better-alternative-to-html2canvas-in-vuejs-3-e0686755d56e