fix: note width in expaned mode & clickoutside

betterRunner · Jan 2, 2022 · 5ae6c6b · 5ae6c6b
1 parent 12dbe48
commit 5ae6c6b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/src/content-scripts/renderer/popup/index.vue b/src/content-scripts/renderer/popup/index.vue
@@ -34,7 +34,7 @@ export default defineComponent({
       appWidth.value = e ? AppWidth.expanded : AppWidth.normal;
     });
     const wrapperStyle = computed(() => {
-      const maxWidth = window.innerWidth * 0.8;
+      const maxWidth = window.innerWidth * 0.9;
       const width = appWidth.value > maxWidth ? maxWidth : appWidth.value;
       return {
         width: `${width}px`,

diff --git a/src/content-scripts/renderer/popup/note-book/note-list.vue b/src/content-scripts/renderer/popup/note-book/note-list.vue
@@ -200,13 +200,14 @@ export default defineComponent({
     };
 
     /// doms
-    const domNoteList = (notes: TNote[]) => {
+    const domNoteList = (notes: TNote[], expanded?: boolean) => {
       return notes.map((note, i) => (
         <Note
           ref={(el: any) => {
             noteDivs.value[i] = el;
           }}
           note={note as TNote}
+          expanded={expanded}
           curNoteId={curNoteId.value}
           onDelete={() => handleDeleteNote(note as TNote)}
           onUpdateNoteNote={handleUpdateNoteNote}
@@ -220,7 +221,7 @@ export default defineComponent({
       const domTag = (title: string = "", notes: TNote[] = []) => (
         <div class="note-list-tag">
           <div class="note-list-tag-title">{title}</div>
-          <div class="note-list-wrap-container">{domNoteList(notes)}</div>
+          <div class="note-list-wrap-container">{domNoteList(notes, true)}</div>
         </div>
       );
       if (tags.length) {
@@ -241,7 +242,7 @@ export default defineComponent({
         return domTags;
       } else {
         return (
-          <div class="note-list-wrap-container">{domNoteList(searchedNotes.value)}</div>
+          <div class="note-list-wrap-container">{domNoteList(searchedNotes.value, true)}</div>
         );
       }
     };

diff --git a/src/content-scripts/renderer/popup/note-book/note.vue b/src/content-scripts/renderer/popup/note-book/note.vue
@@ -2,8 +2,9 @@
   <div
     class="note-wrapper"
     :class="{ 'note-wrapper__notselected': notSelected }"
-    :style="colorBarStyle"
+    :style="wrapperStyle"
     @click="handleClickNote"
+    v-clickoutside="handleClickOutsideNote"
   >
     <!-- website link -->
     <div :id="`link-${note.id}`" class="note-link">
@@ -94,12 +95,17 @@ export default {
       required: true,
       type: Object as PropType<Note>,
     },
+    expanded: {
+      default: false,
+    },
   },
   setup(props, ctx) {
-    const colorBarStyle = ref({
+    const wrapperStyle = ref({
       borderTop: `8px solid ${randomcolor({
         alpha: 0.5,
       })}`,
+      width: `${props.expanded ? 420 : 460}px`,
+      maxWidth: `${props.expanded ? 420 : 460}px`,
     });
     const storage: Storage = inject("storage", {
       notes: [],
@@ -203,6 +209,10 @@ export default {
       // make sure the select event is trigger after `handleClickOutsideEditor`
       nextTick(() => ctx.emit("select", props.note.id));
     };
+    const handleClickOutsideNote = () => {
+      // make sure the select event is trigger after `handleClickOutsideEditor`
+      nextTick(() => ctx.emit("select", ""));
+    }
     const handleClickEditor = () => {
       enableEditor.value = true;
     };
@@ -230,7 +240,7 @@ export default {
 
     return {
       dayjs,
-      colorBarStyle,
+      wrapperStyle,
       notSelected,
 
       handleOpenLink,
@@ -246,6 +256,7 @@ export default {
       editorContent,
       editorDom,
       handleClickNote,
+      handleClickOutsideNote,
       handleClickEditor,
       handleClickOutsideEditor,
     };
@@ -265,8 +276,6 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  width: 460px;
-  max-width: 460px;
   box-sizing: border-box !important;
   height: 100%;