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
Split 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 { @@ -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 { @@ -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 { @@ -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;

8
app/index.html
Unescape View File

@ -7,7 +7,7 @@ @@ -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 @@ @@ -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>

2
app/js/app.js
Unescape View File

@ -55,7 +55,7 @@ config(['$locationProvider', '$routeProvider', '$compileProvider', function($loc @@ -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: '/'});
}]);

3
app/js/controllers.js
Unescape View File

@ -319,6 +319,7 @@ angular.module('myApp.controllers', []) @@ -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', []) @@ -373,6 +374,8 @@ angular.module('myApp.controllers', [])
function showEmptyHistory () {
$scope.state = {notSelected: true};
$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']) @@ -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']) @@ -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']) @@ -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']) @@ -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']) @@ -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);

85
app/partials/im.html
Unescape View File

@ -79,49 +79,58 @@ @@ -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_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_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_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>
<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>
<button type="submit" class="btn btn-tg im_submit">Send</button>
</form>
</div>
<button type="submit" class="btn btn-tg im_submit">Send</button>
</form>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save