Added resize to message field

app/css/app.css

@@ -950,14 +950,20 @@ span.emoji {
   padding: 200px 50px 0;
 }
 
-.im_send_form_wrap {
-  /*width: 581px;*/
+.im_send_panel_wrap {
   width: 526px;
   margin: 0 auto;
   padding: 10px 12px 22px 0;
 }
+.im_panel_fixed_bottom .im_send_form_wrap1 {
+  position: relative;
+}
+.im_panel_fixed_bottom .im_send_form_wrap {
+  width: 514px;
+  position: absolute;
+  bottom: 0;
+}
 .im_send_form {
-  /*width: 444px;*/
   width: 389px;
   float: left;
 }
@@ -965,6 +971,7 @@ span.emoji {
   padding: 5px 12px;
   font-size: 13px;
   line-height: 17px;
+  min-width: 60px;
 }
 
 .im_send_dropbox_wrap {
@@ -1252,8 +1259,8 @@ img.img_fullsize {
   margin-bottom: 10px;
   padding: 6px;
   min-height: 50px;
-  height: 50px;
-  resize: none;
+  height: auto;
+  max-height: 300px;
   overflow: auto;
 
   border: 1px solid #d9dbde;

app/index.html

@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="vendor/angular/angular-csp.css"/>
   <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
   <link rel="stylesheet" href="vendor/jquery.nanoscroller/nanoscroller.css"/>
-  <link rel="stylesheet" href="css/app.css?14"/>
+  <link rel="stylesheet" href="css/app.css?15"/>
   <link rel="icon" href="favicon.ico" type="image/x-icon" />
 
   <meta property="og:title" content="Webogram">
@@ -51,11 +51,11 @@
   <script type="text/javascript" src="js/lib/mtproto.js?17"></script>
 
   <script type="text/javascript" src="js/util.js"></script>
-  <script type="text/javascript" src="js/app.js?10"></script>
+  <script type="text/javascript" src="js/app.js?11"></script>
   <script type="text/javascript" src="js/services.js?13"></script>
-  <script type="text/javascript" src="js/controllers.js?19"></script>
+  <script type="text/javascript" src="js/controllers.js?20"></script>
   <script type="text/javascript" src="js/filters.js?3"></script>
-  <script type="text/javascript" src="js/directives.js?11"></script>
+  <script type="text/javascript" src="js/directives.js?12"></script>
 
 </body>
 </html>

app/js/app.js

@@ -55,7 +55,7 @@ config(['$locationProvider', '$routeProvider', '$compileProvider', function($loc
   // $locationProvider.html5Mode(true);
   $routeProvider.when('/', {templateUrl: 'partials/welcome.html?2', controller: 'AppWelcomeController'});
   $routeProvider.when('/login', {templateUrl: 'partials/login.html?3', controller: 'AppLoginController'});
-  $routeProvider.when('/im', {templateUrl: 'partials/im.html?7', controller: 'AppIMController', reloadOnSearch: false});
+  $routeProvider.when('/im', {templateUrl: 'partials/im.html?8', controller: 'AppIMController', reloadOnSearch: false});
   $routeProvider.otherwise({redirectTo: '/'});
 
 }]);

app/js/controllers.js

@@ -319,6 +319,7 @@ angular.module('myApp.controllers', [])
         $scope.typing = {};
         $scope.state = {loaded: true};
         $scope.$broadcast('ui_peer_change');
+        $scope.$broadcast('ui_history_change');
       }
     }
 
@@ -373,6 +374,8 @@ angular.module('myApp.controllers', [])
     function showEmptyHistory () {
       $scope.state = {notSelected: true};
       $scope.history = [];
+
+      $scope.$broadcast('ui_history_change');
     }
 
 

app/js/directives.js

@@ -106,6 +106,8 @@ angular.module('myApp.directives', ['myApp.filters'])
           scrollableWrap = $('.im_history_scrollable_wrap', element)[0],
           scrollable = $('.im_history_scrollable', element)[0],
           panelWrap = $('.im_history_panel_wrap', element)[0],
+          sendPanelWrap = $('.im_send_panel_wrap', element)[0],
+          sendFormWrap1 = $('.im_send_form_wrap1', element)[0],
           sendFormWrap = $('.im_send_form_wrap', element)[0],
           moreNotified = false;
 
@@ -197,6 +199,18 @@ angular.module('myApp.directives', ['myApp.filters'])
         });
       });
 
+      scope.$on('ui_editor_change', function (e, data) {
+        if (data.start) {
+          $(sendFormWrap1).css({height: $(sendFormWrap).height()});
+          $(sendPanelWrap).addClass('im_panel_fixed_bottom');
+        } else {
+          $(sendFormWrap1).css({height: 'auto'});
+          $(sendPanelWrap).removeClass('im_panel_fixed_bottom');
+        }
+      });
+
+      scope.$on('ui_editor_resize', updateSizes);
+
       var atBottom = true;
       $(scrollableWrap).on('scroll', function (e) {
         if ($(scrollableWrap).hasClass('im_history_to_bottom')) {
@@ -215,10 +229,10 @@ angular.module('myApp.directives', ['myApp.filters'])
 
       function updateSizes (heightOnly) {
         $(historyWrap).css({
-          height: $($window).height() - panelWrap.offsetHeight - sendFormWrap.offsetHeight - 90
+          height: $($window).height() - panelWrap.offsetHeight - sendPanelWrap.offsetHeight - 90
         });
         $(historyEl).css({
-          minHeight: $($window).height() - panelWrap.offsetHeight - sendFormWrap.offsetHeight - 90 - 44
+          minHeight: $($window).height() - panelWrap.offsetHeight - sendPanelWrap.offsetHeight - 90 - 44
         });
 
         if (heightOnly) return;
@@ -263,6 +277,16 @@ angular.module('myApp.directives', ['myApp.filters'])
         editorElement = richTextarea;
         $(richTextarea).addClass('form-control');
         $(richTextarea).attr('placeholder', $(messageField).attr('placeholder'));
+
+        var h = $(richTextarea).height();
+        $(richTextarea).on('keydown keyup change', function (e) {
+          scope.$emit('ui_editor_change', {start: e.type == 'keydown'});
+          var newH = $(richTextarea).height();
+          if (h != newH) {
+            h = newH;
+            scope.$emit('ui_editor_resize');
+          }
+        });
       }
 
       // $(emojiMenu.firstChild).addClass('nano').nanoScroller({preventPageScrolling: true, tabIndex: -1});
@@ -313,7 +337,8 @@ angular.module('myApp.directives', ['myApp.filters'])
       function updateField () {
         var html = $('<div>').text(scope.draftMessage.text || '').html();
         html = html.replace(/\n/g, '<br/>');
-        $(richTextarea).html(html)
+        $(richTextarea).html(html);
+        $(richTextarea).trigger('change');
       }
 
       $('body').on('dragenter dragleave dragover drop', onDragDropEvent);

app/partials/im.html

@@ -79,6 +79,10 @@
 
           </div>
 
+          <div class="im_send_panel_wrap">
+
+            <div class="im_send_form_wrap1">
+
               <div class="im_send_form_wrap clearfix" ng-controller="AppImSendController">
                 <div class="pull-right im_panel_peer_photo" ng-click="openUser(historyPeer.id)" ng-if="historyPeer.id > 0">
                   <img
@@ -125,6 +129,11 @@
               </div>
 
             </div>
+
+
+          </div>
+
+        </div>
       </div>
 
     </div>