Added resize to message field
This commit is contained in:
parent
b5572b4f2a
commit
8ac9589943
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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: '/'});
|
||||
|
||||
}]);
|
||||
|
@ -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');
|
||||
}
|
||||
|
||||
|
||||
|
@ -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);
|
||||
|
@ -79,49 +79,58 @@
|
||||
|
||||
</div>
|
||||
|
||||
<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
|
||||
class="im_panel_peer_photo"
|
||||
my-load-thumb
|
||||
thumb="historyPeer.photo"
|
||||
/>
|
||||
<i class="icon im_panel_peer_online" ng-show="historyPeer.data.status._ == 'userStatusOnline'"></i>
|
||||
</div>
|
||||
<div class="pull-right im_panel_peer_photo" ng-click="openChat(-historyPeer.id)" ng-if="historyPeer.id < 0">
|
||||
<img
|
||||
class="im_panel_peer_photo"
|
||||
my-load-thumb
|
||||
thumb="historyPeer.photo"
|
||||
/>
|
||||
</div>
|
||||
<div class="pull-left im_panel_own_photo">
|
||||
<img
|
||||
class="im_panel_own_photo"
|
||||
my-load-thumb
|
||||
thumb="ownPhoto"
|
||||
/>
|
||||
</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_panel_wrap">
|
||||
|
||||
<div class="im_emoji_btn pull-right">
|
||||
<i class="icon icon-emoji"></i>
|
||||
<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
|
||||
class="im_panel_peer_photo"
|
||||
my-load-thumb
|
||||
thumb="historyPeer.photo"
|
||||
/>
|
||||
<i class="icon im_panel_peer_online" ng-show="historyPeer.data.status._ == 'userStatusOnline'"></i>
|
||||
</div>
|
||||
<div class="pull-right im_panel_peer_photo" ng-click="openChat(-historyPeer.id)" ng-if="historyPeer.id < 0">
|
||||
<img
|
||||
class="im_panel_peer_photo"
|
||||
my-load-thumb
|
||||
thumb="historyPeer.photo"
|
||||
/>
|
||||
</div>
|
||||
<div class="pull-left im_panel_own_photo">
|
||||
<img
|
||||
class="im_panel_own_photo"
|
||||
my-load-thumb
|
||||
thumb="ownPhoto"
|
||||
/>
|
||||
</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_emoji_btn pull-right">
|
||||
<i class="icon icon-emoji"></i>
|
||||
</div>
|
||||
|
||||
<div class="im_attach pull-right">
|
||||
<input type="file" class="im_attach_input" size="28" multiple="true" />
|
||||
<i class="icon icon-paperclip"></i>
|
||||
</div>
|
||||
|
||||
<div class="im_media_attach pull-right">
|
||||
<input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/x-png, image/png, image/gif, image/jpeg, video/*" />
|
||||
<i class="icon icon-camera"></i>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-tg im_submit">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="im_attach pull-right">
|
||||
<input type="file" class="im_attach_input" size="28" multiple="true" />
|
||||
<i class="icon icon-paperclip"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="im_media_attach pull-right">
|
||||
<input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/x-png, image/png, image/gif, image/jpeg, video/*" />
|
||||
<i class="icon icon-camera"></i>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-tg im_submit">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user