r4sas/webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity

Added switch to mobile version on window resize

Browse Source 
Closes #562
This commit is contained in:
Igor Zhukov 2014-11-13 19:44:32 +03:00
parent 9c6d6e4f00
commit 9d1d664b02
10 changed files with 147 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/css/desktop.css
View File

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

7
app/css/mobile.css
View File

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

15
app/js/controllers.js
View File

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

7
app/js/directives.js
View File

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

5
app/js/locales/en-us.json
View File

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

66
app/js/services.js
View File

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

2
app/partials/desktop/confirm_modal.html
View File

@ -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>

5
app/partials/desktop/footer.html Normal file
View File

@ -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>

2
app/partials/desktop/im.html
View File

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

9
app/partials/desktop/settings_modal.html
View File

@ -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>