(css,js) Btn to expand toolbar of all-day events
Francis Lachapelle
parent
0cce8f6053
commit
fd388e2373
1
NEWS
1
NEWS
|
|
@ -4,6 +4,7 @@
|
|||
New features
|
||||
- [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)
|
||||
- [web] toolbar of all-day events can be expanded to display all events
|
||||
|
||||
Enhancements
|
||||
- [web] updated Angular Material to version 1.0.6
|
||||
|
|
|
|||
|
|
@ -6,73 +6,82 @@
|
|||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
<md-toolbar class="daysView" var:sg-view="currentView">
|
||||
|
||||
<!-- Display today abreviation and date -->
|
||||
<div class="days dayLabels">
|
||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||
<div var:class="dayClasses">
|
||||
<!-- 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>
|
||||
<md-toolbar class="daysView" layout="row" var:sg-view="currentView">
|
||||
<div class="allDaysView--sidenav">
|
||||
<md-button class="md-icon-button" ng-click="calendar.toggleAllDays()">
|
||||
<md-icon class="md-default-theme md-fg md-hue-1"
|
||||
ng-class="{'md-rotate-180-ccw': calendar.expandedAllDays}">keyboard_arrow_down</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<var:if condition="isMultiColumnView">
|
||||
<!-- Calendars names in multicolumn day view -->
|
||||
<div layout="column" class="md-flex">
|
||||
<!-- Display today abreviation and date -->
|
||||
<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">
|
||||
<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>
|
||||
<div var:class="dayClasses">
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
|
||||
</md-toolbar>
|
||||
|
||||
<md-content class="md-flex" sg-calendar-scroll-view="multiday" var:sg-view="currentView">
|
||||
|
|
@ -92,12 +101,12 @@
|
|||
<div class="days">
|
||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||
<sg-calendar-day var:class="dayClasses"
|
||||
var:id="currentDayId"
|
||||
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">
|
||||
var:id="currentDayId"
|
||||
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">
|
||||
<div class="hourCells">
|
||||
<var:foreach list="hoursToDisplay" item="currentTableHour">
|
||||
<div var:class="clickableHourCellClass"
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@
|
|||
function CalendarController($scope, $rootScope, $state, $stateParams, Calendar, Component, stateEventsBlocks) {
|
||||
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.changeDate = changeDate;
|
||||
vm.changeView = changeView;
|
||||
|
|
@ -19,6 +25,12 @@
|
|||
|
||||
$scope.$on('$destroy', deregisterCalendarsList);
|
||||
|
||||
// Expand or collapse all-day events
|
||||
function toggleAllDays() {
|
||||
CalendarController.expandedAllDays = !CalendarController.expandedAllDays;
|
||||
vm.expandedAllDays = CalendarController.expandedAllDays;
|
||||
}
|
||||
|
||||
function updateView() {
|
||||
// See stateEventsBlocks in Scheduler.app.js
|
||||
Component.$eventsBlocksForView($stateParams.view, $stateParams.day.asDate()).then(function(data) {
|
||||
|
|
|
|||
|
|
@ -62,6 +62,9 @@ md-icon {
|
|||
&.md-rotate-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&.md-rotate-180-ccw {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
// &.icon-add:before {
|
||||
// content: "\e317";
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -62,16 +62,17 @@ $quarter_height: 10px;
|
|||
|
||||
// The days labels appear in the toolbar
|
||||
md-toolbar {
|
||||
flex-shrink: 0;
|
||||
min-height: 0;
|
||||
&.daysView, &.monthView {
|
||||
background-color: #fff;
|
||||
z-index: $z-index-toolbar - 1;
|
||||
.days {
|
||||
margin-left: $hours_margin;
|
||||
&:not([sg-calendar-scroll-view$="allday"]) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
&.dayLabels {
|
||||
flex-shrink: 0;
|
||||
min-height: 0;
|
||||
.day {
|
||||
padding-left: 1%;
|
||||
|
|
@ -82,6 +83,12 @@ $quarter_height: 10px;
|
|||
}
|
||||
}
|
||||
}
|
||||
&.monthView {
|
||||
// Toolbar of month view
|
||||
> div {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
&[sg-view$=dayview] {
|
||||
// Toolbar of day view only
|
||||
.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
|
||||
.allDaysView {
|
||||
border-bottom: 1px solid sg-color($sogoPaper, 300);
|
||||
flex-shrink: 0;
|
||||
max-height: $sg-font-size-4 * 6;
|
||||
min-height: 0;
|
||||
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 {
|
||||
// All views wrap a md-card
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Reference in New Issue