Improved mobile chat form
This commit is contained in:
Igor Zhukov
parent
d16c8781f3
commit
58e9fe32d2
@ -250,6 +250,7 @@ input[type="number"] {
|
||||
.tg_page_head .navbar-inverse .navbar-toggle {
|
||||
border-color: #497495;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
.tg_page_head .navbar-inverse .navbar-collapse,
|
||||
.tg_page_head .navbar-inverse .navbar-form {
|
||||
@ -289,9 +290,6 @@ input[type="number"] {
|
||||
padding: 5px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.dropdown-header {
|
||||
padding: 3px 14px;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
background: #111111;
|
||||
|
||||
@ -3,6 +3,20 @@
|
||||
html {
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu {
|
||||
border-radius: 0;
|
||||
}
|
||||
.dropdown-menu > li > a {
|
||||
padding: 15px 17px 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.dropdown-menu .divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.tg_page_head .navbar > .container .navbar-brand {
|
||||
padding-left: 9px;
|
||||
}
|
||||
@ -21,12 +35,20 @@ html {
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 11px 20px 10px;
|
||||
padding: 12px 20px 11px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.tg_page_head .navbar-inverse .navbar-toggle:hover,
|
||||
.tg_page_head .navbar-inverse .navbar-toggle:active,
|
||||
.tg_page_head .navbar-inverse .navbar-toggle:focus,
|
||||
.tg_page_head .navbar-inverse .open .navbar-toggle {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
|
||||
.navbar_peer_not_selected .navbar-toggle-wrap .navbar-toggle {
|
||||
padding: 15px 16px;
|
||||
/*padding: 9px 10px;*/
|
||||
padding: 16px 17px;
|
||||
}
|
||||
.navbar-toggle-wrap .navbar-toggle .icon-bar {
|
||||
background-color: #d7e5f0;
|
||||
@ -54,12 +76,13 @@ html {
|
||||
display: block;
|
||||
}
|
||||
.navbar-toggle-wrap .dropdown-menu {
|
||||
margin-top: 4px;
|
||||
right: -49px;
|
||||
margin-top: 6px;
|
||||
right: -40px;
|
||||
left: auto;
|
||||
width: 195px;
|
||||
}
|
||||
.navbar_peer_not_selected .navbar-toggle-wrap .dropdown-menu {
|
||||
right: 0;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
.navbar-search-wrap {
|
||||
@ -71,9 +94,10 @@ html {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.navbar-search-wrap:hover,
|
||||
.navbar-search-wrap:link,
|
||||
.navbar-search-wrap:active {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
.icon-search {
|
||||
display: inline-block;
|
||||
@ -138,7 +162,7 @@ html {
|
||||
color: #b9cfe3;
|
||||
}
|
||||
.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:active {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
.navbar-quick-nav .icon-back {
|
||||
position: absolute;
|
||||
@ -299,7 +323,7 @@ html {
|
||||
margin: 0 15px;
|
||||
}
|
||||
.im_send_panel_wrap {
|
||||
padding: 10px 5px;
|
||||
padding: 10px 0 12px;
|
||||
}
|
||||
.icon-select-tick {
|
||||
margin: 10px 0 0 -24px
|
||||
@ -380,12 +404,6 @@ a.im_message_author {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.im_send_form {
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.im_edit_flush_link,
|
||||
.im_edit_cancel_link,
|
||||
.im_edit_delete_btn,
|
||||
@ -588,53 +606,143 @@ a.im_dialog_selected .im_dialog_unread {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.im_send_form {
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: none;
|
||||
}
|
||||
.im_send_field_wrap {
|
||||
margin-right: 50px;
|
||||
margin-left: 42px;
|
||||
}
|
||||
.im_media_attach,
|
||||
.im_attach {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.im_submit {
|
||||
background: none;
|
||||
width: 50px;
|
||||
min-width: 0;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
background: url(../img/icons/mobile/Msg_send_active.png) 15px 3px no-repeat;
|
||||
background-size: 24px 24px;
|
||||
border: 0;
|
||||
color: #1877c3;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
padding: 0 6px;
|
||||
color: transparent;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 45px;
|
||||
min-width: 0;
|
||||
line-height: 32px;
|
||||
}
|
||||
.is_1x .im_submit {
|
||||
background: url(../img/icons/mobile/Msg_send_active.png) 15px 3px no-repeat;
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
.im_submit:hover {
|
||||
color: #1877c3;
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
.im_submit:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
.im_submit_text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.im_media_attach {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
padding: 4px 13px 4px 16px;
|
||||
}
|
||||
|
||||
.icon-camera {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
vertical-align: text-top;
|
||||
background: url(../img/icons/mobile/Msg_attach.png) 0 0 no-repeat;
|
||||
background-size: 22px 22px;
|
||||
opacity: 1;
|
||||
margin: 0;
|
||||
}
|
||||
.is_1x .icon-camera {
|
||||
background-image: url(../img/icons/mobile/Msg_attach.png);
|
||||
}
|
||||
|
||||
.im_media_attach:active .icon-camera,
|
||||
.is_1x .im_media_attach:active .icon-camera {
|
||||
background-position: 0 0;
|
||||
background-image: url(../img/icons/mobile/Msg_attach_active.png);
|
||||
}
|
||||
|
||||
.im_media_attach,
|
||||
.im_attach,
|
||||
.im_send_form_empty .im_submit {
|
||||
display: none;
|
||||
}
|
||||
.im_send_form_empty .im_media_attach {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.im_emoji_btn {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
padding: 5px 13px 4px 13px;
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.icon-emoji {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
vertical-align: text-top;
|
||||
background: url(../img/icons/mobile/Msg_smile.png) 0 0 no-repeat;
|
||||
background-size: 22px 22px;
|
||||
opacity: 1;
|
||||
margin: 0;
|
||||
}
|
||||
.is_1x .icon-emoji {
|
||||
background-image: url(../img/icons/mobile/Msg_smile.png);
|
||||
}
|
||||
.im_emoji_btn:active .icon-emoji,
|
||||
.is_1x .im_emoji_btn:active .icon-emoji,
|
||||
.im_emoji_btn.on .icon-emoji,
|
||||
.is_1x .im_emoji_btn.on .icon-emoji {
|
||||
background-position: 0 0;
|
||||
background-image: url(../img/icons/mobile/Msg_smile_active.png);
|
||||
}
|
||||
|
||||
.im_send_field_wrap {
|
||||
margin-right: 50px;
|
||||
margin-left: 48px;
|
||||
}
|
||||
.im_send_field_wrap .form-control {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.emoji-wysiwyg-editor {
|
||||
min-height: 32px;
|
||||
max-height: 150px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.emoji-wysiwyg-editor:empty {
|
||||
background: #f1f1f1;
|
||||
border-color: #f1f1f1;
|
||||
content: attr(placeholder);
|
||||
}
|
||||
.emoji-wysiwyg-editor:active,
|
||||
.emoji-wysiwyg-editor:focus {
|
||||
box-shadow: none;
|
||||
outline: 0;
|
||||
background: #FFF;
|
||||
border-color: #d9dbde;
|
||||
content: none;
|
||||
}
|
||||
|
||||
|
||||
.emoji-menu {
|
||||
margin-left: -19px;
|
||||
margin-top: -257px;
|
||||
margin-left: -20px;
|
||||
margin-top: -267px;
|
||||
}
|
||||
|
||||
.im_edit_panel_wrap {
|
||||
@ -681,4 +789,4 @@ a.im_dialog_selected .im_dialog_unread {
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -709,7 +709,9 @@ angular.module('myApp.directives', ['myApp.filters'])
|
||||
.on('keyup', function (e) {
|
||||
updateHeight();
|
||||
|
||||
$scope.draftMessage.text = richTextarea.innerText;
|
||||
$scope.$apply(function () {
|
||||
$scope.draftMessage.text = richTextarea.innerText;
|
||||
});
|
||||
|
||||
$timeout.cancel(updatePromise);
|
||||
updatePromise = $timeout(updateValue, 1000);
|
||||
@ -792,7 +794,7 @@ angular.module('myApp.directives', ['myApp.filters'])
|
||||
lastLength = 0;
|
||||
};
|
||||
|
||||
function updateField () {
|
||||
function updateRichTextarea () {
|
||||
if (richTextarea) {
|
||||
$timeout.cancel(updatePromise);
|
||||
var html = $('<div>').text($scope.draftMessage.text || '').html();
|
||||
@ -837,7 +839,7 @@ angular.module('myApp.directives', ['myApp.filters'])
|
||||
|
||||
$scope.$on('ui_message_send', focusField);
|
||||
|
||||
$scope.$on('ui_peer_draft', updateField);
|
||||
$scope.$on('ui_peer_draft', updateRichTextarea);
|
||||
$scope.$on('ui_message_before_send', updateValue);
|
||||
|
||||
function focusField () {
|
||||
|
||||
@ -24,17 +24,12 @@
|
||||
<li><a ng-click="logOut()">Log Out</a></li>
|
||||
</ul>
|
||||
<ul ng-if="curDialog.peer && isLoggedIn" class="dropdown-menu">
|
||||
<li><a ng-click="showPeerInfo()" ng-switch="historyPeer.id > 0">
|
||||
<span ng-switch-when="true">Profile</span>
|
||||
<span ng-switch-default>Group info</span>
|
||||
</a></li>
|
||||
<li><a ng-click="toggleEdit()">Edit chat</a></li>
|
||||
<li><a ng-click="toggleEdit()">Edit messages</a></li>
|
||||
<li ng-if="!historyFilter.mediaType" class="divider"></li>
|
||||
<li ng-if="!historyFilter.mediaType" class="dropdown-header">Media</li>
|
||||
<li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('photos')">Photos</a></li>
|
||||
<li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('video')">Videos</a></li>
|
||||
<li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('documents')">Documents</a></li>
|
||||
<li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('audio')">Voice messages</a></li>
|
||||
<li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('audio')">Voice notes</a></li>
|
||||
</ul>
|
||||
<ul ng-if="!isLoggedIn" class="dropdown-menu">
|
||||
<li><a href="https://github.com/zhukov/webogram" target="_blank">About</a></li>
|
||||
|
||||
@ -219,7 +219,7 @@
|
||||
thumb="ownPhoto"
|
||||
/>
|
||||
</div>
|
||||
<form my-send-form draft-message="draftMessage" class="im_send_form" ng-submit="sendMessage($event)">
|
||||
<form my-send-form draft-message="draftMessage" class="im_send_form" ng-class="{im_send_form_empty: !draftMessage.text.length}" ng-submit="sendMessage($event)">
|
||||
|
||||
<div class="im_send_field_wrap">
|
||||
<div class="im_send_dropbox_wrap"> Drop photos here to send </div>
|
||||
@ -240,7 +240,9 @@
|
||||
<i class="icon icon-emoji"></i>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-success im_submit">Send</button>
|
||||
<button type="submit" class="btn btn-success im_submit">
|
||||
<span class="im_submit_text">Send</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user