Improved mobile chat form

app/css/app.css

@@ -250,6 +250,7 @@ input[type="number"] {
 .tg_page_head .navbar-inverse .navbar-toggle {
   border-color: #497495;
   outline: 0;
+  border: 0;
 }
 .tg_page_head .navbar-inverse .navbar-collapse,
 .tg_page_head .navbar-inverse .navbar-form {
@@ -289,9 +290,6 @@ input[type="number"] {
   padding: 5px 14px;
   font-size: 13px;
 }
-.dropdown-header {
-  padding: 3px 14px;
-}
 
 .modal-backdrop {
   background: #111111;

app/css/app_mobile.css

@@ -3,6 +3,20 @@
 html {
   background: #FFF;
 }
+
+
+.dropdown-menu {
+  border-radius: 0;
+}
+.dropdown-menu > li > a {
+  padding: 15px 17px 14px;
+  font-size: 14px;
+}
+.dropdown-menu .divider {
+  margin: 0;
+}
+
+
 .tg_page_head .navbar > .container .navbar-brand {
   padding-left: 9px;
 }
@@ -21,12 +35,20 @@ html {
   float: none;
   display: block;
   margin: 0;
-  padding: 11px 20px 10px;
+  padding: 12px 20px 11px;
   border-radius: 0;
 }
+
+.tg_page_head .navbar-inverse .navbar-toggle:hover,
+.tg_page_head .navbar-inverse .navbar-toggle:active,
+.tg_page_head .navbar-inverse .navbar-toggle:focus,
+.tg_page_head .navbar-inverse .open  .navbar-toggle {
+  background-color: rgba(0,0,0,0.1);
+}
+
+
 .navbar_peer_not_selected .navbar-toggle-wrap .navbar-toggle {
-  padding: 15px 16px;
+  padding: 16px 17px;
-  /*padding: 9px 10px;*/
 }
 .navbar-toggle-wrap .navbar-toggle .icon-bar {
   background-color: #d7e5f0;
@@ -54,12 +76,13 @@ html {
   display: block;
 }
 .navbar-toggle-wrap .dropdown-menu {
-  margin-top: 4px;
+  margin-top: 6px;
-  right: -49px;
+  right: -40px;
   left: auto;
+  width: 195px;
 }
 .navbar_peer_not_selected .navbar-toggle-wrap .dropdown-menu {
-  right: 0;
+  right: 6px;
 }
 
 .navbar-search-wrap {
@@ -71,9 +94,10 @@ html {
   border: 1px solid transparent;
   border-radius: 4px;
 }
+.navbar-search-wrap:hover,
 .navbar-search-wrap:link,
 .navbar-search-wrap:active {
-  background-color: rgba(255,255,255,0.1);
+  background-color: rgba(0,0,0,0.1);
 }
 .icon-search {
   display: inline-block;
@@ -138,7 +162,7 @@ html {
   color: #b9cfe3;
 }
 .tg_page_head .navbar-inverse .navbar-quick-nav > li > a:active {
-  background-color: rgba(255,255,255,0.1);
+  background-color: rgba(0,0,0,0.1);
 }
 .navbar-quick-nav .icon-back {
   position: absolute;
@@ -299,7 +323,7 @@ html {
   margin: 0 15px;
 }
 .im_send_panel_wrap {
-  padding: 10px 5px;
+  padding: 10px 0 12px;
 }
 .icon-select-tick {
   margin: 10px 0 0 -24px
@@ -380,12 +404,6 @@ a.im_message_author {
   display: none;
 }
 
-.im_send_form {
-  left: 0;
-  right: 0;
-  max-width: none;
-}
-
 .im_edit_flush_link,
 .im_edit_cancel_link,
 .im_edit_delete_btn,
@@ -588,53 +606,143 @@ a.im_dialog_selected .im_dialog_unread {
   margin: 10px;
 }
 
+
+
+
 .im_send_form {
   position: relative;
+  left: 0;
+  right: 0;
+  max-width: none;
 }
-.im_send_field_wrap {
+
-  margin-right: 50px;
-  margin-left: 42px;
-}
-.im_media_attach,
-.im_attach {
-  display: none;
-}
 .im_submit {
-  background: none;
+  width: 50px;
+  min-width: 0;
+  height: 32px;
+  padding: 0;
+  background: url(../img/icons/mobile/Msg_send_active.png) 15px 3px no-repeat;
+  background-size: 24px 24px;
   border: 0;
-  color: #1877c3;
+  color: transparent;
-  font-weight: bold;
-  font-size: 15px;
-  padding: 0 6px;
   position: absolute;
   right: 0;
   top: 0;
-  width: 45px;
+}
-  min-width: 0;
+.is_1x .im_submit {
-  line-height: 32px;
+  background: url(../img/icons/mobile/Msg_send_active.png) 15px 3px no-repeat;
+  background-size: 24px 24px;
 }
 .im_submit:hover {
-  color: #1877c3;
+  background-color: transparent;
-  background: none;
+  color: transparent;
 }
 .im_submit:active {
   box-shadow: none;
 }
+.im_submit_text {
+  display: none;
+}
+
+.im_media_attach {
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin: 0;
+  width: 50px;
+  height: 32px;
+  padding: 4px 13px 4px 16px;
+}
+
+.icon-camera {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  vertical-align: text-top;
+  background: url(../img/icons/mobile/Msg_attach.png) 0 0 no-repeat;
+  background-size: 22px 22px;
+  opacity: 1;
+  margin: 0;
+}
+.is_1x .icon-camera {
+  background-image: url(../img/icons/mobile/Msg_attach.png);
+}
+
+.im_media_attach:active .icon-camera,
+.is_1x .im_media_attach:active .icon-camera {
+  background-position: 0 0;
+  background-image: url(../img/icons/mobile/Msg_attach_active.png);
+}
+
+.im_media_attach,
+.im_attach,
+.im_send_form_empty .im_submit {
+  display: none;
+}
+.im_send_form_empty .im_media_attach {
+  display: block;
+}
 
 .im_emoji_btn {
   position: absolute;
-  left: 7px;
+  left: 0;
-  top: -1px;
+  top: 0;
+  margin: 0;
+  padding: 5px 13px 4px 13px;
+  width: 48px;
+  height: 32px;
+}
+.icon-emoji {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  vertical-align: text-top;
+  background: url(../img/icons/mobile/Msg_smile.png) 0 0 no-repeat;
+  background-size: 22px 22px;
+  opacity: 1;
+  margin: 0;
+}
+.is_1x .icon-emoji {
+  background-image: url(../img/icons/mobile/Msg_smile.png);
+}
+.im_emoji_btn:active .icon-emoji,
+.is_1x .im_emoji_btn:active .icon-emoji,
+.im_emoji_btn.on .icon-emoji,
+.is_1x .im_emoji_btn.on .icon-emoji {
+  background-position: 0 0;
+  background-image: url(../img/icons/mobile/Msg_smile_active.png);
 }
 
+.im_send_field_wrap {
+  margin-right: 50px;
+  margin-left: 48px;
+}
+.im_send_field_wrap .form-control {
+  border-radius: 4px;
+}
 .emoji-wysiwyg-editor {
   min-height: 32px;
   max-height: 150px;
+  margin-bottom: 0;
+}
+.emoji-wysiwyg-editor:empty {
+  background: #f1f1f1;
+  border-color: #f1f1f1;
+  content: attr(placeholder);
+}
+.emoji-wysiwyg-editor:active,
+.emoji-wysiwyg-editor:focus {
+  box-shadow: none;
+  outline: 0;
+  background: #FFF;
+  border-color: #d9dbde;
+  content: none;
 }
 
+
 .emoji-menu {
-  margin-left: -19px;
+  margin-left: -20px;
-  margin-top: -257px;
+  margin-top: -267px;
 }
 
 .im_edit_panel_wrap {

app/js/directives.js

@@ -709,7 +709,9 @@ angular.module('myApp.directives', ['myApp.filters'])
           .on('keyup', function (e) {
             updateHeight();
 
+            $scope.$apply(function () {
               $scope.draftMessage.text = richTextarea.innerText;
+            });
 
             $timeout.cancel(updatePromise);
             updatePromise = $timeout(updateValue, 1000);
@@ -792,7 +794,7 @@ angular.module('myApp.directives', ['myApp.filters'])
         lastLength = 0;
       };
 
-      function updateField () {
+      function updateRichTextarea () {
         if (richTextarea) {
           $timeout.cancel(updatePromise);
           var html = $('<div>').text($scope.draftMessage.text || '').html();
@@ -837,7 +839,7 @@ angular.module('myApp.directives', ['myApp.filters'])
 
       $scope.$on('ui_message_send', focusField);
 
-      $scope.$on('ui_peer_draft', updateField);
+      $scope.$on('ui_peer_draft', updateRichTextarea);
       $scope.$on('ui_message_before_send', updateValue);
 
       function focusField () {

app/partials/head.html

@@ -24,17 +24,12 @@
           <li><a ng-click="logOut()">Log Out</a></li>
         </ul>
         <ul ng-if="curDialog.peer &amp;&amp; isLoggedIn" class="dropdown-menu">
-          <li><a ng-click="showPeerInfo()" ng-switch="historyPeer.id > 0">
+          <li><a ng-click="toggleEdit()">Edit messages</a></li>
-            <span ng-switch-when="true">Profile</span>
-            <span ng-switch-default>Group info</span>
-          </a></li>
-          <li><a ng-click="toggleEdit()">Edit chat</a></li>
           <li ng-if="!historyFilter.mediaType" class="divider"></li>
-          <li ng-if="!historyFilter.mediaType" class="dropdown-header">Media</li>
           <li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('photos')">Photos</a></li>
           <li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('video')">Videos</a></li>
           <li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('documents')">Documents</a></li>
-          <li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('audio')">Voice messages</a></li>
+          <li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('audio')">Voice notes</a></li>
         </ul>
         <ul ng-if="!isLoggedIn" class="dropdown-menu">
           <li><a href="https://github.com/zhukov/webogram" target="_blank">About</a></li>

app/partials/im.html

@@ -219,7 +219,7 @@
                       thumb="ownPhoto"
                     />
                   </div>
-                  <form my-send-form draft-message="draftMessage" class="im_send_form" ng-submit="sendMessage($event)">
+                  <form my-send-form draft-message="draftMessage" class="im_send_form" ng-class="{im_send_form_empty: !draftMessage.text.length}" ng-submit="sendMessage($event)">
 
                     <div class="im_send_field_wrap">
                       <div class="im_send_dropbox_wrap"> Drop photos here to send </div>
@@ -240,7 +240,9 @@
                       <i class="icon icon-emoji"></i>
                     </div>
 
-                    <button type="submit" class="btn btn-success im_submit">Send</button>
+                    <button type="submit" class="btn btn-success im_submit">
+                      <span class="im_submit_text">Send</span>
+                    </button>
                   </form>
                 </div>