From bf3e0ab63078a282dc31490c94cd689bc5e60761 Mon Sep 17 00:00:00 2001 From: Igor Zhukov Date: Thu, 27 Nov 2014 15:21:40 +0000 Subject: [PATCH] Added mobile-friendly photo/video viewer Closes #479 --- app/css/mobile.css | 126 ++++++++++++++++++++ app/js/controllers.js | 7 -- app/js/locales/en-us.json | 4 +- app/js/services.js | 19 ++- app/partials/desktop/photo_modal.html | 10 +- app/partials/desktop/video_modal.html | 5 +- app/partials/mobile/media_modal_layout.html | 1 + app/partials/mobile/photo_modal.html | 66 ++++++++-- app/partials/mobile/video_modal.html | 60 ++++++++-- 9 files changed, 247 insertions(+), 51 deletions(-) create mode 120000 app/partials/mobile/media_modal_layout.html diff --git a/app/css/mobile.css b/app/css/mobile.css index 280ae181..335bb2e3 100644 --- a/app/css/mobile.css +++ b/app/css/mobile.css @@ -1127,4 +1127,130 @@ a.mobile_modal_action .tg_checkbox_label { .import_modal_phonebook_wrap { margin-top: 40px; text-align: center; +} + + + + +.media_modal_bottom_panel_wrap { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 46px; + background: rgba(0,0,0,0.6); + z-index: 1030; +} +.media_modal_bottom_panel { + color: #FFF; +} + +.media_modal_top_panel_wrap { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 46px; + background: rgba(0,0,0,0.6); + z-index: 1030; +} +.media_modal_top_panel { + color: #FFF; +} +.media_modal_top_actions .navbar-quick-media-back { + color: inherit; + position: relative; + display: block; + padding-left: 16px; + padding: 6px 10px 2px 28px; + font-size: 13px; + height: 46px; +} +.media_modal_top_actions .navbar-quick-media-back .icon-back { + position: absolute; + margin-left: -18px; + margin-top: 8px; +} +h4.media_modal_title_wrap { + color: inherit; + margin: 8px 0 11px 0; +} + +.media_modal_info_wrap { + line-height: 16px; + padding: 7px 20px; + text-align: center; + max-width: 150px; + margin: 0 auto; +} +.media_modal_author { + display: inline-block; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 150px; + font-size: 14px; +} +.media_modal_date, +a.media_modal_date:hover { + font-size: 12px; + color: #999; +} + +.photo_modal_window, +.video_modal_window, +.document_modal_window { + padding: 0; + background: #000; +} +.photo_modal_window .modal-content, +.video_modal_window .modal-content, +.document_modal_window .modal-content { + background: none; + box-shadow: none; +} +.video_modal_window .modal-body { + padding: 0; +} +.media_modal_action_btn { + float: left; + display: block; + width: 46px; + height: 46px; +} +.tg_page_head .navbar-inverse .navbar-quick-nav > .navbar-quick-right > a.media_modal_action_btn, +.tg_page_head .navbar-inverse .navbar-quick-nav > .navbar-quick-left > a.media_modal_action_btn { + padding: 0; +} + +.media_modal_action_btn i { + background: url(../img/icons/PhotoIcons.png) 0 0 no-repeat; + background-size: 40px 200px; + display: block; + opacity: 0.8; +} +.media_modal_action_btn:active i { + opacity: 1; +} +.is_1x .media_modal_action_btn i { + background-image: url(../img/icons/PhotoIcons_1x.png); +} + +.media_modal_action_btn i.media_modal_action_btn_download { + background-position: -12px -163px; + width: 16px; + height: 20px; + margin: 14px 15px; +} +.media_modal_action_btn i.media_modal_action_btn_forward { + background-position: -9px -109px; + width: 23px; + height: 15px; + margin: 14px 13px; +} +.media_modal_action_btn i.media_modal_action_btn_delete { + background-position: -13px -135px; + width: 14px; + height: 18px; + margin: 13px 17px; } \ No newline at end of file diff --git a/app/js/controllers.js b/app/js/controllers.js index bb1bf7c2..0c182258 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -1533,13 +1533,6 @@ angular.module('myApp.controllers', ['myApp.i18n']) $rootScope.$broadcast('history_focus', {peerString: peerString, messageID: messageID}); }; - - if (Config.Mobile) { - $scope.canForward = true; - $scope.canDelete = true; - return; - } - $scope['delete'] = function () { var messageID = $scope.messageID; ErrorService.confirm({type: 'MESSAGE_DELETE'}).then(function () { diff --git a/app/js/locales/en-us.json b/app/js/locales/en-us.json index 54b94fbf..f65b3c59 100644 --- a/app/js/locales/en-us.json +++ b/app/js/locales/en-us.json @@ -79,7 +79,9 @@ "user_modal_notifications": "Notifications", "user_modal_contact_info": "Contact info", - "media_modal_photo": "Photo {pos} of {count}", + "media_modal_photo": "Photo", + "media_modal_photo_index": "Photo {pos} of {count}", + "media_modal_video": "Video", "media_modal_forward": "Forward", "media_modal_download": "Download", "media_modal_delete": "Delete", diff --git a/app/js/services.js b/app/js/services.js index 2285b71a..c428a230 100644 --- a/app/js/services.js +++ b/app/js/services.js @@ -2309,9 +2309,9 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils']) function wrapForFull (photoID) { var photo = wrapForHistory(photoID); - var fullWidth = $(window).width() - (Config.Mobile ? 20 : 32); - var fullHeight = $($window).height() - (Config.Mobile ? 150 : 116); - if (fullWidth > 800) { + var fullWidth = $(window).width() - (Config.Mobile ? 0 : 32); + var fullHeight = $($window).height() - (Config.Mobile ? 0 : 116); + if (!Config.Mobile && fullWidth > 800) { fullWidth -= 208; } var fullPhotoSize = choosePhotoSize(photo, fullWidth, fullHeight); @@ -2354,7 +2354,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils']) var modalInstance = $modal.open({ templateUrl: templateUrl('photo_modal'), - windowTemplateUrl: !Config.Mobile && templateUrl('media_modal_layout') || undefined, + windowTemplateUrl: templateUrl('media_modal_layout'), controller: scope.userID ? 'UserpicModalController' : 'PhotoModalController', scope: scope, windowClass: 'photo_modal_window' @@ -2471,8 +2471,8 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils']) function wrapForFull (videoID) { var video = wrapForHistory(videoID), - fullWidth = Math.min($(window).width() - 60, 542), - fullHeight = $($window).height() - 150, + fullWidth = Math.min($(window).width() - (Config.Mobile ? 0 : 60), 542), + fullHeight = $($window).height() - (Config.Mobile ? 92 : 150), fullPhotoSize = video, full = { placeholder: 'img/placeholders/VideoThumbModal.gif', @@ -2503,7 +2503,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils']) return $modal.open({ templateUrl: templateUrl('video_modal'), - windowTemplateUrl: !Config.Mobile && templateUrl('media_modal_layout') || undefined, + windowTemplateUrl: templateUrl('media_modal_layout'), controller: 'VideoModalController', scope: scope, windowClass: 'video_modal_window' @@ -2655,8 +2655,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils']) } doc.thumb = thumb; - doc.canDownload = !(window.chrome && chrome.fileSystem && chrome.fileSystem.chooseEntry); - doc.withPreview = doc.canDownload && doc.mime_type.match(/^(image\/)/) ? 1 : 0; + doc.withPreview = !Config.Mobile && doc.mime_type.match(/^(image\/)/) ? 1 : 0; if (isGif && doc.thumb) { doc.isSpecial = 'gif'; @@ -2734,7 +2733,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils']) var modalInstance = $modal.open({ templateUrl: templateUrl('document_modal'), - windowTemplateUrl: !Config.Mobile && templateUrl('media_modal_layout') || undefined, + windowTemplateUrl: templateUrl('media_modal_layout'), controller: 'DocumentModalController', scope: scope, windowClass: 'document_modal_window' diff --git a/app/partials/desktop/photo_modal.html b/app/partials/desktop/photo_modal.html index 60632c0b..9519c348 100644 --- a/app/partials/desktop/photo_modal.html +++ b/app/partials/desktop/photo_modal.html @@ -28,9 +28,13 @@ -
- - + +
+ + + + +
diff --git a/app/partials/desktop/video_modal.html b/app/partials/desktop/video_modal.html index 6c2ccf5b..1222cbcd 100644 --- a/app/partials/desktop/video_modal.html +++ b/app/partials/desktop/video_modal.html @@ -21,10 +21,7 @@ -
- - -
+
diff --git a/app/partials/mobile/media_modal_layout.html b/app/partials/mobile/media_modal_layout.html new file mode 120000 index 00000000..ba26f3f7 --- /dev/null +++ b/app/partials/mobile/media_modal_layout.html @@ -0,0 +1 @@ +../desktop/media_modal_layout.html \ No newline at end of file diff --git a/app/partials/mobile/photo_modal.html b/app/partials/mobile/photo_modal.html index d51a35f3..7c8aeb0f 100644 --- a/app/partials/mobile/photo_modal.html +++ b/app/partials/mobile/photo_modal.html @@ -1,22 +1,62 @@ -
+
+
+
+ + + +
-
+
+ + + +
-
+
+ +
+ +
-
-
- - - -
+
+
-

- , -

+
+
+
+ + +
+
+ + - +
+

+ + + + + +

+
+ +
+
+
+
+
+ +
+ +
+ +
+ +
+
+ diff --git a/app/partials/mobile/video_modal.html b/app/partials/mobile/video_modal.html index 01e75d60..ffd93403 100644 --- a/app/partials/mobile/video_modal.html +++ b/app/partials/mobile/video_modal.html @@ -1,21 +1,55 @@ -
+
+
+
+ + + +
-
+
+ + + +
-
+
+ +
+ +
-
-
- - - -
+
+
-

- , -

+
+
+
+ + + +
+
+ + +
+

+
+
-
+
+
+
+
+ +
+ +
+ +
+ +
+
+