From 9d1d664b0268d7ad0bdb8860aba9482ae21c5873 Mon Sep 17 00:00:00 2001 From: Igor Zhukov Date: Thu, 13 Nov 2014 19:44:32 +0300 Subject: [PATCH] Added switch to mobile version on window resize Closes #562 --- app/css/desktop.css | 35 ++++++++++++- app/css/mobile.css | 7 ++- app/js/controllers.js | 15 ++++-- app/js/directives.js | 7 +++ app/js/locales/en-us.json | 5 ++ app/js/services.js | 66 ++++++++++++++++++++++++ app/partials/desktop/confirm_modal.html | 2 + app/partials/desktop/footer.html | 5 ++ app/partials/desktop/im.html | 2 +- app/partials/desktop/settings_modal.html | 9 ++++ 10 files changed, 147 insertions(+), 6 deletions(-) create mode 100644 app/partials/desktop/footer.html diff --git a/app/css/desktop.css b/app/css/desktop.css index c11a302f..0545b929 100644 --- a/app/css/desktop.css +++ b/app/css/desktop.css @@ -1,3 +1,17 @@ +.navbar-nav > li { + float: left; +} +.tg_page_head .navbar > .container .navbar-brand { + margin-right: 0; +} +.navbar-header { + float: left; +} +.navbar-right { + float: right; + margin: 0; +} + /** initial setup **/ .nano { position : relative; @@ -117,10 +131,17 @@ a.footer_lang_link { a.footer_lang_link.active { font-weight: bold; } +a.footer_link { + color: #9cacb9; + font-weight: bold; + padding: 0 3px; +} .footer_brand:hover, .footer_brand:active, a.footer_lang_link.active:hover, -a.footer_lang_link.active:active { +a.footer_lang_link.active:active, +a.footer_link.active:hover, +a.footer_link.active:active { color: #8499aa; text-decoration: none; } @@ -751,6 +772,18 @@ div.im_panel_own_photo { .settings_version { color: #999; } +.modal_section_body dl.settings_modal_language { + margin: 3px 0; +} +.modal_section_body dl.settings_modal_language dt { + padding-top: 2px; +} +.settings_modal_language_select { + font-size: 12px; + height: 21px; + line-height: 21px; + padding: 0; +} .icon-volume-outer { display: inline-block; background: #c7c7c7; diff --git a/app/css/mobile.css b/app/css/mobile.css index f5d53011..280ae181 100644 --- a/app/css/mobile.css +++ b/app/css/mobile.css @@ -114,6 +114,7 @@ html { .tg_page_head .navbar-quick-nav { display: block; + float: none; margin: 0; } .tg_page_head .navbar-quick-nav li { @@ -382,6 +383,10 @@ html { width: auto; max-width: 250px; } +.im_message_video { + width: auto; + max-width: 250px; +} .im_message_document { position: relative; } @@ -798,7 +803,7 @@ a.im_message_fwd_author { box-shadow: none; } .mobile_modal .modal-dialog { - margin: 0; + margin: 0 auto; } .mobile_modal .modal-content .modal-body { padding-left: 0; diff --git a/app/js/controllers.js b/app/js/controllers.js index 4803b225..214d99ff 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -11,7 +11,7 @@ angular.module('myApp.controllers', ['myApp.i18n']) - .controller('AppWelcomeController', function($scope, $location, MtpApiManager, ErrorService, ChangelogNotifyService) { + .controller('AppWelcomeController', function($scope, $location, MtpApiManager, ErrorService, ChangelogNotifyService, LayoutSwitchService) { MtpApiManager.getUserID().then(function (id) { if (id) { $location.url('/im'); @@ -21,9 +21,10 @@ angular.module('myApp.controllers', ['myApp.i18n']) }); ChangelogNotifyService.checkUpdate(); + LayoutSwitchService.start(); }) - .controller('AppLoginController', function ($scope, $rootScope, $location, $timeout, $modal, $modalStack, MtpApiManager, ErrorService, NotificationsManager, ChangelogNotifyService, IdleManager, _) { + .controller('AppLoginController', function ($scope, $rootScope, $location, $timeout, $modal, $modalStack, MtpApiManager, ErrorService, NotificationsManager, ChangelogNotifyService, IdleManager, LayoutSwitchService, _) { $modalStack.dismissAll(); IdleManager.start(); @@ -298,9 +299,10 @@ angular.module('myApp.controllers', ['myApp.i18n']) }; ChangelogNotifyService.checkUpdate(); + LayoutSwitchService.start(); }) - .controller('AppIMController', function ($scope, $location, $routeParams, $modal, $rootScope, $modalStack, MtpApiManager, AppUsersManager, AppChatsManager, ContactsSelectService, ChangelogNotifyService, ErrorService, AppRuntimeManager, HttpsMigrateService) { + .controller('AppIMController', function ($scope, $location, $routeParams, $modal, $rootScope, $modalStack, MtpApiManager, AppUsersManager, AppChatsManager, ContactsSelectService, ChangelogNotifyService, ErrorService, AppRuntimeManager, HttpsMigrateService, LayoutSwitchService) { $scope.$on('$routeUpdate', updateCurDialog); @@ -429,6 +431,7 @@ angular.module('myApp.controllers', ['myApp.i18n']) ChangelogNotifyService.checkUpdate(); HttpsMigrateService.start(); + LayoutSwitchService.start(); }) .controller('AppImDialogsController', function ($scope, $location, $q, $timeout, $routeParams, MtpApiManager, AppUsersManager, AppChatsManager, AppMessagesManager, AppPeersManager, PhonebookContactsService, ErrorService) { @@ -1482,6 +1485,12 @@ angular.module('myApp.controllers', ['myApp.i18n']) }; }) + .controller('AppFooterController', function ($scope, LayoutSwitchService) { + $scope.switchLayout = function (mobile) { + LayoutSwitchService.switchLayout(mobile); + } + }) + .controller('PhotoModalController', function ($q, $scope, $rootScope, $modalInstance, AppPhotosManager, AppMessagesManager, AppPeersManager, PeersSelectService, ErrorService) { $scope.photo = AppPhotosManager.wrapForFull($scope.photoID); diff --git a/app/js/directives.js b/app/js/directives.js index 07115821..7d7a619a 100644 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -26,6 +26,13 @@ angular.module('myApp.directives', ['myApp.filters']) }; }) + .directive('myFooter', function() { + return { + restrict: 'AE', + templateUrl: templateUrl('footer') + }; + }) + .directive('myDialog', function() { return { restrict: 'AE', diff --git a/app/js/locales/en-us.json b/app/js/locales/en-us.json index fe498b05..2c24790b 100644 --- a/app/js/locales/en-us.json +++ b/app/js/locales/en-us.json @@ -129,6 +129,8 @@ "confirm_modal_share_file_peer": "Share with {peer}?", "confirm_modal_apply_lang_with_reload_md": "Reload the App to apply language?", "confirm_modal_migrate_to_https_md": "Telegram Web now supports additional SSL encryption. Would you like to switch to HTTPS?\nThe HTTP version will be disabled soon.", + "confirm_modal_resize_desktop_md": "Would you like to switch to desktop version?", + "confirm_modal_resize_mobile_md": "Would you like to switch to mobile version?", "confirm_modal_are_u_sure": "Are you sure?", "confirm_modal_logout_submit": "Log Out", @@ -255,6 +257,9 @@ "head_retry": "Retry", "head_connecting": "Connecting", + "footer_twitter": "Twitter", + + "im_new_group": "New Group", "im_new_contact": "New Contact", "im_contacts": "Contacts", diff --git a/app/js/services.js b/app/js/services.js index 6516490b..f449f181 100644 --- a/app/js/services.js +++ b/app/js/services.js @@ -3922,3 +3922,69 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils']) check: check } }) + + +.service('LayoutSwitchService', function (ErrorService, Storage, AppRuntimeManager, $window) { + + var started = false; + var resizeLayoutSplit = 480; + var layoutSplitMaxMobile = 600; + var layoutSplitMinMobile = 500; + var confirmShown = false; + + function switchLayout(mobile) { + Storage.set({ + current_layout: mobile ? 'mobile' : 'desktop', + layout_confirmed: {width: $(window).width(), mobile: mobile} + }).then(function () { + AppRuntimeManager.reload(); + }); + } + + function layoutCheck (e) { + if (confirmShown) { + return; + } + var width = $(window).width(); + if (!e && Config.Mobile && width <= 800) { + return; + } + var newMobile = width < 480; + if (newMobile != Config.Mobile) { + Storage.get('layout_confirmed').then(function (result) { + if (result && + (result.mobile + ? width <= result.width + : width >= result.width + ) + ) { + return false; + } + confirmShown = true; + ErrorService.confirm({ + type: newMobile ? 'SWITCH_MOBILE_VERSION' : 'SWITCH_DESKTOP_VERSION' + }).then(function () { + Storage.remove('layout_confirmed'); + switchLayout(newMobile); + }, function () { + Storage.set({layout_confirmed: {width: width, mobile: Config.Mobile}}); + confirmShown = false; + }); + }); + } + } + + function start () { + if (started || Config.Navigator.mobile) { + return; + } + started = true; + layoutCheck(); + $($window).on('resize', layoutCheck); + } + + return { + start: start, + switchLayout: switchLayout + } +}) diff --git a/app/partials/desktop/confirm_modal.html b/app/partials/desktop/confirm_modal.html index 52c36171..7500f18c 100644 --- a/app/partials/desktop/confirm_modal.html +++ b/app/partials/desktop/confirm_modal.html @@ -37,6 +37,8 @@
+
+
diff --git a/app/partials/desktop/footer.html b/app/partials/desktop/footer.html new file mode 100644 index 00000000..3662a324 --- /dev/null +++ b/app/partials/desktop/footer.html @@ -0,0 +1,5 @@ +
+ + + +
\ No newline at end of file diff --git a/app/partials/desktop/im.html b/app/partials/desktop/im.html index 3a12ccb0..bc776f9b 100644 --- a/app/partials/desktop/im.html +++ b/app/partials/desktop/im.html @@ -285,4 +285,4 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/app/partials/desktop/settings_modal.html b/app/partials/desktop/settings_modal.html index 93b5b705..f3866497 100644 --- a/app/partials/desktop/settings_modal.html +++ b/app/partials/desktop/settings_modal.html @@ -71,6 +71,15 @@ +
+
:
+
+ +
+
+