remove jquery libs, adjust widgster, remove jquery from core components

Author: shoudaos

package.json

@@ -3,7 +3,6 @@
   "version": "4.5.0",
   "private": true,
   "scripts": {
-    "install": "napa",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
@@ -15,35 +14,21 @@
     "bootstrap": "^4.1.1",
     "bootstrap-vue": "^2.0.0-rc.11",
     "css-loader": "^1.0.0",
-    "d3": "3.5.17",
-    "easy-pie-chart": "^2.1.7",
     "expose-loader": "^0.7.5",
-    "express": "^4.16.4",
-    "flot": "^0.8.0-alpha",
     "font-awesome": "4.7.0",
     "glyphicons-halflings": "1.9.1",
-    "govpredict-morris": "0.5.1",
     "imports-loader": "^0.8.0",
-    "jquery": "^3.3.1",
-    "jquery-sparkline": "2.4.0",
-    "jquery-ui": "^1.12.1",
     "line-awesome": "icons8/line-awesome",
-    "messenger": "git+https://github.com/HubSpot/messenger.git#v1.4.2",
-    "napa": "^3.0.0",
     "node-sass": "^4.9.0",
-    "nvd3": "1.8.6",
     "rickshaw": "1.6.6",
     "sass-loader": "^7.0.1",
-    "vee-validate": "^2.1.0-beta.6",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
     "vue-touch": "2.0.0-beta.4",
     "vue2-google-maps": "^0.10.2",
     "vuetrend": "^0.3.2",
     "vuex": "^3.0.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-raphael": "^2.1.4",
-    "widgster": "^1.0.0"
+    "webpack-cli": "^3.1.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.5",
@@ -52,11 +37,6 @@
     "vue-template-compiler": "^2.5.17",
     "core-js": "^2.6.5"
   },
