(css,js) Btn to expand toolbar of all-day events
parent
0cce8f6053
commit
fd388e2373
1
NEWS
1
NEWS
|
@ -4,6 +4,7 @@
|
||||||
New features
|
New features
|
||||||
- [core] new database structure options to make SOGo use a total of nine tables
|
- [core] new database structure options to make SOGo use a total of nine tables
|
||||||
- [core] new user-based rate-limiting support for all SOGo requests (#3188)
|
- [core] new user-based rate-limiting support for all SOGo requests (#3188)
|
||||||
|
- [web] toolbar of all-day events can be expanded to display all events
|
||||||
|
|
||||||
Enhancements
|
Enhancements
|
||||||
- [web] updated Angular Material to version 1.0.6
|
- [web] updated Angular Material to version 1.0.6
|
||||||
|
|
|
@ -6,73 +6,82 @@
|
||||||
xmlns:const="http://www.skyrix.com/od/constant"
|
xmlns:const="http://www.skyrix.com/od/constant"
|
||||||
xmlns:rsrc="OGo:url"
|
xmlns:rsrc="OGo:url"
|
||||||
xmlns:label="OGo:label">
|
xmlns:label="OGo:label">
|
||||||
<md-toolbar class="daysView" var:sg-view="currentView">
|
<md-toolbar class="daysView" layout="row" var:sg-view="currentView">
|
||||||
|
<div class="allDaysView--sidenav">
|
||||||
<!-- Display today abreviation and date -->
|
<md-button class="md-icon-button" ng-click="calendar.toggleAllDays()">
|
||||||
<div class="days dayLabels">
|
<md-icon class="md-default-theme md-fg md-hue-1"
|
||||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
ng-class="{'md-rotate-180-ccw': calendar.expandedAllDays}">keyboard_arrow_down</md-icon>
|
||||||
<div var:class="dayClasses">
|
</md-button>
|
||||||
<!-- Week view day header -->
|
|
||||||
<var:if condition="isWeekView">
|
|
||||||
<div class="sg-md-caption md-default-theme md-fg md-primary md-hue-1"><var:string value="labelForDay"/></div>
|
|
||||||
<var:if condition="currentTableDay.isToday">
|
|
||||||
<div class="sg-md-display-2 md-default-theme md-fg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
|
|
||||||
</var:if>
|
|
||||||
<var:if condition="currentTableDay.isToday" const:negate="YES">
|
|
||||||
<div class="sg-md-display-2--thin md-default-theme md-fg md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
|
|
||||||
</var:if>
|
|
||||||
<div class="md-default-theme md-fg md-primary md-hue-2"><var:string value="labelForMonth"/></div>
|
|
||||||
</var:if>
|
|
||||||
|
|
||||||
<!-- Day view header -->
|
|
||||||
<var:if condition="isWeekView" const:negate="YES">
|
|
||||||
<var:if condition="currentTableDay.isToday">
|
|
||||||
<div class="sg-md-display-4 md-default-theme md-fg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
|
|
||||||
</var:if>
|
|
||||||
<var:if condition="currentTableDay.isToday" const:negate="YES">
|
|
||||||
<div class="sg-md-display-4 md-default-theme md-fg md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
|
|
||||||
</var:if>
|
|
||||||
<div class="md-default-theme md-fg md-primary md-hue-2"><var:string value="labelForMonth"/></div>
|
|
||||||
</var:if>
|
|
||||||
</div>
|
|
||||||
</var:foreach>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<var:if condition="isMultiColumnView">
|
<div layout="column" class="md-flex">
|
||||||
<!-- Calendars names in multicolumn day view -->
|
<!-- Display today abreviation and date -->
|
||||||
<div class="days dayLabels">
|
<div class="days dayLabels">
|
||||||
<div class="day multicolumnDay"
|
|
||||||
ng-repeat="view in calendar.views"
|
|
||||||
ng-class="view.calendar.getClassName('bdr')">
|
|
||||||
{{view.calendar.name}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</var:if>
|
|
||||||
|
|
||||||
<!-- All day cells -->
|
|
||||||
<div class="allDaysView md-default-theme md-background md-bg">
|
|
||||||
<div class="days" sg-calendar-scroll-view="multiday-allday">
|
|
||||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||||
<sg-calendar-day var:class="dayClasses"
|
<div var:class="dayClasses">
|
||||||
var:day="currentTableDay.shortDateString"
|
<!-- Week view day header -->
|
||||||
var:id="currentAllDayId"
|
<var:if condition="isWeekView">
|
||||||
hour="allday"
|
<div class="sg-md-caption md-default-theme md-fg md-primary md-hue-1"><var:string value="labelForDay"/></div>
|
||||||
var:sg-day-number="currentDayNumber"
|
<var:if condition="currentTableDay.isToday">
|
||||||
var:sg-day="currentTableDay.shortDateString"
|
<div class="sg-md-display-2 md-default-theme md-fg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
|
||||||
var:sg-day-string="currentTableDay.iso8601DateString"
|
</var:if>
|
||||||
sg-calendar="{{view.id}}"
|
<var:if condition="currentTableDay.isToday" const:negate="YES">
|
||||||
ng-repeat="view in calendar.views">
|
<div class="sg-md-display-2--thin md-default-theme md-fg md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
|
||||||
<sg-calendar-day-table
|
</var:if>
|
||||||
sg-blocks="view.allDayBlocks"
|
<div class="md-default-theme md-fg md-primary md-hue-2"><var:string value="labelForMonth"/></div>
|
||||||
sg-click="list.openEvent(event, component)"
|
</var:if>
|
||||||
var:sg-day="currentTableDay.shortDateString"><!-- blocks for current day --></sg-calendar-day-table>
|
|
||||||
<sg-calendar-day-block
|
<!-- Day view header -->
|
||||||
sg-calendar-ghost="sg-calendar-ghost"
|
<var:if condition="isWeekView" const:negate="YES">
|
||||||
sg-block="list.component.$ghost"><!-- drag ghost --></sg-calendar-day-block>
|
<var:if condition="currentTableDay.isToday">
|
||||||
</sg-calendar-day>
|
<div class="sg-md-display-4 md-default-theme md-fg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
|
||||||
|
</var:if>
|
||||||
|
<var:if condition="currentTableDay.isToday" const:negate="YES">
|
||||||
|
<div class="sg-md-display-4 md-default-theme md-fg md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
|
||||||
|
</var:if>
|
||||||
|
<div class="md-default-theme md-fg md-primary md-hue-2"><var:string value="labelForMonth"/></div>
|
||||||
|
</var:if>
|
||||||
|
</div>
|
||||||
</var:foreach>
|
</var:foreach>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<var:if condition="isMultiColumnView">
|
||||||
|
<!-- Calendars names in multicolumn day view -->
|
||||||
|
<div class="days dayLabels">
|
||||||
|
<div class="day multicolumnDay"
|
||||||
|
ng-repeat="view in calendar.views"
|
||||||
|
ng-class="view.calendar.getClassName('bdr')">
|
||||||
|
{{view.calendar.name}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</var:if>
|
||||||
|
|
||||||
|
<!-- All day cells -->
|
||||||
|
<div class="allDaysView" ng-class="{allDaysView__expanded: calendar.expandedAllDays}">
|
||||||
|
<div class="days" sg-calendar-scroll-view="multiday-allday">
|
||||||
|
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||||
|
<sg-calendar-day var:class="dayClasses"
|
||||||
|
var:day="currentTableDay.shortDateString"
|
||||||
|
var:id="currentAllDayId"
|
||||||
|
hour="allday"
|
||||||
|
var:sg-day-number="currentDayNumber"
|
||||||
|
var:sg-day="currentTableDay.shortDateString"
|
||||||
|
var:sg-day-string="currentTableDay.iso8601DateString"
|
||||||
|
sg-calendar="{{view.id}}"
|
||||||
|
ng-repeat="view in calendar.views">
|
||||||
|
<sg-calendar-day-table
|
||||||
|
sg-blocks="view.allDayBlocks"
|
||||||
|
sg-click="list.openEvent(event, component)"
|
||||||
|
var:sg-day="currentTableDay.shortDateString"><!-- blocks for current day --></sg-calendar-day-table>
|
||||||
|
<sg-calendar-day-block
|
||||||
|
sg-calendar-ghost="sg-calendar-ghost"
|
||||||
|
sg-block="list.component.$ghost"><!-- drag ghost --></sg-calendar-day-block>
|
||||||
|
</sg-calendar-day>
|
||||||
|
</var:foreach>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</md-toolbar>
|
</md-toolbar>
|
||||||
|
|
||||||
<md-content class="md-flex" sg-calendar-scroll-view="multiday" var:sg-view="currentView">
|
<md-content class="md-flex" sg-calendar-scroll-view="multiday" var:sg-view="currentView">
|
||||||
|
@ -92,12 +101,12 @@
|
||||||
<div class="days">
|
<div class="days">
|
||||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||||
<sg-calendar-day var:class="dayClasses"
|
<sg-calendar-day var:class="dayClasses"
|
||||||
var:id="currentDayId"
|
var:id="currentDayId"
|
||||||
var:sg-day-number="currentDayNumber"
|
var:sg-day-number="currentDayNumber"
|
||||||
var:sg-day="currentTableDay.shortDateString"
|
var:sg-day="currentTableDay.shortDateString"
|
||||||
var:sg-day-string="currentTableDay.iso8601DateString"
|
var:sg-day-string="currentTableDay.iso8601DateString"
|
||||||
sg-calendar="{{view.id}}"
|
sg-calendar="{{view.id}}"
|
||||||
ng-repeat="view in calendar.views">
|
ng-repeat="view in calendar.views">
|
||||||
<div class="hourCells">
|
<div class="hourCells">
|
||||||
<var:foreach list="hoursToDisplay" item="currentTableHour">
|
<var:foreach list="hoursToDisplay" item="currentTableHour">
|
||||||
<div var:class="clickableHourCellClass"
|
<div var:class="clickableHourCellClass"
|
||||||
|
|
|
@ -10,6 +10,12 @@
|
||||||
function CalendarController($scope, $rootScope, $state, $stateParams, Calendar, Component, stateEventsBlocks) {
|
function CalendarController($scope, $rootScope, $state, $stateParams, Calendar, Component, stateEventsBlocks) {
|
||||||
var vm = this, deregisterCalendarsList;
|
var vm = this, deregisterCalendarsList;
|
||||||
|
|
||||||
|
// Make the toolbar state of all-day events persistent
|
||||||
|
if (angular.isUndefined(CalendarController.expandedAllDays))
|
||||||
|
CalendarController.expandedAllDays = false;
|
||||||
|
|
||||||
|
vm.expandedAllDays = CalendarController.expandedAllDays;
|
||||||
|
vm.toggleAllDays = toggleAllDays;
|
||||||
vm.views = stateEventsBlocks;
|
vm.views = stateEventsBlocks;
|
||||||
vm.changeDate = changeDate;
|
vm.changeDate = changeDate;
|
||||||
vm.changeView = changeView;
|
vm.changeView = changeView;
|
||||||
|
@ -19,6 +25,12 @@
|
||||||
|
|
||||||
$scope.$on('$destroy', deregisterCalendarsList);
|
$scope.$on('$destroy', deregisterCalendarsList);
|
||||||
|
|
||||||
|
// Expand or collapse all-day events
|
||||||
|
function toggleAllDays() {
|
||||||
|
CalendarController.expandedAllDays = !CalendarController.expandedAllDays;
|
||||||
|
vm.expandedAllDays = CalendarController.expandedAllDays;
|
||||||
|
}
|
||||||
|
|
||||||
function updateView() {
|
function updateView() {
|
||||||
// See stateEventsBlocks in Scheduler.app.js
|
// See stateEventsBlocks in Scheduler.app.js
|
||||||
Component.$eventsBlocksForView($stateParams.view, $stateParams.day.asDate()).then(function(data) {
|
Component.$eventsBlocksForView($stateParams.view, $stateParams.day.asDate()).then(function(data) {
|
||||||
|
|
|
@ -62,6 +62,9 @@ md-icon {
|
||||||
&.md-rotate-180 {
|
&.md-rotate-180 {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
&.md-rotate-180-ccw {
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
// &.icon-add:before {
|
// &.icon-add:before {
|
||||||
// content: "\e317";
|
// content: "\e317";
|
||||||
// }
|
// }
|
||||||
|
|
|
@ -62,16 +62,17 @@ $quarter_height: 10px;
|
||||||
|
|
||||||
// The days labels appear in the toolbar
|
// The days labels appear in the toolbar
|
||||||
md-toolbar {
|
md-toolbar {
|
||||||
|
flex-shrink: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
&.daysView, &.monthView {
|
&.daysView, &.monthView {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
z-index: $z-index-toolbar - 1;
|
z-index: $z-index-toolbar - 1;
|
||||||
.days {
|
.days {
|
||||||
margin-left: $hours_margin;
|
|
||||||
&:not([sg-calendar-scroll-view$="allday"]) {
|
&:not([sg-calendar-scroll-view$="allday"]) {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
&.dayLabels {
|
&.dayLabels {
|
||||||
|
flex-shrink: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
.day {
|
.day {
|
||||||
padding-left: 1%;
|
padding-left: 1%;
|
||||||
|
@ -82,6 +83,12 @@ $quarter_height: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.monthView {
|
||||||
|
// Toolbar of month view
|
||||||
|
> div {
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
}
|
||||||
&[sg-view$=dayview] {
|
&[sg-view$=dayview] {
|
||||||
// Toolbar of day view only
|
// Toolbar of day view only
|
||||||
.dayLabels {
|
.dayLabels {
|
||||||
|
@ -91,17 +98,12 @@ $quarter_height: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.monthView {
|
|
||||||
// Toolbar of month view
|
|
||||||
> div {
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// The all-day events appear in the shrinkable toolbar, bellow the days labels
|
// The all-day events appear in the shrinkable toolbar, bellow the days labels
|
||||||
.allDaysView {
|
.allDaysView {
|
||||||
border-bottom: 1px solid sg-color($sogoPaper, 300);
|
border-bottom: 1px solid sg-color($sogoPaper, 300);
|
||||||
|
flex-shrink: 0;
|
||||||
max-height: $sg-font-size-4 * 6;
|
max-height: $sg-font-size-4 * 6;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -147,6 +149,23 @@ $quarter_height: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Toolbar of all-day events when expanded to display all events
|
||||||
|
.allDaysView__expanded {
|
||||||
|
max-height: none;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Side column on the left of the days labels and all-day events;
|
||||||
|
// Contains the toggle button to collapse/expand the toolbar
|
||||||
|
.allDaysView--sidenav {
|
||||||
|
border-bottom: 1px solid sg-color($sogoPaper, 300);
|
||||||
|
width: $hours_margin;
|
||||||
|
.md-icon-button {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
md-card {
|
md-card {
|
||||||
// All views wrap a md-card
|
// All views wrap a md-card
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
Loading…
Reference in New Issue