Added media filters, mass edit messages

app/css/app.css

@@ -112,6 +112,10 @@ fieldset[disabled] .btn-tg.active {
 .tg_page_head .navbar {
   min-height: 44px;
 }
+.tg_page_head .navbar-toggle {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
 .tg_page_head .container {
   display: block;
   width: auto;
@@ -137,11 +141,7 @@ fieldset[disabled] .btn-tg.active {
   line-height: 0;
   height: auto;
 }
-@media (max-width: 480px) {
+
-  .tg_page_head .navbar > .container .navbar-brand {
-    padding-left: 9px;
-  }
-}
 
 .tg_head_logo {
   background: url(../img/Tlogo_2x.png) 0 0 no-repeat;
@@ -170,11 +170,7 @@ fieldset[disabled] .btn-tg.active {
 
 
 
-@media (min-width: 480px) {
+
-  .tg_page_head .navbar-quick-nav {
-    display: none;
-  }
-}
 
 .icon-back {
   display: inline-block;
@@ -687,6 +683,9 @@ a.im_dialog:hover .im_dialog_date {
 .im_history_panel_title h4 {
   margin-bottom: 7px;
   font-size: 17px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .im_history_panel_title h4 small {
   color: #999;
@@ -699,11 +698,11 @@ a.im_dialog:hover .im_dialog_date {
 .im_history_panel_media_dropdown .dropdown-toggle {
   font-size: 13px;
   font-weight: normal;
-  padding-top: 5px;
+  padding-top: 4px;
   line-height: 1;
 }
 .im_history_panel_media_dropdown {
-  padding-top: 3px;
+  padding-top: 1px;
 }
 .im_history_panel_edit_link,
 .im_history_panel_return_link,
@@ -787,10 +786,9 @@ a.im_dialog:hover .im_dialog_date {
 .im_history_typing {
   font-size: 11px;
   color: #999;
-  max-width: 495px;
+  max-width: 526px;
   margin: 0 auto;
-
+  padding: 0 77px 0 77px;
-  padding: 0 40px 0 47px;
 }
 
 /*.im_history_typing {
@@ -1084,7 +1082,7 @@ div.im_message_video_thumb {
 
 
 .im_content_message_wrap {
-  margin: 10px 0 5px;
+  margin: 10px 0px 5px 16px;
 }
 .icon-message-status {
   background: #43A4DB;
@@ -1171,7 +1169,7 @@ span.emoji {
 .im_send_panel_wrap {
   max-width: 526px;
   margin: 0 auto;
-  padding: 10px 20px 22px 15px;
+  padding: 10px 15px 22px 15px;
 }
 .im_send_form_wrap {
   position: relative;
@@ -1387,11 +1385,7 @@ img.img_fullsize {
 .user_modal_window .modal-dialog {
   max-width: 506px;
 }
-@media (min-height: 768px) {
+
-  .user_modal_window .modal-dialog {
-    padding-top: 150px;
-  }
-}
 
 .user_modal_wrap .modal-body {
   padding: 23px 25px 30px;
@@ -1654,126 +1648,7 @@ img.img_fullsize {
 
 
 
-@media (max-width: 480px) {
-  .login_form_wrap {
-    border-radius: 0;
-    max-width: auto;
-    box-shadow: none;
-    -webkit-box-shadow: none;
-    margin: 30px auto 20px;
-  }
-
-
-  .im_panel_own_photo,
-  .im_panel_peer_photo {
-    display: none;
-  }
-
-  .im_send_form {
-    left: 0;
-    right: 0;
-    max-width: none;
-  }
-}
-
-@media (max-height: 480px) {
-  .navbar-toggle {
-    margin-top: 4px;
-    margin-bottom: 4px;
-  }
-  .im_page_footer {
-    display: none;
-  }
-
-  .im_send_panel_wrap {
-    padding-bottom: 12px;
-  }
-
-  .emoji-wysiwyg-editor {
-    min-height: 34px;
-    max-height: 150px;
-  }
-}
-
-@media (max-width: 640px) {
-  .im_dialog_peer {
-    white-space: normal;
-    height: 2.84em;
-  }
-  .im_dialog_message {
-    display: none;
-  }
-}
-
-@media (max-width: 900px) {
-  /*.icon-message-status {
-    margin-left: 0;
-    margin-top: 18px;
-    right: -1px;
-  }*/
-
-  .icon-message-status {
-    z-index: 10;
-    margin-left: -5px;
-    border-radius: 0;
-    height: 34px;
-    border: 0;
-    width: 2px;
-    margin-top: 1px;
-    border: 0;
-  }
-  /*.icon-message-status {
-    z-index: 10;
-    margin-left: -15px;
-  }*/
-}
-
-@media (max-width: 480px) {
-  .im_dialogs_col_wrap,
-  .im_page_peer_not_selected .im_history_col_wrap {
-    display: none;
-  }
-  .im_page_peer_not_selected .im_dialogs_col_wrap {
-    display: block;
-    border-right: 0;
-  }
 
-  .im_page_peer_not_selected .im_dialogs_col {
-    margin-right: 0;
-  }
-  .im_page_peer_not_selected .im_dialogs_col_wrap .pane {
-    width: 12px;
-    right: 0px;
-  }
-  .im_page_peer_not_selected .im_dialogs_col_wrap .pane > .slider {
-    border-radius: 3px;
-    margin: 0 3px;
-  }
-
-  .im_dialogs_scrollable_wrap {
-    padding: 0 12px 0 12px;
-  }
-
-  .im_dialogs_col_wrap,
-  .im_history_col_wrap {
-    float: none;
-    width: auto;
-    max-width: auto;
-    min-width: auto;
-  }
-
-  .im_page_peer_not_selected .im_dialog_peer {
-    white-space: nowrap;
-    height: auto;
-  }
-  .im_page_peer_not_selected .im_dialog_message {
-    display: block;
-  }
-
-  .im_emoji_btn {
-    display: none;
-  }
-}
 
 
 .settings_modal_window .modal-dialog {
@@ -1980,7 +1855,8 @@ img.img_fullsize {
 }
 
 .im_message_wrap {
-  max-width: 500px;
+  max-width: 526px;
+  padding: 0 15px;
   margin: 0 auto;
   position: relative;
 }
@@ -2009,3 +1885,161 @@ img.img_fullsize {
 .im_message_selected .icon-select-tick {
   opacity: 1 !important;
 }
+
+
+@media (min-width: 480px) {
+  .tg_page_head .navbar-quick-nav {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .tg_page_head .navbar > .container .navbar-brand {
+    padding-left: 9px;
+  }
+  .im_history_panel_info_link {
+    display: none;
+  }
+  .im_history_panel_edit_link {
+    margin-right: 0;
+  }
+}
+
+@media (min-height: 768px) {
+  .user_modal_window .modal-dialog {
+    padding-top: 150px;
+  }
+}
+
+
+@media (max-width: 480px) {
+  .login_form_wrap {
+    border-radius: 0;
+    max-width: auto;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    margin: 30px auto 20px;
+  }
+
+
+  .im_panel_own_photo,
+  .im_panel_peer_photo {
+    display: none;
+  }
+  .im_history_panel_wrap {
+    margin: 0 15px;
+  }
+  .im_send_panel_wrap {
+    padding: 10px 15px;
+  }
+  .icon-select-tick {
+    margin: 10px 0 0 -24px
+  }
+  .im_content_message_wrap {
+    margin-left: 0;
+  }
+  .im_history_typing {
+    padding: 0 15px 0 60px;
+  }
+
+  .im_send_form {
+    left: 0;
+    right: 0;
+    max-width: none;
+  }
+}
+
+@media (max-height: 480px) {
+  .im_page_footer {
+    display: none;
+  }
+
+  .im_send_panel_wrap {
+    padding-bottom: 12px;
+  }
+
+  .emoji-wysiwyg-editor {
+    min-height: 34px;
+    max-height: 150px;
+  }
+}
+
+@media (max-width: 640px) {
+  .im_dialog_peer {
+    white-space: normal;
+    height: 2.84em;
+  }
+  .im_dialog_message {
+    display: none;
+  }
+}
+
+@media (max-width: 900px) {
+  /*.icon-message-status {
+    margin-left: 0;
+    margin-top: 18px;
+    right: -1px;
+  }*/
+
+  .icon-message-status {
+    z-index: 10;
+    margin-left: -5px;
+    border-radius: 0;
+    height: 34px;
+    border: 0;
+    width: 2px;
+    margin-top: 1px;
+    border: 0;
+  }
+  /*.icon-message-status {
+    z-index: 10;
+    margin-left: -15px;
+  }*/
+}
+
+@media (max-width: 480px) {
+  .im_dialogs_col_wrap,
+  .im_page_peer_not_selected .im_history_col_wrap {
+    display: none;
+  }
+  .im_page_peer_not_selected .im_dialogs_col_wrap {
+    display: block;
+    border-right: 0;
+  }
+
+  .im_page_peer_not_selected .im_dialogs_col {
+    margin-right: 0;
+  }
+  .im_page_peer_not_selected .im_dialogs_col_wrap .pane {
+    width: 12px;
+    right: 0px;
+  }
+  .im_page_peer_not_selected .im_dialogs_col_wrap .pane > .slider {
+    border-radius: 3px;
+    margin: 0 3px;
+  }
+
+  .im_dialogs_scrollable_wrap {
+    padding: 0 12px 0 12px;
+  }
+
+  .im_dialogs_col_wrap,
+  .im_history_col_wrap {
+    float: none;
+    width: auto;
+    max-width: auto;
+    min-width: auto;
+  }
+
+  .im_page_peer_not_selected .im_dialog_peer {
+    white-space: nowrap;
+    height: auto;
+  }
+  .im_page_peer_not_selected .im_dialog_message {
+    display: block;
+  }
+
+  .im_emoji_btn {
+    display: none;
+  }
+}

app/js/app.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.0.16 - messaging web application for MTProto
+ * Webogram v0.0.17 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/background.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.0.16 - messaging web application for MTProto
+ * Webogram v0.0.17 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/controllers.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.0.16 - messaging web application for MTProto
+ * Webogram v0.0.17 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE
@@ -329,6 +329,11 @@ angular.module('myApp.controllers', [])
         maxID = 0,
         startLimit = 20,
         limit = 50,
+        inputMediaFilters = {
+          photos: 'inputMessagesFilterPhotoVideo',
+          video: 'inputMessagesFilterVideo',
+          documents: 'inputMessagesFilterDocument',
+        },
         jump = 0;
 
     function applyDialogSelect (newPeer) {
@@ -381,7 +386,7 @@ angular.module('myApp.controllers', [])
       }
       // console.trace('load history');
 
-      var inputMediaFilter = $scope.mediaType && {_: $scope.mediaType == 'photos' ? 'inputMessagesFilterPhotoVideo' : 'inputMessagesFilterDocument'},
+      var inputMediaFilter = $scope.mediaType && {_: inputMediaFilters[$scope.mediaType]},
           getMessagesPromise = inputMediaFilter
         ? AppMessagesManager.getSearch($scope.curDialog.inputPeer, '', inputMediaFilter, maxID, startLimit)
         : AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID, startLimit);
@@ -409,13 +414,12 @@ angular.module('myApp.controllers', [])
       maxID = 0;
 
       var curJump = ++jump,
-          inputMediaFilter = $scope.mediaType && {_: $scope.mediaType == 'photos' ? 'inputMessagesFilterPhotoVideo' : 'inputMessagesFilterDocument'},
+          inputMediaFilter = $scope.mediaType && {_: inputMediaFilters[$scope.mediaType]},
           getMessagesPromise = inputMediaFilter
         ? AppMessagesManager.getSearch($scope.curDialog.inputPeer, '', inputMediaFilter, maxID, startLimit)
-        : AppMessagesManager.getHistory($scope.curDialog.inputPeer, $scope.mediaType, maxID, startLimit);
+        : AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID, startLimit);
 
       getMessagesPromise.then(function (historyResult) {
-        console.log('got', historyResult);
         if (curJump != jump) return;
 
         offset += startLimit;
@@ -518,6 +522,10 @@ angular.module('myApp.controllers', [])
 
     $scope.$on('history_append', function (e, addedMessage) {
       if (addedMessage.peerID == $scope.curDialog.peerID) {
+        if ($scope.mediaType) {
+          $scope.missedCount++;
+          return;
+        }
         // console.log('append', addedMessage);
         // console.trace();
         $scope.history.push(AppMessagesManager.wrapForHistory(addedMessage.messageID));

app/js/directives.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.0.16 - messaging web application for MTProto
+ * Webogram v0.0.17 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/filters.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.0.16 - messaging web application for MTProto
+ * Webogram v0.0.17 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/lib/aes_worker.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.0.16 - messaging web application for MTProto
+ * Webogram v0.0.17 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/lib/mtproto.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.0.16 - messaging web application for MTProto
+ * Webogram v0.0.17 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/lib/pq_worker.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.0.16 - messaging web application for MTProto
+ * Webogram v0.0.17 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/lib/sha1_worker.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.0.16 - messaging web application for MTProto
+ * Webogram v0.0.17 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/services.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.0.16 - messaging web application for MTProto
+ * Webogram v0.0.17 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/util.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.0.16 - messaging web application for MTProto
+ * Webogram v0.0.17 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Telegram UNOFFICIAL",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "short_name": "Webogram",
   "manifest_version": 2,
   "app": {

app/manifest.webapp

@@ -1,7 +1,7 @@
 {
   "name": "Webogram",
   "description": "Webogram – UNOFFICIAL Telegram Web App.\nMore info & source code here: https://github.com/zhukov/webogram",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "launch_path": "/index.html",
   "developer": {
     "name": "Igor Zhukov",

app/partials/im.html

@@ -38,7 +38,10 @@
                   <a class="dropdown-toggle">Media<i class="icon icon-caret"></i></a>
                   <ul class="dropdown-menu">
                     <li>
-                      <a ng-click="toggleMedia('photos')">Photos &amp; Videos</a>
+                      <a ng-click="toggleMedia('photos')">Photos</a>
+                    </li>
+                    <li>
+                      <a ng-click="toggleMedia('video')">Video</a>
                     </li>
                     <li>
                       <a ng-click="toggleMedia('documents')">Documents</a>
@@ -97,7 +100,7 @@
                   </div>
 
                   <div class="im_history_typing_wrap">
-                    <div class="im_history_typing" ng-animate="{enter:'animate-show', leave:'animate-hide'}" ng-if="typing.user">
+                    <div class="im_history_typing" ng-show="typing.user">
                       <strong class="im_history_typing_author" ng-bind-html="typing.user.rFullName"></strong> is typing<span my-typing-dots></span>
                     </div>
                   </div>

app/partials/settings_modal.html

@@ -61,7 +61,7 @@
 
     <p>
       <strong>Version: </strong>
-      <span class="settings_version">alpha 0.0.16</span>
+      <span class="settings_version">alpha 0.0.17</span>
     </p>
 
     <hr/>