Improved send form on mobile layout

Closes #35

app/css/app.css

@@ -2084,6 +2084,9 @@ textarea.im_message_field {
   opacity: 1;
 }
 
+.im_head_attach {
+  display: none;
+}
 .im_attach_input,
 .im_media_attach_input {
   cursor: pointer;

app/css/app_mobile.css

@@ -188,11 +188,6 @@ html {
   padding-bottom: 18px;
 }
 
-.emoji-wysiwyg-editor {
-  min-height: 34px;
-  max-height: 150px;
-}
-
 .im_dialog_peer {
   white-space: normal;
   height: 2.84em;
@@ -322,5 +317,79 @@ html {
   margin: 10px;
 }
 
+.im_send_form {
+  position: relative;
+}
+.im_send_field_wrap {
+  margin-right: 45px;
+}
+.im_media_attach,
+.im_attach {
+  display: none;
+}
+.im_submit {
+  padding: 6px 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 40px;
+  min-width: 0;
+  line-height: 18px;
+}
+
+.im_emoji_btn {
+  position: absolute;
+  top: -1px;
+  right: 50px;
+}
+
+.emoji-wysiwyg-editor {
+  min-height: 32px;
+  max-height: 150px;
+  padding-right: 30px;
+}
+
+.emoji-menu {
+  margin-left: -158px;
+  margin-top: -257px;
+}
+
+.im_head_attach {
+  display: block;
+  float: right;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+  margin: 5px 0 5px 5px;
+  height: 34px;
+  border-radius: 4px;
+  padding: 3px 7px;
+  border: 1px solid #497495;
+}
+.navbar_peer_not_selected .im_head_attach {
+  display: none;
+}
+.im_head_attach:hover,
+.im_head_attach:active {
+  background-color: rgba(255,255,255,0.1);
+}
+
+.im_head_attach .icon-paperclip {
+  display: inline-block;
+  width: 19px;
+  height: 23px;
+  vertical-align: text-top;
+  background: url(../img/icons/IconsetW.png) -12px -672px no-repeat;
+  background-size: 42px 710px;
+  opacity: 0.8;
+}
+.is_1x .im_head_attach .icon-paperclip {
+  background-image: url(../img/icons/IconsetW_1x.png);
+}
+.im_head_attach:hover .icon-paperclip,
+.im_head_attach:active .icon-paperclip {
+  opacity: 1;
+}
+
 
 }

app/js/directives.js

@@ -645,18 +645,23 @@ angular.module('myApp.directives', ['myApp.filters'])
         });
       }
 
-      fileSelects.on('change', function () {
+      // Head is sometimes slower
-        var self = this;
+      $timeout(function () {
-        $scope.$apply(function () {
+        fileSelects
-          $scope.draftMessage.files = Array.prototype.slice.call(self.files);
+          .add('.im_head_attach input')
-          $scope.draftMessage.isMedia = $(self).hasClass('im_media_attach_input');
+          .on('change', function () {
-          setTimeout(function () {
+            var self = this;
-            try {
+            $scope.$apply(function () {
-              self.value = '';
+              $scope.draftMessage.files = Array.prototype.slice.call(self.files);
-            } catch (e) {};
+              $scope.draftMessage.isMedia = $(self).hasClass('im_media_attach_input');
-          }, 1000);
+              setTimeout(function () {
-        });
+                try {
-      });
+                  self.value = '';
+                } catch (e) {};
+              }, 1000);
+            });
+          });
+      }, 1000);
 
       var sendOnEnter = true,
           updateSendSettings = function () {
@@ -772,6 +777,7 @@ angular.module('myApp.directives', ['myApp.filters'])
         $('body').off('dragenter dragleave dragover drop', onDragDropEvent);
         $(document).off('paste', onPasteEvent);
         $(document).off('keydown', onKeyDown);
+        fileSelects.off('change');
         if (richTextarea) {
           $(richTextarea).off('DOMNodeInserted', onPastedImageEvent);
         }

app/js/services.js

@@ -1427,9 +1427,9 @@ angular.module('myApp.services', [])
     } else if (file.type.substr(0, 6) == 'video/') {
       attachType = 'video';
       fileName = 'video.mp4';
-    } else if (file.type == 'audio/mpeg' || file.type == 'audio/mp3') {
+    } else if (file.type.substr(0, 6) == 'audio/') {
       attachType = 'audio';
-      fileName = 'audio.mp3';
+      fileName = 'audio.' + file.type.split('/')[1] || 'mp3';
     } else {
       attachType = 'document';
       fileName = 'document.' + file.type.split('/')[1];
@@ -1497,11 +1497,11 @@ angular.module('myApp.services', [])
                 break;
 
               case 'video':
-                inputMedia = {_: 'inputMediaUploadedVideo', file: inputFile, duration: 0, w: 0, h: 0};
+                inputMedia = {_: 'inputMediaUploadedVideo', file: inputFile, duration: 0, w: 0, h: 0, mime_type: file.type};
                 break;
 
               case 'audio':
-                inputMedia = {_: 'inputMediaUploadedAudio', file: inputFile, duration: 0};
+                inputMedia = {_: 'inputMediaUploadedAudio', file: inputFile, duration: 0, mime_type: file.type};
                 break;
 
               case 'document':

app/partials/head.html

@@ -33,6 +33,11 @@
         </ul>
       </div>
 
+      <div class="im_head_attach">
+        <input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/*, video/*, audio/*" title="Send media"/>
+        <i class="icon icon-paperclip"></i>
+      </div>
+
       <div class="navbar-header">
 
         <a class="navbar-brand" href="{{isLoggedIn ? '#/im' : '#/'}}"><span class="tg_head_logo"></span><span class="tg_head_logo_text"></span></a>

app/partials/im.html

@@ -218,8 +218,11 @@
                     />
                   </div>
                   <form my-send-form draft-message="draftMessage" class="im_send_form" ng-submit="sendMessage($event)">
-                    <div class="im_send_dropbox_wrap"> Drop photos here to send </div>
+
-                    <textarea ng-model="draftMessage.text" placeholder="Write a message..." class="form-control im_message_field"></textarea>
+                    <div class="im_send_field_wrap">
+                      <div class="im_send_dropbox_wrap"> Drop photos here to send </div>
+                      <textarea ng-model="draftMessage.text" placeholder="Write a message..." class="form-control im_message_field"></textarea>
+                    </div>
 
                     <div class="im_media_attach pull-right">
                       <input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/*, video/*, audio/*" title="Send media"/>