feat(messages): add message detail view

config/assets/production.js

@@ -51,7 +51,8 @@ module.exports = {
         //local-storage
         'public/lib/angular-local-storage/dist/angular-local-storage.min.js',
         //translate
-        'public/lib/angular-translate/angular-translate.min.js',
+        'public/lib/angular-translate/angular-translate.min.js'
+
         // endbower
       ]
     },

modules/core/client/app/trans-string-en.js

@@ -463,7 +463,8 @@
     GET_INVITATIONS_ERROR: 'Get invitations failed',
     BUTTON_INVITE: 'Send',
     BUTTON_SEARCH: 'Search',
-    BUTTON_DELETE: '　　Delete　　',
+    BUTTON_DELETE: '　Delete　',
+    BUTTON_CLOSE: '　Close　',
     INPUT_EMAIL: 'email',
     SEND_INVITE_SUCCESSFULLY: 'Send invitation successfully',
     SEND_INVITE_ERROR: 'Send invitation failed',

modules/core/client/app/trans-string-zh.js

@@ -463,7 +463,8 @@
     GET_INVITATIONS_ERROR: '获取邀请列表失败',
     BUTTON_INVITE: '发送',
     BUTTON_SEARCH: '搜索',
-    BUTTON_DELETE: '　　删除　　',
+    BUTTON_DELETE: '　删除　',
+    BUTTON_CLOSE: '　关闭　',
     INPUT_EMAIL: '邮箱地址',
     SEND_INVITE_SUCCESSFULLY: '发送邀请成功',
     SEND_INVITE_ERROR: '发送邀请失败',

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

@@ -23,6 +23,8 @@
       $state.go('authentication.signin');
     }
 
+    document.getElementById('popupSlide').addEventListener('transitionend', onTransitionEnd, false);
+
     /**
      * checkSendTo
      */
@@ -118,7 +120,7 @@
         closeButtonText: $translate.instant('MESSAGE_DELETE_CONFIRM_CANCEL'),
         actionButtonText: $translate.instant('MESSAGE_DELETE_CONFIRM_OK'),
         headerText: $translate.instant('MESSAGE_DELETE_CONFIRM_HEADER_TEXT'),
-        bodyText: $translate.instant('MESSAGE_DELETE_CONFIRM_BODY_TEXT')
+        bodyText: $translate.instant('MESSAGE_DELETE_CONFIRM_BODY_TEXT_MANY')
       };
 
       angular.forEach(vm.selected, function (item, id) {
@@ -153,5 +155,47 @@
           });
       }
     };
+
+    /**
+     * onTransitionEnd
+     * @param event
+     */
+    function onTransitionEnd(event) {
+      console.log('end');
+
+      var e = $('.popup-overlay');
+      if (vm.selectedMessage) {
+        if (!e.hasClass('popup-visible')) {
+          e.addClass('popup-visible');
+        }
+      }
+    }
+
+    /**
+     * viewMessage
+     * @param msg
+     */
+    vm.showMessage = function (msg) {
+      vm.selectedMessage = msg;
+
+      var e = $('.popup-overlay');
+      if (e.hasClass('popup-visible')) {
+        e.removeClass('popup-visible');
+      }else{
+        e.addClass('popup-visible');
+      }
+    };
+
+    /**
+     * hideMessage
+     */
+    vm.hideMessage = function () {
+      vm.selectedMessage = undefined;
+
+      var e = $('.popup-overlay');
+      if (e.hasClass('popup-visible')) {
+        e.removeClass('popup-visible');
+      }
+    };
   }
 }());

modules/messages/client/less/message.less

@@ -46,3 +46,46 @@
         margin: 0 0;
     }
 }
+
+.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: 10000;
+    //display:none;
+    transition: all 0.3s ease-out;
+    transform: translateX(101%) translateY(0);
+    @media (min-width: @screen-sm-min) {
+        min-width: 450px;
+    }
+    @media (max-width: @screen-xs-max) {
+        min-width: ~"calc(100% - 50px)";
+    }
+}
+
+.popup-visible {
+    transform: translateX(0) translateY(0);
+}
+
+.bottom-control {
+    background-color: #eee;
+    border-top: solid 1px #e6e6e6;
+    width: 100%;
+    height: 50px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    padding: 7px 10px;
+}
+
+.message-popup {
+    background-color: #fafafa;
+    width: 100%;
+    height: ~"calc(100% - 50px)";
+    overflow: auto;
+    padding: 10px;
+}

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

@@ -1,6 +1,6 @@
 <section ng-controller="MessageController as vm" ng-init="vm.getMessageList()">
     <div class="row margin-top-20">
-        <div class="messages-list">
+        <div class="col-sm-12 messages-list">
 
             <div class="row margin-bottom-20">
                 <div class="col-xs-8 col-md-9">
@@ -40,9 +40,10 @@
                     </thead>
                     <tbody>
                         <tr class="message-item" ng-repeat="m in vm.pagedItems">
-                            <td>
+                            <td ng-click="vm.showMessage(m);">
                                 <img class="message-avatar" ng-src="/{{m.from_user.profileImageURL}}">
                                 <span class="message-title" ng-bind="m.title"></span>
+
                                 <p class="message-info">
                                     {{m.from_user.displayName}} {{'MESSAGES_FIELD.INFO_SEND_TO' | translate}} {{m.to_user.displayName}} {{'MESSAGES_FIELD.INFO_SEND_AT' | translate}} {{m.createdat | date: 'yyyy-MM-dd HH:mm:ss' }}
                                 </p>
@@ -76,4 +77,14 @@
             </div>
         </div>
     </div>
+
+    <div id="popupSlide" class="popup-overlay">
+        <div class="message-popup">
+        </div>
+
+        <div class="bottom-control">
+            <button class="btn btn-default" ng-click="vm.hideMessage();">{{ 'BUTTON_CLOSE' | translate }}</button>
+            <button class="btn btn-success pull-right">{{ 'BUTTON_DELETE' | translate }}</button>
+        </div>
+    </div>
 </section>

modules/torrents/client/templates/modal-confirm.client.view.html

@@ -1,5 +1,5 @@
 <div class="modal-header">
-    <h3>{{modalOptions.headerText}}</h3>
+    <h4>{{modalOptions.headerText}}</h4>
 </div>
 <div class="modal-body">
     <p>{{modalOptions.bodyText}}</p>