r4sas
/
webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Added resize to message field

master
Igor Zhukov 11 years ago
parent
b5572b4f2a
commit
8ac9589943
6 changed files with 95 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      app/css/app.css
  2. 8
      app/index.html
  3. 2
      app/js/app.js
  4. 3
      app/js/controllers.js
  5. 31
      app/js/directives.js
  6. 85
      app/partials/im.html

17
app/css/app.css
Unescape View File

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

8
app/index.html
Unescape View File

@ -7,7 +7,7 @@
<link rel="stylesheet" href="vendor/angular/angular-csp.css"/> <link rel="stylesheet" href="vendor/angular/angular-csp.css"/>
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="vendor/jquery.nanoscroller/nanoscroller.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" /> <link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta property="og:title" content="Webogram"> <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/lib/mtproto.js?17"></script>
<script type="text/javascript" src="js/util.js"></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/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/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> </body>
</html> </html>

2
app/js/app.js
Unescape View File

@ -55,7 +55,7 @@ config(['$locationProvider', '$routeProvider', '$compileProvider', function($loc
// $locationProvider.html5Mode(true); // $locationProvider.html5Mode(true);
$routeProvider.when('/', {templateUrl: 'partials/welcome.html?2', controller: 'AppWelcomeController'}); $routeProvider.when('/', {templateUrl: 'partials/welcome.html?2', controller: 'AppWelcomeController'});
$routeProvider.when('/login', {templateUrl: 'partials/login.html?3', controller: 'AppLoginController'}); $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: '/'}); $routeProvider.otherwise({redirectTo: '/'});
}]); }]);

3
app/js/controllers.js
Unescape View File

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

31
app/js/directives.js
Unescape View File

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

85
app/partials/im.html
Unescape View File

@ -79,49 +79,58 @@
</div> </div>
<div class="im_send_form_wrap clearfix" ng-controller="AppImSendController"> <div class="im_send_panel_wrap">
<div class="pull-right im_panel_peer_photo" ng-click="openUser(historyPeer.id)" ng-if="historyPeer.id > 0">
<img <div class="im_send_form_wrap1">
class="im_panel_peer_photo"
my-load-thumb <div class="im_send_form_wrap clearfix" ng-controller="AppImSendController">
thumb="historyPeer.photo" <div class="pull-right im_panel_peer_photo" ng-click="openUser(historyPeer.id)" ng-if="historyPeer.id > 0">
/> <img
<i class="icon im_panel_peer_online" ng-show="historyPeer.data.status._ == 'userStatusOnline'"></i> class="im_panel_peer_photo"
</div> my-load-thumb
<div class="pull-right im_panel_peer_photo" ng-click="openChat(-historyPeer.id)" ng-if="historyPeer.id < 0"> thumb="historyPeer.photo"
<img />
class="im_panel_peer_photo" <i class="icon im_panel_peer_online" ng-show="historyPeer.data.status._ == 'userStatusOnline'"></i>
my-load-thumb </div>
thumb="historyPeer.photo" <div class="pull-right im_panel_peer_photo" ng-click="openChat(-historyPeer.id)" ng-if="historyPeer.id < 0">
/> <img
</div> class="im_panel_peer_photo"
<div class="pull-left im_panel_own_photo"> my-load-thumb
<img thumb="historyPeer.photo"
class="im_panel_own_photo" />
my-load-thumb </div>
thumb="ownPhoto" <div class="pull-left im_panel_own_photo">
/> <img
</div> class="im_panel_own_photo"
<form my-send-form draft-message="draftMessage" class="im_send_form" ng-submit="sendMessage($event)"> my-load-thumb
<div class="im_send_dropbox_wrap"> Drop photos here to send </div> thumb="ownPhoto"
<textarea ng-model="draftMessage.text" placeholder="Write a message..." class="form-control im_message_field"></textarea> />
</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"> <div class="im_emoji_btn pull-right">
<i class="icon icon-emoji"></i> <i class="icon icon-emoji"></i>
</div> </div>
<div class="im_attach pull-right"> <div class="im_attach pull-right">
<input type="file" class="im_attach_input" size="28" multiple="true" /> <input type="file" class="im_attach_input" size="28" multiple="true" />
<i class="icon icon-paperclip"></i> <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>
<div class="im_media_attach pull-right"> <button type="submit" class="btn btn-tg im_submit">Send</button>
<input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/x-png, image/png, image/gif, image/jpeg, video/*" /> </form>
<i class="icon icon-camera"></i>
</div> </div>
<button type="submit" class="btn btn-tg im_submit">Send</button> </div>
</form>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save