Updated desktop media modals

New photo viewer with preloads
New video modal
New document modal

app/css/app.css

@@ -290,8 +290,9 @@ input[type="number"] {
 }
 
 .modal-backdrop {
-  background: #111111;
+  background: rgba(26, 26, 26, 0.7);
-  opacity: 0.25 !important;
+  opacity: 1 !important;
+  /*opacity: 0.25 !important;*/
 }
 
 .modal.fade .modal-dialog {
@@ -318,69 +319,10 @@ input[type="number"] {
 }
 .modal-content {
   border: 0;
-  border-radius: 4px;
+  border-radius: 0;
   -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
   box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
 }
-.modal_close_wrap {
-  cursor: pointer;
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 50%;
-  height: 100%;
-}
-.modal_close {
-  background: url(../img/icons/PhotoControls.png) 0 -53px no-repeat;
-  background-size: 33px 86px;
-  width: 33px;
-  height: 33px;
-  float: right;
-  margin: 60px 30px 0 0;
-  opacity: 0.6;
-  pointer-events: none;
-
-  -webkit-transition    : .2s;
-  -moz-transition       : .2s;
-  -o-transition         : .2s;
-  transition            : .2s;
-}
-.modal_close_wrap:hover .modal_close {
-  opacity: 0.85;
-}
-
-
-.modal_prev_wrap {
-  cursor: pointer;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 50%;
-  height: 100%;
-}
-.modal_prev {
-  background: url(../img/icons/PhotoControls.png) 0 0 no-repeat;
-  background-size: 33px 86px;
-  width: 33px;
-  height: 33px;
-  float: left;
-  margin: 60px 0 0 30px;
-  opacity: 0.6;
-  pointer-events: none;
-
-  -webkit-transition    : .2s;
-  -moz-transition       : .2s;
-  -o-transition         : .2s;
-  transition            : .2s;
-}
-.modal_prev_wrap:hover .modal_prev {
-  opacity: 0.85;
-}
-
-.is_1x .modal_close,
-.is_1x .modal_prev {
-  background-image: url(../img/icons/PhotoControls_1x.png);
-}
 
 .text-invisible {
   visibility: hidden;
@@ -1894,9 +1836,6 @@ textarea.im_message_field {
 }
 
 
-.media_modal_wrap .modal-body {
-  padding: 19px 18px 17px;
-}
 a.img_fullsize,
 .img_fullsize_wrap {
   display: block;
@@ -2158,7 +2097,11 @@ img.img_fullsize {
 }
 
 
-
+.photo_modal_window,
+.video_modal_window,
+.document_modal_window {
+  display: block;
+}
 .photo_modal_error {
   color: #999;
   position: absolute;

app/css/desktop.css

@@ -977,3 +977,192 @@ div.im_panel_own_photo {
 .changelog_modal_window .modal-dialog {
   max-width: 506px;
 }
+
+
+.modal_close_wrap {
+  display: none;
+  cursor: pointer;
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 50%;
+  height: 100%;
+}
+.modal_close_wrap_wnext {
+  width: 104px;
+  height: 150px;
+}
+.modal_close {
+  background: url(../img/icons/PhotoIcons.png) -10px -10px no-repeat;
+  background-size: 40px 200px;
+  width: 20px;
+  height: 21px;
+  float: right;
+  margin: 43px 40px 0 0;
+  opacity: 0.5;
+  pointer-events: none;
+
+  -webkit-transition    : .2s;
+  -moz-transition       : .2s;
+  -o-transition         : .2s;
+  transition            : .2s;
+}
+.modal_close_wrap:hover .modal_close {
+  opacity: 1;
+}
+
+.modal_prev_wrap,
+.modal_next_wrap {
+  display: none;
+  cursor: pointer;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 64px;
+  width: 104px;
+}
+.modal_next_wrap {
+  left: auto;
+  right: 0;
+}
+.modal_prev,
+.modal_next {
+  background: url(../img/icons/PhotoIcons.png) -12px -41px no-repeat;
+  background-size: 40px 200px;
+  width: 16px;
+  height: 24px;
+  opacity: 0.5;
+  position: absolute;
+  top: 50%;
+  pointer-events: none;
+  margin: 0 0 0 38px;
+
+  -webkit-transition    : .2s;
+  -moz-transition       : .2s;
+  -o-transition         : .2s;
+  transition            : .2s;
+}
+.modal_next {
+  margin: 0 0 0 50px;
+  background-position: -14px -75px;
+}
+.modal_prev_wrap:hover,
+.modal_next_wrap:hover {
+  background-color: rgba(0,0,0,0.2);
+}
+.modal_prev_wrap:hover .modal_prev,
+.modal_next_wrap:hover .modal_next {
+  opacity: 1;
+}
+
+.is_1x .modal_close,
+.is_1x .modal_prev,
+.is_1x .modal_next {
+  background-image: url(../img/icons/PhotoIcons_1x.png);
+}
+
+@media (min-width: 800px) {
+  .modal_close_wrap,
+  .modal_next_wrap,
+  .modal_prev_wrap {
+    display: block;
+  }
+}
+
+.media_modal_bottom_panel_wrap {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
+  background: #313131;
+}
+.media_modal_bottom_panel {
+  max-width: 1000px;
+  margin: 0 auto;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.media_modal_title_wrap {
+  max-width: 300px;
+  margin: 0 auto;
+  text-align: center;
+  font-size: 14px;
+  line-height: 16px;
+  padding: 24px 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.media_modal_info_wrap {
+  line-height: 16px;
+  padding: 24px 20px;
+}
+.media_modal_author {
+  font-size: 14px;
+  margin-right: 4px;
+}
+.media_modal_date,
+a.media_modal_date:hover {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.photo_modal_window,
+.video_modal_window,
+.document_modal_window {
+  padding: 0;
+}
+.media_modal_wrap .modal-body {
+  padding: 16px;
+}
+.video_modal_window .modal-body {
+  padding: 0;
+}
+.media_modal_bottom_actions {
+  width: 204px;
+}
+.media_modal_action_btn {
+  float: left;
+  display: block;
+  width: 68px;
+  height: 64px;
+}
+.media_modal_action_btn:hover {
+  background: rgba(0,0,0,0.2);
+}
+
+.media_modal_action_btn i {
+  background: url(../img/icons/PhotoIcons.png) 0 0 no-repeat;
+  background-size: 40px 200px;
+  display: block;
+  opacity: 0.5;
+}
+.media_modal_action_btn:hover i {
+  opacity: 1;
+}
+.is_1x .media_modal_action_btn i {
+  background-image: url(../img/icons/PhotoIcons_1x.png);
+}
+
+.media_modal_action_btn i.media_modal_action_btn_download {
+  background-position: -12px -163px;
+  width: 16px;
+  height: 20px;
+  margin: 22px 26px;
+}
+.media_modal_action_btn i.media_modal_action_btn_forward {
+  background-position: -9px -109px;
+  width: 23px;
+  height: 15px;
+  margin: 24px 22px;
+}
+.media_modal_action_btn i.media_modal_action_btn_delete {
+  background-position: -13px -135px;
+  width: 14px;
+  height: 18px;
+  margin: 23px 27px;
+}
+
+
+

app/js/controllers.js

@@ -1510,12 +1510,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       AppPhotosManager.downloadPhoto($scope.photoID);
     };
 
-    if (!$scope.messageID || Config.Mobile) {
-      $scope.nav.next = function () {
-        $modalInstance.close();
-      }
-    }
-
     if (!$scope.messageID) {
       return;
     }
@@ -1531,6 +1525,14 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       });
     };
 
+    $scope.goToMessage = function () {
+      var messageID = $scope.messageID;
+      var peerID = AppMessagesManager.getMessagePeer(AppMessagesManager.getMessage(messageID));
+      var peerString = AppPeersManager.getPeerString(peerID);
+      $modalInstance.dismiss();
+      $rootScope.$broadcast('history_focus', {peerString: peerString, messageID: messageID});
+    };
+
 
     if (Config.Mobile) {
       $scope.canForward = true;
@@ -1550,21 +1552,24 @@ angular.module('myApp.controllers', ['myApp.i18n'])
         inputQuery = '',
         inputFilter = {_: 'inputMessagesFilterPhotos'},
         list = [$scope.messageID],
+        preloaded = {},
         maxID = $scope.messageID,
         hasMore = true;
 
+    preloaded[$scope.messageID] = true;
+
     updatePrevNext();
 
     AppMessagesManager.getSearch(inputPeer, inputQuery, inputFilter, 0, 1000).then(function (searchCachedResult) {
-      // console.log(dT(), 'search cache', searchCachedResult);
       if (searchCachedResult.history.indexOf($scope.messageID) >= 0) {
         list = searchCachedResult.history;
         maxID = list[list.length - 1];
 
         updatePrevNext();
+        preloadPhotos(+1);
       }
-      // console.log(dT(), list, maxID);
+      loadMore();
-    });
+    }, loadMore);
 
 
     var jump = 0;
@@ -1575,7 +1580,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
 
       var promise = index >= list.length ? loadMore() : $q.when();
       promise.then(function () {
-        if (curJump != jump || !hasMore) {
+        if (curJump != jump) {
           return;
         }
 
@@ -1593,10 +1598,33 @@ angular.module('myApp.controllers', ['myApp.i18n'])
         $scope.photoID = message.media.photo.id;
         $scope.photo = AppPhotosManager.wrapForFull($scope.photoID);
 
+        preloaded[$scope.messageID] = true;
+
         updatePrevNext();
+
+        if (sign > 0 && hasMore && list.indexOf(messageID) + 1 >= list.length) {
+          loadMore();
+        } else {
+          preloadPhotos(sign);
+        }
       });
     };
 
+    function preloadPhotos (sign) {
+      // var preloadOffsets = sign < 0 ? [-1,-2,1,-3,2] : [1,2,-1,3,-2];
+      var preloadOffsets = sign < 0 ? [-1,-2] : [1,2];
+      var index = list.indexOf($scope.messageID);
+      angular.forEach(preloadOffsets, function (offset) {
+        var messageID = list[index + offset];
+        if (messageID !== undefined && preloaded[messageID] === undefined) {
+          preloaded[messageID] = true;
+          var message = AppMessagesManager.getMessage(messageID);
+          var photoID = message.media.photo.id;
+          AppPhotosManager.preloadPhoto(photoID);
+        }
+      })
+    }
+
     var loadingPromise = false;
     function loadMore () {
       if (loadingPromise) return loadingPromise;
@@ -1610,13 +1638,27 @@ angular.module('myApp.controllers', ['myApp.i18n'])
           hasMore = false;
         }
 
-        updatePrevNext();
+        updatePrevNext(searchResult.count);
         loadingPromise = false;
+
+        if (searchResult.history.length) {
+          return $q.reject();
+        }
+
+        preloadPhotos(+1);
       });
     };
 
-    function updatePrevNext () {
+    function updatePrevNext (count) {
       var index = list.indexOf($scope.messageID);
+      if (hasMore) {
+        if (count) {
+          $scope.count = Math.max(count, list.length);
+        }
+      } else {
+        $scope.count = list.length;
+      }
+      $scope.pos = $scope.count - index;
       $scope.nav.hasNext = index > 0;
       $scope.nav.hasPrev = hasMore || index < list.length - 1;
       $scope.canForward = $scope.canDelete = $scope.messageID > 0;
@@ -1658,8 +1700,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       }
     });
 
-    loadMore();
-
   })
 
   .controller('UserpicModalController', function ($q, $scope, $rootScope, $modalInstance, AppPhotosManager, AppUsersManager, AppPeersManager, AppMessagesManager, PeersSelectService, ErrorService) {

app/js/directives.js

@@ -1429,7 +1429,7 @@ angular.module('myApp.directives', ['myApp.filters'])
                             .add($(imgElement)),
           resize = function () {
             resizeElements.css({width: $scope.fullPhoto.width, height: $scope.fullPhoto.height});
-            $scope.$emit('ui_height');
+            $scope.$emit('ui_height', true);
           };
 
       var jump = 0;
@@ -1621,7 +1621,7 @@ angular.module('myApp.directives', ['myApp.filters'])
         element = element.parentNode;
       }
       if (element) {
-        $(element).width(width + (Config.Mobile ? 0 : 36));
+        $(element).width(width + (Config.Mobile ? 0 : 32));
       }
     }
 
@@ -1630,8 +1630,11 @@ angular.module('myApp.directives', ['myApp.filters'])
       var fullSizeWrap = $('.document_fullsize_wrap', element);
       var fullSizeImage = $('.document_fullsize_img', element);
 
-      var fullWidth = $(window).width() - (Config.Mobile ? 20 : 36);
+      var fullWidth = $(window).width() - (Config.Mobile ? 20 : 32);
       var fullHeight = $(window).height() - 150;
+      if (fullWidth > 800) {
+        fullWidth -= 208;
+      }
 
       $scope.imageWidth = fullWidth;
       $scope.imageHeight = fullHeight;
@@ -1823,7 +1826,7 @@ angular.module('myApp.directives', ['myApp.filters'])
 
     function link($scope, element, attrs) {
       attrs.$observe('myModalWidth', function (newW) {
-        $(element[0].parentNode.parentNode).css({width: parseInt(newW) + (Config.Mobile ? 0 : 36)});
+        $(element[0].parentNode.parentNode).css({width: parseInt(newW) + (Config.Mobile ? 0 : 32)});
       });
     };
 
@@ -1931,7 +1934,9 @@ angular.module('myApp.directives', ['myApp.filters'])
           return;
         }
         var height = element[0].parentNode.offsetHeight,
-            contHeight = element[0].parentNode.parentNode.parentNode.offsetHeight;
+            modal = element[0].parentNode.parentNode.parentNode,
+            bottomPanel = $('.media_modal_bottom_panel_wrap', modal)[0],
+            contHeight = modal.offsetHeight - (bottomPanel && bottomPanel.offsetHeight || 0);
 
         if (height < contHeight) {
           $(element[0].parentNode).css('marginTop', (contHeight - height) / 2);
@@ -1950,8 +1955,12 @@ angular.module('myApp.directives', ['myApp.filters'])
 
       $($window).on('resize', updateMargin);
 
-      $scope.$on('ui_height', function () {
+      $scope.$on('ui_height', function (e, sync) {
-        onContentLoaded(updateMargin);
+        if (sync) {
+          updateMargin();
+        } else {
+          onContentLoaded(updateMargin);
+        }
       });
 
     };
@@ -2013,20 +2022,33 @@ angular.module('myApp.directives', ['myApp.filters'])
     };
 
     function link($scope, element, attrs) {
-      var userID = $scope.$eval(attrs.myUserLink),
-          user = AppUsersManager.getUser(userID);
 
-      element.html(
+      var userID;
-        (user[attrs.short && $scope.$eval(attrs.short) ? 'rFirstName' : 'rFullName'] || '').valueOf()
+      var update = function () {
-      );
+        var user = AppUsersManager.getUser(userID);
+
+        element.html(
+          (user[attrs.short && $scope.$eval(attrs.short) ? 'rFirstName' : 'rFullName'] || '').valueOf()
+        );
+        if (attrs.color && $scope.$eval(attrs.color)) {
+          element.addClass('user_color_' + user.num);
+        }
+      };
 
       if (element[0].tagName == 'A') {
         element.on('click', function () {
           AppUsersManager.openUser(userID, attrs.userOverride && $scope.$eval(attrs.userOverride));
         });
       }
-      if (attrs.color && $scope.$eval(attrs.color)) {
+
-        element.addClass('user_color_' + user.num);
+      if (attrs.userWatch) {
+        $scope.$watch(attrs.myUserLink, function (newUserID) {
+          userID = newUserID;
+          update();
+        });
+      } else {
+        userID = $scope.$eval(attrs.myUserLink);
+        update();
       }
     }
   })

