feat(core): add angular-side-overlay support, and used in message module

config/assets/default.js

@@ -18,8 +18,9 @@ module.exports = {
         //flag-icon
         'public/lib/flag-icon-css/css/flag-icon.css',
         //json-tree
-        'public/lib/angular-json-tree/dist/angular-json-tree.css'
-
+        'public/lib/angular-json-tree/dist/angular-json-tree.css',
+        //side-overlay
+        'public/lib/angular-side-overlay/dist/angular-side-overlay.css'
         // endbower
       ],
       js: [
@@ -58,7 +59,9 @@ module.exports = {
         //popup overlay
         'public/lib/jquery-popup-overlay/jquery.popupoverlay.js',
         //json-tree
-        'public/lib/angular-json-tree/dist/angular-json-tree.js'
+        'public/lib/angular-json-tree/dist/angular-json-tree.js',
+        //side-overlay
+        'public/lib/angular-side-overlay/dist/angular-side-overlay.js'
 
         // endbower
       ],

config/assets/production.js

@@ -18,7 +18,9 @@ module.exports = {
         //flag-icon
         'public/lib/flag-icon-css/css/flag-icon.min.css',
         //json-tree
-        'public/lib/angular-json-tree/dist/angular-json-tree.css'
+        'public/lib/angular-json-tree/dist/angular-json-tree.css',
+        //side-overlay
+        'public/lib/angular-side-overlay/dist/angular-side-overlay.min.css'
 
         // endbower
       ],
@@ -58,7 +60,9 @@ module.exports = {
         //popup overlay
         'public/lib/jquery-popup-overlay/jquery.popupoverlay.js',
         //json-tree
-        'public/lib/angular-json-tree/dist/angular-json-tree.min.js'
+        'public/lib/angular-json-tree/dist/angular-json-tree.min.js',
+        //side-overlay
+        'public/lib/angular-side-overlay/dist/angular-side-overlay.min.js'
 
         // endbower
       ]

modules/core/client/app/config.js

@@ -7,7 +7,8 @@
     applicationEnvironment: window.env,
     applicationModuleName: applicationModuleName,
     applicationModuleVendorDependencies: ['ngResource', 'ngAnimate', 'ngMessages', 'ui.router', 'ui.bootstrap', 'ngFileUpload', 'ui-notification',
-      'LocalStorageModule', 'pascalprecht.translate', 'angularMoment', 'ngFileSaver', 'ngSanitize', 'uiCropper', 'hc.marked', 'angular-json-tree'],
+      'LocalStorageModule', 'pascalprecht.translate', 'angularMoment', 'ngFileSaver', 'ngSanitize', 'uiCropper', 'hc.marked', 'angular-json-tree',
+      'ngSideOverlay'],
     registerModule: registerModule
   };
 

modules/messages/client/controllers/messages.client.controller.js

@@ -6,21 +6,16 @@
     .controller('MessageController', MessageController);
 
   MessageController.$inject = ['$scope', '$state', '$translate', '$timeout', 'Authentication', '$filter', 'NotifycationService', '$stateParams', 'MessagesService',
-    'MeanTorrentConfig', 'ModalConfirmService', 'marked', '$rootScope', 'AdminMessagesService'];
+    'MeanTorrentConfig', 'ModalConfirmService', 'marked', '$rootScope', 'AdminMessagesService', 'SideOverlay'];
 
   function MessageController($scope, $state, $translate, $timeout, Authentication, $filter, NotifycationService, $stateParams, MessagesService,
-                             MeanTorrentConfig, ModalConfirmService, marked, $rootScope, AdminMessagesService) {
+                             MeanTorrentConfig, ModalConfirmService, marked, $rootScope, AdminMessagesService, SideOverlay) {
     var vm = this;
     vm.messageConfig = MeanTorrentConfig.meanTorrentConfig.messages;
     vm.user = Authentication.user;
     vm.messageFields = {};
     vm.deleteList = [];
 
-    $(document).on('keydown', function (e) {
-      if (e.keyCode === 27) { // ESC
-        vm.hideMessage();
-      }
-    });
     /**
      * If user is not signed in then redirect back home
      */
@@ -28,10 +23,6 @@
       $state.go('authentication.signin');
     }
 
-    if (document.getElementById('popupSlide')) {
-      document.getElementById('popupSlide').addEventListener('transitionend', onTransitionEnd, false);
-    }
-
     /**
      * user-unread-count-changed
      */
@@ -173,36 +164,28 @@
       }
     };
 
-    /**
-     * onTransitionEnd
-     * @param event
-     */
-    function onTransitionEnd(event) {
-      var e = $('.popup-overlay');
-      if (vm.selectedMessage) {
-        if (!e.hasClass('popup-visible')) {
-          e.addClass('popup-visible');
-        }
-      }
-    }
-
     /**
      * viewMessage
      * @param msg
      */
     vm.showMessage = function (msg) {
-      var e = $('.popup-overlay');
-      if (e.hasClass('popup-visible')) {
-        e.removeClass('popup-visible');
+      if (SideOverlay.isOpened('popupSlide')) {
+        SideOverlay.close('popupSlide', function () {
+          vm.selectedMessage = msg;
+          SideOverlay.open('popupSlide');
+        });
       } else {
-        e.addClass('popup-visible');
-      }
-      $timeout(function () {
         vm.selectedMessage = msg;
-        if (vm.isUnread(msg)) {
-          vm.updateReadStatus(msg);
-        }
-      }, 300);
+        SideOverlay.open('popupSlide');
+      }
+    };
+
+    /**
+     * hideMessage
+     */
+    vm.hideMessage = function () {
+      vm.selectedMessage = undefined;
+      SideOverlay.close('popupSlide');
     };
 
     /**
@@ -258,18 +241,6 @@
       }
     };
 
-    /**
-     * hideMessage
-     */
-    vm.hideMessage = function () {
-      vm.selectedMessage = undefined;
-
-      var e = $('.popup-overlay');
-      if (e.hasClass('popup-visible')) {
-        e.removeClass('popup-visible');
-      }
-    };
-
     /**
      * isUnread
      * @param m

modules/messages/client/less/message.less

@@ -84,19 +84,8 @@
     }
 }
 
-.popup-overlay {
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    background-color: #fff;
-    position: fixed;
-    top: 50px;
-    bottom: 0;
-    right: 0;
-    overflow: auto;
-    z-index: 999;
-    transition: all 0.3s ease-out;
-    /* csslint ignore:start */
-    transform: translateX(101%) translateY(0);
-    /* csslint ignore:end */
+.popup-side-overlay {
+    top: 50px !important;
     @media (min-width: @screen-sm-min) {
         width: 450px;
     }
@@ -105,12 +94,6 @@
     }
 }
 
-.popup-visible {
-    /* csslint ignore:start */
-    transform: translateX(0) translateY(0);
-    /* csslint ignore:end */
-}
-
 .bottom-control {
     background-color: #fdfdfd;
     border-top: solid 1px #e6e6e6;

modules/messages/client/views/box.client.view.html

@@ -94,7 +94,7 @@
         </div>
     </div>
 
-    <div id="popupSlide" class="popup-overlay">
+    <div id="popupSlide" side-overlay="right" side-class="popup-side-overlay" side-close-on-esc>
         <div class="message-popup message-item">
             <div>
                 <img class="message-avatar" ng-src="/{{vm.selectedMessage.from_user.profileImageURL}}">