From 2aed661086a65147c3a793555cc3583642ee4dd3 Mon Sep 17 00:00:00 2001 From: Igor Zhukov Date: Fri, 13 Feb 2015 17:12:07 +0300 Subject: [PATCH] Improved mobile experience --- app/css/mobile.css | 10 ++-- app/js/directives.js | 8 +++- app/js/message_composer.js | 95 ++++++++++++++++++++++++-------------- 3 files changed, 74 insertions(+), 39 deletions(-) diff --git a/app/css/mobile.css b/app/css/mobile.css index 1e84e566..a444c245 100644 --- a/app/css/mobile.css +++ b/app/css/mobile.css @@ -1165,13 +1165,17 @@ a.mobile_modal_action .tg_checkbox_label { .composer_emoji_tooltip { - margin-left: 10px; - margin-top: -175px; + margin-left: 6px; + margin-top: -170px; width: 262px; + z-index: 10000; } -.composer_emoji_tooltip .composer_emoji_tooltip_content { +.composer_emoji_tooltip .composer_emoji_tooltip_content_wrap { height: 106px; } +.composer_emoji_tooltip_tabs { + margin-bottom: 3px; +} .composer_emoji_tooltip .composer_emoji_tooltip_content .composer_emoji_btn { padding: 5px; } diff --git a/app/js/directives.js b/app/js/directives.js index 3a007c70..f9763bf4 100755 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -1204,7 +1204,9 @@ angular.module('myApp.directives', ['myApp.filters']) composer.setValue($scope.draftMessage.text || ''); updateHeight(); } - composer.focus(); + if (!Config.Navigator.touch) { + composer.focus(); + } }); var sendAwaiting = false; @@ -1214,7 +1216,9 @@ angular.module('myApp.directives', ['myApp.filters']) }); $scope.$on('ui_message_send', function () { sendAwaiting = false; - focusField(); + if (!Config.Navigator.touch) { + focusField(); + } }); function focusField () { diff --git a/app/js/message_composer.js b/app/js/message_composer.js index b03b97c9..7d80fc0a 100644 --- a/app/js/message_composer.js +++ b/app/js/message_composer.js @@ -139,26 +139,30 @@ function EmojiTooltip (btnEl, options) { this.onStickerSelected = options.onStickerSelected; this.getStickers = options.getStickers; - $(this.btnEl).on('mouseenter mouseleave', function (e) { - self.isOverBtn = e.type == 'mouseenter'; - self.createTooltip(); + if (!Config.Navigator.touch) { + $(this.btnEl).on('mouseenter mouseleave', function (e) { + self.isOverBtn = e.type == 'mouseenter'; + self.createTooltip(); - if (self.isOverBtn) { - self.onMouseEnter(true); - } else { - self.onMouseLeave(true); - } - }); + if (self.isOverBtn) { + self.onMouseEnter(true); + } else { + self.onMouseLeave(true); + } + }); + } $(this.btnEl).on('mousedown', function (e) { if (!self.shown) { clearTimeout(self.showTimeout); delete self.showTimeout; + self.createTooltip(); self.show(); } else { clearTimeout(self.hideTimeout); delete self.hideTimeout; self.hide(); } + return cancelEvent(e); }); } @@ -202,20 +206,23 @@ EmojiTooltip.prototype.createTooltip = function () { this.settingsEl = $('.composer_emoji_tooltip_settings', this.tooltip); angular.forEach(['recent', 'smile', 'flower', 'bell', 'car', 'grid', 'stickers'], function (tabName, tabIndex) { - $('') + var tab = $('') .on('mousedown', function (e) { self.selectTab(tabIndex); return cancelEvent(e); }) - .on('mouseenter mouseleave', function (e) { + .appendTo(self.tabsEl); + + if (!Config.Navigator.touch) { + tab.on('mouseenter mouseleave', function (e) { clearTimeout(self.selectTabTimeout); if (e.type == 'mouseenter') { self.selectTabTimeout = setTimeout(function () { self.selectTab(tabIndex); }, 300); } - }) - .appendTo(self.tabsEl); + }); + } }); if (!Config.Mobile) { @@ -238,20 +245,27 @@ EmojiTooltip.prototype.createTooltip = function () { if (self.onStickerSelected) { self.onStickerSelected(sticker); } + if (Config.Mobile) { + self.hide(); + } } return cancelEvent(e); }); - this.tooltipEl.on('mouseenter mouseleave', function (e) { - if (e.type == 'mouseenter') { - self.onMouseEnter(); - } else { - self.onMouseLeave(); - } - }); + if (!Config.Navigator.touch) { + this.tooltipEl.on('mouseenter mouseleave', function (e) { + if (e.type == 'mouseenter') { + self.onMouseEnter(); + } else { + self.onMouseLeave(); + } + }); + } this.selectTab(0); + $(window).on('resize', this.updatePosition.bind(this)); + return true; } @@ -473,19 +487,7 @@ MessageComposer.prototype.onKeyEvent = function (e) { if (e.type == 'keyup') { this.checkAutocomplete(); - if (this.onTyping) { - var now = tsNow(); - if (now - this.lastTyping > 5000) { - var length = (this.richTextareaEl ? this.richTextareaEl[0].textContent : this.textareaEl[0].value).length; - - if (length != this.lastLength) { - this.lastTyping = now; - this.lastLength = length; - this.onTyping(); - } - } - } - + var length = false; if (this.richTextareaEl) { clearTimeout(this.updateValueTO); var now = tsNow(); @@ -496,10 +498,30 @@ MessageComposer.prototype.onKeyEvent = function (e) { this.onChange(); } else { - this.updateValueTO = setTimeout(this.onChange.bind(this), 1000); + length = this.richTextareaEl[0].textContent.length; + if (this.wasEmpty != !length) { + this.wasEmpty = !this.wasEmpty; + this.onChange(); + } else { + this.updateValueTO = setTimeout(this.onChange.bind(this), 1000); + } } } + if (this.onTyping) { + var now = tsNow(); + if (now - this.lastTyping > 5000) { + if (length === false) { + length = (this.richTextareaEl ? this.richTextareaEl[0].textContent : this.textareaEl[0].value).length; + } + + if (length != this.lastLength) { + this.lastTyping = now; + this.lastLength = length; + this.onTyping(); + } + } + } } if (e.type == 'keydown') { var checkSubmit = !this.autocompleteShown; @@ -597,6 +619,9 @@ MessageComposer.prototype.restoreSelection = function () { MessageComposer.prototype.checkAutocomplete = function () { + if (Config.Mobile) { + return false; + } var pos, value; if (this.richTextareaEl) { var textarea = this.richTextareaEl[0]; @@ -815,6 +840,8 @@ MessageComposer.prototype.setValue = function (text) { if (this.richTextareaEl) { this.richTextareaEl.html(this.getRichHtml(text)); this.lastLength = text.length; + this.wasEmpty = !text.length; + this.onKeyEvent({type: 'keyup'}); } else { this.textareaEl.val(text); }