Improved keyboard support

app/js/controllers.js

@@ -1398,7 +1398,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       $scope.$broadcast('ui_keyboard_update');
     }
 
-    function replyKeyboardToggle () {
+    function replyKeyboardToggle ($event) {
       var replyKeyboard = $scope.historyState.replyKeyboard;
       if (!replyKeyboard) {
         return;
@@ -1406,6 +1406,8 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       replyKeyboard.pFlags.hidden = !replyKeyboard.pFlags.hidden;
       console.log('toggle reply markup', peerID, replyKeyboard);
       $scope.$broadcast('ui_keyboard_update');
+
+      return cancelEvent($event);
     }
 
     function botStart () {
@@ -2031,10 +2033,10 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       $scope.$broadcast('ui_peer_reply');
     }
 
-    function enterSlash (event) {
+    function enterSlash ($event) {
       $scope.draftMessage.text = '/';
       $scope.$broadcast('ui_peer_draft');
-      return cancelEvent(event);
+      return cancelEvent($event);
     }
 
     function onMessageChange(newVal) {

app/less/app.less

@@ -858,7 +858,7 @@ a.tg_radio_on:hover i.icon-radio {
   vertical-align: top;
   margin-right: 18px;
 
-  .image-2x('../img/icons/General.png', 40px, 778px);
+  .image-2x('../img/icons/General.png', 40px, 798px);
   background-position: -5px -10px;
 }
 .icon-tg-title {
@@ -899,7 +899,7 @@ a.tg_radio_on:hover i.icon-radio {
   margin-left: 12px;
   margin-top: -1px;
 
-  .image-2x('../img/icons/General.png', 40px, 778px);
+  .image-2x('../img/icons/General.png', 40px, 798px);
   background-position: -18px -50px;
 }
 
@@ -1617,7 +1617,7 @@ div.im_message_video_thumb {
   height: 18px;
   margin: 12px 15px;
 
-  .image-2x('../img/icons/General.png', 40px, 778px);
+  .image-2x('../img/icons/General.png', 40px, 798px);
   background-position: -14px -509px;
 
   .im_message_file_button_dl_doc & {
@@ -1638,7 +1638,7 @@ div.im_message_video_thumb {
     height: 16px;
     margin: 13px 16px;
 
-    .image-2x('../img/icons/General.png', 40px, 778px);
+    .image-2x('../img/icons/General.png', 40px, 798px);
     background-position: -13px -611px;
   }
 
@@ -2056,34 +2056,40 @@ a.im_message_fwd_photo {
 }
 .im_message_mymention {
   background: #fff8cc;
-  /*border-bottom: 1px solid #ffe222;*/
-  /*font-weight: bold;*/
 }
 
-.im_send_field_wkeyboard {
-  .im_send_buttons_wrap {
-    // display: none;
-  }
-}
 .reply_markup_wrap {
-  margin: 7px -2px 0;
+  margin: 15px -2px 0;
 }
-.reply_markup_scrollable_wrap.has-scrollbar .reply_markup_row {
-  margin-right: 6px;
+.reply_markup_row {
+  padding: 4px 0;
+  &:first-child {
+    padding-top: 0;
+  }
+  &:last-child {
+    padding-bottom: 0;
+  }
+  .reply_markup_scrollable_wrap.active-scrollbar & {
+    margin-right: 6px;
+  }
 }
 .reply_markup_button_wrap {
   display: inline-block;
-  padding: 2px 2px;
+  padding: 0 4px;
 }
 .reply_markup_button {
+  color: #3a6d99;
   display: block;
   width: 100%;
-  background: #EFEFEF;
+  background: #f0f4f7;
+  height: 30px;
+  font-size: 13px;
   margin: 0;
+  padding: 6px 6px;
 }
 .reply_markup_button:hover {
-  // background: #DDD;
-  background: #f2f6fa;
+  color: #3a6d99;
+  background: #dfe8f0;
 }
 .reply_markup_button_w1 {width: 100%;}
 .reply_markup_button_w2 {width: 50%;}
@@ -2262,7 +2268,7 @@ img.img_fullsize {
   vertical-align: top;
   opacity: 0.8;
 
-  .image-2x('../img/icons/General.png', 40px, 778px);
+  .image-2x('../img/icons/General.png', 40px, 798px);
   background-position: -9px -335px;
 }
 
@@ -2679,35 +2685,38 @@ a.composer_command_option.composer_autocomplete_option_active .composer_command_
   vertical-align: top;
   opacity: 0.8;
 
-  .image-2x('../img/icons/General.png', 40px, 778px);
+  .image-2x('../img/icons/General.png', 40px, 798px);
   background-position: -9px -335px;
 }
 
 .composer_keyboard_btn {
   display: block;
   position: absolute;
-  right: 28px;
-  top: -2px;
+  right: 37px;
+  top: 4px;
   cursor: pointer;
   padding: 0;
 
-  width: 22px;
-  height: 22px;
-  margin-top: 1px;
+  width: 20px;
+  height: 20px;
 }
-.icon-hide-keyboard {
+.icon-keyboard {
   display: inline-block;
-  width: 16px;
-  height: 16px;
-  border: 2px solid #BBB;
-  border-top: 0;
-  border-left: 0;
-  .transform(rotate(45deg));
+  width: 20px;
+  height: 20px;
   vertical-align: top;
   opacity: 0.8;
-}
-.composer_keyboard_btn:hover .icon-hide-keyboard {
-  opacity: 1.0;
+
+  .image-2x('../img/icons/General.png', 40px, 798px);
+  background-position: -10px -730px;
+
+  .composer_keyboard_btn.active & {
+    background-position: -10px -760px;
+  }
+
+  .composer_keyboard_btn:hover & {
+    opacity: 1.0;
+  }
 }
 
 

app/less/desktop.less

@@ -205,7 +205,7 @@
     display: inline-block;
     vertical-align: top;
     margin-top: 3px;
-    .image-2x('../img/icons/General.png', 40px, 778px);
+    .image-2x('../img/icons/General.png', 40px, 798px);
     background-position: -10px -111px;
 
   }
@@ -217,7 +217,7 @@
     margin-top: 2px;
     display: inline-block;
     vertical-align: top;
-    .image-2x('../img/icons/General.png', 40px, 778px);
+    .image-2x('../img/icons/General.png', 40px, 798px);
     background-position: -11px -135px;
   }
 
@@ -228,7 +228,7 @@
     margin-top: 1px;
     display: inline-block;
     vertical-align: top;
-    .image-2x('../img/icons/General.png', 40px, 778px);
+    .image-2x('../img/icons/General.png', 40px, 798px);
     background-position: -10px -163px;
   }
 
@@ -239,7 +239,7 @@
     margin-top: 1px;
     display: inline-block;
     vertical-align: top;
-    .image-2x('../img/icons/General.png', 40px, 778px);
+    .image-2x('../img/icons/General.png', 40px, 798px);
     background-position: -10px -637px;
   }
 
@@ -250,7 +250,7 @@
     display: inline-block;
     vertical-align: top;
 
-    .image-2x('../img/icons/General.png', 40px, 778px);
+    .image-2x('../img/icons/General.png', 40px, 798px);
     background-position: -10px -193px;
   }
 }
@@ -378,7 +378,7 @@
     margin-right: 12px;
     vertical-align: top;
 
-    .image-2x('../img/icons/General.png', 40px, 778px);
+    .image-2x('../img/icons/General.png', 40px, 798px);
     background-position: 0 0;
   }
 
@@ -707,8 +707,8 @@ a.footer_link.active:active {
     background: rgba(137, 160, 179, 0.1);
     right: 2px;
     width: 3px;
-    top: 2px;
-    bottom: 2px;
+    top: 0;
+    bottom: 0;
     .rounded(1px);
 
     & > .nano-slider {
@@ -852,7 +852,7 @@ a.footer_link.active:active {
   }
 
   &_edit_panel_wrap {
-    padding: 0px 0 43px;
+    padding: 0px 0 41px;
     margin: 0 24px 0 12px;
   }
 
@@ -1096,7 +1096,7 @@ a.footer_link.active:active {
 
 .im_send_panel_wrap {
   max-width: 554px;
-  padding-bottom: 23px;
+  padding-bottom: 21px;
 }
 .im_send_form {
   max-width: 382px;
@@ -1190,7 +1190,7 @@ a.im_panel_peer_photo .peer_initials {
   opacity: 0.8;
   margin: 0;
 
-  .image-2x('../img/icons/General.png', 40px, 778px);
+  .image-2x('../img/icons/General.png', 40px, 798px);
   background-position: -11px -455px;
 }
 
@@ -1239,7 +1239,7 @@ a.im_panel_peer_photo .peer_initials {
   vertical-align: top;
   opacity: 0.8;
 
-  .image-2x('../img/icons/General.png', 40px, 778px);
+  .image-2x('../img/icons/General.png', 40px, 798px);
   background-position: -10px -399px;
 }
 
@@ -1413,107 +1413,6 @@ a.im_panel_peer_photo .peer_initials {
   }
 }
 
-.im_send_field_wkeyboard {
-
-  a {
-    &.im_panel_peer_photo,
-    &.im_panel_own_photo {
-      display: none;
-    }
-  }
-
-  .im_send_field_wrap {
-    margin-bottom: 0;
-  }
-
-  .composer {
-    &_rich_textarea,
-    &_textarea {
-      min-height: 25px;
-      padding-right: 25px;
-    }
-
-    &_emoji_insert_btn {
-      top: 0;
-      right: 0px;
-      margin-top: -3px;
-    }
-
-    &_emoji_panel {
-      display: none;
-    }
-  }
-
-  .im_submit {
-    position: absolute;
-    top: 0;
-    left: 100%;
-    margin: 0 0 0 15px;
-  }
-  .im_media_attach {
-    position: absolute;
-    top: -6px;
-    left: -43px;
-    width: 19px;
-    height: 24px;
-  }
-
-  .icon-camera {
-    display: inline-block;
-    width: 19px;
-    height: 23px;
-    vertical-align: text-top;
-    opacity: 0.8;
-    margin-top: -1px;
-
-    .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-    background-position: -12px -68px;
-  }
-
-  .im_media_attach {
-    &:hover .icon-camera,
-    &:active .icon-camera {
-      background-position: -12px -100px;
-      opacity: 1;
-    }
-  }
-
-  .im_attach {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 100%;
-    margin: 0;
-    margin-right: 45px;
-    margin-top: 1px;
-  }
-
-  .icon-emoji {
-    display: inline-block;
-    width: 22px;
-    height: 22px;
-    vertical-align: text-top;
-    opacity: 1;
-    margin: 0;
-
-    .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-    background-position: -10px -771px;
-  }
-
-  .composer_emoji_insert_btn:active .icon-emoji,
-  .is_1x .composer_emoji_insert_btn:active .icon-emoji,
-  .composer_emoji_insert_btn.composer_emoji_insert_btn_on .icon-emoji,
-  .is_1x .composer_emoji_insert_btn.composer_emoji_insert_btn_on .icon-emoji {
-    background-position: -10px -803px;
-  }
-
-  .im_send_dropbox_wrap {
-    display: none;
-  }
-
-
-}
-
 /* Peer modals */
 .user_modal {
   &_window .modal-dialog {

app/partials/desktop/im.html

@@ -175,7 +175,7 @@
                     <div class="im_send_field_wrap">
                       <a class="composer_emoji_insert_btn"><i class="icon icon-emoji"></i></a>
                       <a class="composer_command_btn" ng-show="!historyState.replyKeyboard && commands.list.length > 0 && !draftMessage.text.length" ng-mousedown="enterSlash($event)"><i class="icon icon-slash"></i></a>
-                      <a class="composer_keyboard_btn" ng-show="historyState.replyKeyboard._ == 'replyKeyboardMarkup'" ng-click="replyKeyboardToggle()"><i class="icon" ng-class="historyState.replyKeyboard.pFlags.hidden ? 'icon-keyboard' : 'icon-hide-keyboard'"></i></a>
+                      <a class="composer_keyboard_btn" ng-show="historyState.replyKeyboard._ == 'replyKeyboardMarkup'" ng-mousedown="replyKeyboardToggle($event)" ng-class="!historyState.replyKeyboard.pFlags.hidden ? 'active' : ''"><i class="icon icon-keyboard"></i></a>
 
                       <div class="im_send_dropbox_wrap" my-i18n="im_photos_drop_text"></div>
                       <textarea ng-model="draftMessage.text" placeholder="{{'im_message_field_placeholder' | i18n}}" class="form-control im_message_field no_outline" dir="auto"></textarea>

app/vendor/jquery.nanoscroller/nanoscroller.js

@@ -743,6 +743,7 @@
       } else {
         this.slider.show();
       }
+      this.$el.toggleClass('active-scrollbar', this.isActive);
       this.pane.css({
         opacity: (this.options.alwaysVisible ? 1 : ''),
         visibility: (this.options.alwaysVisible ? 'visible' : '')