Mass edit draft

app/css/app.css

@@ -109,9 +109,9 @@ fieldset[disabled] .btn-tg.active {
   border-color: #999;
 }
 
-/*.tg_page_head .navbar {
+.tg_page_head .navbar {
-  min-height: 42px;
+  min-height: 44px;
-}*/
+}
 .tg_page_head .container {
   display: block;
   width: auto;
@@ -128,8 +128,7 @@ fieldset[disabled] .btn-tg.active {
   margin: 0;
 }
 .tg_page_head .navbar > .container .navbar-brand {
-  padding: 12px 15px;
+  padding: 9px 15px;
-  /*padding: 8px 15px;*/
   opacity: 0.9;
   margin-left: 0;
   margin-right: 20px;
@@ -195,8 +194,8 @@ fieldset[disabled] .btn-tg.active {
 }
 
 .tg_page_head .navbar-inverse .navbar-nav > li > a {
-  /*padding-top: 11px;
+  padding-top: 12px;
-  padding-bottom: 11px;*/
+  padding-bottom: 12px;
   color: #b9cfe3;
   font-size: 13px;
 }
@@ -648,16 +647,13 @@ a.im_dialog:hover .im_dialog_date {
 
 /* IM history */
 .im_history_col {
-  padding: 0 8px 0 15px;
 }
 
 .im_history_col .nano > .pane {
   background : rgba(3,36,64,0.08);
-  /*background: #E9EBED;*/
   width      : 9px;
   top: 10px;
-  /*margin-top: 10px;*/
+  right: 8px;
-  /*bottom: */
   -webkit-transition    : .2s;
   -moz-transition       : .2s;
   -o-transition         : .2s;
@@ -668,7 +664,6 @@ a.im_dialog:hover .im_dialog_date {
 }
 .im_history_col .nano > .pane > .slider {
   background : rgba(3,46,79,0.22);
-  /*background: #B3BFC7;*/
   margin: 0;
   -moz-border-radius    : 2px;
   -webkit-border-radius : 2px;
@@ -676,12 +671,12 @@ a.im_dialog:hover .im_dialog_date {
 }
 
 .im_history_panel_wrap {
+  margin: 0 23px 0 15px;
   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);
   box-shadow:         0px 2px 0px rgba(0, 0, 0, 0.12);
-  margin-right: 15px;
 
   position: relative;
   z-index: 2;
@@ -728,9 +723,10 @@ a.im_dialog:hover .im_dialog_date {
   width: 100%;
 }
 .im_history {
-  padding: 20px 0 0 3px;
+  /*padding: 20px 0 0 3px;*/
-  max-width: 500px;
+  padding: 20px 0 0 0;
-  margin: 0 auto;
+  /*max-width: 500px;*/
+  /*margin: 0 auto;*/
   position: relative;
 }
 
@@ -1130,7 +1126,7 @@ span.emoji {
 .im_send_panel_wrap {
   max-width: 526px;
   margin: 0 auto;
-  padding: 10px 12px 22px 0;
+  padding: 10px 20px 22px 15px;
 }
 .im_send_form_wrap {
   position: relative;
@@ -1631,21 +1627,9 @@ img.img_fullsize {
 }
 
 @media (max-height: 480px) {
-  .navbar {
-    min-height: 40px;
-  }
-  .tg_page_head .navbar > .container .navbar-brand {
-    padding: 7px 15px;
-    display: block;
-  }
-  .navbar-nav > li > a,
-  .tg_page_head .navbar-quick-nav a  {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
   .navbar-toggle {
-    margin-top: 2px;
+    margin-top: 4px;
-    margin-bottom: 2px;
+    margin-bottom: 4px;
   }
   .im_page_footer {
     display: none;
@@ -1870,3 +1854,108 @@ img.img_fullsize {
   margin-right: 10px;
   overflow: hidden;
 }
+
+
+/* Messages edit panel */
+.im_edit_panel_wrap {
+  border-top: 1px solid #EEE;
+  padding: 5px 5px;
+}
+.im_panel_to_top .im_edit_panel_wrap {
+  background: #FFF;
+  position: absolute;
+  /*width: 652px;*/
+  width: 100%;
+}
+.im_edit_delete_link,
+.im_edit_cancel_link {
+  display: block;
+  padding: 8px 17px;
+}
+.im_edit_cancel_link {
+  float: left;
+}
+.im_edit_delete_link {
+  float: right;
+}
+
+.im_edit_delete_link:hover,
+.im_edit_cancel_link:hover {
+  background: #f2f6fa;
+  text-decoration: none;
+}
+.im_edit_delete_link {
+  line-height: 0;
+}
+
+.im_edit_panel_title {
+  text-align: center;
+  margin: 0;
+  font-size: 14px;
+  line-height: 34px;
+}
+
+.icon-delete {
+  display: inline-block;
+  width: 12px;
+  height: 15px;
+
+  background: url(../img/icons/IconsetW.png?1) -15px -319px no-repeat;
+  background-size: 42px 460px;
+}
+.is_1x .icon-delete {
+  background-image: url(../img/icons/IconsetW_1x.png?2);
+}
+
+.im_message_date:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.im_message_selected {
+  background: #f2f6fa;
+}
+.im_history_selectable .im_message_outer_wrap {
+  cursor: pointer;
+}
+.im_history_selectable .im_message_outer_wrap:hover {
+  background: #f2f6fa;
+}
+.im_message_selected .im_message_date,
+.im_history_selectable .im_message_outer_wrap:hover .im_message_date {
+  color: #91a6ba;
+}
+
+.im_history_selectable .im_message_date:hover {
+  text-decoration: none;
+}
+
+.im_message_wrap {
+  max-width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.icon-select-tick {
+  display: none;
+  position: absolute;
+  width: 17px;
+  height: 15px;
+  margin: 10px 0 0 -75px;
+  background: url(../img/icons/IconsetW.png?1) -13px -344px no-repeat;
+  background-size: 42px 460px;
+}
+.is_1x .icon-select-tick {
+  background-image: url(../img/icons/IconsetW_1x.png?2);
+}
+.im_history_selectable .icon-select-tick {
+  display: inline-block;
+}
+
+.im_message_selected .icon-select-tick,
+.im_history_selectable .im_message_outer_wrap:hover .icon-select-tick {
+  background-position: -13px -367px;
+  opacity: 0.6;
+}
+.im_message_selected .icon-select-tick {
+  opacity: 1 !important;
+}

app/js/controllers.js

@@ -311,7 +311,8 @@ angular.module('myApp.controllers', [])
     $scope.selectedMsgs = {};
     $scope.selectedCount = 0;
     $scope.selectActions = false;
-    // $scope.toggleMessage = toggleMessage;
+    $scope.toggleMessage = toggleMessage;
+    $scope.selectedCancel = selectedCancel;
     $scope.typing = {};
     $scope.state = {};
 
@@ -424,21 +425,34 @@ angular.module('myApp.controllers', [])
       $scope.$broadcast('ui_history_change');
     }
 
-    function toggleMessage (messageID) {
+    function toggleMessage (messageID, target) {
-      console.log('toggle', messageID);
+      if (!$scope.selectActions && !$(target).hasClass('im_message_date') && !$(target).hasClass('im_message_meta')) {
+        return false;
+      }
       if ($scope.selectedMsgs[messageID]) {
-        delete $scope.selectedMsgs;
+        delete $scope.selectedMsgs[messageID];
         $scope.selectedCount--;
         if (!$scope.selectedCount) {
           $scope.selectActions = false;
+          $scope.$broadcast('ui_panel_update');
         }
       } else {
         $scope.selectedMsgs[messageID] = true;
         $scope.selectedCount++;
-        $scope.selectActions = true;
+        if (!$scope.selectActions) {
+          $scope.selectActions = true;
+          $scope.$broadcast('ui_panel_update');
+        }
       }
     }
 
+    function selectedCancel () {
+      $scope.selectedMsgs = {};
+      $scope.selectedCount = 0;
+      $scope.selectActions = false;
+      $scope.$broadcast('ui_panel_update');
+    }
+
 
     var typingTimeouts = {};
 

app/js/directives.js

@@ -203,6 +203,19 @@ angular.module('myApp.directives', ['myApp.filters'])
         });
       });
 
+      scope.$on('ui_panel_update', function () {
+        element.addClass('im_panel_to_top');
+        onContentLoaded(function () {
+          element.removeClass('im_panel_to_top');
+          updateSizes(true);
+
+          if (atBottom) {
+            scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
+            updateScroller();
+          }
+        });
+      });
+
       scope.$on('ui_editor_resize', updateSizes);
 
       var atBottom = true;

app/partials/im.html

@@ -55,9 +55,9 @@
 
             </div>
 
-            <div class="im_edit_panel_wrap" ng-if="selectActions">
+            <div class="im_edit_panel_wrap clearfix" ng-if="selectActions">
-              <a ng-click="selectedDelete()"><i class="icon icon-delete"></i></a>
+              <a class="im_edit_delete_link" ng-click="selectedDelete()"><i class="icon icon-delete"></i></a>
-              <a ng-click="selectedCancel()">Cancel</a>
+              <a class="im_edit_cancel_link" ng-click="selectedCancel()">Cancel</a>
               <h4 class="im_edit_panel_title">
                 <ng-pluralize count="selectedCount"
                                  when="{'0': 'No messages', 'one': '1 message', 'other': '{} messages'}">
@@ -74,7 +74,7 @@
 
               <div class="im_history_scrollable">
 
-                  <div class="im_history">
+                  <div class="im_history" ng-class="{im_history_selectable: selectActions}">
                     <div class="im_history_message_wrap" my-message ng-repeat="historyMessage in history"></div>
                   </div>
 

app/partials/message.html

@@ -1,232 +1,240 @@
-<div class="im_message_wrap clearfix" ng-class="{im_message_out: historyMessage.out}">
+<div class="im_message_outer_wrap" ng-class="{im_message_selected: selectedMsgs[historyMessage.id]}" ng-click="toggleMessage(historyMessage.id, $event.target)">
 
-  <div class="im_service_message_wrap" ng-if="historyMessage._ == 'messageService'">
-    <div class="im_service_message">
 
-      <a ng-click="openUser(historyMessage.from_id)" class="im_message_author" ng-bind-html="historyMessage.fromUser.rFirstName"></a>
+  <div class="im_message_wrap clearfix">
 
-      <span class="im_message_service" ng-switch="historyMessage.action['_']">
+    <div class="im_service_message_wrap" ng-if="historyMessage._ == 'messageService'">
-        <span ng-switch-when="messageActionChatCreate">
+      <div class="im_service_message">
-          created the group &laquo;<strong>{{historyMessage.action.title}}</strong>&raquo;
+
-        </span>
+        <a ng-click="openUser(historyMessage.from_id)" class="im_message_author" ng-bind-html="historyMessage.fromUser.rFirstName"></a>
-        <span ng-switch-when="messageActionChatEditTitle">
+
-          changed group name to  &laquo;<strong>{{historyMessage.action.title}}</strong>&raquo;
+        <span class="im_message_service" ng-switch="historyMessage.action['_']">
-        </span>
+          <span ng-switch-when="messageActionChatCreate">
-        <span ng-switch-when="messageActionChatEditPhoto">
+            created the group &laquo;<strong>{{historyMessage.action.title}}</strong>&raquo;
-          changed group photo
-        </span>
-        <span ng-switch-when="messageActionChatDeletePhoto">
-          removed group photo
-        </span>
-        <span ng-switch-when="messageActionChatAddUser">
-          <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">
+          <span ng-switch-when="messageActionChatEditTitle">
-            returned to group
+            changed group name to  &laquo;<strong>{{historyMessage.action.title}}</strong>&raquo;
           </span>
-        </span>
+          <span ng-switch-when="messageActionChatEditPhoto">
-        <span ng-switch-when="messageActionChatDeleteUser">
+            changed group photo
-          <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">
+          <span ng-switch-when="messageActionChatDeletePhoto">
-            left group
+            removed group photo
+          </span>
+          <span ng-switch-when="messageActionChatAddUser">
+            <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">
+            <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>
+            unsupported action {{historyMessage.action}}
           </span>
         </span>
 
-        <span ng-switch-default>
-          unsupported action {{historyMessage.action}}
-        </span>
-      </span>
-
-    </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}}"
-      />
-    </a>
-
-  </div>
-
-  <div class="im_content_message_wrap" ng-if="historyMessage._ != 'messageService'">
-    <a ng-click="historyMessage.send()" ng-if="historyMessage.error">
-      <i class="icon-message-status icon-message-status-error" tooltip="Try again"></i>
-    </a>
-    <i class="icon-message-status" ng-class="{'icon-message-status-unread': historyMessage.unread, 'icon-message-status-pending': historyMessage.pending}" ng-if="!historyMessage.error"></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"
-      />
-    </a>
-    <div class="im_message_meta pull-right text-right">
-      <span ng-click="toggleMessage(historyMessage.id)" class="im_message_date">{{historyMessage.date | dateOrTime}}</span>
-    </div>
-
-    <div class="im_message_body">
-
-      <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-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}}"
+        />
+      </a>
 
-        <a ng-switch-when="messageMediaPhoto" class="im_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.media.photo.id)" style="width: {{historyMessage.media.photo.thumb.width}}px;">
+    </div>
-          <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}}"
-          />
-        </a>
 
-        <a ng-switch-when="messageMediaVideo" class="im_message_video_thumb" href="" ng-click="openVideo(historyMessage.media.video.id)" style="width: {{historyMessage.media.video.thumb.width}}px;">
+    <div class="im_content_message_wrap" ng-if="historyMessage._ != 'messageService'">
-          <img
+      <i class="icon icon-select-tick"></i>
-            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}}"
-          />
-          <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" class="im_message_document">
+      <a ng-click="historyMessage.send()" ng-if="historyMessage.error">
-          <a href="" ng-click="openDoc(historyMessage.media.document.id)" ng-if="!historyMessage.media.document.progress.enabled">
+        <i class="icon-message-status icon-message-status-error" tooltip="Try again"></i>
-            <i class="icon icon-document"></i>
+      </a>
-          </a>
+      <i class="icon-message-status" ng-class="{'icon-message-status-unread': historyMessage.unread, 'icon-message-status-pending': historyMessage.pending}" ng-if="!historyMessage.error"></i>
-          <i class="icon icon-document" ng-if="historyMessage.media.document.progress.enabled"></i>
 
