Added forwarded messages support, reverted send message animation, improved styles

app/css/app.css

@@ -2,6 +2,8 @@
 
 html {
   background: #dee4e9 url(../img/bg_tile.png?1) 0 0 repeat;
+  background-size: 300px 468px;
+
   /*background: #dee4e9 url(../img/bg_full.png) 0 0 no-repeat;*/
   /*background-size: cover;*/
   /*background-size: contain;*/
@@ -166,11 +168,13 @@ fieldset[disabled] .btn-tg.active {
   border-radius: 2px;
   overflow: hidden;
 }
-
+.modal {
+  overflow-y: auto;
+}
 .modal-content {
   border-radius: 4px;
-  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
 .modal_close_wrap {
   cursor: pointer;
@@ -287,12 +291,28 @@ fieldset[disabled] .btn-tg.active {
   -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
   -moz-box-shadow:    0px 1px 2px rgba(0, 0, 0, 0.1);
   box-shadow:         0px 1px 2px rgba(0, 0, 0, 0.1);
-  margin-bottom: 40px;
+  /*margin-bottom: 40px;*/
 
   border-radius: 0 0 3px 3px;
   overflow: hidden;
 }
 
+.im_page_footer {
+  font-size: 11px;
+  text-align: center;
+  color: #9cacb9;
+  line-height: 40px;
+}
+.im_page_footer_brand {
+  color: #9cacb9;
+  font-weight: bold;
+}
+.im_page_footer_brand:hover,
+.im_page_footer_brand:active {
+  color: #8499aa;
+  text-decoration: none;
+}
+
 .im_dialogs_col_wrap {
   float: left;
   width: 310px;
@@ -511,6 +531,7 @@ a.im_dialog:hover .im_dialog_message_text {
 }
 
 .im_history_panel_wrap {
+  cursor: pointer;
   position: relative;
   -webkit-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.12);
   -moz-box-shadow:    0px 2px 0px rgba(0, 0, 0, 0.12);
@@ -573,6 +594,7 @@ a.im_dialog:hover .im_dialog_message_text {
   width: 100%;
   margin-bottom: 13px;
   overflow: hidden;
+  -webkit-user-select: none;
 }
 .im_history_typing {
   font-size: 11px;
@@ -714,66 +736,53 @@ div.im_message_video_thumb {
   margin-top: 3px;
   border-radius: 3px;
   display: inline-block;
-  line-height: 0;
+  /*line-height: 0;*/
 
-  width: 300px;
+  width: 340px;
 }
 .icon-document {
-  display: inline-block;
+  display: block;
+  float: left;
   width: 38px;
   height: 38px;
   vertical-align: text-top;
   background: #F2F2F2 url(../img/icons/DocGrey_2x.png) 8px 10px no-repeat;
   background-size: 20px 20px;
   border-radius: 3px;
-  margin-right: 0;
-}
-.im_message_document .icon-group {
-  background-image: url(../img/icons/DialogListGroupChatIcon_Highlighted@2x.png);
+  margin-right: 10px;
 }
 
-.im_message_document_size {
-  color: #999;
-  float: right;
+.im_message_document_info {
+  float: left;
+}
 
-  vertical-align: text-top;
-  display: inline-block;
-  line-height: 20px;
-  padding: 9px 3px 9px 0;
+.im_message_document_name_wrap {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-}
-.im_message_document:hover .im_message_document_size {
-  color: #698192;
+  width: 290px;
+  padding: 0 0 1px;
 }
 
 .im_message_document_name {
   color: #000;
-  font-weight: bold;
-  vertical-align: text-top;
   display: inline-block;
-  line-height: 20px;
-  padding: 9px 5px 9px 0;
+  font-weight: bold;
   max-width: 200px;
   overflow: hidden;
+  vertical-align: text-top;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.im_message_document:hover,
-.im_message_document:hover .icon-document {
-  background: #EBF0F5;
-  text-decoration: none;
-}
-.im_message_document:hover .icon-document {
-  background: #EBF0F5 url(../img/icons/DocBlue_2x.png) 8px 10px no-repeat;
-  background-size: 20px 20px;
+.im_message_document_size {
+  color: #999;
+  padding-left: 2px;
 }
 
 .im_message_upload_progress_wrap,
 .im_message_download_progress_wrap {
   margin-top: 5px;
-  width: 300px;
+  width: 290px;
 }
 
 .tg_up_progress,
@@ -781,10 +790,9 @@ div.im_message_video_thumb {
   height: 5px;
   margin: 0;
   padding: 0;
-  /*background: rgba(0,0,0, 0.1);*/
-  background: #E9EBED;
+  background: #F2F2F2;
   border: 0;
-  border-radius: 4px;
+  border-radius: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
 }
@@ -792,19 +800,12 @@ div.im_message_video_thumb {
 .tg_down_progress .progress-bar {
   height: 5px;
   line-height: 5px;
-  /*background: #43A4DB;*/
-  background: #B3BFC7;
-  border-radius: 3px;
+  background: #6B9ABD;
+  border-radius: 0;
   overflow: hidden;
   -webkit-box-shadow: none;
   box-shadow: none;
 }
-.tg_down_progress .progress-bar {
-  background: #A1D2ED;
-  /*background: #6DBF69;*/
-}
-/*.tg_up_progress .progress-bar {
-}*/
 
 
 
@@ -839,7 +840,7 @@ div.im_message_video_thumb {
   display: block;
   width: 11px;
   height: 11px;
-  border-radius: 5px;
+  border-radius: 7px;
   overflow: hidden;
   position: absolute;
   margin-left: -27px;
@@ -886,6 +887,10 @@ div.im_message_body {
   overflow: hidden;
 }
 
+div.im_message_fwd_header {
+  font-weight: bold;
+}
+
 .im_message_text {
   word-wrap: break-word;
 }
@@ -1028,12 +1033,24 @@ div.im_panel_own_photo {
   display: block;
   width: 11px;
   height: 11px;
-  border-radius: 5px;
+  border-radius: 6px;
   overflow: hidden;
   position: absolute;
   margin-top: -7px;
   margin-left: 43px;
 }
+.modal_participant_online {
+  background: #6DBF69;
+  border: 1px solid #FFF;
+  display: block;
+  width: 11px;
+  height: 11px;
+  border-radius: 6px;
+  overflow: hidden;
+  position: absolute;
+  margin-top: -7px;
+  margin-left: 33px;
+}
 
 
 .media_modal_wrap .modal-body {
@@ -1111,24 +1128,25 @@ img.img_fullsize {
 }
 
 .chat_modal_members_header {
-  margin-top: 15px;
+  margin: 20px 0 6px;
 }
 
 .chat_modal_participant_wrap {
   padding: 8px 7px;
-  border-top: 1px solid #E0E0E0;
+  border-top: 1px solid #F0F0F0;
 }
 .chat_modal_participant_name {
+  display: block;
   color: #3C6E97;
   font-weight: bold;
-  margin: 4px 0 5px;
+  margin: 1px 0 2px;
 }
 .chat_modal_participant_status {
   color: #999;
 }
 .chat_modal_participant_photo {
-  width: 50px;
-  height: 50px;
+  width: 40px;
+  height: 40px;
   margin-right: 10px;
   overflow: hidden;
 }

app/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" ng-app="myApp" ng-csp="">
+<html lang="en" ng-app="myApp"><!-- ng-csp=""-->
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

app/js/controllers.js

@@ -14,9 +14,9 @@ angular.module('myApp.controllers', [])
   .controller('AppWelcomeController', function($scope, $location, MtpApiManager) {
     MtpApiManager.getUserID().then(function (id) {
       if (id) {
-        $location.path('/im');
+        $location.url('/im');
       } else {
-        $location.path('/login');
+        $location.url('/login');
       }
     });
   })
@@ -33,7 +33,7 @@ angular.module('myApp.controllers', [])
         id: result.user.id
       });
 
-      $location.path('/im');
+      $location.url('/im');
     };
 
     $scope.sendCode = function () {
@@ -116,10 +116,15 @@ angular.module('myApp.controllers', [])
     $scope.isLoggedIn = true;
     $scope.logOut = function () {
       MtpApiManager.logOut().then(function () {
-        $location.path('/login');
+        location.href = 'login';
       });
     }
 
+    // $scope.userID = 0;
+    // MtpApiManager.getUserID().then(function (userID) {
+    //   $scope.userID = userID;
+    // });
+
     updateCurDialog();
 
 
@@ -190,7 +195,7 @@ angular.module('myApp.controllers', [])
         $scope.$broadcast('ui_dialogs_change');
       }, function (error) {
         if (error.code == 401) {
-          $location.path('/login');
+          $location.url('/login');
         }
       });
     }
@@ -245,7 +250,7 @@ angular.module('myApp.controllers', [])
 
     function updateHistoryPeer(preload) {
       var peerData = AppPeersManager.getPeer(peerID);
-      dLog('update', preload, peerData);
+      // dLog('update', preload, peerData);
       if (!peerData || peerData.deleted) {
         return false;
       }
@@ -274,7 +279,7 @@ angular.module('myApp.controllers', [])
         return;
       }
 
-      console.trace('load history');
+      // console.trace('load history');
       AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID, limit).then(function (historyResult) {
         offset += limit;
         hasMore = offset < historyResult.count;

app/js/directives.js

@@ -105,33 +105,52 @@ angular.module('myApp.directives', ['myApp.filters'])
           moreNotified = false;
 
       onContentLoaded(function () {
-        $(historyWrap).nanoScroller({preventPageScrolling: true, scroll: 'bottom', tabIndex: -1});
+        scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
+        $(historyWrap).nanoScroller({preventPageScrolling: true, tabIndex: -1});
       });
 
       var updateScroller = function (delay) {
         $timeout(function () {
-          $(historyWrap).nanoScroller();
+          if (!$(scrollableWrap).hasClass('im_history_to_bottom')) {
+            $(historyWrap).nanoScroller();
+          }
         }, delay || 0);
       }
 
+      var animated = true,
+          curAnimation = false;
       scope.$on('ui_history_append', function () {
-        // var st = scrollableWrap.scrollTop;
-        $(scrollableWrap).addClass('im_history_to_bottom');
-        $(scrollable).css({bottom: 0});
+        if (!atBottom) {
+          return;
+        }
+        if (animated) {
+          $(scrollableWrap).stop();
+        } else {
+          $(scrollable).css({bottom: 0});
+          $(scrollableWrap).addClass('im_history_to_bottom');
+        }
 
-        if (atBottom) {
-          onContentLoaded(function () {
+        onContentLoaded(function () {
+          if (animated) {
+            curAnimation = true;
+            $(scrollableWrap).stop().animate({
+              scrollTop: scrollableWrap.scrollHeight - scrollableWrap.clientHeight
+            }, {
+              duration: 200,
+              always: function () {
+                curAnimation = false;
+                updateScroller();
+              }
+            });
+            updateScroller();
+          } else {
             $(scrollableWrap).removeClass('im_history_to_bottom');
             $(scrollable).css({bottom: ''});
-            // updateSizes(true);
-            $(historyWrap).nanoScroller({scrollBottom: 0});
-            // scrollableWrap.scrollTop = st;
-            // $(scrollableWrap).animate({
-            //   scrollTop: scrollableWrap.scrollHeight - scrollableWrap.clientHeight
-            // }, 200);
-            updateScroller();
-          });
-        }
+            scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
+            $(historyWrap).nanoScroller();
+          }
+
+        });
       });
 
       scope.$on('ui_history_change', function () {
@@ -141,9 +160,8 @@ angular.module('myApp.directives', ['myApp.filters'])
           $(scrollableWrap).removeClass('im_history_to_bottom');
           $(scrollable).css({bottom: ''});
           updateSizes();
-          $(historyWrap).nanoScroller();
-          $(historyWrap).nanoScroller({scrollBottom: 0});
-          updateScroller(100);
+          scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
+          updateScroller();
           moreNotified = false;
         });
       });
@@ -160,17 +178,21 @@ angular.module('myApp.directives', ['myApp.filters'])
         onContentLoaded(function () {
           $(scrollableWrap).removeClass('im_history_to_bottom');
           $(scrollable).css({bottom: ''});
-          $(historyWrap).nanoScroller();
-          $(historyWrap).nanoScroller({scrollTop: st + scrollableWrap.scrollHeight - sh});
+          scrollableWrap.scrollTop = st + scrollableWrap.scrollHeight - sh;
 
-          // updateScroller();
-          updateScroller(50);
+          updateScroller();
           moreNotified = false;
         });
       });
 
       var atBottom = true;
       $(scrollableWrap).on('scroll', function (e) {
+        if ($(scrollableWrap).hasClass('im_history_to_bottom')) {
+          return cancelEvent(e);
+        }
+        if (curAnimation) {
+          return;
+        }
         atBottom = scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight;
 
         if (!moreNotified && scrollableWrap.scrollTop <= 300) {
@@ -190,7 +212,9 @@ angular.module('myApp.directives', ['myApp.filters'])
         if (heightOnly) return;
         if (atBottom) {
           onContentLoaded(function () {
-            $(historyWrap).nanoScroller({scroll: 'bottom'});
+            scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
+            updateScroller();
+            // $(historyWrap).nanoScroller({scroll: 'bottom'});
           });
         }
         updateScroller(100);
@@ -252,7 +276,6 @@ angular.module('myApp.directives', ['myApp.filters'])
 
         if (submit) {
           $(element).trigger('submit');
-          // dLog('after submit');
           return cancelEvent(e);
         }
       });
@@ -270,7 +293,10 @@ angular.module('myApp.directives', ['myApp.filters'])
 
       $('body').on('dragenter dragleave dragover drop', onDragDropEvent);
 
-      scope.$on('ui_peer_change ui_history_change ui_message_send', focusField);
+      scope.$on('ui_peer_change', focusField);
+      scope.$on('ui_history_change', focusField);
+      scope.$on('ui_message_send', focusField);
+
       scope.$on('$destroy', function cleanup() {
         $('body').off('dragenter dragleave dragover drop', onDragDropEvent);
       });
@@ -333,6 +359,7 @@ angular.module('myApp.directives', ['myApp.filters'])
     };
 
     function link (scope, element, attrs) {
+      element.src = 'img/blank.gif';
       scope.$watch('thumb.location', function (newVal) {
         if (!scope.thumb || !scope.thumb.location) {
           element.attr('src', scope.thumb && scope.thumb.placeholder || '');

app/js/filters.js

@@ -82,7 +82,8 @@ angular.module('myApp.filters', [])
 
   .filter('phoneNumber', [function() {
     return function (phoneRaw) {
-      if (phoneRaw.charAt(0) == '7') {
+      phoneRaw = (phoneRaw || '').replace(/\D/g, '');
+      if (phoneRaw.charAt(0) == '7' && phoneRaw.length == 11) {
         return '+' + phoneRaw.charAt(0) + ' (' + phoneRaw.substr(1, 3) + ') ' + phoneRaw.substr(4, 3) + '-' + phoneRaw.substr(7, 2) + '-' + phoneRaw.substr(9, 2);
       }
       return '+' + phoneRaw;
@@ -91,7 +92,31 @@ angular.module('myApp.filters', [])
 
   .filter('formatSize', [function () {
     return function (size) {
-      return Math.round(size / 1024) + 'Kb';
+      if (!size) {
+        return '0';
+      }
+      else if (size < 1024) {
+        return size + ' b';
+      }
+      else if (size < 1048576) {
+        return (Math.round(size / 1024 * 10) / 10) + ' Kb';
+      }
+
+      return (Math.round(size / 1048576 * 100) / 100) + ' Mb';
+    }
+  }])
+
+  .filter('formatSizeProgress', ['$filter', function ($filter) {
+    return function (progress) {
+      var done = $filter('formatSize')(progress.done),
+          doneParts = done.split(' '),
+          total = $filter('formatSize')(progress.total),
+          totalParts = total.split(' ');
+
+      if (totalParts[1] === doneParts[1]) {
+        return doneParts[0] + ' of ' + totalParts[0] + ' ' + (doneParts[1] || '');
+      }
+      return done + ' of ' + total;
     }
   }])
 

app/js/services.js

@@ -710,7 +710,7 @@ angular.module('myApp.services', [])
         type: isPhoto ? 'photo' : 'doc',
         file_name: file.name,
         size: file.size,
-        progress: {percent: 1}
+        progress: {percent: 1, total: file.size}
       };
 
       var message = {
@@ -764,8 +764,10 @@ angular.module('myApp.services', [])
           var historyMessage = messagesForHistory[messageID],
               percent = Math.max(1, Math.floor(100 * progress.done / progress.total));
 
+          media.progress.done = progress.done;
           media.progress.percent = percent;
           if (historyMessage) {
+            historyMessage.media.progress.done = progress.done;
             historyMessage.media.progress.percent = percent;
             $rootScope.$broadcast('history_update', {peerID: peerID});
           }
@@ -879,6 +881,10 @@ angular.module('myApp.services', [])
     message.fromUser = AppUsersManager.getUser(message.from_id);
     message.fromPhoto = AppUsersManager.getUserPhoto(message.from_id, 'User');
 
+    if (message._ == 'messageForwarded') {
+      message.fwdUser = AppUsersManager.getUser(message.fwd_from_id);
+    }
+
     if (message.media) {
       switch (message.media._) {
         case 'messageMediaPhoto':
@@ -1383,10 +1389,11 @@ angular.module('myApp.services', [])
           access_hash: accessHash || doc.access_hash
         };
 
-    historyDoc.progress = {enabled: true, percent: 1};
+    historyDoc.progress = {enabled: true, percent: 1, total: doc.size};
 
     function updateDownloadProgress (progress) {
       dLog('dl progress', progress);
+      historyDoc.progress.done = progress.done;
       historyDoc.progress.percent = Math.max(1, Math.floor(100 * progress.done / progress.total));
       $rootScope.$broadcast('history_update');
     }
@@ -1927,11 +1934,14 @@ angular.module('myApp.services', [])
 
   function notificationsClear() {
     angular.forEach(notificationsShown, function (notification) {
-      notification.close();
+      try {
+        if (notification.close) {
+          notification.close()
+        } else if (notification.cancel) {
+          notification.cancel();
+        }
+      } catch (e) {}
     });
     notificationsShown = [];
   }
 })
-
-
-

app/partials/chat_modal.html

@@ -19,7 +19,7 @@
         </ng-pluralize>
       </p>
 
-      <button class="btn btn-link chat_modal_invite_btn">Add member</button>
+      <!--button class="btn btn-link chat_modal_invite_btn">Add member</button-->
     </div>
 
     <h5 class="chat_modal_members_header">Members</h5>
@@ -28,9 +28,11 @@
       <div class="chat_modal_participant_wrap clearfix" ng-repeat="participant in chatFull.participants.participants">
         <a ng-click="openUser(participant.user_id)" class="chat_modal_participant_photo pull-left">
           <img class="chat_modal_participant_photo" my-load-thumb thumb="participant.userPhoto"/>
+          <i class="icon modal_participant_online" ng-show="participant.user.status._ == 'userStatusOnline'"></i>
         </a>
-        <div class="chat_modal_participant_name">{{participant.user | userName}}</div>
-        <!--div class="chat_modal_participant_desc">invited by {{participant.inviter | userName}} {{participant.date | dateOrTime}}</div-->
+        <div class="chat_modal_participant_name">
+          <a ng-click="openUser(participant.user.id)" ng-bind-html="participant.user.rFullName"></a>
+        </div>
         <div class="chat_modal_participant_status">{{participant.user | userStatus}}</div>
       </div>
 

app/partials/dialog.html

@@ -10,7 +10,7 @@
   </div>
 
   <div class="im_dialog_photo pull-left">
-   <img class="im_dialog_photo" my-load-thumb thumb="dialogMessage.peerPhoto" aaa="{{dialogMessage.peerPhoto.location}}" />
+   <img class="im_dialog_photo" src="img/blank.gif" my-load-thumb thumb="dialogMessage.peerPhoto" aaa="{{dialogMessage.peerPhoto.location}}" />
   </div>
 
   <div class="im_dialog_message_wrap">
@@ -58,11 +58,23 @@
         <span ng-switch-when="messageActionChatDeletePhoto">
           removed group photo
         </span>
+
         <span ng-switch-when="messageActionChatAddUser">
-          invited <span ng-bind-html="dialogMessage.action.user.rFullName"></span>
+          <span ng-if="dialogMessage.from_id != dialogMessage.action.user_id">
+            invited <span ng-bind-html="dialogMessage.action.user.rFullName"></span>
+          </span>
+          <span ng-if="dialogMessage.from_id == dialogMessage.action.user_id">
+            returned to group
+          </span>
         </span>
+
         <span ng-switch-when="messageActionChatDeleteUser">
-          kicked <span ng-bind-html="dialogMessage.action.user.rFullName"></span>
+          <span ng-if="dialogMessage.from_id != dialogMessage.action.user_id">
+            kicked <span ng-bind-html="dialogMessage.action.user.rFullName"></span>
+          </span>
+          <span ng-if="dialogMessage.from_id == dialogMessage.action.user_id">
+            left group
+          </span>
         </span>
       </span>
 

app/partials/head.html

@@ -2,16 +2,14 @@
   <div class="navbar navbar-static-top  navbar-inverse" role="navigation">
     <div class="container">
       <div class="navbar-header">
-        <a class="navbar-brand" href="http://zhukov.github.io/webogram"><img src="img/Logo_2x.png" class="tg_head_logo" alt="Telegram logo" width="110" height="31" /> <span class="navbar-brand-alpha font-light">alpha</span></a>
-
+        <a class="navbar-brand" href="http://zhukov.github.io/webogram"><img src="img/Logo_2x.png" class="tg_head_logo" alt="Telegram logo" width="110" height="31" /></a>
       </div>
       <div class="navbar-collapse collapse">
-        <!-- <ul class="nav navbar-nav"></ul> -->
         <ul class="nav navbar-nav navbar-right">
           <li><a  href="https://github.com/zhukov/webogram" target="_blank">About</a></li>
           <li ng-if="isLoggedIn"><a href="" ng-click="logOut()">Log out</a></li>
         </ul>
-      </div><!--/.nav-collapse -->
+      </div>
     </div>
   </div>
 </div>

app/partials/im.html

@@ -30,9 +30,9 @@
             <div class="im_history_panel clearfix" ng-controller="AppImPanelController">
               <div class="im_history_panel_title">
 
-                <div ng-if="historyPeer.id < 0">
+                <div ng-if="historyPeer.id < 0" ng-click="openChat(-historyPeer.id)">
                   <h4>
-                    <!-- <a class="im_history_panel_info_link pull-right" ng-click="openChat(-historyPeer.id)">Info</a> -->
+                    <a class="im_history_panel_info_link pull-right" ng-click="openChat(-historyPeer.id)">Info</a>
                     <span ng-bind-html="historyPeer.data.rTitle"></span>
                     <small class="im_chat_users">
                       <ng-pluralize count="historyPeer.data.participants_count"
@@ -42,9 +42,9 @@
                   </h4>
                 </div>
 
-                <div ng-if="historyPeer.id > 0">
+                <div ng-if="historyPeer.id > 0" ng-click="openUser(historyPeer.id)">
                   <h4>
-                    <!-- <a class="im_history_panel_info_link pull-right" ng-click="openUser(historyPeer.id)">Info</a> -->
+                    <a class="im_history_panel_info_link pull-right" ng-click="openUser(historyPeer.id)">Info</a>
                     <span ng-bind-html="historyPeer.data.rFullName"></span>
                     <small class="im_peer_online">{{historyPeer.data | userStatus}}</small>
                   </h4>
@@ -80,14 +80,14 @@
 
           <div class="im_send_form_wrap clearfix" ng-controller="AppImSendController">
             <div class="pull-right im_panel_peer_photo" ng-click="openUser(historyPeer.id)" ng-if="historyPeer.id > 0">
-              <img class="im_panel_peer_photo" my-load-thumb thumb="historyPeer.photo" />
+              <img class="im_panel_peer_photo" src="img/blank.gif" my-load-thumb thumb="historyPeer.photo" />
               <i class="icon im_panel_peer_online" ng-show="historyPeer.data.status._ == 'userStatusOnline'"></i>
             </div>
             <div class="pull-right im_panel_peer_photo" ng-click="openChat(-historyPeer.id)" ng-if="historyPeer.id < 0">
-              <img class="im_panel_peer_photo" my-load-thumb thumb="historyPeer.photo" />
+              <img class="im_panel_peer_photo" src="img/blank.gif" my-load-thumb thumb="historyPeer.photo" />
             </div>
             <div class="pull-left im_panel_own_photo">
-              <img class="im_panel_own_photo" my-load-thumb thumb="ownPhoto" />
+              <img class="im_panel_own_photo" src="img/blank.gif" my-load-thumb thumb="ownPhoto" />
             </div>
             <form my-send-form draft-message="draftMessage" class="im_send_form" ng-submit="sendMessage($event)">
               <div class="im_send_dropbox_wrap"> Drop photos here to send </div>
@@ -116,3 +116,7 @@
 
 </div>
 
+<div class="im_page_footer font-light">
+  <a class="im_page_footer_brand" target="_blank" href="https://github.com/zhukov/webogram">Telegram alpha</a> by izhukov &amp; toberg
+</div>
+

app/partials/message.html

@@ -19,10 +19,20 @@
           removed group photo
         </span>
         <span ng-switch-when="messageActionChatAddUser">
-          invited <a ng-click="openUser(historyMessage.action.user_id)" ng-bind-html="historyMessage.action.user.rFullName"></a>
+          <span ng-if="historyMessage.from_id != historyMessage.action.user_id">
+            invited <a ng-click="openUser(historyMessage.action.user_id)" ng-bind-html="historyMessage.action.user.rFullName"></a>
+          </span>
+          <span ng-if="historyMessage.from_id == historyMessage.action.user_id">
+            returned to group
+          </span>
         </span>
         <span ng-switch-when="messageActionChatDeleteUser">
-          kicked <a ng-click="openUser(historyMessage.action.user_id)" ng-bind-html="historyMessage.action.user.rFullName"></a>
+          <span ng-if="historyMessage.from_id != historyMessage.action.user_id">
+            kicked <a ng-click="openUser(historyMessage.action.user_id)" ng-bind-html="historyMessage.action.user.rFullName"></a>
+          </span>
+          <span ng-if="historyMessage.from_id == historyMessage.action.user_id">
+            left group
+          </span>
         </span>
 
         <span ng-switch-default>
@@ -33,7 +43,7 @@
     </div>
 
     <a ng-if="historyMessage.action._ == 'messageActionChatEditPhoto'" class="im_service_message_photo_thumb"  href="" ng-click="openPhoto(historyMessage.action.photo.id)">
-      <img class="im_service_message_photo_thumb" my-load-thumb thumb="historyMessage.action.photo.thumb" width="{{historyMessage.action.photo.thumb.width}}" height="{{historyMessage.action.photo.thumb.height}}" />
+      <img class="im_service_message_photo_thumb" src="img/blank.gif" my-load-thumb thumb="historyMessage.action.photo.thumb" width="{{historyMessage.action.photo.thumb.width}}" height="{{historyMessage.action.photo.thumb.height}}" />
     </a>
 
   </div>
@@ -42,7 +52,7 @@
     <i class="icon-message-status" ng-class="{'icon-message-status-unread': historyMessage.unread, 'icon-message-status-pending': historyMessage.pending}"></i>
 
     <a ng-click="openUser(historyMessage.from_id)" class="im_message_from_photo pull-left">
-      <img class="im_message_from_photo" my-load-thumb thumb="historyMessage.fromPhoto"/>
+      <img class="im_message_from_photo" src="img/blank.gif" my-load-thumb thumb="historyMessage.fromPhoto"/>
     </a>
     <div class="im_message_meta pull-right text-right">
       <i ng-if="historyMessage.out" class="icon icon-message-status-tick" ng-class="{'message-status-delivered-tick': true, 'message-status-unread-tick': historyMessage.unread}"></i>
@@ -53,31 +63,45 @@
 
       <a class="im_message_author" ng-click="openUser(historyMessage.from_id)" ng-bind-html="historyMessage.fromUser.rFirstName"></a>
 
+
+      <div class="im_message_fwd_header" ng-if="historyMessage._ == 'messageForwarded'">
+        Forwarded message from <a class="im_message_fwd_author" ng-click="openUser(historyMessage.fwd_from_id)" ng-bind-html="historyMessage.fwdUser.rFirstName"></a>, <span class="im_message_fwd_date">{{historyMessage.fwd_date | dateOrTime}}</span>
+      </div>
+
       <div class="im_message_media" ng-if="historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty'" ng-switch="historyMessage.media._">
 
         <a ng-switch-when="messageMediaPhoto" class="im_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.media.photo.id)" >
-          <img class="im_message_photo_thumb" my-load-thumb thumb="historyMessage.media.photo.thumb" width="{{historyMessage.media.photo.thumb.width}}" height="{{historyMessage.media.photo.thumb.height}}" />
+          <img class="im_message_photo_thumb" src="img/blank.gif" my-load-thumb thumb="historyMessage.media.photo.thumb" width="{{historyMessage.media.photo.thumb.width}}" height="{{historyMessage.media.photo.thumb.height}}" />
         </a>
 
         <a ng-switch-when="messageMediaVideo" class="im_message_video_thumb" href="" ng-click="openVideo(historyMessage.media.video.id)">
-          <img class="im_message_video_thumb" my-load-thumb thumb="historyMessage.media.video.thumb" width="{{historyMessage.media.video.thumb.width}}" height="{{historyMessage.media.video.thumb.height}}" />
+          <img class="im_message_video_thumb" src="img/blank.gif" my-load-thumb thumb="historyMessage.media.video.thumb" width="{{historyMessage.media.video.thumb.width}}" height="{{historyMessage.media.video.thumb.height}}" />
           <div class="im_message_video_duration_wrap" style="width: {{historyMessage.media.video.thumb.width}}px;">
             <span class="im_message_video_duration pull-right">{{historyMessage.media.video.duration | duration}}</span>
             <span class="glyphicon glyphicon-facetime-video"></span>
           </div>
         </a>
 
-        <div ng-switch-when="messageMediaDocument">
-          <a class="im_message_document" href="" ng-click="openDoc(historyMessage.media.document.id)">
-            <div class="im_message_document_size">{{historyMessage.media.document.size | formatSize}}</div>
-            <i class="icon icon-document"></i>
-            <div class="im_message_document_name">{{historyMessage.media.document.file_name}}</div>
-          </a>
-
-          <div class="im_message_download_progress_wrap" ng-if="historyMessage.media.document.progress.enabled">
-            <div class="progress tg_down_progress">
-              <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.document.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.document.progress.percent}}%">
-                <span class="sr-only">{{historyMessage.media.document.progress.percent}}% Complete (success)</span>
+        <div ng-switch-when="messageMediaDocument" class="im_message_document">
+          <i class="icon icon-document"></i>
+          <div class="im_message_document_info">
+            <div class="im_message_document_name_wrap">
+              <span class="im_message_document_name">{{historyMessage.media.document.file_name}}</span>
+              <span class="im_message_document_size" ng-if="!historyMessage.media.document.progress.enabled">
+                {{historyMessage.media.document.size | formatSize}}
+              </span>
+              <span class="im_message_document_size" ng-if="historyMessage.media.document.progress.enabled">
+                {{historyMessage.media.document.progress | formatSizeProgress}}
+              </span>
+            </div>
+            <div class="im_message_document_actions" ng-if="!historyMessage.media.document.progress.enabled">
+              <a href="" ng-click="openDoc(historyMessage.media.document.id)">Download</a>
+            </div>
+            <div class="im_message_download_progress_wrap" ng-if="historyMessage.media.document.progress.enabled">
+              <div class="progress tg_down_progress">
+                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.document.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.document.progress.percent}}%">
+                  <span class="sr-only">{{historyMessage.media.document.progress.percent}}% Complete (success)</span>
+                </div>
               </div>
             </div>
           </div>
@@ -89,21 +113,26 @@
 
         <div ng-switch-when="messageMediaContact">
           <a ng-click="openUser(historyMessage.media.user.id)" class="im_message_contact_photo pull-left" ng-if="historyMessage.media.user">
-            <img class="im_message_contact_photo" my-load-thumb thumb="historyMessage.media.userPhoto"/>
+            <img class="im_message_contact_photo" src="img/blank.gif" my-load-thumb thumb="historyMessage.media.userPhoto"/>
           </a>
           <div class="im_message_contact_name"><span class="glyphicon glyphicon-user"></span> {{historyMessage.media.first_name}} {{historyMessage.media.last_name}}</div>
           <div class="im_message_contact_phone">{{historyMessage.media.phone_number}}</div>
         </div>
 
         <div ng-switch-when="messageMediaPending" class="im_message_upload_file im_message_upload_{{historyMessage.media.type}}">
-          <div class="im_message_document_size">{{historyMessage.media.size | formatSize}}</div>
           <i class="icon icon-document"></i>
-          <div class="im_message_document_name">{{historyMessage.media.file_name}}</div>
-
-          <div class="im_message_upload_progress_wrap">
-            <div class="progress tg_up_progress">
-              <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.progress.percent}}%">
-                <span class="sr-only">{{historyMessage.media.progress.percent}}% Complete (success)</span>
+          <div class="im_message_document_info">
+            <div class="im_message_document_name_wrap">
+              <span class="im_message_document_name">{{historyMessage.media.file_name}}</span>
+              <span class="im_message_document_size" ng-if="historyMessage.media.progress">
+                {{historyMessage.media.progress | formatSizeProgress}}
+              </span>
+            </div>
+            <div class="im_message_download_progress_wrap">
+              <div class="progress tg_down_progress">
+                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.progress.percent}}%">
+                  <span class="sr-only">{{historyMessage.media.progress.percent}}% Complete (success)</span>
+                </div>
               </div>
             </div>
           </div>