Allow to hide center column on large screens
parent
5b02685d2b
commit
6e48734504
1
NEWS
1
NEWS
|
@ -3,6 +3,7 @@
|
|||
|
||||
New features
|
||||
- [core] support repetitive email alarms on tasks and events (#1053)
|
||||
- [web] allow to hide center column on large screens
|
||||
|
||||
Enhancements
|
||||
- [core] updated time zones to version 2016i
|
||||
|
|
|
@ -8,12 +8,18 @@
|
|||
<div layout="column" class="layout-fill sg-reversible">
|
||||
<md-card style="overflow: hidden">
|
||||
<md-card-actions flex-none="flex-none" layout="row" layout-align="end center">
|
||||
<md-button ng-click="toggleCenter()"
|
||||
class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
|
||||
aria-hidden="true">
|
||||
<md-icon class="icon-fullscreen"
|
||||
ng-class="{ 'icon-fullscreen-exit': centerIsClose }"><!-- fullscreen --></md-icon>
|
||||
</md-button>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Cancel"
|
||||
ng-click="editor.cancel()">
|
||||
<md-icon>close</md-icon>
|
||||
</md-button>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Reset"
|
||||
ng-click="editor.reset()">
|
||||
|
|
|
@ -235,7 +235,7 @@
|
|||
|
||||
<div layout="row" class="md-flex">
|
||||
|
||||
<div class="view-list" layout="column">
|
||||
<div class="view-list" layout="column" ng-class="{'view-list--close': centerIsClose}">
|
||||
|
||||
<!-- single-selection toolbar -->
|
||||
<md-toolbar class="md-accent md-hue-1"
|
||||
|
|
|
@ -9,6 +9,12 @@
|
|||
<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 ng-click="toggleCenter()"
|
||||
class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
|
||||
aria-hidden="true">
|
||||
<md-icon class="icon-fullscreen"
|
||||
ng-class="{ 'icon-fullscreen-exit': centerIsClose }"><!-- fullscreen --></md-icon>
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button hide-gt-xs"
|
||||
label:aria-label="Close"
|
||||
ng-click="editor.close()">
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
xmlns:label="OGo:label">
|
||||
<div class="view-list" layout="column">
|
||||
<div class="view-list" layout="column" ng-class="{'view-list--close': centerIsClose}">
|
||||
|
||||
<!-- in virtual mailbox mode -->
|
||||
<md-toolbar class="md-whiteframe-z1 md-hue-3"
|
||||
|
|
|
@ -11,6 +11,13 @@
|
|||
<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 ng-click="toggleCenter()"
|
||||
class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
|
||||
aria-hidden="true"
|
||||
ng-if="!isPopup">
|
||||
<md-icon class="icon-fullscreen"
|
||||
ng-class="{ 'icon-fullscreen-exit': centerIsClose }"><!-- fullscreen --></md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button"
|
||||
ng-if="isPopup"
|
||||
label:aria-label="Close"
|
||||
|
|
|
@ -9,6 +9,12 @@
|
|||
|
||||
<md-card>
|
||||
<md-card-actions flex-none="flex-none" layout="row" layout-align="start center">
|
||||
<md-button ng-click="toggleCenter()"
|
||||
class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
|
||||
aria-hidden="true">
|
||||
<md-icon class="icon-fullscreen"
|
||||
ng-class="{ 'icon-fullscreen-exit': centerIsClose }"><!-- fullscreen --></md-icon>
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button"
|
||||
var:aria-label="yesterdayName"
|
||||
var:date="prevDayQueryParameters.day"
|
||||
|
@ -25,7 +31,13 @@
|
|||
ng-change="calendar.changeDate($event, calendar.selectedDate)"
|
||||
sg-datepicker-readonly-input="true"><!-- date picker --></md-datepicker>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button label:aria-label="Today"
|
||||
<md-button class="md-icon-button hide-gt-sm" label:aria-label="Today"
|
||||
var:date="todayQueryParameters.day"
|
||||
ng-click="calendar.changeDate($event)"
|
||||
md-no-ink="md-no-ink">
|
||||
<md-icon>arrow_downward</md-icon>
|
||||
</md-button>
|
||||
<md-button class="hide show-gt-sm" label:aria-label="Today"
|
||||
var:date="todayQueryParameters.day"
|
||||
ng-click="calendar.changeDate($event)"
|
||||
md-no-ink="md-no-ink">
|
||||
|
|
|
@ -353,7 +353,7 @@
|
|||
</md-toolbar>
|
||||
<div layout="row" class="md-flex">
|
||||
|
||||
<div class="view-list" layout="column">
|
||||
<div class="view-list" layout="column" ng-class="{'view-list--close': centerIsClose}">
|
||||
<md-toolbar class="md-accent md-hue-1" flex-none="flex-none"
|
||||
ng-hide="list.mode.multiple">
|
||||
<!-- sort/filter mode (default) -->
|
||||
|
|
|
@ -9,6 +9,12 @@
|
|||
|
||||
<md-card>
|
||||
<md-card-actions flex-none="flex-none" layout="row" layout-align="start center">
|
||||
<md-button ng-click="toggleCenter()"
|
||||
class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
|
||||
aria-hidden="true">
|
||||
<md-icon class="icon-fullscreen"
|
||||
ng-class="{ 'icon-fullscreen-exit': centerIsClose }"><!-- fullscreen --></md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Previous Month"
|
||||
var:date="prevMonthQueryParameters.day"
|
||||
|
@ -25,7 +31,13 @@
|
|||
ng-change="calendar.changeDate($event, calendar.selectedDate)"
|
||||
sg-datepicker-readonly-input="true"><!-- date picker --></md-datepicker>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button label:aria-label="Today"
|
||||
<md-button class="md-icon-button hide-gt-sm" label:aria-label="Today"
|
||||
var:date="todayQueryParameters.day"
|
||||
ng-click="calendar.changeDate($event)"
|
||||
md-no-ink="md-no-ink">
|
||||
<md-icon>arrow_downward</md-icon>
|
||||
</md-button>
|
||||
<md-button class="hide show-gt-sm" label:aria-label="Today"
|
||||
var:date="todayQueryParameters.day"
|
||||
ng-click="calendar.changeDate($event)"
|
||||
md-no-ink="md-no-ink">
|
||||
|
|
|
@ -9,6 +9,12 @@
|
|||
|
||||
<md-card>
|
||||
<md-card-actions flex-none="flex-none" layout="row" layout-align="start center">
|
||||
<md-button ng-click="toggleCenter()"
|
||||
class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
|
||||
aria-hidden="true">
|
||||
<md-icon class="icon-fullscreen"
|
||||
ng-class="{ 'icon-fullscreen-exit': centerIsClose }"><!-- fullscreen --></md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button"
|
||||
var:aria-label="yesterdayName"
|
||||
var:date="prevDayQueryParameters.day"
|
||||
|
@ -25,7 +31,13 @@
|
|||
ng-change="calendar.changeDate($event, calendar.selectedDate)"
|
||||
sg-datepicker-readonly-input="true"><!-- date picker --></md-datepicker>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button label:aria-label="Today"
|
||||
<md-button class="md-icon-button hide-gt-sm" label:aria-label="Today"
|
||||
var:date="todayQueryParameters.day"
|
||||
ng-click="calendar.changeDate($event)"
|
||||
md-no-ink="md-no-ink">
|
||||
<md-icon>arrow_downward</md-icon>
|
||||
</md-button>
|
||||
<md-button class="hide show-gt-sm" label:aria-label="Today"
|
||||
var:date="todayQueryParameters.day"
|
||||
ng-click="calendar.changeDate($event)"
|
||||
md-no-ink="md-no-ink">
|
||||
|
|
|
@ -9,6 +9,12 @@
|
|||
|
||||
<md-card>
|
||||
<md-card-actions flex-none="flex-none" layout="row" layout-align="start center">
|
||||
<md-button ng-click="toggleCenter()"
|
||||
class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
|
||||
aria-hidden="true">
|
||||
<md-icon class="icon-fullscreen"
|
||||
ng-class="{ 'icon-fullscreen-exit': centerIsClose }"><!-- fullscreen --></md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Previous Week"
|
||||
var:date="prevWeekQueryParameters.day"
|
||||
|
@ -25,7 +31,13 @@
|
|||
ng-change="calendar.changeDate($event, calendar.selectedDate)"
|
||||
sg-datepicker-readonly-input="true"><!-- date picker --></md-datepicker>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button label:aria-label="Today"
|
||||
<md-button class="md-icon-button hide-gt-sm" label:aria-label="Today"
|
||||
var:date="todayQueryParameters.day"
|
||||
ng-click="calendar.changeDate($event)"
|
||||
md-no-ink="md-no-ink">
|
||||
<md-icon>arrow_downward</md-icon>
|
||||
</md-button>
|
||||
<md-button class="hide show-gt-sm" label:aria-label="Today"
|
||||
var:date="todayQueryParameters.day"
|
||||
ng-click="calendar.changeDate($event)"
|
||||
md-no-ink="md-no-ink">
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
$scope.activeUser = sgSettings.activeUser();
|
||||
$scope.baseURL = sgSettings.baseURL();
|
||||
$scope.leftIsClose = !$mdMedia(sgConstant['gt-md']);
|
||||
$scope.centerIsClose = false;
|
||||
|
||||
// Show current day in top bar
|
||||
$scope.currentDay = window.currentDay;
|
||||
|
@ -52,6 +53,9 @@
|
|||
$log.debug("toggle right is done");
|
||||
});
|
||||
};
|
||||
$scope.toggleCenter = function() {
|
||||
$scope.centerIsClose = !$scope.centerIsClose;
|
||||
};
|
||||
// $scope.openBottomSheet = function() {
|
||||
// $mdBottomSheet.show({
|
||||
// parent: angular.element(document.getElementById('left-sidenav')),
|
||||
|
|
|
@ -109,6 +109,12 @@ md-icon {
|
|||
&.icon-expand-more:before {
|
||||
content: "\e5cf";
|
||||
}
|
||||
&.icon-fullscreen:before {
|
||||
content: "\e5d0";
|
||||
}
|
||||
&.icon-fullscreen-exit:before {
|
||||
content: "\e5d1";
|
||||
}
|
||||
&.icon-needs-action:before,
|
||||
&.icon-help:before {
|
||||
content: "\e887";
|
||||
|
|
|
@ -37,13 +37,11 @@ $quarter_height: 10px;
|
|||
}
|
||||
}
|
||||
|
||||
.view-detail {
|
||||
@include at(sm) {
|
||||
@include flex-col($breakpoint: sm, $nb: 10);
|
||||
}
|
||||
.view-list--close {
|
||||
@include from(md) {
|
||||
flex: 1 1 auto;
|
||||
margin: 0;
|
||||
$cols: map-get($base-grid-total-columns, md);
|
||||
$colWidth: ((100 / $cols) * -5vw);
|
||||
margin-right: $colWidth;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -50,8 +50,9 @@ $listView-width: grid-step(6) !global;
|
|||
}
|
||||
|
||||
.view-list {
|
||||
z-index: ($z-index-view - 1);
|
||||
min-width: ($listView-width - ($pitch * 2));
|
||||
transition: $swift-ease-out;
|
||||
z-index: ($z-index-view - 1);
|
||||
|
||||
// With Material, when a button inside a md-list uses the class md-secondary, it is moved inside a container
|
||||
// on the right side of the list item. Since we define the avatar as the secondary button, we must move it to
|
||||
|
@ -84,9 +85,26 @@ $listView-width: grid-step(6) !global;
|
|||
}
|
||||
}
|
||||
|
||||
.view-list--close {
|
||||
transform: translateX(-100%);
|
||||
|
||||
@include at(sm) {
|
||||
$cols: map-get($base-grid-total-columns, sm);
|
||||
$colWidth: ((100 / $cols) * -6vw);
|
||||
margin-right: $colWidth;
|
||||
}
|
||||
@include from(md) {
|
||||
$cols: map-get($base-grid-total-columns, md);
|
||||
$colWidth: ((100 / $cols) * -6vw);
|
||||
margin-right: $colWidth;
|
||||
}
|
||||
}
|
||||
|
||||
.view-detail {
|
||||
z-index: $z-index-view;
|
||||
flex: 1 1 auto;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
z-index: $z-index-view;
|
||||
|
||||
.sg-face, .sg-back {
|
||||
> md-card {
|
||||
|
@ -155,11 +173,6 @@ $listView-width: grid-step(6) !global;
|
|||
}
|
||||
}
|
||||
|
||||
@include at(sm) {
|
||||
@include flex-col(sm, 10);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// No animation on medium to large screens
|
||||
@include from(sm) {
|
||||
.md-static {
|
||||
|
@ -195,11 +208,6 @@ $listView-width: grid-step(6) !global;
|
|||
}
|
||||
}
|
||||
|
||||
@include from(md) {
|
||||
flex: 1 1 auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Flippable view card, used to show raw source of cards and messages
|
||||
perspective: 1000px;
|
||||
.sg-reversible {
|
||||
|
@ -225,4 +233,4 @@ $listView-width: grid-step(6) !global;
|
|||
transform: rotateY( 180deg );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue