Improved modal photo view, fixed show more history

app/css/app.css

@@ -282,14 +282,21 @@ input[type="number"]::-webkit-inner-spin-button {
   border-radius: 2px;
   overflow: hidden;
 }
+
+.modal-backdrop {
+  background: #111111;
+}
+.modal-backdrop.in {
+  opacity: 0.25;
+}
 .modal {
   overflow-y: auto;
 }
 .modal-content {
   border: 0;
   border-radius: 4px;
-  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  -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;

app/js/controllers.js

@@ -804,7 +804,6 @@ angular.module('myApp.controllers', [])
         $scope.$broadcast('ui_message_send');
       }
     }
-
   })
 
   .controller('PhotoModalController', function ($scope, AppPhotosManager) {

app/js/directives.js

@@ -250,6 +250,10 @@ angular.module('myApp.directives', ['myApp.filters'])
 
           updateScroller();
           moreNotified = false;
+
+          $timeout(function () {
+            $(scrollableWrap).trigger('scroll');
+          });
         });
       });
 
@@ -929,4 +933,19 @@ angular.module('myApp.directives', ['myApp.filters'])
         });
       });
     };
+  })
+
+
+  .directive('myModalWidth', function () {
+
+    return {
+      link: link
+    };
+
+    function link(scope, element, attrs) {
+      attrs.$observe('myModalWidth', function (newW) {
+        $(element[0].parentNode.parentNode).css({width: parseInt(newW) + 36});
+      });
+    };
+
   });

app/js/services.js

@@ -1411,6 +1411,9 @@ angular.module('myApp.services', [])
       if (message.action._ == 'messageActionChatEditPhoto') {
         message.action.photo = AppPhotosManager.wrapForHistory(message.action.photo.id);
       }
+      if (message.action._ == 'messageActionChatEditTitle') {
+        message.action.rTitle = RichTextProcessor.wrapRichText(message.action.title, {noLinks: true, noLinebreaks: true}) || 'DELETED';
+      }
 
       if (message.action.user_id) {
         message.action.user = AppUsersManager.getUser(message.action.user_id);
@@ -1759,19 +1762,25 @@ angular.module('myApp.services', [])
 
   function wrapForFull (photoID) {
     var photo = wrapForHistory(photoID),
-        fullWidth = Math.min($(window).width() - 60, 542),
+        fullWidth = $(window).width() - 36,
         fullHeight = $($window).height() - 150,
         fullPhotoSize = choosePhotoSize(photo, fullWidth, fullHeight),
         full = {
-          placeholder: 'img/placeholders/PhotoThumbModal.gif',
-          width: fullWidth,
-          height: fullHeight
+          placeholder: 'img/placeholders/PhotoThumbModal.gif'
         };
 
+    if (fullWidth > 800) {
+      fullWidth -= 200;
+    }
+
+    full.width = fullWidth;
+    full.height = fullHeight;
+
     if (fullPhotoSize && fullPhotoSize._ != 'photoSizeEmpty') {
-      if (fullPhotoSize.w > fullPhotoSize.h) {
+      if ((fullPhotoSize.w / fullPhotoSize.h) > (fullWidth / fullHeight)) {
         full.height = parseInt(fullPhotoSize.h * fullWidth / fullPhotoSize.w);
-      } else {
+      }
+      else {
         full.width = parseInt(fullPhotoSize.w * fullHeight / fullPhotoSize.h);
         if (full.width > fullWidth) {
           full.height = parseInt(full.height * fullWidth / full.width);
@@ -1779,6 +1788,11 @@ angular.module('myApp.services', [])
         }
       }
 
+      if (full.width >= fullPhotoSize.w && full.height >= fullPhotoSize.h) {
+        full.width = fullPhotoSize.w;
+        full.height = fullPhotoSize.h;
+      }
+
       full.location = fullPhotoSize.location;
       full.size = fullPhotoSize.size;
     }
@@ -1796,7 +1810,8 @@ angular.module('myApp.services', [])
     var modalInstance = $modal.open({
       templateUrl: 'partials/photo_modal.html',
       controller: 'PhotoModalController',
-      scope: scope
+      scope: scope,
+      windowClass: 'photo_modal_window'
     });
   }
 

app/partials/dialog.html

@@ -27,7 +27,7 @@
 
     <div class="im_dialog_peer">
       <span class="im_dialog_chat" ng-if="dialogMessage.chatID">
-        <i class="icon icon-group"></i> <span  ng-bind-html="dialogMessage.peerData.rTitle"></span>
+        <i class="icon icon-group"></i> <span ng-bind-html="dialogMessage.peerData.rTitle"></span>
       </span>
       <span class="im_dialog_user" ng-if="dialogMessage.peerID > 0" ng-bind-html="dialogMessage.peerData.rFullName"></span>
     </div>

app/partials/message.html

@@ -19,7 +19,7 @@
             created the group &laquo;<strong>{{historyMessage.action.title}}</strong>&raquo;
           </span>
           <span ng-switch-when="messageActionChatEditTitle">
-            changed group name to  &laquo;<strong>{{historyMessage.action.title}}</strong>&raquo;
+            changed group name to  &laquo;<strong ng-bind-html="historyMessage.action.rTitle"></strong>&raquo;
           </span>
           <span ng-switch-when="messageActionChatEditPhoto">
             changed group photo

app/partials/photo_modal.html

@@ -1,4 +1,4 @@
-<div class="media_modal_wrap photo_modal_wrap">
+<div my-modal-width="{{photo.full.width}}" class="media_modal_wrap photo_modal_wrap">
 
   <div class="modal-body">