app/js/filters.js

@@ -66,15 +66,10 @@ angular.module('myApp.filters', ['myApp.i18n'])
   })
 
   .filter('dateOrTime', function($filter) {
-    var cachedDates = {},
+    var dateFilter = $filter('date');
-        dateFilter = $filter('date');
 
     return function (timestamp, extended) {
 
-      if (cachedDates[timestamp]) {
-        return cachedDates[timestamp];
-      }
-
       var ticks = timestamp * 1000,
           diff = Math.abs(tsNow() - ticks),
           format = 'shortTime';
@@ -86,7 +81,7 @@ angular.module('myApp.filters', ['myApp.i18n'])
         format = extended ? 'EEEE' : 'EEE';
       }
 
-      return cachedDates[timestamp] = dateFilter(ticks, format);
+      return dateFilter(ticks, format);
     }
   })
 

app/js/lib/mtproto.js

@@ -17,7 +17,7 @@ angular.module('izhukov.mtproto', ['izhukov.utils'])
       {id: 3, host: '174.140.142.5', port: 80}
     ]
     : [
-      {id: 1, host: '173.240.5.1',   port: 80},
+      {id: 1, host: '149.154.175.50', port: 80},
       {id: 2, host: '149.154.167.51', port: 80},
       {id: 3, host: '174.140.142.6', port: 80},
       {id: 4, host: '149.154.167.91', port: 80},

app/js/lib/utils.js

@@ -139,6 +139,11 @@ function calcImageInBox(imageW, imageH, boxW, boxH, noZooom) {
     }
   }
 