-          <div class="im_message_document_info">
+      <a ng-click="openUser(historyMessage.from_id)" class="im_message_from_photo pull-left">
-            <div class="im_message_document_name_wrap">
+        <img
-              <span class="im_message_document_name">
+          class="im_message_from_photo"
-                {{historyMessage.media.document.file_name}}
+          my-load-thumb
-              </span>
+          thumb="historyMessage.fromPhoto"
-              <span class="im_message_document_size" ng-if="!historyMessage.media.document.progress.enabled">
+        />
-                {{historyMessage.media.document.size | formatSize}}
+      </a>
-              </span>
+      <div class="im_message_meta pull-right text-right">
-              <span class="im_message_document_size" ng-if="historyMessage.media.document.progress.enabled">
+        <span class="im_message_date">{{historyMessage.date | dateOrTime}}</span>
-                {{historyMessage.media.document.progress | formatSizeProgress}}
+      </div>
-              </span>
+
-            </div>
+      <div class="im_message_body">
-            <div class="im_message_document_actions" ng-if="!historyMessage.media.document.progress.enabled">
+
-              <a href="" ng-click="openDoc(historyMessage.media.document.id)">Download</a>
+        <a class="im_message_author" ng-click="openUser(historyMessage.from_id)" ng-bind-html="historyMessage.fromUser.rFirstName"></a>
-            </div>
+
-            <div class="im_message_download_progress_wrap" ng-if="historyMessage.media.document.progress.enabled">
+
-              <div class="progress tg_down_progress">
+        <div class="im_message_fwd_header" ng-if="historyMessage._ == 'messageForwarded'">
-                <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}}%">
+          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>
-                  <span class="sr-only">
-                    {{historyMessage.media.document.progress.percent}}% Complete (success)
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
 
