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

Improved keyboard support

master
Igor Zhukov 9 years ago
parent
ba25a32b14
commit
9a94bdc980
7 changed files with 63 additions and 152 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. BIN
      app/img/icons/General.png
  2. BIN
      app/img/icons/General_2x.png
  3. 8
      app/js/controllers.js
  4. 79
      app/less/app.less
  5. 125
      app/less/desktop.less
  6. 2
      app/partials/desktop/im.html
  7. 1
      app/vendor/jquery.nanoscroller/nanoscroller.js

BIN
app/img/icons/General.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
app/img/icons/General_2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 14 KiB

8
app/js/controllers.js
Unescape View File

@ -1398,7 +1398,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
$scope.$broadcast('ui_keyboard_update'); $scope.$broadcast('ui_keyboard_update');
} }
function replyKeyboardToggle () { function replyKeyboardToggle ($event) {
var replyKeyboard = $scope.historyState.replyKeyboard; var replyKeyboard = $scope.historyState.replyKeyboard;
if (!replyKeyboard) { if (!replyKeyboard) {
return; return;
@ -1406,6 +1406,8 @@ angular.module('myApp.controllers', ['myApp.i18n'])
replyKeyboard.pFlags.hidden = !replyKeyboard.pFlags.hidden; replyKeyboard.pFlags.hidden = !replyKeyboard.pFlags.hidden;
console.log('toggle reply markup', peerID, replyKeyboard); console.log('toggle reply markup', peerID, replyKeyboard);
$scope.$broadcast('ui_keyboard_update'); $scope.$broadcast('ui_keyboard_update');
return cancelEvent($event);
} }
function botStart () { function botStart () {
@ -2031,10 +2033,10 @@ angular.module('myApp.controllers', ['myApp.i18n'])
$scope.$broadcast('ui_peer_reply'); $scope.$broadcast('ui_peer_reply');
} }
function enterSlash (event) { function enterSlash ($event) {
$scope.draftMessage.text = '/'; $scope.draftMessage.text = '/';
$scope.$broadcast('ui_peer_draft'); $scope.$broadcast('ui_peer_draft');
return cancelEvent(event); return cancelEvent($event);
} }
function onMessageChange(newVal) { function onMessageChange(newVal) {

79
app/less/app.less
Unescape View File

@ -858,7 +858,7 @@ a.tg_radio_on:hover i.icon-radio {
vertical-align: top; vertical-align: top;
margin-right: 18px; margin-right: 18px;
.image-2x('../img/icons/General.png', 40px, 778px); .image-2x('../img/icons/General.png', 40px, 798px);
background-position: -5px -10px; background-position: -5px -10px;
} }
.icon-tg-title { .icon-tg-title {
@ -899,7 +899,7 @@ a.tg_radio_on:hover i.icon-radio {
margin-left: 12px; margin-left: 12px;
margin-top: -1px; margin-top: -1px;
.image-2x('../img/icons/General.png', 40px, 778px); .image-2x('../img/icons/General.png', 40px, 798px);
background-position: -18px -50px; background-position: -18px -50px;
} }
@ -1617,7 +1617,7 @@ div.im_message_video_thumb {
height: 18px; height: 18px;
margin: 12px 15px; margin: 12px 15px;
.image-2x('../img/icons/General.png', 40px, 778px); .image-2x('../img/icons/General.png', 40px, 798px);
background-position: -14px -509px; background-position: -14px -509px;
.im_message_file_button_dl_doc & { .im_message_file_button_dl_doc & {
@ -1638,7 +1638,7 @@ div.im_message_video_thumb {
height: 16px; height: 16px;
margin: 13px 16px; margin: 13px 16px;
.image-2x('../img/icons/General.png', 40px, 778px); .image-2x('../img/icons/General.png', 40px, 798px);
background-position: -13px -611px; background-position: -13px -611px;
} }
@ -2056,34 +2056,40 @@ a.im_message_fwd_photo {
} }
.im_message_mymention { .im_message_mymention {
background: #fff8cc; background: #fff8cc;
/*border-bottom: 1px solid #ffe222;*/
/*font-weight: bold;*/
} }
.im_send_field_wkeyboard {
.im_send_buttons_wrap {
// display: none;
}
}
.reply_markup_wrap { .reply_markup_wrap {
margin: 7px -2px 0; margin: 15px -2px 0;
} }
.reply_markup_scrollable_wrap.has-scrollbar .reply_markup_row { .reply_markup_row {
margin-right: 6px; padding: 4px 0;
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
}
.reply_markup_scrollable_wrap.active-scrollbar & {
margin-right: 6px;
}
} }
.reply_markup_button_wrap { .reply_markup_button_wrap {
display: inline-block; display: inline-block;
padding: 2px 2px; padding: 0 4px;
} }
.reply_markup_button { .reply_markup_button {
color: #3a6d99;
display: block; display: block;
width: 100%; width: 100%;
background: #EFEFEF; background: #f0f4f7;
height: 30px;
font-size: 13px;
margin: 0; margin: 0;
padding: 6px 6px;
} }
.reply_markup_button:hover { .reply_markup_button:hover {
// background: #DDD; color: #3a6d99;
background: #f2f6fa; background: #dfe8f0;
} }
.reply_markup_button_w1 {width: 100%;} .reply_markup_button_w1 {width: 100%;}
.reply_markup_button_w2 {width: 50%;} .reply_markup_button_w2 {width: 50%;}
@ -2262,7 +2268,7 @@ img.img_fullsize {
vertical-align: top; vertical-align: top;
opacity: 0.8; opacity: 0.8;
.image-2x('../img/icons/General.png', 40px, 778px); .image-2x('../img/icons/General.png', 40px, 798px);
background-position: -9px -335px; background-position: -9px -335px;
} }
@ -2679,35 +2685,38 @@ a.composer_command_option.composer_autocomplete_option_active .composer_command_
vertical-align: top; vertical-align: top;
opacity: 0.8; opacity: 0.8;
.image-2x('../img/icons/General.png', 40px, 778px); .image-2x('../img/icons/General.png', 40px, 798px);
background-position: -9px -335px; background-position: -9px -335px;
} }
.composer_keyboard_btn { .composer_keyboard_btn {
display: block; display: block;
position: absolute; position: absolute;
right: 28px; right: 37px;
top: -2px; top: 4px;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
width: 22px; width: 20px;
height: 22px; height: 20px;
margin-top: 1px;
} }
.icon-hide-keyboard { .icon-keyboard {
display: inline-block; display: inline-block;
width: 16px; width: 20px;
height: 16px; height: 20px;
border: 2px solid #BBB;
border-top: 0;
border-left: 0;
.transform(rotate(45deg));
vertical-align: top; vertical-align: top;
opacity: 0.8; opacity: 0.8;
}
.composer_keyboard_btn:hover .icon-hide-keyboard { .image-2x('../img/icons/General.png', 40px, 798px);
opacity: 1.0; background-position: -10px -730px;
.composer_keyboard_btn.active & {
background-position: -10px -760px;
}
.composer_keyboard_btn:hover & {
opacity: 1.0;
}
} }

125
app/less/desktop.less
Unescape View File

@ -205,7 +205,7 @@
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin-top: 3px; margin-top: 3px;
.image-2x('../img/icons/General.png', 40px, 778px); .image-2x('../img/icons/General.png', 40px, 798px);
background-position: -10px -111px; background-position: -10px -111px;
} }
@ -217,7 +217,7 @@
margin-top: 2px; margin-top: 2px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
.image-2x('../img/icons/General.png', 40px, 778px); .image-2x('../img/icons/General.png', 40px, 798px);
background-position: -11px -135px; background-position: -11px -135px;
} }
@ -228,7 +228,7 @@
margin-top: 1px; margin-top: 1px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
.image-2x('../img/icons/General.png', 40px, 778px); .image-2x('../img/icons/General.png', 40px, 798px);
background-position: -10px -163px; background-position: -10px -163px;
} }
@ -239,7 +239,7 @@
margin-top: 1px; margin-top: 1px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
.image-2x('../img/icons/General.png', 40px, 778px); .image-2x('../img/icons/General.png', 40px, 798px);
background-position: -10px -637px; background-position: -10px -637px;
} }
@ -250,7 +250,7 @@
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
.image-2x('../img/icons/General.png', 40px, 778px); .image-2x('../img/icons/General.png', 40px, 798px);
background-position: -10px -193px; background-position: -10px -193px;
} }
} }
@ -378,7 +378,7 @@
margin-right: 12px; margin-right: 12px;
vertical-align: top; vertical-align: top;
.image-2x('../img/icons/General.png', 40px, 778px); .image-2x('../img/icons/General.png', 40px, 798px);
background-position: 0 0; background-position: 0 0;
} }
@ -707,8 +707,8 @@ a.footer_link.active:active {
background: rgba(137, 160, 179, 0.1); background: rgba(137, 160, 179, 0.1);
right: 2px; right: 2px;
width: 3px; width: 3px;
top: 2px; top: 0;
bottom: 2px; bottom: 0;
.rounded(1px); .rounded(1px);
& > .nano-slider { & > .nano-slider {
@ -852,7 +852,7 @@ a.footer_link.active:active {
} }
&_edit_panel_wrap { &_edit_panel_wrap {
padding: 0px 0 43px; padding: 0px 0 41px;
margin: 0 24px 0 12px; margin: 0 24px 0 12px;
} }
@ -1096,7 +1096,7 @@ a.footer_link.active:active {
.im_send_panel_wrap { .im_send_panel_wrap {
max-width: 554px; max-width: 554px;
padding-bottom: 23px; padding-bottom: 21px;
} }
.im_send_form { .im_send_form {
max-width: 382px; max-width: 382px;
@ -1190,7 +1190,7 @@ a.im_panel_peer_photo .peer_initials {
opacity: 0.8; opacity: 0.8;
margin: 0; margin: 0;
.image-2x('../img/icons/General.png', 40px, 778px); .image-2x('../img/icons/General.png', 40px, 798px);
background-position: -11px -455px; background-position: -11px -455px;
} }
@ -1239,7 +1239,7 @@ a.im_panel_peer_photo .peer_initials {
vertical-align: top; vertical-align: top;
opacity: 0.8; opacity: 0.8;
.image-2x('../img/icons/General.png', 40px, 778px); .image-2x('../img/icons/General.png', 40px, 798px);
background-position: -10px -399px; background-position: -10px -399px;
} }
@ -1413,107 +1413,6 @@ a.im_panel_peer_photo .peer_initials {
} }
} }
.im_send_field_wkeyboard {
a {
&.im_panel_peer_photo,
&.im_panel_own_photo {
display: none;
}
}
.im_send_field_wrap {
margin-bottom: 0;
}
.composer {
&_rich_textarea,
&_textarea {
min-height: 25px;
padding-right: 25px;
}
&_emoji_insert_btn {
top: 0;
right: 0px;
margin-top: -3px;
}
&_emoji_panel {
display: none;
}
}
.im_submit {
position: absolute;
top: 0;
left: 100%;
margin: 0 0 0 15px;
}
.im_media_attach {
position: absolute;
top: -6px;
left: -43px;
width: 19px;
height: 24px;
}
.icon-camera {
display: inline-block;
width: 19px;
height: 23px;
vertical-align: text-top;
opacity: 0.8;
margin-top: -1px;
.image-2x('../img/icons/IconsetW.png', 42px, 1171px);
background-position: -12px -68px;
}
.im_media_attach {
&:hover .icon-camera,
&:active .icon-camera {
background-position: -12px -100px;
opacity: 1;
}
}
.im_attach {
display: none;
position: absolute;
top: 0;
right: 100%;
margin: 0;
margin-right: 45px;
margin-top: 1px;
}
.icon-emoji {
display: inline-block;
width: 22px;
height: 22px;
vertical-align: text-top;
opacity: 1;
margin: 0;
.image-2x('../img/icons/IconsetW.png', 42px, 1171px);
background-position: -10px -771px;
}
.composer_emoji_insert_btn:active .icon-emoji,
.is_1x .composer_emoji_insert_btn:active .icon-emoji,
.composer_emoji_insert_btn.composer_emoji_insert_btn_on .icon-emoji,
.is_1x .composer_emoji_insert_btn.composer_emoji_insert_btn_on .icon-emoji {
background-position: -10px -803px;
}
.im_send_dropbox_wrap {
display: none;
}
}
/* Peer modals */ /* Peer modals */
.user_modal { .user_modal {
&_window .modal-dialog { &_window .modal-dialog {

2
app/partials/desktop/im.html
Unescape View File

@ -175,7 +175,7 @@
<div class="im_send_field_wrap"> <div class="im_send_field_wrap">
<a class="composer_emoji_insert_btn"><i class="icon icon-emoji"></i></a> <a class="composer_emoji_insert_btn"><i class="icon icon-emoji"></i></a>
<a class="composer_command_btn" ng-show="!historyState.replyKeyboard && commands.list.length > 0 && !draftMessage.text.length" ng-mousedown="enterSlash($event)"><i class="icon icon-slash"></i></a> <a class="composer_command_btn" ng-show="!historyState.replyKeyboard && commands.list.length > 0 && !draftMessage.text.length" ng-mousedown="enterSlash($event)"><i class="icon icon-slash"></i></a>
<a class="composer_keyboard_btn" ng-show="historyState.replyKeyboard._ == 'replyKeyboardMarkup'" ng-click="replyKeyboardToggle()"><i class="icon" ng-class="historyState.replyKeyboard.pFlags.hidden ? 'icon-keyboard' : 'icon-hide-keyboard'"></i></a> <a class="composer_keyboard_btn" ng-show="historyState.replyKeyboard._ == 'replyKeyboardMarkup'" ng-mousedown="replyKeyboardToggle($event)" ng-class="!historyState.replyKeyboard.pFlags.hidden ? 'active' : ''"><i class="icon icon-keyboard"></i></a>
<div class="im_send_dropbox_wrap" my-i18n="im_photos_drop_text"></div> <div class="im_send_dropbox_wrap" my-i18n="im_photos_drop_text"></div>
<textarea ng-model="draftMessage.text" placeholder="{{'im_message_field_placeholder' | i18n}}" class="form-control im_message_field no_outline" dir="auto"></textarea> <textarea ng-model="draftMessage.text" placeholder="{{'im_message_field_placeholder' | i18n}}" class="form-control im_message_field no_outline" dir="auto"></textarea>

1
app/vendor/jquery.nanoscroller/nanoscroller.js vendored
Unescape View File

@ -743,6 +743,7 @@
} else { } else {
this.slider.show(); this.slider.show();
} }
this.$el.toggleClass('active-scrollbar', this.isActive);
this.pane.css({ this.pane.css({
opacity: (this.options.alwaysVisible ? 1 : ''), opacity: (this.options.alwaysVisible ? 1 : ''),
visibility: (this.options.alwaysVisible ? 'visible' : '') visibility: (this.options.alwaysVisible ? 'visible' : '')

Write Preview
Loading…
Cancel
Save