+  if (Config.Navigator.retina) {
+    imageW = Math.floor(imageW / 2);
+    imageH = Math.floor(imageH / 2);
+  }
+
   if (noZooom && boxedImageW >= imageW && boxedImageH >= imageH) {
     boxedImageW = imageW;
     boxedImageH = imageH;

app/js/locales/en-us.json

@@ -79,6 +79,7 @@
 	"user_modal_notifications": "Notifications",
 	"user_modal_contact_info": "Contact info",
 
+	"media_modal_photo": "Photo {pos} of {count}",
 	"media_modal_forward": "Forward",
 	"media_modal_download": "Download",
 	"media_modal_delete": "Delete",

app/js/services.js

@@ -610,6 +610,12 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
       }
       return text;
     },
+    getPeerString: function (peerID) {
+      if (peerID > 0) {
+        return AppUsersManager.getUserString(peerID);
+      }
+      return AppChatsManager.getChatString(-peerID);
+    },
     getOutputPeer: function (peerID) {
       return peerID > 0
             ? {_: 'peerUser', user_id: peerID}
@@ -1673,13 +1679,11 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     if (message.chatID = message.to_id.chat_id) {
       message.peerID = -message.chatID;
       message.peerData = AppChatsManager.getChat(message.chatID);
-      message.peerString = AppChatsManager.getChatString(message.chatID);
     } else {
       message.peerID = message.out ? message.to_id.user_id : message.from_id;
       message.peerData = AppUsersManager.getUser(message.peerID);
-      message.peerString = AppUsersManager.getUserString(message.peerID);
     }
-
+    message.peerString = AppPeersManager.getPeerString(message.peerID);
     message.peerPhoto = AppPeersManager.getPeerPhoto(message.peerID, 'User', 'Group');
     message.unreadCount = unreadCount;
 
@@ -2194,6 +2198,10 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
   };
 
   function choosePhotoSize (photo, width, height) {
+    if (Config.Navigator.retina) {
+      width *= 2;
+      height *= 2;
+    }
     var bestPhotoSize = {_: 'photoSizeEmpty'},
         bestDiff = 0xFFFFFF;
 
@@ -2235,10 +2243,13 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     if (!photos[photoID]) {
       return;
     }
-    var photo = photos[photoID],
+    var photo = photos[photoID];
-        fullWidth = $(window).width() - 36,
+    var fullWidth = $(window).width() - (Config.Mobile ? 20 : 32);
-        fullHeight = $($window).height() - 150,
+    var fullHeight = $($window).height() - (Config.Mobile ? 150 : 116);
-        fullPhotoSize = choosePhotoSize(photo, fullWidth, fullHeight);
+    if (fullWidth > 800) {
+      fullWidth -= 208;
+    }
+    var fullPhotoSize = choosePhotoSize(photo, fullWidth, fullHeight);
 
     if (fullPhotoSize && !fullPhotoSize.preloaded) {
       fullPhotoSize.preloaded = true;
@@ -2297,23 +2308,22 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
   }
 
   function wrapForFull (photoID) {
-    var photo = wrapForHistory(photoID),
+    var photo = wrapForHistory(photoID);
-        fullWidth = $(window).width() - (Config.Mobile ? 20 : 36),
+    var fullWidth = $(window).width() - (Config.Mobile ? 20 : 32);
-        fullHeight = $($window).height() - 150,
+    var fullHeight = $($window).height() - (Config.Mobile ? 150 : 116);
-        fullPhotoSize = choosePhotoSize(photo, fullWidth, fullHeight),
-        full = {
-          placeholder: 'img/placeholders/PhotoThumbModal.gif'
-        };
-
     if (fullWidth > 800) {
-      fullWidth -= 200;
+      fullWidth -= 208;
     }
+    var fullPhotoSize = choosePhotoSize(photo, fullWidth, fullHeight);
+    var full = {
+          placeholder: 'img/placeholders/PhotoThumbModal.gif'
+        };
 
     full.width = fullWidth;
     full.height = fullHeight;
 
     if (fullPhotoSize && fullPhotoSize._ != 'photoSizeEmpty') {
-      var wh = calcImageInBox(fullPhotoSize.w, fullPhotoSize.h, fullWidth, fullHeight, Config.Mobile);
+      var wh = calcImageInBox(fullPhotoSize.w, fullPhotoSize.h, fullWidth, fullHeight, true);
       full.width = wh.w;
       full.height = wh.h;
 
@@ -2344,6 +2354,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
 
     var modalInstance = $modal.open({
       templateUrl: templateUrl('photo_modal'),
+      windowTemplateUrl: !Config.Mobile && templateUrl('media_modal_layout') || undefined,
       controller: scope.userID ? 'UserpicModalController' : 'PhotoModalController',
       scope: scope,
       windowClass: 'photo_modal_window'
@@ -2492,6 +2503,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
 
     return $modal.open({
       templateUrl: templateUrl('video_modal'),
+      windowTemplateUrl: !Config.Mobile && templateUrl('media_modal_layout') || undefined,
       controller: 'VideoModalController',
       scope: scope,
       windowClass: 'video_modal_window'
@@ -2722,6 +2734,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
 
     var modalInstance = $modal.open({
       templateUrl: templateUrl('document_modal'),
+      windowTemplateUrl: !Config.Mobile && templateUrl('media_modal_layout') || undefined,
       controller: 'DocumentModalController',
       scope: scope,
       windowClass: 'document_modal_window'

app/partials/desktop/document_modal.html

@@ -1,21 +1,41 @@
-<div class="media_modal_wrap document_modal_wrap" my-modal-position>
+<div class="modal_close_wrap" ng-click="$close()">
+  <div class="modal_close"></div>
+</div>
+
+<div class="media_modal_bottom_panel_wrap">
+  <div class="media_modal_bottom_panel">
+    <div class="media_modal_bottom_actions pull-right">
+      <a class="media_modal_action_btn" ng-click="download()" title="{{'media_modal_download' | i18n}}">
+        <i class="media_modal_action_btn_download"></i>
+      </a>
+      <a class="media_modal_action_btn" ng-if="messageID" ng-click="forward()"  title="{{'media_modal_forward' | i18n}}">
+        <i class="media_modal_action_btn_forward"></i>
+      </a>
+      <a class="media_modal_action_btn" ng-if="messageID" ng-click="delete()" title="{{'media_modal_delete' | i18n}}">
+        <i class="media_modal_action_btn_delete"></i>
+      </a>
+    </div>
+
+    <div class="media_modal_info_wrap pull-left">
+      <a class="media_modal_author" my-user-link="document.user_id" user-watch="true"></a>
+      <span class="media_modal_date" ng-bind="document.date | dateOrTime :true"></span>
+    </div>
+
+    <div class="media_modal_title_wrap" ng-bind="document.file_name"></div>
 
-  <div class="modal-body">
+  </div>
+</div>
+
+<div class="modal-dialog">
+  <div class="modal-content">
+    <div my-modal-width="{{photo.full.modalWidth}}" class="media_modal_wrap photo_modal_wrap" my-modal-position animation="no">
 
-    <div my-load-document="document"></div>
+      <div class="modal-body">
+
+        <div my-load-document="document"></div>
 
-    <div class="media_meta_wrap clearfix">
-      <div class="media_modal_actions pull-right">
-        <a href="" class="media_modal_action_link" ng-click="download()" my-i18n="media_modal_download"></a>
-        <a ng-if="messageID" href="" class="media_modal_action_link" ng-click="forward()" my-i18n="media_modal_forward"></a>
-        <a ng-if="messageID" href="" class="media_modal_action_link" ng-click="delete()" my-i18n="media_modal_delete"></a>
       </div>
 
-      <p class="media_modal_info">
-        <a class="media_modal_author" my-user-link="document.user_id"></a>, <span ng-bind="document.date | dateOrTime"></span>
-      </p>
     </div>
-
   </div>
-
 </div>

app/partials/desktop/media_modal_layout.html

@@ -0,0 +1 @@
+<div tabindex="-1" role="dialog" class="modal" ng-style="{'z-index': 1050 + index*10}" ng-click="close($event)"  modal-transclude></div>

app/partials/desktop/photo_modal.html

@@ -1,22 +1,51 @@
-<div my-modal-width="{{photo.full.modalWidth}}" class="media_modal_wrap photo_modal_wrap" my-modal-position animation="no" my-modal-nav next="nav.next()" prev="nav.prev()">
+<div class="modal_prev_wrap" ng-show="nav.hasPrev" ng-click="nav.prev($event)">
-
+  <div class="modal_prev"></div>
-  <div class="modal-body">
+</div>
+<div class="modal_next_wrap" ng-show="nav.hasNext" ng-click="nav.next($event)">
+  <div class="modal_next"></div>
+</div>
+<div class="modal_close_wrap" ng-class="{modal_close_wrap_wnext: nav.hasNext}" ng-click="$close()">
+  <div class="modal_close"></div>
+</div>
 
-    <div class="photo_modal_image_wrap" my-load-full-photo full-photo="photo.full" thumb-location="photo.thumb.location" ng-click="nav.next()"> </div>
+<div class="media_modal_bottom_panel_wrap">
+  <div class="media_modal_bottom_panel">
+    <div class="media_modal_bottom_actions pull-right">
+      <a class="media_modal_action_btn" ng-click="download()" title="{{'media_modal_download' | i18n}}">
+        <i class="media_modal_action_btn_download"></i>
+      </a>
+      <a class="media_modal_action_btn" ng-if="canForward" ng-click="forward()"  title="{{'media_modal_forward' | i18n}}">
+        <i class="media_modal_action_btn_forward"></i>
+      </a>
+      <a class="media_modal_action_btn" ng-if="canDelete" ng-click="delete()" title="{{'media_modal_delete' | i18n}}">
+        <i class="media_modal_action_btn_delete"></i>
+      </a>
+    </div>
 
-    <div class="media_meta_wrap clearfix">
+    <div class="media_modal_info_wrap pull-left" ng-switch="messageID > 0">
-      <div class="media_modal_actions pull-right">
+      <a class="media_modal_author" my-user-link="photo.user_id" user-watch="true"></a>
-        <a href="" class="media_modal_action_link" ng-click="download()" my-i18n="media_modal_download"></a>
+      <a ng-switch-when="true" ng-click="goToMessage()" class="media_modal_date" ng-bind="photo.date | dateOrTime :true"></a>
-        <a href="" class="media_modal_action_link" ng-if="canForward" ng-click="forward()" my-i18n="media_modal_forward"></a>
+      <span ng-switch-default class="media_modal_date" ng-bind="photo.date | dateOrTime :true"></span>
-        <a href="" class="media_modal_action_link" ng-if="canDelete" ng-click="delete()" my-i18n="media_modal_delete"></a>
+    </div>
-      </div>
 
-      <p class="media_modal_info">
+    <div class="media_modal_title_wrap" ng-if="count > 1 &amp;&amp; pos > 0" my-i18n="media_modal_photo">
-        <a class="media_modal_author" my-user-link="photo.user_id"></a>, <span ng-bind="photo.date | dateOrTime"></span>
+      <my-i18n-param name="pos" ng-bind="pos"></my-i18n-param>
-      </p>
+      <my-i18n-param name="count" ng-bind="count"></my-i18n-param>
     </div>
+  </div>
+</div>
 
+<div class="modal-dialog" my-modal-nav next="nav.next()" prev="nav.prev()">
+  <div class="modal-content">
+    <div my-modal-width="{{photo.full.modalWidth}}" class="media_modal_wrap photo_modal_wrap" my-modal-position animation="no">
 
-  </div>
+      <div class="modal-body">
+
+        <div class="photo_modal_image_wrap" my-load-full-photo full-photo="photo.full" thumb-location="photo.thumb.location" ng-click="$close()"></div>
+
+      </div>
 
+    </div>
+  </div>
 </div>
+

app/partials/desktop/video_modal.html

@@ -1,21 +1,42 @@
-<div class="media_modal_wrap video_modal_wrap" my-modal-position>
+<div class="modal_close_wrap" ng-class="{modal_close_wrap_wnext: nav.hasNext}" ng-click="$close()">
+  <div class="modal_close"></div>
+</div>
 
-  <div class="modal-body">
+<div class="media_modal_bottom_panel_wrap">
+  <div class="media_modal_bottom_panel">
+    <div class="media_modal_bottom_actions pull-right">
+      <a class="media_modal_action_btn" ng-click="download()" title="{{'media_modal_download' | i18n}}">
+        <i class="media_modal_action_btn_download"></i>
+      </a>
+      <a class="media_modal_action_btn" ng-if="messageID" ng-click="forward()"  title="{{'media_modal_forward' | i18n}}">
+        <i class="media_modal_action_btn_forward"></i>
+      </a>
+      <a class="media_modal_action_btn" ng-if="messageID" ng-click="delete()" title="{{'media_modal_delete' | i18n}}">
+        <i class="media_modal_action_btn_delete"></i>
+      </a>
+    </div>
 
-    <div class="video_modal_image_wrap" my-load-video video="video"></div>
+    <div class="media_modal_info_wrap pull-left">
+      <a class="media_modal_author" my-user-link="video.user_id" user-watch="true"></a>
+      <span class="media_modal_date" ng-bind="video.date | dateOrTime :true"></span>
+    </div>
+
+    <div class="media_modal_title_wrap" ng-if="count > 1 &amp;&amp; pos > 0" my-i18n="media_modal_photo">
+      <my-i18n-param name="pos" ng-bind="pos"></my-i18n-param>
+      <my-i18n-param name="count" ng-bind="count"></my-i18n-param>
+    </div>
+  </div>
+</div>
+
+<div class="modal-dialog">
+  <div class="modal-content">
+    <div my-modal-width="{{video.full.width - 32}}" class="media_modal_wrap video_modal_wrap" my-modal-position animation="no">
+
+      <div class="modal-body">
+        <div class="video_modal_image_wrap" my-load-video video="video"></div>
 
-    <div class="media_meta_wrap clearfix">
-      <div class="media_modal_actions pull-right">
-        <a href="" class="media_modal_action_link" ng-click="download()" my-i18n="media_modal_download"></a>
-        <a ng-if="messageID" href="" class="media_modal_action_link" ng-click="forward()" my-i18n="media_modal_forward"></a>
-        <a ng-if="messageID" href="" class="media_modal_action_link" ng-click="delete()" my-i18n="media_modal_delete"></a>
       </div>
 
-      <p class="media_modal_info">
-        <a class="media_modal_author" my-user-link="video.user_id"></a>, <span ng-bind="video.date | dateOrTime"></span>
-      </p>
     </div>
-
   </div>
-
 </div>

app/vendor/ui-bootstrap/ui-bootstrap-custom-tpls-0.12.0.js

@@ -776,8 +776,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
       restrict: 'EA',
       scope: {
         index: '@',
-        animate: '=',
+        animate: '='
-        nav: '='
       },
       replace: true,
       transclude: true,
@@ -956,8 +955,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
           'window-class': modal.windowClass,
           'size': modal.size,
           'index': openedWindows.length() - 1,
-          'animate': 'animate',
+          'animate': 'animate'
-          'nav': 'nav'
         }).html(modal.content);
 
         var modalDomEl = $compile(angularDomEl)(modal.scope);
@@ -1225,10 +1223,7 @@ angular.module("template/modal/backdrop.html", []).run(["$templateCache", functi
 angular.module("template/modal/window.html", []).run(["$templateCache", function($templateCache) {
   $templateCache.put("template/modal/window.html",
     "<div tabindex=\"-1\" role=\"dialog\" class=\"modal fade\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1050 + index*10, display: 'block'}\" ng-click=\"close($event)\">\n" +
-    "  <div class=\"modal_prev_wrap hidden-xs hidden-sm\" ng-show=\"nav.hasPrev\" ng-click=\"nav.prev($event)\">\n" +
+    "  <div class=\"modal_close_wrap\" ng-click=\"close($event)\">\n" +
-    "    <div class=\"modal_prev\"></div>\n" +
-    "  </div>\n" +
-    "  <div class=\"modal_close_wrap hidden-xs hidden-sm\" ng-click=\"close($event)\">\n" +
     "    <div class=\"modal_close\"></div>\n" +
     "  </div>\n" +
     "    <div class=\"modal-dialog\" ng-class=\"{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}\"><div class=\"modal-content\" modal-transclude></div></div>\n" +