mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-06-23 10:54:17 +00:00
(js) Fix breakpoints consistency
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user