Added switch to mobile version on window resize

Closes #562

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;

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;

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);

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',

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",

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
+  }
+})

app/partials/desktop/confirm_modal.html

@@ -37,6 +37,8 @@
       </my-i18n>
       <div ng-switch-when="APPLY_LANG_WITH_RELOAD" my-i18n="confirm_modal_apply_lang_with_reload_md"></div>
       <div ng-switch-when="MIGRATE_TO_HTTPS" my-i18n="confirm_modal_migrate_to_https_md"></div>
+      <div ng-switch-when="SWITCH_DESKTOP_VERSION" my-i18n="confirm_modal_resize_desktop_md"></div>
+      <div ng-switch-when="SWITCH_MOBILE_VERSION" my-i18n="confirm_modal_resize_mobile_md"></div>
       <span ng-switch-default ng-switch="message.length > 0">
         <span ng-switch-when="true" ng-bind="message"></span>
         <span ng-switch-default my-i18n="confirm_modal_are_u_sure"></span>

app/partials/desktop/footer.html

@@ -0,0 +1,5 @@
+<div class="footer_wrap" ng-controller="AppFooterController">
+	<a class="footer_link" href="https://telegram.org" target="_blank" my-i18n="head_about"></a>
+  <a class="footer_link" ng-click="openSettings()" my-i18n="im_settings"></a>
+  <a class="footer_link" href="https://twitter.com/telegram_web" target="_blank" my-i18n="footer_twitter"></a>
+</div>

app/partials/desktop/im.html

@@ -285,4 +285,4 @@
 
 </div>
 
-<div my-lang-footer></div>
+<div my-footer></div>

app/partials/desktop/settings_modal.html

@@ -71,6 +71,15 @@
           </dd>
         </dl>
 
+        <dl class="settings_modal_language" ng-controller="AppLangSelectController">
+          <dt><my-i18n msgid="settings_modal_language"></my-i18n>:</dt>
+          <dd>
+            <select class="form-control settings_modal_language_select" ng-change="localeSelect()" ng-model="form.locale">
+              <option ng-repeat="locale in ::supportedLocales" value="{{locale}}" ng-bind="langNames[locale]" ng-selected="locale == curLocale"></option>
+            </select>
+          </dd>
+        </dl>
+
       </div>
     </div>