From 8ac9589943484931f82a69387956b8167074b3e7 Mon Sep 17 00:00:00 2001 From: Igor Zhukov Date: Fri, 31 Jan 2014 23:05:24 +0400 Subject: [PATCH] Added resize to message field --- app/css/app.css | 17 ++++++--- app/index.html | 8 ++-- app/js/app.js | 2 +- app/js/controllers.js | 3 ++ app/js/directives.js | 31 ++++++++++++++-- app/partials/im.html | 85 ++++++++++++++++++++++++------------------- 6 files changed, 95 insertions(+), 51 deletions(-) diff --git a/app/css/app.css b/app/css/app.css index 584cfd5b..6e8f98e7 100644 --- a/app/css/app.css +++ b/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; diff --git a/app/index.html b/app/index.html index 014edb3b..873740de 100644 --- a/app/index.html +++ b/app/index.html @@ -7,7 +7,7 @@ - + @@ -51,11 +51,11 @@ - + - + - + diff --git a/app/js/app.js b/app/js/app.js index e152cff9..d30368a7 100644 --- a/app/js/app.js +++ b/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: '/'}); }]); diff --git a/app/js/controllers.js b/app/js/controllers.js index 3867eb91..44905979 100644 --- a/app/js/controllers.js +++ b/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'); } diff --git a/app/js/directives.js b/app/js/directives.js index 61f7ba35..ca4a6e05 100644 --- a/app/js/directives.js +++ b/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 = $('
').text(scope.draftMessage.text || '').html(); html = html.replace(/\n/g, '
'); - $(richTextarea).html(html) + $(richTextarea).html(html); + $(richTextarea).trigger('change'); } $('body').on('dragenter dragleave dragover drop', onDragDropEvent); diff --git a/app/partials/im.html b/app/partials/im.html index e9c481a6..3bf2d586 100644 --- a/app/partials/im.html +++ b/app/partials/im.html @@ -79,49 +79,58 @@
-
-
- - -
-
- -
-
- -
-
-
Drop photos here to send
- +
+ +
+ +
+
+ + +
+
+ +
+
+ +
+ +
Drop photos here to send
+ -
- -
+
+ +
-
- - -
+
+ + +
+ +
+ + +
-
- - + +
- - +
+ +