feat: footer

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

@@ -0,0 +1,106 @@
+<template>
+  <div class="footer-container" :style="footerStyle">
+    <div class="footer">
+      <div class="footer-left">
+        <el-icon :size="16">
+          <DArrowLeft class="footer-collapse" v-if="!expanded" @click="() => (expanded = true)" />
+          <DArrowRight class="footer-collapse" v-else @click="() => (expanded = false)"
+        /></el-icon>
+        <a href="https://github.com/betterRunner/context-note" target="_blank">
+          <img class="footer-icon" :src="githubLogoSrc" height="30" />
+        </a>
+      </div>
+      <More direction="row" size="4" color="#666" placement="top" :opers="opers" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, watch, ref } from "vue";
+import { DArrowLeft, DArrowRight } from "@element-plus/icons";
+import { Oper } from "@/types/common";
+import mitt from "@/utils/mitt";
+import More from "../shared/more.vue";
+import { exportOper } from "./ex-import";
+import { EventType } from "mitt";
+
+export default {
+  components: {
+    More,
+    DArrowLeft,
+    DArrowRight,
+  },
+  props: {
+    width: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props) {
+    const footerStyle = computed(() => ({
+      width: `${props.width}px`,
+      "min-width": `${props.width}px`,
+      transition: "0.5s",
+    }));
+
+    const expanded = ref(false);
+    watch(
+      expanded,
+      () => mitt.emit('expand-collapse-app', (expanded.value as unknown) as EventType)
+    );
+
+    const githubLogoSrc = chrome.runtime.getURL("assets/github-logo.png");
+    const opers = ref<Oper[]>([exportOper]);
+
+    return {
+      footerStyle,
+      expanded,
+      githubLogoSrc,
+      opers,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.footer-container {
+  position: fixed;
+  min-width: 500px;
+  width: 500px;
+  height: 50px;
+  bottom: 0px;
+  border: 1px solid rgba(100, 108, 255, 0.8);
+  box-shadow: rgba(100, 108, 255, 1) 0px 6px 18px 0px;
+  background: #fff;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+
+  .footer {
+    padding: 10px 20px 10px 10px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    .footer-left {
+      display: flex;
+      flex-direction: row;
+      flex-grow: 1;
+      align-items: center;
+
+      .footer-collapse {
+        cursor: pointer;
+      }
+    }
+
+    .footer-icon {
+      margin-left: 20px;
+      user-select: none;
+      width: 30px;
+      height: 30px;
+    }
+  }
+}
+</style>

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

@@ -1,30 +1,41 @@
 <template>
   <div v-show="visible">
-    <div class="popup-wrapper">
-      <NoteBook v-clickoutside="handleClickOutside" />
-      <Settings />
+    <div class="popup-wrapper" :style="wrapperStyle">
+      <NoteBook :expanded="appExpanded" v-clickoutside="handleClickOutside" />
+      <Footer :width="appWidth" />
     </div>
-
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, provide, ref, reactive } from "vue";
+import { defineComponent, provide, ref, reactive, computed } from "vue";
 import NoteBook from "./note-book/index.vue";
-import Settings from './settings/index.vue';
+import Footer from "./footer/index.vue";
 import { Note } from "@/types/note";
 import { Tag } from "@/types/tag";
 import { Storage } from "@/types/storage";
 import { get } from "@/utils/storage";
-import mitt from '@/utils/mitt';
-import { StorageKeys } from "@/utils/constant";
+import mitt from "@/utils/mitt";
+import { StorageKeys, AppWidth } from "@/utils/constant";
 
 export default defineComponent({
   components: {
     NoteBook,
-    Settings,
+    Footer,
   },
   setup() {
+    const appWidth = ref<AppWidth>(AppWidth.normal);
+    const appExpanded = ref(false);
+    mitt.on("expand-collapse-app", (e) => {
+      appExpanded.value = e as boolean;
+      appWidth.value = e ? AppWidth.expanded : AppWidth.normal;
+    });
+    const wrapperStyle = computed(() => ({
+      width: `${appWidth.value}px`,
+      "min-width": `${appWidth.value}px`,
+      transition: "1.0s",
+    }));
+
     const visible = ref(false);
     const handleClickOutside = () => {
       visible.value = false;
@@ -43,15 +54,18 @@ export default defineComponent({
       get(StorageKeys.tags).then((res) => {
         storage.tags = (res as Tag[]) || [];
       });
-    }
+    };
     updateStorage();
-    mitt.on('update-storage', () => {
+    mitt.on("update-storage", () => {
       updateStorage();
-    })
+    });
 
     provide("storage", storage);
 
     return {
+      appExpanded,
+      appWidth,
+      wrapperStyle,
       visible,
       handleClickOutside,
     };

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

@@ -1,5 +1,5 @@
 <template>
-  <NoteList></NoteList>
+  <NoteList :expanded="expanded"></NoteList>
   <TagBook
     v-show="!!curNoteId"
     :noteId="curNoteId"
@@ -19,7 +19,13 @@ export default {
     NoteList,
     TagBook,
   },
-  setup(props) {
+  props: {
+    expanded: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup() {
     const tagBookCoor = ref<Coor>({ x: 0, y: 0 });
     const curNoteId = ref("");
 

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

@@ -10,22 +10,26 @@
         <i class="el-input__icon el-icon-search"></i>
       </template>
     </el-input>
-    <Note
-      v-for="(note, i) in searchedNotes"
-      :ref="
-        (el) => {
-          noteDivs[i] = el;
-        }
-      "
-      :id="note.id"
-      :note="note"
-      :curNoteId="curNoteId"
-      :key="note.id"
-      @delete="handleDeleteNote(note)"
-      @updateNoteNote="handleUpdateNoteNote"
-      @focus="(noteId) => handleSelectNote(noteId, false)"
-      @select="(noteId) => handleSelectNote(noteId, true)"
-    ></Note>
+    <div :class="[expanded ? 'note-list__expanded' : 'note-list']">
+      <!-- list by time -->
+      <Note
+        v-for="(note, i) in searchedNotes"
+        :ref="
+          (el) => {
+            noteDivs[i] = el;
+          }
+        "
+        :id="note.id"
+        :note="note"
+        :curNoteId="curNoteId"
+        :key="note.id"
+        @delete="handleDeleteNote(note)"
+        @updateNoteNote="handleUpdateNoteNote"
+        @focus="(noteId) => handleSelectNote(noteId, false)"
+        @select="(noteId) => handleSelectNote(noteId, true)"
+      ></Note>
+      <!-- list by tag -->
+    </div>
   </div>
   <div class="note-list-empty" v-else>
     <h2 class="note-list-empty-title">Your notebook is empty.</h2>
@@ -62,8 +66,13 @@ export default defineComponent({
   components: {
     Note,
   },
-  props: {},
-  setup() {
+  props: {
+    expanded: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup(props) {
     const storage: Storage = inject("storage", {
       notes: [],
       tags: [],
@@ -139,14 +148,14 @@ export default defineComponent({
           $el: HTMLElement;
         })?.$el;
         if (divNote) {
-          divNote.scrollIntoView({ block: 'center' });
+          divNote.scrollIntoView({ block: "center" });
         }
 
         // 3. focus the content editor of this note
         // make sure above `scrollIntoView` is finished
         setTimeout(() => {
           mitt.emit("focus-editor", note.id);
-        })
+        });
       });
 
       // 4. send back the cb event
@@ -185,8 +194,8 @@ export default defineComponent({
     /// delete note
     const handleDeleteNote = async (note: TNote) => {
       const { id } = note;
-      const tags = storage.tags.filter(t => t.noteIds.includes(id));
-      
+      const tags = storage.tags.filter((t) => t.noteIds.includes(id));
+
       // delete id from  `noteIds` of all tags
       for (const tag of tags) {
         storage.tags = await delItemFromArrProperty(
@@ -212,18 +221,18 @@ export default defineComponent({
     const curNoteId = ref("");
     const handleSelectNote = (id: string, scrollIntoView: boolean) => {
       curNoteId.value = id;
-      id && mitt.emit("bold-note", {
-        id,
-        scrollIntoView,
-      });
+      id &&
+        mitt.emit("bold-note", {
+          id,
+          scrollIntoView,
+        });
     };
 
     return {
       notes,
-      noteDivs,
-
       searchText,
       searchedNotes,
+      noteDivs,
 
       handleUpdateNoteNote,
 
@@ -239,11 +248,27 @@ export default defineComponent({
 <style lang="less" scoped>
 .note-list-wrapper {
   padding: 20px;
+
+  .note-list-search {
+    margin-bottom: 10px;
+    background: #fff !important;
+    max-width: 500px;
+  }
+
+  .note-list {
+    display: flex;
+    flex-direction: column;
+  }
+  .note-list__expanded {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    > * {
+      margin: 10px 20px 10px 0;
+    }
+  }
 }
-.note-list-search {
-  margin-bottom: 10px;
-  background: #fff !important;
-}
+
 .note-list-empty {
   padding: 20px;
   display: flex;

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

@@ -255,6 +255,7 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  width: 460px;
 
   .note-link {
     font-size: 12px;