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,20 +425,33 @@ 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++;
+        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,4 +1,7 @@
-<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_message_wrap clearfix">
 
     <div class="im_service_message_wrap" ng-if="historyMessage._ == 'messageService'">
       <div class="im_service_message">
@@ -55,6 +58,8 @@
     </div>
 
     <div class="im_content_message_wrap" ng-if="historyMessage._ != 'messageService'">
+      <i class="icon icon-select-tick"></i>
+
       <a ng-click="historyMessage.send()" ng-if="historyMessage.error">
         <i class="icon-message-status icon-message-status-error" tooltip="Try again"></i>
       </a>
@@ -68,7 +73,7 @@
         />
       </a>
       <div class="im_message_meta pull-right text-right">
-      <span ng-click="toggleMessage(historyMessage.id)" class="im_message_date">{{historyMessage.date | dateOrTime}}</span>
+        <span class="im_message_date">{{historyMessage.date | dateOrTime}}</span>
       </div>
 
       <div class="im_message_body">
@@ -230,3 +235,6 @@
 
     </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>