Merge pull request #41 from SaltyNote/tags

✨ enable tags in UI

package.json

@@ -1,6 +1,6 @@
 {
   "name": "saltynote",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "An extension that helps you make annotations for any web page",
   "author": "SaltyNote <[email protected]>",
   "engines": {
@@ -24,6 +24,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/vue-fontawesome": "^0.1.9",
+    "@johmun/vue-tags-input": "^2.1.0",
     "bootstrap": "^4.5.0",
     "camelcase-keys": "^6.2.2",
     "datatables.net": "^1.10.21",

src/background.js

@@ -1,14 +1,23 @@
 import * as types from './utils/action-types';
 import * as httpUtils from './utils/http-utils';
-import { login, signup, emailVerify } from './utils/http-utils';
+import { emailVerify, login, signup } from './utils/http-utils';
 import { getSanitizedUrl } from './utils/urls';
 import { removeScriptTags } from './utils/base';
 import { defaultColor } from './utils/color';
 
 const askLogin = (tab, iconClick = false) => {
-  chrome.tabs.sendMessage(tab.id, { action: types.SHOW_SIDE_BAR, sub_action: types.SHOW_LOGIN, iconClick: iconClick, data: [] }, response => {
-    console.log(response);
-  });
+  chrome.tabs.sendMessage(
+    tab.id,
+    {
+      action: types.SHOW_SIDE_BAR,
+      sub_action: types.SHOW_LOGIN,
+      iconClick: iconClick,
+      data: [],
+    },
+    response => {
+      console.log(response);
+    }
+  );
 };
 
 const getNotes = (tab, actionType, iconClick = false) => {
@@ -76,15 +85,14 @@ chrome.action.onClicked.addListener(tab => {
 });
 
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  // console.log('request received:', JSON.stringify(request));
-
   if (request.action === types.ADD_NOTE) {
     const pa = request.pageAnnotation;
     const pageAnnotation = {
       text: pa.text,
       note: removeScriptTags(pa.note),
       highlight_color: pa.highlightColor || defaultColor,
       is_page_only: pa.isPageOnly || false,
+      tags: pa.tags || [],
       url: getSanitizedUrl(sender.tab.url),
     };
     httpUtils
@@ -107,6 +115,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       text: pa.text,
       note: removeScriptTags(pa.note),
       highlight_color: pa.highlightColor || defaultColor,
+      tags: pa.tags || [],
     };
     httpUtils
       .updatePageAnnotation(pageAnnotation)

src/overlay/components/AnnotationCard.vue

@@ -12,6 +12,7 @@
           <SelectedTextBlockquote :text="selectText" :class="highlightClass" />
           <ColorSelect :color="highlightColor" @update:color="changeHighlightColor"></ColorSelect>
           <textarea class="form-control" rows="3" placeholder="Your Notes Here" v-model="myComment"></textarea>
+          <vue-tags-input v-model="tag" :tags="tags" @tags-changed="newTags => (tags = newTags)" />
         </div>
         <span class="error-msg" v-if="errorMsg"> {{ errorMsg }}</span>
         <button type="submit" class="btn btn-primary float-right" @click.prevent.stop="submitNewNote">Add (ctrl + s)</button>
@@ -27,10 +28,11 @@ import $ from 'jquery';
 import * as types from '../../utils/action-types';
 import { submitPageAnnotation } from '../../utils/page-annotation';
 import SelectedTextBlockquote from './SelectedTextBlockquote';
+import VueTagsInput from '@johmun/vue-tags-input';
 
 export default {
   name: 'AnnotationCard',
-  components: { SelectedTextBlockquote, ColorSelect },
+  components: { SelectedTextBlockquote, ColorSelect, VueTagsInput },
   data() {
     return {
       showAnnotationCard: false,
@@ -47,6 +49,8 @@ export default {
         movementY: 0,
       },
       mouseEvent: {},
+      tag: '',
+      tags: [],
     };
   },
   mounted() {
@@ -93,17 +97,25 @@ export default {
       this.showAnnotationCard = false;
     },
     submitNewNote() {
+      const tagList =
+        this.tags &&
+        this.tags.map(tag => {
+          return tag.text;
+        });
       const pageAnnotation = {
         text: this.selectText,
         note: this.myComment,
         highlightColor: this.highlightColor,
+        tags: tagList,
       };
+
       submitPageAnnotation(pageAnnotation)
         .then(() => {
           // cleanup
           this.selectText = '';
           this.myComment = '';
           this.highlightColor = defaultColor;
+          this.tags = [];
           this.closeCard();
         })
         .catch(err => {
@@ -152,24 +164,34 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-$zIndex: 99999;
+<style lang="scss">
+div.saltynote {
+  $zIndex: 99999;
 
-#crx-comment-card {
-  position: absolute;
-  z-index: $zIndex;
+  #crx-comment-card {
+    position: absolute;
+    z-index: $zIndex;
 
-  #saltynote-form {
-    display: block !important;
-  }
-  .card-header {
-    padding: 5px;
-    color: white;
-  }
+    #saltynote-form {
+      display: block !important;
+    }
 
-  &.card {
-    width: 400px;
-    box-shadow: 18px 25px 16px 0 rgba(0, 0, 0, 0.49);
+    .card-header {
+      padding: 5px;
+      color: white;
+    }
+
+    &.card {
+      width: 400px;
+      box-shadow: 18px 25px 16px 0 rgba(0, 0, 0, 0.49);
+    }
+
+    .vue-tags-input {
+      .ti-input {
+        margin-top: 5px;
+        border-radius: 0.25rem;
+      }
+    }
   }
 }
 </style>

src/overlay/components/SideBar.vue

@@ -36,8 +36,14 @@
               <template v-if="note.showSave">
                 <ColorSelect v-if="!note.isPageOnly" :color="getNoteHighlightColor(note)" @update:color="note.newHighlightColor = $event"></ColorSelect>
                 <textarea class="form-control" rows="3" v-model="note.note"></textarea>
+                <vue-tags-input v-model="tag" :tags="note.tags" @tags-changed="newTags => (note.tags = parseTags(newTags))" />
+              </template>
+              <template v-else>
+                <div class="shadow-none p-3 bg-light rounded" v-if="!!note.note" v-html="markdown(note.note)"></div>
+                <div class="tags">
+                  <span v-for="tag in note.tags" :key="tag" class="badge badge-primary">{{ tag }}</span>
+                </div>
               </template>
-              <div class="shadow-none p-3 bg-light rounded" v-else-if="!!note.note" v-html="markdown(note.note)"></div>
             </div>
             <div class="row my-btn-group">
               <div class="col-md-6">
@@ -94,17 +100,19 @@ import { readableTimestamp } from '../../utils/base';
 import SelectedTextBlockquote from './SelectedTextBlockquote';
 import Signup from './Signup';
 import Login from './Login';
+import VueTagsInput from '@johmun/vue-tags-input';
 
 export default {
   name: 'SideBar',
-  components: { Login, Signup, SelectedTextBlockquote, NoAnnotationPlaceholder, CustomAnnotationCard, ColorSelect },
+  components: { Login, Signup, SelectedTextBlockquote, NoAnnotationPlaceholder, CustomAnnotationCard, ColorSelect, VueTagsInput },
   data() {
     return {
       notes: [],
       showSideBar: false,
       showCustomNoteWindow: false,
       showLogin: false,
       showSignup: false,
+      tag: '',
     };
   },
 
@@ -214,47 +222,74 @@ export default {
         });
       }
     },
+    parseTags(newTags) {
+      if (!newTags) {
+        return [];
+      }
+      return newTags.map(tag => {
+        return tag.text;
+      });
+    },
   },
 };
 </script>
 
-<style scoped lang="scss">
-$zIndex: 9999;
-div#crx-side-bar.card.text-white {
-  height: 100vh;
-  width: 400px !important;
-  position: fixed;
-  background-color: #ffffff;
-  z-index: $zIndex;
-  right: 0;
-  box-shadow: -12px 0px 25px 0px rgba(0, 0, 0, 0.75);
-  border-radius: 10px;
+<style lang="scss">
+div.saltynote {
+  $zIndex: 9999;
 
-  .card-header {
-    color: white !important;
-  }
+  div#crx-side-bar.card.text-white {
+    height: 100vh;
+    width: 400px !important;
+    position: fixed;
+    background-color: #ffffff;
+    z-index: $zIndex;
+    right: 0;
+    box-shadow: -12px 0px 25px 0px rgba(0, 0, 0, 0.75);
+    border-radius: 10px;
 
-  .my-note {
-    font-weight: normal;
-  }
+    .card-header {
+      color: white !important;
+    }
+
+    .my-note {
+      font-weight: normal;
+    }
+
+    .my-btn-group {
+      a:first-child {
+        margin-right: 10px;
+      }
 
-  .my-btn-group {
-    a:first-child {
-      margin-right: 10px;
+      .del-btn {
+        color: red;
+      }
     }
 
-    .del-btn {
+    .logout a {
       color: red;
+      font-style: italic;
     }
   }
 
-  .logout a {
-    color: red;
-    font-style: italic;
+  .my-note path {
+    fill: red;
   }
-}
 
-.my-note path {
-  fill: red;
+  div.tags {
+    margin-top: 5px;
+
+    span.badge.badge-primary {
+      border-color: unset;
+      padding: 0.3rem;
+    }
+  }
+
+  .vue-tags-input {
+    .ti-input {
+      margin-top: 5px;
+      border-radius: 0.25rem;
+    }
+  }
 }
 </style>