-  "napa": {
-    "jquery.flot.animator": "https://github.com/Codicode/flotanimator.git#3c256c0183d713fd3bf41d04417873928eb1a751",
-    "flot.dashes": "https://github.com/cquartier/flot.dashes.git",
-    "jquery.flot-orderBars": "https://github.com/emmerich/flot-orderBars.git"
-  },
   "eslintConfig": {
     "root": true,
     "env": {

src/components/Chat/Chat.scss

@@ -5,17 +5,12 @@
   overflow: hidden;
   top: 0;
   bottom: 0;
-  right: -250px;
-  width: 250px;
+  right: -$chat-sidebar-width-open;
+  width: $chat-sidebar-width-open;
   background-color: $chat-sidebar-bg-color;
   color: #aaa;
   transition: right 0.3s ease-in-out;
 
-  @include media-breakpoint-down(md) {
-    right: -275px;
-    width: 275px;
-  }
-
   &.chatOpen {
     right: 0;
   }

src/components/Chat/Chat.vue

@@ -11,11 +11,13 @@
       <h5 class="navTitle">TODAY</h5>
       <b-list-group id="chat-sidebar-user-group" class="chatSidebarUserGroup">
         <b-list-group-item
-          v-for="conversation in todayConversations.filter(filterConversations)"
-          @click="(e) => openMessages(conversation, e)"
+          v-for="(conversation, index) in todayConversations.filter(filterConversations)"
+          @click="(e) => openMessages(conversation, index)"
           :key="conversation.name"
+          :class="{active: index === 0 && chatNotificationMessageState === messageStates.NEW}"
         >
           <i :class="`fa fa-circle float-right text-${conversation.status}`" />
+          <span v-if="index === 0 && chatNotificationMessageState === messageStates.NEW" class="badge badge-danger badge-pill float-right animated bounceInDown">3</span>
           <span class="thumb-sm float-left mr">
             <img class="rounded-circle" :src="conversation.image" alt="..." />
           </span>
@@ -29,7 +31,7 @@
       <b-list-group id="chat-sidebar-user-group" class="chatSidebarUserGroup">
         <b-list-group-item
           v-for="conversation in lastWeekConversations.filter(filterConversations)"
-          @click="(e) => openMessages(conversation, e)"
+          @click="(e) => openMessages(conversation)"
           :key="conversation.name"
         >
           <i :class="`fa fa-circle float-right text-${conversation.status}`" />
@@ -75,20 +77,21 @@
 
 <script>
 import Vue from 'vue';
-import { mapState } from 'vuex';
-import $ from 'jquery';
+import { mapState, mapActions } from 'vuex';
 
 import a1 from '../../assets/people/a1.jpg';
 import a2 from '../../assets/people/a2.jpg';
 import a3 from '../../assets/people/a3.jpg';
 import a4 from '../../assets/people/a4.jpg';
 import a5 from '../../assets/people/a5.jpg';
 import a6 from '../../assets/people/a6.jpg';
+import { MessageStates } from '../../store/layout';
 
 export default {
   name: 'Chat',
   data() {
     return {
+      messageStates: MessageStates,
       todayConversations: [{
         name: 'Chris Gray',
         status: 'success',
@@ -156,6 +159,7 @@ export default {
     };
   },
   methods: {
+    ...mapActions('layout', ['readMessage']),
     filterConversations(item) {
       const isFindName = item.name.toLowerCase()
         .indexOf(this.searchValue.toLowerCase()) !== -1;
@@ -166,11 +170,13 @@ export default {
     handleSearchInput(value) {
       Vue.set(this, 'searchValue', value);
     },
-    openMessages(conversation, e) {
+    openMessages(conversation, index) {
       Vue.set(this, 'conversation', conversation);
       Vue.set(this, 'chatMessageOpened', false);
 
-      $(e.currentTarget).removeClass('active').find('.badge').remove();
+      if (index === 0) {
+        this.readMessage();
+      }
     },
     addMessage(e) {
       if (e.key === 'Enter' && e.target.value) {
@@ -191,9 +197,7 @@ export default {
     },
   },
   computed: {
-    ...mapState('layout', {
-      chatOpen: state => state.chatOpen,
-    }),
+    ...mapState('layout', ['chatOpen', 'chatNotificationMessageState']),
   },
 };
 </script>

src/components/Header/Header.scss

@@ -14,14 +14,14 @@
   }
 }
 
-.navbarForm {
+.navbar-form {
   padding: 6px 0 6px 1rem;
   margin-left: 10px;
   display: inline-block;
   top: 2px;
   width: auto;
 
-  .inputAddon {
+  .input-addon {
     position: relative;
     display: inline;
     border: none;
@@ -42,7 +42,7 @@
   width: 30px;
 }
 
-.chatNotification {
+.chat-notification {
   position: absolute;
   right: 2px;
   width: 300px;
@@ -51,6 +51,13 @@
   margin-top: 3px;
   padding: 5px 0;
   cursor: pointer;
+  opacity: 1;
+  transition: $transition-base;
+
+  &.notification-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
 
   &::before {
     content: ' ';
@@ -64,7 +71,7 @@
     border-bottom: 5px solid #343434;
   }
 
-  .chatNotificationInner {
+  .chat-notification-inner {
     min-width: 120px;
     padding: 8px;
     font-size: 12px;
@@ -92,7 +99,7 @@
   }
 }
 
-.navbarBrand {
+.navbar-brand {
   position: absolute;
   left: 0;
   right: 0;
@@ -110,20 +117,20 @@
   }
 }
 
-.notificationsMenu {
+.notifications-menu {
   .dropdown-menu {
     left: auto !important;
     right: 0 !important;
     top: $navbar-height !important;
   }
 }
 
-.settingsDropdown {
+.settings-dropdown {
   .dropdown-item:focus {
     outline: none;
   }
 }
 
-.notificationsWrapper {
+.notifications-wrapper {
   width: min-content;
 }

src/components/Header/Header.vue

@@ -38,7 +38,7 @@
         </b-form-group>
       </b-form>
     </b-nav>
-    <a  class="navbarBrand d-md-none">
+    <a  class="navbar-brand d-md-none">
       <i class="fa fa-circle text-gray mr-n-sm" />
       <i class="fa fa-circle text-warning" />
       &nbsp;
@@ -50,8 +50,8 @@
     <b-nav class="ml-auto">
       <b-nav-item-dropdown
         id="basic-nav-dropdown"
-        class="notificationsMenu d-sm-down-none mr-2"
-        extra-menu-classes="notificationsWrapper py-0 animated animated-fast fadeInUp"
+        class="notifications-menu d-sm-down-none mr-2"
+        extra-menu-classes="notifications-wrapper py-0 animated animated-fast fadeInUp"
         right>
         <template slot="button-content">
           <span class="avatar thumb-sm float-left mr-2">
@@ -62,7 +62,7 @@
         </template>
         <Notifications />
       </b-nav-item-dropdown>
-      <b-nav-item-dropdown class="settingsDropdown d-sm-down-none" no-caret right>
+      <b-nav-item-dropdown class="settings-dropdown d-sm-down-none" no-caret right>
         <template slot="button-content">
           <i class="la la-cog px-2" />
         </template>
@@ -81,8 +81,9 @@
         <a class="d-sm-down-none px-2" id="toggle-chat" href="#" @click="toggleChat">
           <i class="la la-globe" />
         </a>
-        <div id="chat-notification" class="chatNotification hide">
-          <div class="chatNotificationInner">
+        <i v-if="chatNotificationIcon" class="chat-notification-sing animated bounceIn"></i>
+        <div id="chat-notification" class="chat-notification" :class="{'notification-hidden': !chatNotificationPopover}">
+          <div class="chat-notification-inner">
             <h6 class="title d-flex text-white">
               <span class="thumb-xs">
                 <img src="../../assets/people/a6.jpg" alt=""
@@ -108,20 +109,16 @@
 
 <script>
 import { mapState, mapActions } from 'vuex';
-import $ from 'jquery';
 import Notifications from '@/components/Notifications/Notifications';
 
 export default {
-  name: 'Headed',
+  name: 'Header',
   components: { Notifications },
   computed: {
-    ...mapState('layout', {
-      sidebarClose: state => state.sidebarClose,
-      sidebarStatic: state => state.sidebarStatic,
-    }),
+    ...mapState('layout', ['sidebarClose', 'sidebarStatic', 'chatNotificationIcon', 'chatNotificationPopover']),
   },
   methods: {
-    ...mapActions('layout', ['toggleSidebar', 'toggleChat', 'switchSidebar', 'changeSidebarActive']),
+    ...mapActions('layout', ['toggleSidebar', 'toggleChat', 'switchSidebar', 'changeSidebarActive', 'initApp']),
     switchSidebarMethod() {
       if (!this.sidebarClose) {
         this.switchSidebar(true);
@@ -151,22 +148,7 @@ export default {
   },
   created() {
     if (window.innerWidth > 576) {
-      setTimeout(() => {
-        const $chatNotification = $('#chat-notification');
-        $chatNotification.removeClass('hide').addClass('animated fadeIn')
-          .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', () => {
-            $chatNotification.removeClass('animated fadeIn');
-            setTimeout(() => {
-              $chatNotification.addClass('animated fadeOut')
-                .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd'
-                + ' oanimationend animationend', () => {
-                  $chatNotification.addClass('hide');
-                });
-            }, 6000);
-          });
-        $chatNotification.siblings('#toggle-chat')
-          .append('<i class="chat-notification-sing animated bounceIn"></i>');
-      }, 4000);
+      this.initApp();
     }
   },
 };

src/components/Layout/Layout.scss

@@ -7,7 +7,7 @@
   transition: left $sidebar-transition-time ease-in-out;
 
   &.chatOpen {
-    left: -($sidebar-width-open + $sidebar-width-closed);
+    left: -($chat-sidebar-width-open);
   }
 }
 

src/components/Layout/Layout.vue

@@ -5,7 +5,7 @@
   <div class="wrap">
     <Header />
     <Chat />
-    <v-touch class="content" @swipeleft="handleSwipe" @swiperight="handleSwipe" :swipe-options="{direction: 'horizontal', threshold: 100}">
+    <v-touch class="content" @swipe="handleSwipe" :swipe-options="{direction: 'horizontal'}">
       <router-view />
       <footer class="contentFooter">
         Sing Vue Version - Made by <a href="https://flatlogic.com" rel="nofollow noopener noreferrer" target="_blank">Flatlogic</a>

src/components/Loader/Loader.scss

@@ -0,0 +1,14 @@
+@import "../../styles/app";
+
+.data-loader {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  i {
+    font-size: 21px;
+    margin: 0 $spacer;
+  }
+}

src/components/Loader/Loader.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="data-loader">
+    <i class="la la-spinner la-spin" v-bind:style="{fontSize: size + 'px'}"></i>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'Loader',
+  props: {
+    size: {type: Number, default: 21}
+  }
+}
+</script>
+
+<style src="./Loader.scss" lang="scss"/>

src/components/Sidebar/NavLink/NavLink.scss

@@ -22,6 +22,7 @@
 
   > a,
   > div a {
+    align-items: center;
     position: relative;
     padding-left: 50px;
     line-height: 35px;
@@ -69,7 +70,6 @@
 
 .headerLabel {
   font-weight: 600;
-  color: theme-color('warning');
 }
 
 .caretWrapper {