Added head typing, improved mobile attachments

app/css/app.css

@@ -1686,6 +1686,7 @@ img.im_message_document_thumb {
   padding-left: 2px;
 }
 .im_message_audio_info audio {
+  width: 100%;
   height: 38px;
   line-height: 38px;
 }

app/css/app_mobile.css

@@ -130,7 +130,7 @@ html {
   height: 18px;
   vertical-align: text-top;
 
-  background: url(../img/icons/IconsetW.png) -15px -419px no-repeat;
+  background: url(../img/icons/IconsetW.png) -15px -418px no-repeat;
   background-size: 42px 710px;
   opacity: 0.8;
 }
@@ -158,9 +158,7 @@ html {
   font-size: 13px;
   height: 46px;
 }
-.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:hover {
+.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:hover,
-  color: #b9cfe3;
-}
 .tg_page_head .navbar-inverse .navbar-quick-nav > li > a:active {
   background-color: rgba(0,0,0,0.1);
 }
@@ -176,7 +174,7 @@ html {
   white-space: nowrap;
 }
 .navbar-quick-back-title {
-  max-width: 130px;
+  max-width: 160px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -225,7 +223,8 @@ html {
 }
 .navbar_offline .navbar-quick-nav li > a > .navbar-quick-back-title,
 .navbar_offline .im_head_attach,
-.navbar_offline .navbar-search-wrap {
+.navbar_offline .navbar-search-wrap,
+.navbar_offline .navbar-history-edit {
   display: none;
 }
 
@@ -247,6 +246,33 @@ html {
 }
 
 
+.navbar_history_select .navbar-peer-wrap,
+.navbar_history_select .navbar-toggle-wrap {
+  display: none;
+}
+.tg_page_head .navbar-quick-nav li.navbar-quick-right {
+  float: right;
+}
+.tg_page_head .navbar-quick-nav li.navbar-quick-left {
+  float: left;
+}
+.tg_page_head .navbar-inverse .navbar-quick-nav > .navbar-quick-right > a,
+.tg_page_head .navbar-inverse .navbar-quick-nav > .navbar-quick-left > a {
+  font-size: 15px;
+  color: #FFF;
+  padding: 14px 15px;
+}
+.tg_page_head .navbar-quick-nav li.navbar-quick-title {
+  position: static;
+  float: none;
+  color: #FFF;
+  font-size: 15px;
+  font-weight: bold;
+  padding: 14px 0;
+  text-align: center;
+}
+
+
 .login_form_wrap {
   border-radius: 0;
   max-width: auto;
@@ -272,28 +298,131 @@ html {
 }
 .im_message_text,
 .im_message_document {
-  /*float: left;*/
   padding: 7px 10px;
   border-radius: 3px;
   background: #f1f1f1;
 }
+.im_history_selectable .im_message_outer_wrap:hover,
+.im_message_selected {
+  background: #e1e9f0;
+}
 .im_message_out .im_message_text,
 .im_message_out .im_message_document {
   background: #e4ecf2;
-  /*float: right;*/
 }
+
+.im_message_selected .im_message_text,
+.im_message_selected .im_message_document,
+.im_message_selected .im_message_text a {
+  color: #FFF;
+  background: #497495;
+}
+
+
 .im_message_document {
   padding: 5px;
   width: 250px;
 }
+.im_message_audio,
+.im_message_document {
+  position: relative;
+}
+.im_message_audio > a,
+.im_message_document .icon-document,
+.im_message_audio .icon-audio,
+.im_message_document_thumb_wrap {
+  position: absolute;
+}
+.im_message_document_thumb_wrap {
+  background-color: transparent;
+}
+.im_message_audio_done i {
+  display: none;
+}
+.im_message_audio_info,
+.im_message_document_info {
+  float: none;
+  margin-left: 48px;
+  width: auto;
+  min-height: 38px;
+}
+.im_message_document_thumbed .im_message_document_info {
+  margin-left: 110px;
+}
+.im_message_audio_name,
+.im_message_audio_duration {
+  display: inline;
+  vertical-align: baseline;
+  line-height: 38px;
+}
+.im_message_audio_progress .im_message_audio_name,
+.im_message_audio_progress .im_message_audio_duration, {
+  line-height: 18px;
+}
+.im_message_audio_done .im_message_audio_info {
+  margin-left: 0;
+  width: auto;
+  float: none;
+}
+.im_message_audio_actions,
+.im_message_document_actions {
+  display: none;
+}
+.im_message_audio_player_wrap {
+  height: 38px;
+  line-height: 38px;
+}
+.im_message_document_size {
+  display: block;
+  padding-left: 0;
+}
+.im_message_document_thumbed .im_message_document_info {
+  min-height: 100px;
+}
+.im_message_document_info .cancelable_progress_wrap,
+.im_message_audio_info .cancelable_progress_wrap {
+  margin-top: 4px;
+}
 .im_message_document_thumbed .im_message_document_name_wrap,
-.im_message_document_thumbed .im_message_audio_name_wrap,
+.im_message_document_name_wrap,
+.im_message_audio_name_wrap {
+  width: auto;
+}
+.im_message_document_progress .im_message_document_size {
+  display: inline;
+}
+.im_message_document_progress .im_message_document_name  {
+  max-width: 50%;
+}
+.im_message_document_progress.im_message_document_thumbed .im_message_document_name  {
+  display: inline;
+  max-width: none;
+}
+
+.im_message_document_thumbed .im_message_document_name {
+  white-space: normal;
+}
+
+
 .im_message_document_thumbed .im_message_upload_progress_wrap,
 .im_message_document_thumbed .im_message_download_progress_wrap {
   width: 130px;
 }
-.im_message_document_thumbed .im_message_document_name {
+.img_gif_label,
-  max-width: 70px;
+.img_gif_size,
+.im_message_video_duration {
+  font-size: 13px;
+}
+
+a.im_message_video_thumb {
+  margin-right: 0;
+}
+.im_message_video .im_message_document_info {
+  display: none;
+}
+
+.im_message_document_thumb_wrap {
+  position: absolute;
 }
 /*.im_message_document,
 .im_message_audio,
@@ -396,28 +525,43 @@ a.im_message_author {
 .form-control {
   font-size: 1.2em;
 }
-
+.im_history_typing_wrap {
-.im_history_typing {
+  display: none;
-  padding: 0 15px 0 56px;
 }
 .im_history_panel_info_link {
   display: none;
 }
 
 .im_edit_flush_link,
-.im_edit_cancel_link,
+.im_edit_cancel_link {
+  display: none;
+}
 .im_edit_delete_btn,
 .im_edit_forward_btn {
-  padding-left: 5px;
+  background: none !important;
-  padding-right: 5px;
+  border: 0 !important;
-  margin: 6px 4px;
+  width: 50%;
+  margin: 0;
+  font-size: 15px;
+  padding: 13px 0;
 }
+.im_edit_forward_btn {
+  color: #497495 !important;
+}
+.im_edit_delete_btn {
+  color: #c3584d !important;
+}
+.im_edit_delete_btn strong,
+.im_edit_forward_btn strong {
+  font-weight: normal;
+}
+
 .im_edit_panel_border {
-  margin: 0 18px 22px 3px;
+  display: none;
 }
 .im_edit_panel_wrap {
-  margin: 0 5px;
+  padding: 5px 0;
-  padding-bottom: 18px;
+  margin: 0;
 }
 .im_history_col .nano > .nano-pane {
   top: 3px;
@@ -745,14 +889,6 @@ a.im_dialog_selected .im_dialog_unread {
   margin-top: -267px;
 }
 
-.im_edit_panel_wrap {
-  padding-top: 2px;
-  padding-bottom: 4px;
-}
-.im_edit_panel_border {
-  margin-bottom: 3px;
-}
-
 .im_head_attach {
   display: block;
   float: right;

app/js/controllers.js

@@ -305,15 +305,15 @@ angular.module('myApp.controllers', [])
     $scope.toggleEdit = function () {
       $scope.$broadcast('history_edit_toggle');
     };
-
+    $scope.selectedFlush = function () {
-    $scope.returnToRecent = function () {
+      $scope.$broadcast('history_edit_flush');
-      $scope.$broadcast('history_return_recent');
     };
-
     $scope.toggleMedia = function (mediaType) {
       $scope.$broadcast('history_media_toggle', mediaType);
     };
-
+    $scope.returnToRecent = function () {
+      $scope.$broadcast('history_return_recent');
+    };
     $scope.toggleSearch = function () {
       $scope.$broadcast('dialogs_search_toggle');
     };
@@ -653,9 +653,12 @@ angular.module('myApp.controllers', [])
     $scope.returnToRecent = returnToRecent;
 
     $scope.$on('history_edit_toggle', toggleEdit);
+    $scope.$on('history_edit_flush', selectedFlush);
     $scope.$on('history_media_toggle', function (e, mediaType) {
       toggleMedia(mediaType);
     });
+
+
     $scope.$on('history_return_recent', returnToRecent);
 
     var peerID,
@@ -1262,6 +1265,7 @@ angular.module('myApp.controllers', [])
 
     if (Config.Navigator.mobile) {
       $scope.canForward = true;
+      $scope.canDelete = true;
       return;
     }
 
@@ -1512,6 +1516,10 @@ angular.module('myApp.controllers', [])
       });
     };
 
+    $scope.download = function () {
+      $rootScope.downloadVideo($scope.videoID)
+    };
+
     $scope.$on('history_delete', function (e, historyUpdate) {
       if (historyUpdate.msgs[$scope.messageID]) {
         $modalInstance.dismiss();

app/js/directives.js

@@ -1564,12 +1564,15 @@ angular.module('myApp.directives', ['myApp.filters'])
       var userID = $scope.$eval(attrs.myUserLink),
           user = AppUsersManager.getUser(userID);
 
-      element
+      element.html(
-        .on('click', function () {
+        (user[attrs.short && $scope.$eval(attrs.short) ? 'rFirstName' : 'rFullName'] || '').valueOf()
-          $rootScope.openUser(userID);
+      );
-        })
-        .html(user[attrs.short && $scope.$eval(attrs.short) ? 'rFirstName' : 'rFullName'].valueOf());
 
+      if (element[0].tagName == 'A') {
+        element.on('click', function () {
+          $rootScope.openUser(userID);
+        });
+      }
       if (attrs.color && $scope.$eval(attrs.color)) {
         element.addClass('user_color_' + user.num);
       }

app/js/services.js

@@ -2115,7 +2115,9 @@ angular.module('myApp.services', [])
 })
 
 .service('AppPhotosManager', function ($modal, $window, $timeout, $rootScope, MtpApiManager, MtpApiFileManager, AppUsersManager, FileManager) {
-  var photos = {};
+  var photos = {},
+      windowW = $(window).width(),
+      windowH = $(window).height();
 
   function savePhoto (apiPhoto) {
     photos[apiPhoto.id] = apiPhoto;
@@ -2200,8 +2202,8 @@ angular.module('myApp.services', [])
 
   function wrapForHistory (photoID) {
     var photo = angular.copy(photos[photoID]) || {_: 'photoEmpty'},
-        width = 260,
+        width = Math.min(windowW - 80, 260),
-        height = 260,
+        height = Math.min(windowH - 100, 260),
         thumbPhotoSize = choosePhotoSize(photo, width, height),
         thumb = {
           placeholder: 'img/placeholders/PhotoThumbConversation.gif',
@@ -2211,10 +2213,15 @@ angular.module('myApp.services', [])
 
     // console.log('chosen photo size', photoID, thumbPhotoSize);
     if (thumbPhotoSize && thumbPhotoSize._ != 'photoSizeEmpty') {
-      if (thumbPhotoSize.w > thumbPhotoSize.h) {
+      if ((thumbPhotoSize.w / thumbPhotoSize.h) > (width / height)) {
         thumb.height = parseInt(thumbPhotoSize.h * width / thumbPhotoSize.w);
-      } else {
+      }
+      else {
         thumb.width = parseInt(thumbPhotoSize.w * height / thumbPhotoSize.h);
+        if (thumb.width > width) {
+          thumb.height = parseInt(thumb.height * width / thumb.width);
+          thumb.width = width;
+        }
       }
 
       thumb.location = thumbPhotoSize.location;
@@ -2349,8 +2356,10 @@ angular.module('myApp.services', [])
 
 
 .service('AppVideoManager', function ($rootScope, $modal, $window, $timeout, MtpApiFileManager, AppUsersManager, FileManager) {
-  var videos = {};
+  var videos = {},
-  var videosForHistory = {};
+      videosForHistory = {},
+      windowW = $(window).width(),
+      windowH = $(window).height();
 
   function saveVideo (apiVideo) {
     videos[apiVideo.id] = apiVideo;
@@ -2371,8 +2380,8 @@ angular.module('myApp.services', [])
     }
 
     var video = angular.copy(videos[videoID]),
-        width = 200,
+        width = Math.min(windowW - 80, windowW <= 479 ? 260 : 200),
-        height = 200,
+        height = Math.min(windowH - 100, windowW <= 479 ? 260 : 200),
         thumbPhotoSize = video.thumb,
         thumb = {
           placeholder: 'img/placeholders/VideoThumbConversation.gif',
@@ -2381,10 +2390,15 @@ angular.module('myApp.services', [])
         };
 
     if (thumbPhotoSize && thumbPhotoSize._ != 'photoSizeEmpty') {
-      if (thumbPhotoSize.w > thumbPhotoSize.h) {
+      if ((thumbPhotoSize.w / thumbPhotoSize.h) > (width / height)) {
         thumb.height = parseInt(thumbPhotoSize.h * width / thumbPhotoSize.w);
-      } else {
+      }
+      else {
         thumb.width = parseInt(thumbPhotoSize.w * height / thumbPhotoSize.h);
+        if (thumb.width > width) {
+          thumb.height = parseInt(thumb.height * width / thumb.width);
+          thumb.width = width;
+        }
       }
 
       thumb.location = thumbPhotoSize.location;
@@ -2513,8 +2527,10 @@ angular.module('myApp.services', [])
 })
 
 .service('AppDocsManager', function ($rootScope, $modal, $window, $timeout, MtpApiFileManager, FileManager) {
-  var docs = {};
+  var docs = {},
-  var docsForHistory = {};
+      docsForHistory = {},
+      windowW = $(window).width(),
+      windowH = $(window).height();
 
   function saveDoc (apiDoc) {
     docs[apiDoc.id] = apiDoc;
@@ -2536,20 +2552,25 @@ angular.module('myApp.services', [])
 
     var doc = angular.copy(docs[docID]),
         isGif = doc.mime_type == 'image/gif',
-        width = isGif ? 260 : 100,
+        width = isGif ? Math.min(windowW - 80, 260) : 100,
-        height = isGif ? 260 : 100,
+        height = isGif ? Math.min(windowH - 100, 260) : 100,
         thumbPhotoSize = doc.thumb,
         thumb = {
-          // placeholder: 'img/placeholders/DocThumbConversation.jpg',
           width: width,
           height: height
         };
 
+
     if (thumbPhotoSize && thumbPhotoSize._ != 'photoSizeEmpty') {
-      if (thumbPhotoSize.w > thumbPhotoSize.h) {
+      if ((thumbPhotoSize.w / thumbPhotoSize.h) > (width / height)) {
         thumb.height = parseInt(thumbPhotoSize.h * width / thumbPhotoSize.w);
-      } else {
+      }
+      else {
         thumb.width = parseInt(thumbPhotoSize.w * height / thumbPhotoSize.h);
+        if (thumb.width > width) {
+          thumb.height = parseInt(thumb.height * width / thumb.width);
+          thumb.width = width;
+        }
       }
 
       thumb.location = thumbPhotoSize.location;
@@ -3257,7 +3278,10 @@ angular.module('myApp.services', [])
         var time = tsNow();
         if (!notificationsCount || time % 2000 > 1000) {
           document.title = titleBackup;
-          $('link[rel="icon"]').replaceWith(faviconBackupEl);
+          var curFav = $('link[rel="icon"]');
+          if (curFav.attr('href').indexOf('favicon_unread') != -1) {
+            curFav.replaceWith(faviconBackupEl);
+          }
         } else {
           document.title = notificationsCount > 1
             ? (notificationsCount + ' notifications')

app/partials/head.html

@@ -1,5 +1,5 @@
 <div class="tg_page_head">
-  <div class="navbar navbar-static-top  navbar-inverse" role="navigation" ng-class="{navbar_peer_not_selected: !curDialog.peer, navbar_offline: offline}">
+  <div class="navbar navbar-static-top  navbar-inverse" role="navigation" ng-class="{navbar_peer_not_selected: !curDialog.peer, navbar_offline: offline, navbar_history_select: historyState.selectActions}">
     <div class="container">
 
       <a class="navbar-peer-wrap" ng-click="showPeerInfo()">
@@ -43,6 +43,7 @@
       <div class="navbar-header">
 
         <a class="navbar-brand" href="{{isLoggedIn ? '#/im' : '#/'}}"><span class="tg_head_logo"></span></a>
+
         <div ng-show="curDialog.peer" ng-switch="curDialog.peer &amp;&amp; historyFilter.mediaType.length > 0">
           <ul ng-switch-when="true" class="nav navbar-nav navbar-quick-nav">
             <li>
@@ -57,30 +58,55 @@
               </a>
             </li>
           </ul>
-          <ul ng-switch-default class="nav navbar-nav navbar-quick-nav" ng-switch="historyPeer.id > 0">
+          <div ng-switch-default ng-switch="historyState.selectActions">
-            <li ng-switch-when="true">
+            <ul ng-switch-when="true" class="nav navbar-navbar navbar-quick-nav navbar-history-edit">
-              <a href="#/im" class="navbar-quick-profile-back">
+              <li class="navbar-quick-right">
-                <i class="icon icon-back"></i>
+                <a ng-click="toggleEdit()">Cancel</a>
-                <div class="navbar-quick-back-title">
+              </li>
-                  <h4 ng-bind-html="historyPeer.data.rFullName"></h4>
+              <li class="navbar-quick-left">
-                  <small ng-bind="historyPeer.data | userStatus"></small>
+                <a ng-click="selectedFlush()">Clear All</a>
-                </div>
+              </li>
-              </a>
+              <li class="navbar-quick-title">Edit</li>
-            </li>
+            </ul>
-            <li ng-switch-default>
+            <ul ng-switch-default class="nav navbar-nav navbar-quick-nav" ng-switch="historyPeer.id > 0">
-              <a href="#/im" class="navbar-quick-group-back">
+              <li ng-switch-when="true">
-                <i class="icon icon-back"></i>
+                <a href="#/im" class="navbar-quick-profile-back">
-                <div class="navbar-quick-back-title">
+                  <i class="icon icon-back"></i>
-                  <h4 ng-bind-html="historyPeer.data.rTitle"></h4>
+                  <div class="navbar-quick-back-title">
-                  <small>
+                    <h4 ng-bind-html="historyPeer.data.rFullName"></h4>
-                    <ng-pluralize count="historyPeer.data.participants_count"
+                    <small ng-switch="historyState.typing.length">
-                                     when="{'0': 'No members', 'one': '1 member', 'other': '{} members'}">
+                      <span ng-switch-when="1">
-                    </ng-pluralize>
+                        typing<span my-loading-dots></span>
-                  </small>
+                      </span>
-                </div>
+                      <span ng-switch-default ng-bind="historyPeer.data | userStatus"></span>
-              </a>
+                    </small>
-            </li>
+                  </div>
-          </ul>
+                </a>
+              </li>
+              <li ng-switch-default>
+                <a href="#/im" class="navbar-quick-group-back">
+                  <i class="icon icon-back"></i>
+                  <div class="navbar-quick-back-title">
+                    <h4 ng-bind-html="historyPeer.data.rTitle"></h4>
+                    <small ng-switch="historyState.typing.length">
+                      <ng-pluralize ng-switch-when="0" count="historyPeer.data.participants_count"
+                                       when="{'0': 'No members', 'one': '1 member', 'other': '{} members'}">
+                      </ng-pluralize>
+                      <span ng-switch-when="1">
+                        <span my-user-link="historyState.typing[0]" short="true"></span> is typing<span my-loading-dots></span>
+                      </span>
+                      <span ng-switch-when="2">
+                        <span my-user-link="historyState.typing[0]" short="true"></span>, <span my-user-link="historyState.typing[1]" short="true"></span><span my-loading-dots></span>
+                      </span>
+                      <span ng-switch-default>
+                        <span my-user-link="historyState.typing[0]" short="true"></span>+{{historyState.typing.length - 1}}<span my-loading-dots></span>
+                      </span>
+                    </small>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
 

app/partials/message_attach_audio.html

@@ -1,4 +1,4 @@
-<div class="im_message_document">
+<div class="im_message_document im_message_audio" ng-class="{im_message_audio_done: historyMessage.media.audio.url, im_message_audio_progress: historyMessage.media.audio.progress.enabled}">
   <a href="" ng-click="openAudio(historyMessage.media.audio.id)" ng-if="!historyMessage.media.audio.progress.enabled &amp;&amp; !historyMessage.media.audio.url">
     <i class="icon icon-audio"></i>
   </a>
@@ -25,8 +25,8 @@
     </div>
     <div class="im_message_audio_player_wrap" ng-if="historyMessage.media.audio.url">
       <audio my-audio-autoplay audio="historyMessage.media.audio" controls="controls">
-        <source ng-src="::historyMessage.media.audio.url" type="audio/ogg" />
+        <source ng-src="{{::historyMessage.media.audio.url}}" type="audio/ogg" />
-        <embed ng-src="::historyMessage.media.audio.url" hidden="true" autostart="true" loop="false" />
+        <embed ng-src="{{::historyMessage.media.audio.url}}" hidden="true" autostart="true" loop="false" />
       </audio>
     </div>
   </div>

app/partials/message_attach_document.html

@@ -2,7 +2,7 @@
 
   <div ng-switch-when="gif" my-load-gif document="historyMessage.media.document"></div>
 
-  <div ng-switch-default class="im_message_document" ng-class="{im_message_document_thumbed: !!historyMessage.media.document.thumb}">
+  <div ng-switch-default class="im_message_document" ng-class="{im_message_document_thumbed: !!historyMessage.media.document.thumb, im_message_document_progress: historyMessage.media.document.progress.enabled}">
 
     <a href="" ng-click="downloadDoc(historyMessage.media.document.id, historyMessage.media.document.withPreview)" ng-class="{im_message_document_link_disabled: historyMessage.media.document.progress.enabled}">
       <i class="icon icon-document" ng-if="::!historyMessage.media.document.thumb"></i>

app/partials/video_modal.html

@@ -5,9 +5,10 @@
     <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" ng-if="messageID">
+      <div class="media_modal_actions pull-right">
-        <a href="" class="media_modal_action_link" ng-click="forward()">Forward</a>
+        <a href="" class="media_modal_action_link" ng-click="download()">Download</a>
-        <a href="" class="media_modal_action_link" ng-click="delete()">Delete</a>
+        <a ng-if="messageID" href="" class="media_modal_action_link" ng-click="forward()">Forward</a>
+        <a ng-if="messageID" href="" class="media_modal_action_link" ng-click="delete()">Delete</a>
       </div>
 
       <p class="media_modal_info">