LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Allow to hide center column on large screens

pull/225/head
Francis Lachapelle 2016-11-10 16:03:00 -05:00
parent 5b02685d2b
commit 6e48734504
15 changed files with 111 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
NEWS
View File

@ -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
UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
View File

@ -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()">

2
UI/Templates/ContactsUI/UIxContactFoldersView.wox
View File

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

6
UI/Templates/ContactsUI/UIxContactViewTemplate.wox
View File

@ -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()">

2
UI/Templates/MailerUI/UIxMailFolderTemplate.wox
View File

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

7
UI/Templates/MailerUI/UIxMailViewTemplate.wox
View File

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

14
UI/Templates/SchedulerUI/UIxCalDayView.wox
View File

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

2
UI/Templates/SchedulerUI/UIxCalMainView.wox
View File

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

14
UI/Templates/SchedulerUI/UIxCalMonthView.wox
View File

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

14
UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
View File

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

14
UI/Templates/SchedulerUI/UIxCalWeekView.wox
View File

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

4
UI/WebServerResources/js/Common/navController.js
View File

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

6
UI/WebServerResources/scss/components/icon/icon.scss
View File

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

10
UI/WebServerResources/scss/views/SchedulerUI.scss
View File

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

34
UI/WebServerResources/scss/views/_view.scss
View File

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