+        <div class="im_message_media" ng-if="historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty'" ng-switch="historyMessage.media._">
 
-        <div ng-switch-when="messageMediaAudio" class="im_message_document">
+          <a ng-switch-when="messageMediaPhoto" class="im_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.media.photo.id)" style="width: {{historyMessage.media.photo.thumb.width}}px;">
-          <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>
-          <i class="icon icon-audio" ng-if="historyMessage.media.audio.progress.enabled || historyMessage.media.audio.url"></i>
-
-          <div class="im_message_audio_info">
-            <div class="im_message_audio_name_wrap" ng-if="!historyMessage.media.audio.url">
-              <span class="im_message_audio_name">
-                Voice message
-              </span>
-              <span class="im_message_audio_duration" ng-if="!historyMessage.media.audio.progress.enabled">
-                {{historyMessage.media.audio.duration | duration}}
-              </span>
-              <span class="im_message_audio_size" ng-if="historyMessage.media.audio.progress.enabled">
-                {{historyMessage.media.audio.progress | formatSizeProgress}}
-              </span>
-            </div>
-            <div class="im_message_audio_actions" ng-if="!historyMessage.media.audio.progress.enabled &amp;&amp; !historyMessage.media.audio.url">
-              <a href="" ng-click="openAudio(historyMessage.media.audio.id)">Play</a>
-            </div>
-            <div class="im_message_download_progress_wrap" ng-if="historyMessage.media.audio.progress.enabled">
-              <div class="progress tg_down_progress">
-                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.audio.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.audio.progress.percent}}%">
-                  <span class="sr-only">
-                    {{historyMessage.media.audio.progress.percent}}% Complete (success)
-                  </span>
-                </div>
-              </div>
-            </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/mpeg" />
-                <embed hidden="true" autostart="true" loop="false" src="{{historyMessage.media.audio.url}}" />
-              </audio>
-            </div>
-          </div>
-        </div>
-
-        <a ng-switch-when="messageMediaGeo" my-map-point point="historyMessage.media.geo" class="im_message_geopoint">
-          <i class="icon icon-geo-point"></i>
-        </a>
-
-        <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"
+              class="im_message_photo_thumb"
               my-load-thumb
