(js) Fix breakpoints consistency

This commit is contained in:
Francis Lachapelle
2016-05-18 14:35:24 -04:00
parent 33ca545f8b
commit 045013bc74
13 changed files with 38 additions and 31 deletions
@@ -445,7 +445,7 @@
ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
md-colors="::{backgroundColor: 'default-background-200'}"
ui-view="card">
<md-content class="hide-xs md-flex"
<md-content class="hide show-gt-md md-flex"
md-colors="::{backgroundColor: 'default-background-200'}"
layout="column" layout-align="center center" layout-fill="layout-fill">
<div class="sg-md-title"
@@ -9,7 +9,7 @@
<div class="sg-face" layout="column" layout-fill="layout-fill">
<md-card>
<md-card-actions flex-none="flex-none" layout="row" layout-align="end center">
<md-button class="sg-icon-button hide show-xs"
<md-button class="sg-icon-button show hide-gt-md"
label:aria-label="Close"
ng-click="editor.close()">
<md-icon>close</md-icon>
@@ -322,7 +322,7 @@
ng-class="{ 'sg-close': !mailbox.service.selectedFolder.selectedMessage }"
md-colors="::{backgroundColor: 'default-background-200'}"
ui-view="message">
<md-content class="hide-xs md-flex"
<md-content class="hide show-gt-md md-flex"
md-colors="::{backgroundColor: 'default-background-200'}"
layout="column" layout-align="center center" layout-fill="layout-fill">
<div class="sg-md-title"
@@ -17,7 +17,7 @@
ng-click="viewer.closePopup()">
<md-icon>close</md-icon>
</md-button>
<md-button class="md-icon-button hide show-xs"
<md-button class="md-icon-button hide-gt-md"
ng-hide="isPopup"
label:aria-label="Close"
ng-click="viewer.close()">
@@ -58,7 +58,7 @@
<md-tooltip md-direction="bottom"><var:string label:value="Delete selected message or folder"/></md-tooltip>
<md-icon>delete</md-icon>
</md-button>
<md-button class="sg-icon-button hide-xs" label:aria-label="Open in New Mail Window"
<md-button class="sg-icon-button hide show-gt-md" label:aria-label="Open in New Mail Window"
ng-hide="isPopup"
ng-click="viewer.openPopup()">
<md-tooltip md-direction="bottom"><var:string label:value="Open in New Mail Window"/></md-tooltip>
+1 -1
View File
@@ -20,7 +20,7 @@
ui-view="login"
ng-controller="LoginController as app">
<md-content class="ng-cloak md-whiteframe-z1"
layout-gt-sm="row" layout-align-gt-sm="start center"
layout-gt-md="row" layout-align-gt-md="start center"
layout="column" layout-align="space-between center"
md-scroll-y="true"
ng-show="app.showLogin">
+1 -1
View File
@@ -648,7 +648,7 @@
<md-icon>assignment_turned_in</md-icon>
</md-button>
</div>
<div id="detailView" class="view-detail hide-xs md-default-theme md-background md-bg md-hue-2"
<div id="detailView" class="view-detail hide show-gt-md md-default-theme md-background md-bg md-hue-2"
layout="column" ui-view="calendarView">
<!-- calendar view -->
</div>
+10 -5
View File
@@ -7,18 +7,23 @@
<div class="sg-toolbar-group-1" layout="row">
<md-button ng-click="toggleLeft()"
class="md-icon-button"
class="md-icon-button hide-sm"
label:aria-label="Toggle Menu"
ng-switch="leftIsClose">
<md-icon ng-switch-when="true">menu</md-icon>
<md-icon ng-switch-when="false">arrow_back</md-icon>
<md-icon ng-switch-when="true">fullscreen_exit</md-icon>
<md-icon ng-switch-when="false">fullscreen</md-icon>
</md-button>
<div class="sg-date-group sg-padded hide-xs" layout="column" layout-align="space-between end">
<md-button ng-click="toggleLeft()"
class="md-icon-button hide show-sm"
label:aria-label="Toggle Menu">
<md-icon>menu</md-icon>
</md-button>
<div class="sg-date-group sg-padded hide-sm" layout="column" layout-align="space-between end">
<p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
<p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
<p class="sg-year" ng-bind="currentDay.year"><!-- year --></p>
</div>
<p class="sg-md-display-3 sg-date-today hide-xs" ng-bind="currentDay.day"><!-- day --></p>
<p class="sg-md-display-3 sg-date-today hide-sm" ng-bind="currentDay.day"><!-- day --></p>
</div>
<div class="sg-toolbar-group-last" layout="row" layout-align="center center">
@@ -110,17 +110,19 @@
})
// md break-points values are hard-coded in angular-material/src/core/util/constant.js
// $mdMedia has a built-in support for those values but can also evaluate others
// $mdMedia has a built-in support for those values but can also evaluate others.
// The following breakpoints match our CSS breakpoints in scss/core/variables.scss
.constant('sgConstant', {
'xs' : '(max-width: 599px)' ,
'gt-xs' : '(min-width: 600px)' ,
'sm' : '(min-width: 600px) and (max-width: 959px)' ,
'gt-sm' : '(min-width: 960px)' ,
'md' : '(min-width: 960px) and (max-width: 1279px)' ,
'gt-md' : '(min-width: 1280px)' ,
'lg' : '(min-width: 1280px) and (max-width: 1919px)',
'gt-lg' : '(min-width: 1920px)' ,
'xl' : '(min-width: 1920px)'
'md' : '(min-width: 960px) and (max-width: 1023px)' ,
'gt-md' : '(min-width: 1024px)' ,
'lg' : '(min-width: 1024px) and (max-width: 1279px)',
'gt-lg' : '(min-width: 1280px)' ,
'xl' : '(min-width: 1920px)' ,
'print' : 'print'
})
.config(configure)
@@ -15,7 +15,7 @@
$scope.isPopup = sgSettings.isPopup;
$scope.activeUser = sgSettings.activeUser();
$scope.baseURL = sgSettings.baseURL();
$scope.leftIsClose = $mdMedia(sgConstant.xs);
$scope.leftIsClose = !$mdMedia(sgConstant['gt-md']);
// Show current day in top bar
$scope.currentDay = window.currentDay;
@@ -58,7 +58,7 @@
// detail.toggleClass('sg-close');
// };
$scope.$watch(function() {
return $mdMedia(sgConstant['gt-sm']);
return $mdMedia(sgConstant['gt-md']);
}, function(newVal) {
$scope.isGtMedium = newVal;
if (newVal) {
@@ -6,8 +6,8 @@
/**
* @ngInject
*/
AddressBooksController.$inject = ['$state', '$scope', '$rootScope', '$stateParams', '$timeout', '$window', '$mdDialog', '$mdToast', '$mdMedia', '$mdSidenav', 'FileUploader', 'sgFocus', 'Card', 'AddressBook', 'Dialog', 'sgSettings', 'User', 'stateAddressbooks'];
function AddressBooksController($state, $scope, $rootScope, $stateParams, $timeout, $window, $mdDialog, $mdToast, $mdMedia, $mdSidenav, FileUploader, focus, Card, AddressBook, Dialog, Settings, User, stateAddressbooks) {
AddressBooksController.$inject = ['$state', '$scope', '$rootScope', '$stateParams', '$timeout', '$window', '$mdDialog', '$mdToast', '$mdMedia', '$mdSidenav', 'FileUploader', 'sgConstant', 'sgFocus', 'Card', 'AddressBook', 'Dialog', 'sgSettings', 'User', 'stateAddressbooks'];
function AddressBooksController($state, $scope, $rootScope, $stateParams, $timeout, $window, $mdDialog, $mdToast, $mdMedia, $mdSidenav, FileUploader, sgConstant, focus, Card, AddressBook, Dialog, Settings, User, stateAddressbooks) {
var vm = this;
vm.activeUser = Settings.activeUser;
@@ -30,7 +30,7 @@
vm.editMode = false;
AddressBook.$query.value = '';
// Close sidenav on small devices
if ($mdMedia('xs'))
if (!$mdMedia(sgConstant['gt-md']))
$mdSidenav('left').close();
$state.go('app.addressbook', {addressbookId: folder.id});
}
@@ -6,8 +6,8 @@
/**
* @ngInject
*/
MailboxesController.$inject = ['$state', '$timeout', '$mdDialog', '$mdToast', '$mdMedia', '$mdSidenav', 'sgFocus', 'encodeUriFilter', 'Dialog', 'sgSettings', 'Account', 'Mailbox', 'VirtualMailbox', 'User', 'Preferences', 'stateAccounts'];
function MailboxesController($state, $timeout, $mdDialog, $mdToast, $mdMedia, $mdSidenav, focus, encodeUriFilter, Dialog, Settings, Account, Mailbox, VirtualMailbox, User, Preferences, stateAccounts) {
MailboxesController.$inject = ['$state', '$timeout', '$mdDialog', '$mdToast', '$mdMedia', '$mdSidenav', 'sgConstant', 'sgFocus', 'encodeUriFilter', 'Dialog', 'sgSettings', 'Account', 'Mailbox', 'VirtualMailbox', 'User', 'Preferences', 'stateAccounts'];
function MailboxesController($state, $timeout, $mdDialog, $mdToast, $mdMedia, $mdSidenav, sgConstant, focus, encodeUriFilter, Dialog, Settings, Account, Mailbox, VirtualMailbox, User, Preferences, stateAccounts) {
var vm = this,
account,
mailbox;
@@ -55,7 +55,7 @@
vm.showingAdvancedSearch = true;
vm.search.mailbox = path;
// Close sidenav on small devices
if ($mdMedia('xs'))
if (!$mdMedia(sgConstant['gt-md']))
$mdSidenav('left').close();
}
@@ -217,7 +217,7 @@
vm.showingAdvancedSearch = false;
vm.service.$virtualMode = false;
// Close sidenav on small devices
if ($mdMedia('xs'))
if (!$mdMedia(sgConstant['gt-md']))
$mdSidenav('left').close();
$state.go('mail.account.mailbox', { accountId: account.id, mailboxId: encodeUriFilter(folder.path) });
$event.stopPropagation();
@@ -6,8 +6,8 @@
/**
* @ngInject
*/
MessageController.$inject = ['$window', '$scope', '$state', '$mdMedia', '$mdDialog', 'stateAccounts', 'stateAccount', 'stateMailbox', 'stateMessage', 'encodeUriFilter', 'sgSettings', 'sgFocus', 'Dialog', 'Calendar', 'Component', 'Account', 'Mailbox', 'Message'];
function MessageController($window, $scope, $state, $mdMedia, $mdDialog, stateAccounts, stateAccount, stateMailbox, stateMessage, encodeUriFilter, sgSettings, focus, Dialog, Calendar, Component, Account, Mailbox, Message) {
MessageController.$inject = ['$window', '$scope', '$state', '$mdMedia', '$mdDialog', 'sgConstant', 'stateAccounts', 'stateAccount', 'stateMailbox', 'stateMessage', 'encodeUriFilter', 'sgSettings', 'sgFocus', 'Dialog', 'Calendar', 'Component', 'Account', 'Mailbox', 'Message'];
function MessageController($window, $scope, $state, $mdMedia, $mdDialog, sgConstant, stateAccounts, stateAccount, stateMailbox, stateMessage, encodeUriFilter, sgSettings, focus, Dialog, Calendar, Component, Account, Mailbox, Message) {
var vm = this, messageDialog = null, popupWindow = null;
// Expose controller
@@ -192,7 +192,7 @@
}
try {
if (nextMessage && !$mdMedia('xs')) {
if (nextMessage && $mdMedia(sgConstant['gt-md'])) {
state.go('mail.account.mailbox.message', { messageId: nextMessage.uid });
if (nextIndex < mailbox.$topIndex)
mailbox.$topIndex = nextIndex;
@@ -119,7 +119,7 @@
clickOutsideToClose: true,
escapeToClose: true,
template: [
'<md-dialog flex="80" flex-xs="100" aria-label="' + l('View Raw Source') + '">',
'<md-dialog flex="40" flex-sm="80" flex-xs="100" aria-label="' + l('View Raw Source') + '">',
' <md-dialog-content class="md-dialog-content">',
' <pre>',
data,