From 2fe153b87c43c52c0dd14a09fa8b77b1e08b780b Mon Sep 17 00:00:00 2001 From: OldHawk Date: Thu, 29 Jun 2017 13:45:00 +0800 Subject: [PATCH] feat(core): add angular-side-overlay support, and used in message module --- config/assets/default.js | 9 ++- config/assets/production.js | 8 ++- modules/core/client/app/config.js | 3 +- .../controllers/messages.client.controller.js | 63 +++++-------------- modules/messages/client/less/message.less | 21 +------ .../client/views/box.client.view.html | 2 +- 6 files changed, 34 insertions(+), 72 deletions(-) diff --git a/config/assets/default.js b/config/assets/default.js index 4c165435..5ca2f524 100644 --- a/config/assets/default.js +++ b/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 ], diff --git a/config/assets/production.js b/config/assets/production.js index 65c49e57..92e530f7 100644 --- a/config/assets/production.js +++ b/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 ] diff --git a/modules/core/client/app/config.js b/modules/core/client/app/config.js index c0f70767..c790ea81 100644 --- a/modules/core/client/app/config.js +++ b/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 }; diff --git a/modules/messages/client/controllers/messages.client.controller.js b/modules/messages/client/controllers/messages.client.controller.js index fcbf1ade..32ca5f1b 100644 --- a/modules/messages/client/controllers/messages.client.controller.js +++ b/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 diff --git a/modules/messages/client/less/message.less b/modules/messages/client/less/message.less index b378e581..05b1ffc2 100644 --- a/modules/messages/client/less/message.less +++ b/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; diff --git a/modules/messages/client/views/box.client.view.html b/modules/messages/client/views/box.client.view.html index b3652b79..86501bab 100644 --- a/modules/messages/client/views/box.client.view.html +++ b/modules/messages/client/views/box.client.view.html @@ -94,7 +94,7 @@ -