-              thumb="historyMessage.media.userPhoto"
+              thumb="historyMessage.media.photo.thumb"
+              width="{{historyMessage.media.photo.thumb.width}}"
+              height="{{historyMessage.media.photo.thumb.height}}"
             />
           </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}}">
+          <a ng-switch-when="messageMediaVideo" class="im_message_video_thumb" href="" ng-click="openVideo(historyMessage.media.video.id)" style="width: {{historyMessage.media.video.thumb.width}}px;">
-          <i class="icon icon-{{historyMessage.media.type}}"></i>
+            <img
-          <div class="im_message_document_info">
+              class="im_message_video_thumb"
-            <div class="im_message_document_name_wrap">
+              my-load-thumb
-              <span class="im_message_document_name">
+              thumb="historyMessage.media.video.thumb"
-                {{historyMessage.media.file_name}}
+              width="{{historyMessage.media.video.thumb.width}}"
-              </span>
+              height="{{historyMessage.media.video.thumb.height}}"
-              <span class="im_message_document_size" ng-if="historyMessage.media.progress">
+            />
-                {{historyMessage.media.progress | formatSizeProgress}}
+            <div class="im_message_video_duration_wrap" style="width: {{historyMessage.media.video.thumb.width}}px;">
-              </span>
+              <span class="im_message_video_duration pull-right">{{historyMessage.media.video.duration | duration}}</span>
+              <span class="glyphicon glyphicon-facetime-video"></span>
             </div>
-            <div class="im_message_download_progress_wrap">
+          </a>
-              <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}}%">
+          <div ng-switch-when="messageMediaDocument" class="im_message_document">
-                  <span class="sr-only">
+            <a href="" ng-click="openDoc(historyMessage.media.document.id)" ng-if="!historyMessage.media.document.progress.enabled">
-                    {{historyMessage.media.progress.percent}}% Complete (success)
+              <i class="icon icon-document"></i>
-                  </span>
+            </a>
+            <i class="icon icon-document" ng-if="historyMessage.media.document.progress.enabled"></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>
           </div>
+
+
+          <div ng-switch-when="messageMediaAudio" class="im_message_document">
+            <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>
+            <i class="icon icon-audio" ng-if="historyMessage.media.audio.progress.enabled || historyMessage.media.audio.url"></i>
+
+            <div class="im_message_audio_info">
+              <div class="im_message_audio_name_wrap" ng-if="!historyMessage.media.audio.url">
+                <span class="im_message_audio_name">
+                  Voice message
+                </span>
+                <span class="im_message_audio_duration" ng-if="!historyMessage.media.audio.progress.enabled">
+                  {{historyMessage.media.audio.duration | duration}}
+                </span>
+                <span class="im_message_audio_size" ng-if="historyMessage.media.audio.progress.enabled">
+                  {{historyMessage.media.audio.progress | formatSizeProgress}}
+                </span>
+              </div>
+              <div class="im_message_audio_actions" ng-if="!historyMessage.media.audio.progress.enabled &amp;&amp; !historyMessage.media.audio.url">
+                <a href="" ng-click="openAudio(historyMessage.media.audio.id)">Play</a>
+              </div>
+              <div class="im_message_download_progress_wrap" ng-if="historyMessage.media.audio.progress.enabled">
+                <div class="progress tg_down_progress">
+                  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.audio.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.audio.progress.percent}}%">
+                    <span class="sr-only">
+                      {{historyMessage.media.audio.progress.percent}}% Complete (success)
+                    </span>
+                  </div>
+                </div>
+              </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/mpeg" />
+                  <embed hidden="true" autostart="true" loop="false" src="{{historyMessage.media.audio.url}}" />
+                </audio>
+              </div>
+            </div>
+          </div>
+
+          <a ng-switch-when="messageMediaGeo" my-map-point point="historyMessage.media.geo" class="im_message_geopoint">
+            <i class="icon icon-geo-point"></i>
+          </a>
+
+          <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"
+              />
+            </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}}">
+            <i class="icon icon-{{historyMessage.media.type}}"></i>
+            <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>
+          </div>
+
+
         </div>
 
-
+        <div class="im_message_text" ng-if="historyMessage.message.length" ng-bind-html="historyMessage.richMessage"></div>
       </div>
 
-      <div class="im_message_text" ng-if="historyMessage.message.length" ng-bind-html="historyMessage.richMessage"></div>
     </div>
-
   </div>
+
 </div>
+

app/partials/welcome.html

@@ -8,7 +8,7 @@
   <div class="welcome_box_wrap">
     <div class="welcome_text">
       <p>Welcome to an unofficial web-client of mobile <strong>Telegram</strong> messenger.</p>
-      <p>Is in alpha, which means it is still not 200% secure and functional.</p>
+      <p>It is an alpha, which means it is still not 200% secure and functional.</p>
       <p>Visit <a target="_blank" href="https://telegram.org/">telegram.org</a> to learn more.</p>
     </div>
     <a href="#/login" class="btn btn-tg btn-block">Start Messaging</a>