From 99a0a7509ae4f2d9d30dcac5efcfda993e2e2045 Mon Sep 17 00:00:00 2001 From: Igor Zhukov Date: Thu, 24 Jul 2014 21:58:18 +0400 Subject: [PATCH] Added head typing, improved mobile attachments --- app/css/app.css | 1 + app/css/app_mobile.css | 194 ++++++++++++++++++---- app/js/controllers.js | 18 +- app/js/directives.js | 13 +- app/js/services.js | 62 ++++--- app/partials/head.html | 76 ++++++--- app/partials/message_attach_audio.html | 6 +- app/partials/message_attach_document.html | 2 +- app/partials/video_modal.html | 7 +- 9 files changed, 289 insertions(+), 90 deletions(-) diff --git a/app/css/app.css b/app/css/app.css index 279ae8d3..82e33401 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -1686,6 +1686,7 @@ img.im_message_document_thumb { padding-left: 2px; } .im_message_audio_info audio { + width: 100%; height: 38px; line-height: 38px; } diff --git a/app/css/app_mobile.css b/app/css/app_mobile.css index b9b76a22..88344f20 100644 --- a/app/css/app_mobile.css +++ b/app/css/app_mobile.css @@ -130,7 +130,7 @@ html { height: 18px; vertical-align: text-top; - background: url(../img/icons/IconsetW.png) -15px -419px no-repeat; + background: url(../img/icons/IconsetW.png) -15px -418px no-repeat; background-size: 42px 710px; opacity: 0.8; } @@ -158,9 +158,7 @@ html { font-size: 13px; height: 46px; } -.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:hover { - color: #b9cfe3; -} +.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:hover, .tg_page_head .navbar-inverse .navbar-quick-nav > li > a:active { background-color: rgba(0,0,0,0.1); } @@ -176,7 +174,7 @@ html { white-space: nowrap; } .navbar-quick-back-title { - max-width: 130px; + max-width: 160px; overflow: hidden; text-overflow: ellipsis; } @@ -225,7 +223,8 @@ html { } .navbar_offline .navbar-quick-nav li > a > .navbar-quick-back-title, .navbar_offline .im_head_attach, -.navbar_offline .navbar-search-wrap { +.navbar_offline .navbar-search-wrap, +.navbar_offline .navbar-history-edit { display: none; } @@ -247,6 +246,33 @@ html { } +.navbar_history_select .navbar-peer-wrap, +.navbar_history_select .navbar-toggle-wrap { + display: none; +} +.tg_page_head .navbar-quick-nav li.navbar-quick-right { + float: right; +} +.tg_page_head .navbar-quick-nav li.navbar-quick-left { + float: left; +} +.tg_page_head .navbar-inverse .navbar-quick-nav > .navbar-quick-right > a, +.tg_page_head .navbar-inverse .navbar-quick-nav > .navbar-quick-left > a { + font-size: 15px; + color: #FFF; + padding: 14px 15px; +} +.tg_page_head .navbar-quick-nav li.navbar-quick-title { + position: static; + float: none; + color: #FFF; + font-size: 15px; + font-weight: bold; + padding: 14px 0; + text-align: center; +} + + .login_form_wrap { border-radius: 0; max-width: auto; @@ -272,28 +298,131 @@ html { } .im_message_text, .im_message_document { - /*float: left;*/ padding: 7px 10px; border-radius: 3px; background: #f1f1f1; } +.im_history_selectable .im_message_outer_wrap:hover, +.im_message_selected { + background: #e1e9f0; +} .im_message_out .im_message_text, .im_message_out .im_message_document { background: #e4ecf2; - /*float: right;*/ } + +.im_message_selected .im_message_text, +.im_message_selected .im_message_document, +.im_message_selected .im_message_text a { + color: #FFF; + background: #497495; +} + + .im_message_document { padding: 5px; width: 250px; } +.im_message_audio, +.im_message_document { + position: relative; +} +.im_message_audio > a, +.im_message_document .icon-document, +.im_message_audio .icon-audio, +.im_message_document_thumb_wrap { + position: absolute; +} +.im_message_document_thumb_wrap { + background-color: transparent; +} +.im_message_audio_done i { + display: none; +} +.im_message_audio_info, +.im_message_document_info { + float: none; + margin-left: 48px; + width: auto; + min-height: 38px; +} +.im_message_document_thumbed .im_message_document_info { + margin-left: 110px; +} +.im_message_audio_name, +.im_message_audio_duration { + display: inline; + vertical-align: baseline; + line-height: 38px; +} +.im_message_audio_progress .im_message_audio_name, +.im_message_audio_progress .im_message_audio_duration, { + line-height: 18px; +} +.im_message_audio_done .im_message_audio_info { + margin-left: 0; + width: auto; + float: none; +} +.im_message_audio_actions, +.im_message_document_actions { + display: none; +} +.im_message_audio_player_wrap { + height: 38px; + line-height: 38px; +} +.im_message_document_size { + display: block; + padding-left: 0; +} +.im_message_document_thumbed .im_message_document_info { + min-height: 100px; +} +.im_message_document_info .cancelable_progress_wrap, +.im_message_audio_info .cancelable_progress_wrap { + margin-top: 4px; +} .im_message_document_thumbed .im_message_document_name_wrap, -.im_message_document_thumbed .im_message_audio_name_wrap, +.im_message_document_name_wrap, +.im_message_audio_name_wrap { + width: auto; +} +.im_message_document_progress .im_message_document_size { + display: inline; +} +.im_message_document_progress .im_message_document_name { + max-width: 50%; +} +.im_message_document_progress.im_message_document_thumbed .im_message_document_name { + display: inline; + max-width: none; +} + +.im_message_document_thumbed .im_message_document_name { + white-space: normal; +} + + .im_message_document_thumbed .im_message_upload_progress_wrap, .im_message_document_thumbed .im_message_download_progress_wrap { width: 130px; } -.im_message_document_thumbed .im_message_document_name { - max-width: 70px; +.img_gif_label, +.img_gif_size, +.im_message_video_duration { + font-size: 13px; +} + +a.im_message_video_thumb { + margin-right: 0; +} +.im_message_video .im_message_document_info { + display: none; +} + +.im_message_document_thumb_wrap { + position: absolute; } /*.im_message_document, .im_message_audio, @@ -396,28 +525,43 @@ a.im_message_author { .form-control { font-size: 1.2em; } - -.im_history_typing { - padding: 0 15px 0 56px; +.im_history_typing_wrap { + display: none; } .im_history_panel_info_link { display: none; } .im_edit_flush_link, -.im_edit_cancel_link, +.im_edit_cancel_link { + display: none; +} .im_edit_delete_btn, .im_edit_forward_btn { - padding-left: 5px; - padding-right: 5px; - margin: 6px 4px; + background: none !important; + border: 0 !important; + width: 50%; + margin: 0; + font-size: 15px; + padding: 13px 0; +} +.im_edit_forward_btn { + color: #497495 !important; +} +.im_edit_delete_btn { + color: #c3584d !important; } +.im_edit_delete_btn strong, +.im_edit_forward_btn strong { + font-weight: normal; +} + .im_edit_panel_border { - margin: 0 18px 22px 3px; + display: none; } .im_edit_panel_wrap { - margin: 0 5px; - padding-bottom: 18px; + padding: 5px 0; + margin: 0; } .im_history_col .nano > .nano-pane { top: 3px; @@ -745,14 +889,6 @@ a.im_dialog_selected .im_dialog_unread { margin-top: -267px; } -.im_edit_panel_wrap { - padding-top: 2px; - padding-bottom: 4px; -} -.im_edit_panel_border { - margin-bottom: 3px; -} - .im_head_attach { display: block; float: right; diff --git a/app/js/controllers.js b/app/js/controllers.js index b4d482fd..32ac7350 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -305,15 +305,15 @@ angular.module('myApp.controllers', []) $scope.toggleEdit = function () { $scope.$broadcast('history_edit_toggle'); }; - - $scope.returnToRecent = function () { - $scope.$broadcast('history_return_recent'); + $scope.selectedFlush = function () { + $scope.$broadcast('history_edit_flush'); }; - $scope.toggleMedia = function (mediaType) { $scope.$broadcast('history_media_toggle', mediaType); }; - + $scope.returnToRecent = function () { + $scope.$broadcast('history_return_recent'); + }; $scope.toggleSearch = function () { $scope.$broadcast('dialogs_search_toggle'); }; @@ -653,9 +653,12 @@ angular.module('myApp.controllers', []) $scope.returnToRecent = returnToRecent; $scope.$on('history_edit_toggle', toggleEdit); + $scope.$on('history_edit_flush', selectedFlush); $scope.$on('history_media_toggle', function (e, mediaType) { toggleMedia(mediaType); }); + + $scope.$on('history_return_recent', returnToRecent); var peerID, @@ -1262,6 +1265,7 @@ angular.module('myApp.controllers', []) if (Config.Navigator.mobile) { $scope.canForward = true; + $scope.canDelete = true; return; } @@ -1512,6 +1516,10 @@ angular.module('myApp.controllers', []) }); }; + $scope.download = function () { + $rootScope.downloadVideo($scope.videoID) + }; + $scope.$on('history_delete', function (e, historyUpdate) { if (historyUpdate.msgs[$scope.messageID]) { $modalInstance.dismiss(); diff --git a/app/js/directives.js b/app/js/directives.js index 6bb5081e..55d3143f 100644 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -1564,12 +1564,15 @@ angular.module('myApp.directives', ['myApp.filters']) var userID = $scope.$eval(attrs.myUserLink), user = AppUsersManager.getUser(userID); - element - .on('click', function () { - $rootScope.openUser(userID); - }) - .html(user[attrs.short && $scope.$eval(attrs.short) ? 'rFirstName' : 'rFullName'].valueOf()); + element.html( + (user[attrs.short && $scope.$eval(attrs.short) ? 'rFirstName' : 'rFullName'] || '').valueOf() + ); + if (element[0].tagName == 'A') { + element.on('click', function () { + $rootScope.openUser(userID); + }); + } if (attrs.color && $scope.$eval(attrs.color)) { element.addClass('user_color_' + user.num); } diff --git a/app/js/services.js b/app/js/services.js index bf842b37..92dcd986 100644 --- a/app/js/services.js +++ b/app/js/services.js @@ -2115,7 +2115,9 @@ angular.module('myApp.services', []) }) .service('AppPhotosManager', function ($modal, $window, $timeout, $rootScope, MtpApiManager, MtpApiFileManager, AppUsersManager, FileManager) { - var photos = {}; + var photos = {}, + windowW = $(window).width(), + windowH = $(window).height(); function savePhoto (apiPhoto) { photos[apiPhoto.id] = apiPhoto; @@ -2200,8 +2202,8 @@ angular.module('myApp.services', []) function wrapForHistory (photoID) { var photo = angular.copy(photos[photoID]) || {_: 'photoEmpty'}, - width = 260, - height = 260, + width = Math.min(windowW - 80, 260), + height = Math.min(windowH - 100, 260), thumbPhotoSize = choosePhotoSize(photo, width, height), thumb = { placeholder: 'img/placeholders/PhotoThumbConversation.gif', @@ -2211,10 +2213,15 @@ angular.module('myApp.services', []) // console.log('chosen photo size', photoID, thumbPhotoSize); if (thumbPhotoSize && thumbPhotoSize._ != 'photoSizeEmpty') { - if (thumbPhotoSize.w > thumbPhotoSize.h) { + if ((thumbPhotoSize.w / thumbPhotoSize.h) > (width / height)) { thumb.height = parseInt(thumbPhotoSize.h * width / thumbPhotoSize.w); - } else { + } + else { thumb.width = parseInt(thumbPhotoSize.w * height / thumbPhotoSize.h); + if (thumb.width > width) { + thumb.height = parseInt(thumb.height * width / thumb.width); + thumb.width = width; + } } thumb.location = thumbPhotoSize.location; @@ -2349,8 +2356,10 @@ angular.module('myApp.services', []) .service('AppVideoManager', function ($rootScope, $modal, $window, $timeout, MtpApiFileManager, AppUsersManager, FileManager) { - var videos = {}; - var videosForHistory = {}; + var videos = {}, + videosForHistory = {}, + windowW = $(window).width(), + windowH = $(window).height(); function saveVideo (apiVideo) { videos[apiVideo.id] = apiVideo; @@ -2371,8 +2380,8 @@ angular.module('myApp.services', []) } var video = angular.copy(videos[videoID]), - width = 200, - height = 200, + width = Math.min(windowW - 80, windowW <= 479 ? 260 : 200), + height = Math.min(windowH - 100, windowW <= 479 ? 260 : 200), thumbPhotoSize = video.thumb, thumb = { placeholder: 'img/placeholders/VideoThumbConversation.gif', @@ -2381,10 +2390,15 @@ angular.module('myApp.services', []) }; if (thumbPhotoSize && thumbPhotoSize._ != 'photoSizeEmpty') { - if (thumbPhotoSize.w > thumbPhotoSize.h) { + if ((thumbPhotoSize.w / thumbPhotoSize.h) > (width / height)) { thumb.height = parseInt(thumbPhotoSize.h * width / thumbPhotoSize.w); - } else { + } + else { thumb.width = parseInt(thumbPhotoSize.w * height / thumbPhotoSize.h); + if (thumb.width > width) { + thumb.height = parseInt(thumb.height * width / thumb.width); + thumb.width = width; + } } thumb.location = thumbPhotoSize.location; @@ -2513,8 +2527,10 @@ angular.module('myApp.services', []) }) .service('AppDocsManager', function ($rootScope, $modal, $window, $timeout, MtpApiFileManager, FileManager) { - var docs = {}; - var docsForHistory = {}; + var docs = {}, + docsForHistory = {}, + windowW = $(window).width(), + windowH = $(window).height(); function saveDoc (apiDoc) { docs[apiDoc.id] = apiDoc; @@ -2536,20 +2552,25 @@ angular.module('myApp.services', []) var doc = angular.copy(docs[docID]), isGif = doc.mime_type == 'image/gif', - width = isGif ? 260 : 100, - height = isGif ? 260 : 100, + width = isGif ? Math.min(windowW - 80, 260) : 100, + height = isGif ? Math.min(windowH - 100, 260) : 100, thumbPhotoSize = doc.thumb, thumb = { - // placeholder: 'img/placeholders/DocThumbConversation.jpg', width: width, height: height }; + if (thumbPhotoSize && thumbPhotoSize._ != 'photoSizeEmpty') { - if (thumbPhotoSize.w > thumbPhotoSize.h) { + if ((thumbPhotoSize.w / thumbPhotoSize.h) > (width / height)) { thumb.height = parseInt(thumbPhotoSize.h * width / thumbPhotoSize.w); - } else { + } + else { thumb.width = parseInt(thumbPhotoSize.w * height / thumbPhotoSize.h); + if (thumb.width > width) { + thumb.height = parseInt(thumb.height * width / thumb.width); + thumb.width = width; + } } thumb.location = thumbPhotoSize.location; @@ -3257,7 +3278,10 @@ angular.module('myApp.services', []) var time = tsNow(); if (!notificationsCount || time % 2000 > 1000) { document.title = titleBackup; - $('link[rel="icon"]').replaceWith(faviconBackupEl); + var curFav = $('link[rel="icon"]'); + if (curFav.attr('href').indexOf('favicon_unread') != -1) { + curFav.replaceWith(faviconBackupEl); + } } else { document.title = notificationsCount > 1 ? (notificationsCount + ' notifications') diff --git a/app/partials/head.html b/app/partials/head.html index 3796a34c..70c4d900 100644 --- a/app/partials/head.html +++ b/app/partials/head.html @@ -1,5 +1,5 @@
-