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

Improved mobile chat form

master
Igor Zhukov 11 years ago
parent
d16c8781f3
commit
58e9fe32d2
5 changed files with 158 additions and 53 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. 4
      app/css/app.css
  2. 182
      app/css/app_mobile.css
  3. 6
      app/js/directives.js
  4. 9
      app/partials/head.html
  5. 6
      app/partials/im.html

4
app/css/app.css
Unescape View File

@ -250,6 +250,7 @@ input[type="number"] {
.tg_page_head .navbar-inverse .navbar-toggle { .tg_page_head .navbar-inverse .navbar-toggle {
border-color: #497495; border-color: #497495;
outline: 0; outline: 0;
border: 0;
} }
.tg_page_head .navbar-inverse .navbar-collapse, .tg_page_head .navbar-inverse .navbar-collapse,
.tg_page_head .navbar-inverse .navbar-form { .tg_page_head .navbar-inverse .navbar-form {
@ -289,9 +290,6 @@ input[type="number"] {
padding: 5px 14px; padding: 5px 14px;
font-size: 13px; font-size: 13px;
} }
.dropdown-header {
padding: 3px 14px;
}
.modal-backdrop { .modal-backdrop {
background: #111111; background: #111111;

182
app/css/app_mobile.css
Unescape View File

@ -3,6 +3,20 @@
html { html {
background: #FFF; 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 { .tg_page_head .navbar > .container .navbar-brand {
padding-left: 9px; padding-left: 9px;
} }
@ -21,12 +35,20 @@ html {
float: none; float: none;
display: block; display: block;
margin: 0; margin: 0;
padding: 11px 20px 10px; padding: 12px 20px 11px;
border-radius: 0; 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 { .navbar_peer_not_selected .navbar-toggle-wrap .navbar-toggle {
padding: 15px 16px; padding: 16px 17px;
/*padding: 9px 10px;*/
} }
.navbar-toggle-wrap .navbar-toggle .icon-bar { .navbar-toggle-wrap .navbar-toggle .icon-bar {
background-color: #d7e5f0; background-color: #d7e5f0;
@ -54,12 +76,13 @@ html {
display: block; display: block;
} }
.navbar-toggle-wrap .dropdown-menu { .navbar-toggle-wrap .dropdown-menu {
margin-top: 4px; margin-top: 6px;
right: -49px; right: -40px;
left: auto; left: auto;
width: 195px;
} }
.navbar_peer_not_selected .navbar-toggle-wrap .dropdown-menu { .navbar_peer_not_selected .navbar-toggle-wrap .dropdown-menu {
right: 0; right: 6px;
} }
.navbar-search-wrap { .navbar-search-wrap {
@ -71,9 +94,10 @@ html {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
} }
.navbar-search-wrap:hover,
.navbar-search-wrap:link, .navbar-search-wrap:link,
.navbar-search-wrap:active { .navbar-search-wrap:active {
background-color: rgba(255,255,255,0.1); background-color: rgba(0,0,0,0.1);
} }
.icon-search { .icon-search {
display: inline-block; display: inline-block;
@ -138,7 +162,7 @@ html {
color: #b9cfe3; color: #b9cfe3;
} }
.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:active { .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 { .navbar-quick-nav .icon-back {
position: absolute; position: absolute;
@ -299,7 +323,7 @@ html {
margin: 0 15px; margin: 0 15px;
} }
.im_send_panel_wrap { .im_send_panel_wrap {
padding: 10px 5px; padding: 10px 0 12px;
} }
.icon-select-tick { .icon-select-tick {
margin: 10px 0 0 -24px margin: 10px 0 0 -24px
@ -380,12 +404,6 @@ a.im_message_author {
display: none; display: none;
} }
.im_send_form {
left: 0;
right: 0;
max-width: none;
}
.im_edit_flush_link, .im_edit_flush_link,
.im_edit_cancel_link, .im_edit_cancel_link,
.im_edit_delete_btn, .im_edit_delete_btn,
@ -588,53 +606,143 @@ a.im_dialog_selected .im_dialog_unread {
margin: 10px; margin: 10px;
} }
.im_send_form { .im_send_form {
position: relative; 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 { .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; border: 0;
color: #1877c3; color: transparent;
font-weight: bold;
font-size: 15px;
padding: 0 6px;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width: 45px; }
min-width: 0; .is_1x .im_submit {
line-height: 32px; background: url(../img/icons/mobile/Msg_send_active.png) 15px 3px no-repeat;
background-size: 24px 24px;
} }
.im_submit:hover { .im_submit:hover {
color: #1877c3; background-color: transparent;
background: none; color: transparent;
} }
.im_submit:active { .im_submit:active {
box-shadow: none; 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 { .im_emoji_btn {
position: absolute; position: absolute;
left: 7px; left: 0;
top: -1px; 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 { .emoji-wysiwyg-editor {
min-height: 32px; min-height: 32px;
max-height: 150px; 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 { .emoji-menu {
margin-left: -19px; margin-left: -20px;
margin-top: -257px; margin-top: -267px;
} }
.im_edit_panel_wrap { .im_edit_panel_wrap {

6
app/js/directives.js
Unescape View File

@ -709,7 +709,9 @@ angular.module('myApp.directives', ['myApp.filters'])
.on('keyup', function (e) { .on('keyup', function (e) {
updateHeight(); updateHeight();
$scope.$apply(function () {
$scope.draftMessage.text = richTextarea.innerText; $scope.draftMessage.text = richTextarea.innerText;
});
$timeout.cancel(updatePromise); $timeout.cancel(updatePromise);
updatePromise = $timeout(updateValue, 1000); updatePromise = $timeout(updateValue, 1000);
@ -792,7 +794,7 @@ angular.module('myApp.directives', ['myApp.filters'])
lastLength = 0; lastLength = 0;
}; };
function updateField () { function updateRichTextarea () {
if (richTextarea) { if (richTextarea) {
$timeout.cancel(updatePromise); $timeout.cancel(updatePromise);
var html = $('<div>').text($scope.draftMessage.text || '').html(); 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_message_send', focusField);
$scope.$on('ui_peer_draft', updateField); $scope.$on('ui_peer_draft', updateRichTextarea);
$scope.$on('ui_message_before_send', updateValue); $scope.$on('ui_message_before_send', updateValue);
function focusField () { function focusField () {

9
app/partials/head.html
Unescape View File

@ -24,17 +24,12 @@
<li><a ng-click="logOut()">Log Out</a></li> <li><a ng-click="logOut()">Log Out</a></li>
</ul> </ul>
<ul ng-if="curDialog.peer &amp;&amp; isLoggedIn" class="dropdown-menu"> <ul ng-if="curDialog.peer &amp;&amp; isLoggedIn" class="dropdown-menu">
<li><a ng-click="showPeerInfo()" ng-switch="historyPeer.id > 0"> <li><a ng-click="toggleEdit()">Edit messages</a></li>
<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 ng-if="!historyFilter.mediaType" class="divider"></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('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('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('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>
<ul ng-if="!isLoggedIn" class="dropdown-menu"> <ul ng-if="!isLoggedIn" class="dropdown-menu">
<li><a href="https://github.com/zhukov/webogram" target="_blank">About</a></li> <li><a href="https://github.com/zhukov/webogram" target="_blank">About</a></li>

6
app/partials/im.html
Unescape View File

@ -219,7 +219,7 @@
thumb="ownPhoto" thumb="ownPhoto"
/> />
</div> </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_field_wrap">
<div class="im_send_dropbox_wrap"> Drop photos here to send </div> <div class="im_send_dropbox_wrap"> Drop photos here to send </div>
@ -240,7 +240,9 @@
<i class="icon icon-emoji"></i> <i class="icon icon-emoji"></i>
</div> </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> </form>
</div> </div>

Write Preview
Loading…
Cancel
Save