Improve Calendar views
Moved toolbars inside "list" and "detail" views, like we do in the other modules. With this change, it was possible to move the navitation button (chevrons) inside the top toolbar of the detail view. Also move the view headers inside a toolbar. The all-day events of the day and week views have also been moved inside this toolbar.pull/105/head
Francis Lachapelle
parent
eb50f94b2b
commit
fcba6f2ddb
|
|
@ -187,7 +187,6 @@
|
||||||
{
|
{
|
||||||
if (!calendarsToDisplay)
|
if (!calendarsToDisplay)
|
||||||
{
|
{
|
||||||
int max=0, i;
|
|
||||||
NSArray *folders;
|
NSArray *folders;
|
||||||
SOGoAppointmentFolders *co;
|
SOGoAppointmentFolders *co;
|
||||||
SOGoAppointmentFolder *folder;
|
SOGoAppointmentFolder *folder;
|
||||||
|
|
@ -298,23 +297,34 @@
|
||||||
- (NSString *) labelForMonth
|
- (NSString *) labelForMonth
|
||||||
{
|
{
|
||||||
NSCalendarDate *nextDay;
|
NSCalendarDate *nextDay;
|
||||||
|
NSString *calendarFormat;
|
||||||
BOOL isLastOrFirstDay;
|
BOOL isLastOrFirstDay;
|
||||||
|
|
||||||
isLastOrFirstDay = NO;
|
isLastOrFirstDay = NO;
|
||||||
if ([currentTableDay dayOfMonth] == 1)
|
calendarFormat = @"%b";
|
||||||
|
|
||||||
|
if ([currentView isEqualToString:@"dayview"])
|
||||||
{
|
{
|
||||||
isLastOrFirstDay = YES;
|
isLastOrFirstDay = YES;
|
||||||
|
calendarFormat = @"%B";
|
||||||
}
|
}
|
||||||
else if ([currentTableDay dayOfMonth] > 27)
|
else
|
||||||
{
|
{
|
||||||
nextDay = [currentTableDay dateByAddingYears: 0
|
if ([currentTableDay dayOfMonth] == 1)
|
||||||
months: 0
|
{
|
||||||
days: 1];
|
isLastOrFirstDay = YES;
|
||||||
if ([nextDay dayOfMonth] == 1)
|
}
|
||||||
isLastOrFirstDay = YES;
|
else if ([currentTableDay dayOfMonth] > 27)
|
||||||
|
{
|
||||||
|
nextDay = [currentTableDay dateByAddingYears: 0
|
||||||
|
months: 0
|
||||||
|
days: 1];
|
||||||
|
if ([nextDay dayOfMonth] == 1)
|
||||||
|
isLastOrFirstDay = YES;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return isLastOrFirstDay? [currentTableDay descriptionWithCalendarFormat: @"%b" locale: locale] : nil;
|
return isLastOrFirstDay? [currentTableDay descriptionWithCalendarFormat: calendarFormat locale: locale] : nil;
|
||||||
}
|
}
|
||||||
|
|
||||||
- (NSString *) labelForDate
|
- (NSString *) labelForDate
|
||||||
|
|
@ -422,23 +432,23 @@
|
||||||
numberOfDays];
|
numberOfDays];
|
||||||
}
|
}
|
||||||
|
|
||||||
- (NSString *) daysViewClasses
|
// - (NSString *) daysViewClasses
|
||||||
{
|
// {
|
||||||
NSString *daysView;
|
// NSString *daysView;
|
||||||
|
|
||||||
if ([currentView isEqualToString:@"multicolumndayview"])
|
// if ([currentView isEqualToString:@"multicolumndayview"])
|
||||||
daysView = @"daysView daysViewForMultipleDays";
|
// daysView = @"daysView daysViewForMultipleDays";
|
||||||
|
|
||||||
else
|
// else
|
||||||
daysView = [NSString stringWithFormat: @"daysView daysViewFor%dDays", numberOfDays];
|
// daysView = [NSString stringWithFormat: @"daysView daysViewFor%dDays", numberOfDays];
|
||||||
|
|
||||||
return daysView;
|
// return daysView;
|
||||||
}
|
//}
|
||||||
|
|
||||||
- (NSString *) daysViewHeaderClasses
|
// - (NSString *) daysViewHeaderClasses
|
||||||
{
|
// {
|
||||||
return [NSString stringWithFormat: @"%@ daysHeader", [self daysViewClasses]];
|
// return [NSString stringWithFormat: @"%@ daysHeader", [self daysViewClasses]];
|
||||||
}
|
// }
|
||||||
|
|
||||||
- (NSString *) dayClasses
|
- (NSString *) dayClasses
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
<?xml version="1.0" standalone="yes"?>
|
<?xml version="1.0" standalone="yes"?>
|
||||||
<!DOCTYPE container>
|
<!DOCTYPE container>
|
||||||
<container
|
<container
|
||||||
xmlns="http://www.w3.org/1999/xhtml"
|
xmlns="http://www.w3.org/1999/xhtml"
|
||||||
xmlns:var="http://www.skyrix.com/od/binding"
|
xmlns:var="http://www.skyrix.com/od/binding"
|
||||||
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">
|
||||||
<div var:class="daysViewHeaderClasses">
|
<md-toolbar class="daysView md-hue-1" md-scroll-shrink="true" var:sg-view="currentView">
|
||||||
|
|
||||||
<!-- MultiColumnView -->
|
<!-- MultiColumnView -->
|
||||||
<!-- Display the name of the calendar -->
|
<!-- Display the name of the calendar -->
|
||||||
<var:if condition="isMultiColumnView">
|
<var:if condition="isMultiColumnView">
|
||||||
<div class="calendarLabels">
|
<div class="calendarLabels">
|
||||||
|
|
@ -39,89 +39,110 @@
|
||||||
</div>
|
</div>
|
||||||
</var:if>
|
</var:if>
|
||||||
|
|
||||||
<!-- DayView or WeekView -->
|
<!-- DayView or WeekView -->
|
||||||
<var:if condition="isNotMultiColumnView">
|
<var:if condition="isNotMultiColumnView">
|
||||||
<!-- Display today abreviation and date -->
|
<!-- Display today abreviation and date -->
|
||||||
<div class="days dayLabels">
|
<div class="days dayLabels">
|
||||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||||
<div var:class="dayClasses">
|
<div var:class="dayClasses">
|
||||||
<var:if condition="isWeekView"><div><var:string value="labelForDay"/></div></var:if>
|
<!-- Week view day header -->
|
||||||
<var:if condition="currentTableDay.isToday">
|
<var:if condition="isWeekView">
|
||||||
<div class="sg-md-display-2 md-default-theme md-fg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
|
<div class="sg-md-caption"><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 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>
|
</var:if>
|
||||||
<var:if condition="currentTableDay.isToday" const:negate="YES">
|
<!-- Day view header -->
|
||||||
<div class="sg-md-display-2 md-default-theme md-fg md-hue-1"><var:string value="currentTableDay.dayOfMonth"/></div>
|
<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>
|
</var:if>
|
||||||
<div class="md-default-theme md-fg md-primary md-hue-2"><var:string value="labelForMonth"/></div>
|
|
||||||
</div>
|
|
||||||
</var:foreach>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- All day cells -->
|
|
||||||
<div class="days allDays">
|
|
||||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
|
||||||
<div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" hour="allday">
|
|
||||||
<sg-calendar-day-table
|
|
||||||
sg-blocks="calendar.allDayBlocks"
|
|
||||||
sg-click="list.openEvent(event, component)"
|
|
||||||
var:sg-day="currentTableDay.shortDateString" />
|
|
||||||
</div>
|
</div>
|
||||||
</var:foreach>
|
</var:foreach>
|
||||||
</div>
|
</div>
|
||||||
</var:if>
|
</var:if>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- The hours -->
|
<!-- All day cells -->
|
||||||
<div class="hours">
|
<div class="allDaysView md-default-theme md-background md-bg">
|
||||||
<var:foreach list="hoursToDisplay" item="currentTableHour">
|
<div class="days">
|
||||||
<div class="hour" var:id="currentHourId">
|
|
||||||
<var:string value="currentTableHour"/>
|
|
||||||
</div>
|
|
||||||
</var:foreach>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- The hours cells -->
|
|
||||||
<div var:class="daysViewClasses">
|
|
||||||
<div class="days">
|
|
||||||
<!-- MultiColumnView -->
|
|
||||||
<var:if condition="isMultiColumnView">
|
|
||||||
<var:foreach list="calendarsToDisplay" item="currentCalendar">
|
|
||||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
|
||||||
<div var:class="dayClasses" var:id="currentDayId" var:day-number="currentDayNumber" var:calendar="currentCalendar.folder" var:day="currentTableDay.shortDateString">
|
|
||||||
<div class="hourCells">
|
|
||||||
<var:foreach list="hoursToDisplay" item="currentTableHour">
|
|
||||||
<div var:class="clickableHourCellClass" var:day="currentTableDay.shortDateString" var:hour="currentAppointmentHour">
|
|
||||||
<span class="minutes15"><!-- space --></span>
|
|
||||||
<span class="minutes30"><!-- space --></span>
|
|
||||||
<span class="minutes45"><!-- space --></span>
|
|
||||||
</div>
|
|
||||||
</var:foreach>
|
|
||||||
</div>
|
|
||||||
<div class="events"><!-- space --></div>
|
|
||||||
</div>
|
|
||||||
</var:foreach>
|
|
||||||
</var:foreach>
|
|
||||||
</var:if>
|
|
||||||
<var:if condition="isNotMultiColumnView">
|
|
||||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||||
<div var:class="dayClasses" var:id="currentDayId" var:day-number="currentDayNumber" var:day="currentTableDay.shortDateString">
|
<div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" hour="allday">
|
||||||
<div class="hourCells">
|
<sg-calendar-day-table
|
||||||
<var:foreach list="hoursToDisplay" item="currentTableHour">
|
sg-blocks="calendar.allDayBlocks"
|
||||||
<div var:class="clickableHourCellClass" var:day="currentTableDay.shortDateString" var:hour="currentAppointmentHour">
|
sg-click="list.openEvent(event, component)"
|
||||||
<span class="minutes15"><!-- space --></span>
|
var:sg-day="currentTableDay.shortDateString" />
|
||||||
<span class="minutes30"><!-- space --></span>
|
|
||||||
<span class="minutes45"><!-- space --></span>
|
|
||||||
</div>
|
|
||||||
</var:foreach>
|
|
||||||
<sg-calendar-day-table
|
|
||||||
sg-blocks="calendar.blocks"
|
|
||||||
sg-click="list.openEvent(event, component)"
|
|
||||||
var:sg-day="currentTableDay.shortDateString" />
|
|
||||||
</div>
|
|
||||||
<div class="events"><!-- space --></div>
|
|
||||||
</div>
|
</div>
|
||||||
</var:foreach>
|
</var:foreach>
|
||||||
</var:if>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</md-toolbar>
|
||||||
|
|
||||||
|
<md-content class="md-flex" md-scroll-y="md-scroll-y">
|
||||||
|
<div class="calendarView">
|
||||||
|
|
||||||
|
<!-- The hours -->
|
||||||
|
<div class="hours">
|
||||||
|
<var:foreach list="hoursToDisplay" item="currentTableHour">
|
||||||
|
<div class="hour" var:id="currentHourId">
|
||||||
|
<var:string value="currentTableHour"/>
|
||||||
|
</div>
|
||||||
|
</var:foreach>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The hours cells -->
|
||||||
|
<div class="daysView">
|
||||||
|
<div class="days">
|
||||||
|
<!-- MultiColumnView -->
|
||||||
|
<var:if condition="isMultiColumnView">
|
||||||
|
<var:foreach list="calendarsToDisplay" item="currentCalendar">
|
||||||
|
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||||
|
<div var:class="dayClasses" var:id="currentDayId" var:day-number="currentDayNumber" var:calendar="currentCalendar.folder" var:day="currentTableDay.shortDateString">
|
||||||
|
<div class="hourCells">
|
||||||
|
<var:foreach list="hoursToDisplay" item="currentTableHour">
|
||||||
|
<div var:class="clickableHourCellClass" var:day="currentTableDay.shortDateString" var:hour="currentAppointmentHour">
|
||||||
|
<span class="minutes15"><!-- space --></span>
|
||||||
|
<span class="minutes30"><!-- space --></span>
|
||||||
|
<span class="minutes45"><!-- space --></span>
|
||||||
|
</div>
|
||||||
|
</var:foreach>
|
||||||
|
</div>
|
||||||
|
<div class="events"><!-- space --></div>
|
||||||
|
</div>
|
||||||
|
</var:foreach>
|
||||||
|
</var:foreach>
|
||||||
|
</var:if>
|
||||||
|
<!-- DayView and WeekView -->
|
||||||
|
<var:if condition="isNotMultiColumnView">
|
||||||
|
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||||
|
<div var:class="dayClasses" var:id="currentDayId" var:day-number="currentDayNumber" var:day="currentTableDay.shortDateString">
|
||||||
|
<div class="hourCells">
|
||||||
|
<var:foreach list="hoursToDisplay" item="currentTableHour">
|
||||||
|
<div var:class="clickableHourCellClass" var:day="currentTableDay.shortDateString" var:hour="currentAppointmentHour">
|
||||||
|
<span class="minutes15"><!-- space --></span>
|
||||||
|
<span class="minutes30"><!-- space --></span>
|
||||||
|
<span class="minutes45"><!-- space --></span>
|
||||||
|
</div>
|
||||||
|
</var:foreach>
|
||||||
|
<sg-calendar-day-table
|
||||||
|
sg-blocks="calendar.blocks"
|
||||||
|
sg-click="list.openEvent(event, component)"
|
||||||
|
var:sg-day="currentTableDay.shortDateString" />
|
||||||
|
</div>
|
||||||
|
<div class="events"><!-- space --></div>
|
||||||
|
</div>
|
||||||
|
</var:foreach>
|
||||||
|
</var:if>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</md-content>
|
||||||
</container>
|
</container>
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,40 @@
|
||||||
<?xml version="1.0" standalone="yes"?>
|
<?xml version="1.0" standalone="yes"?>
|
||||||
<container
|
<!DOCTYPE container>
|
||||||
xmlns="http://www.w3.org/1999/xhtml"
|
<container
|
||||||
xmlns:var="http://www.skyrix.com/od/binding"
|
xmlns="http://www.w3.org/1999/xhtml"
|
||||||
xmlns:const="http://www.skyrix.com/od/constant"
|
xmlns:var="http://www.skyrix.com/od/binding"
|
||||||
xmlns:rsrc="OGo:url"
|
xmlns:const="http://www.skyrix.com/od/constant"
|
||||||
xmlns:label="OGo:label">
|
xmlns:rsrc="OGo:url"
|
||||||
|
xmlns:label="OGo:label">
|
||||||
|
|
||||||
<!-- <div class="menu" id="currentViewMenu">
|
<md-toolbar hide-sm="hide-sm">
|
||||||
<ul>
|
<div class="md-toolbar-tools">
|
||||||
<li><var:string label:value="New Event..."/></li>
|
<md-button class="md-icon-button"
|
||||||
<li><var:string label:value="New Task..."/></li>
|
label:aria-label="Previous Day"
|
||||||
<li>!- separator -</li>
|
var:date="prevDayQueryParameters.day"
|
||||||
<li><var:string label:value="Previous Day"/></li>
|
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
||||||
<li><var:string label:value="Next Day"/></li>
|
<div><var:string value="currentDayName" /></div>
|
||||||
<li>!- separator -</li>
|
<md-button class="md-icon-button"
|
||||||
<li><var:string label:value="Delete Event"/></li>
|
label:aria-label="Next Day"
|
||||||
<li><var:string label:value="Copy event to my calendar"/></li>
|
var:date="nextDayQueryParameters.day"
|
||||||
<li><var:string label:value="View Raw Source"/></li>
|
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
||||||
</ul>
|
<div class="md-flex"><!-- spacer --></div>
|
||||||
</div>-->
|
<md-button class="md-icon-button md-accent"
|
||||||
<md-content>
|
label:aria-label="Today"
|
||||||
<div layout="row" layout-align="center">
|
ng-click="app.today()"><md-icon>today</md-icon></md-button>
|
||||||
<h5>
|
<a class="md-icon-button md-button"
|
||||||
<md-button
|
label:aria-label="Week"
|
||||||
class="sg-icon-button"
|
href="#/calendar/week"><md-icon>view_week</md-icon></a>
|
||||||
label:aria-label="Previous Day"
|
<a class="md-icon-button md-button"
|
||||||
var:date="prevDayQueryParameters.day"
|
label:aria-label="Month"
|
||||||
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
href="#/calendar/month"><md-icon>view_module</md-icon></a>
|
||||||
<var:string value="currentDayName" />
|
</div>
|
||||||
<md-button
|
</md-toolbar>
|
||||||
class="sg-icon-button"
|
|
||||||
label:aria-label="Next Day"
|
<var:component
|
||||||
var:date="nextDayQueryParameters.day"
|
className="UIxCalDayTable"
|
||||||
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
startDate="startDate"
|
||||||
</h5>
|
const:CSSClass="dayOverview"
|
||||||
</div>
|
const:numberOfDays="1"
|
||||||
<div id="calendarContent">
|
const:currentView="dayview"/>
|
||||||
<var:component
|
</container>
|
||||||
className="UIxCalDayTable"
|
|
||||||
startDate="startDate"
|
|
||||||
const:CSSClass="dayOverview"
|
|
||||||
const:numberOfDays="1"
|
|
||||||
const:currentView="dayview"/>
|
|
||||||
</div>
|
|
||||||
</md-content>
|
|
||||||
</container>
|
|
||||||
|
|
|
||||||
|
|
@ -366,8 +366,10 @@
|
||||||
</md-button>
|
</md-button>
|
||||||
</div> -->
|
</div> -->
|
||||||
</md-toolbar>
|
</md-toolbar>
|
||||||
<div layout="row">
|
<div layout="row" class="md-flex">
|
||||||
<md-toolbar class="view-list" ng-show="list.component.$selectedCount() == 0">
|
<div class="view-list" layout="column">
|
||||||
|
|
||||||
|
<md-toolbar ng-show="list.component.$selectedCount() == 0">
|
||||||
<!-- sort/filter mode (default) -->
|
<!-- sort/filter mode (default) -->
|
||||||
<div class="md-toolbar-tools" layout="row" ng-hide="list.mode.search">
|
<div class="md-toolbar-tools" layout="row" ng-hide="list.mode.search">
|
||||||
<md-button class="sg-icon-button" label:aria-label="Search"
|
<md-button class="sg-icon-button" label:aria-label="Search"
|
||||||
|
|
@ -565,7 +567,7 @@
|
||||||
</md-toolbar>
|
</md-toolbar>
|
||||||
|
|
||||||
<!-- multiple-selection mode -->
|
<!-- multiple-selection mode -->
|
||||||
<md-toolbar class="view-list md-hue-1 sg-toolbar-secondary" ng-show="list.component.$selectedCount() > 0">
|
<md-toolbar class="md-hue-1 sg-toolbar-secondary" ng-show="list.component.$selectedCount() > 0">
|
||||||
<div class="md-toolbar-tools">
|
<div class="md-toolbar-tools">
|
||||||
<md-button class="sg-icon-button" ng-click="list.unselectComponents()">
|
<md-button class="sg-icon-button" ng-click="list.unselectComponents()">
|
||||||
<md-icon>arrow_back</md-icon>
|
<md-icon>arrow_back</md-icon>
|
||||||
|
|
@ -582,28 +584,7 @@
|
||||||
</div>
|
</div>
|
||||||
</md-toolbar>
|
</md-toolbar>
|
||||||
|
|
||||||
<!-- day/week/month views -->
|
<md-content layout="column" class="view-list">
|
||||||
<md-toolbar class="view-detail" hide-sm="hide-sm">
|
|
||||||
<div class="md-toolbar-tools">
|
|
||||||
<md-button class="md-icon-button"
|
|
||||||
label:aria-label="Today"
|
|
||||||
ng-click="app.today()"><md-icon>today</md-icon></md-button>
|
|
||||||
<div class="md-flex"><!-- spacer --></div>
|
|
||||||
<a class="md-icon-button md-button"
|
|
||||||
label:aria-label="Day"
|
|
||||||
href="#/calendar/day"><md-icon>view_day</md-icon></a>
|
|
||||||
<a class="md-icon-button md-button"
|
|
||||||
label:aria-label="Week"
|
|
||||||
href="#/calendar/week"><md-icon>view_week</md-icon></a>
|
|
||||||
<a class="md-icon-button md-button"
|
|
||||||
label:aria-label="Month"
|
|
||||||
href="#/calendar/month"><md-icon>view_module</md-icon></a>
|
|
||||||
</div>
|
|
||||||
</md-toolbar>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<md-content layout="row" class="md-flex">
|
|
||||||
<md-content class="view-list md-flex" layout="column">
|
|
||||||
<md-tabs md-dynamic-height="true"
|
<md-tabs md-dynamic-height="true"
|
||||||
md-selected="list.selectedList">
|
md-selected="list.selectedList">
|
||||||
<!-- Events list -->
|
<!-- Events list -->
|
||||||
|
|
@ -674,8 +655,11 @@
|
||||||
<md-icon>add</md-icon>
|
<md-icon>add</md-icon>
|
||||||
</md-button>
|
</md-button>
|
||||||
</md-content>
|
</md-content>
|
||||||
<div id="detailView" class="view-detail" hide-sm="hide-sm" layout="column" ui-view="calendarView"><!-- calendar view --></div>
|
</div>
|
||||||
</md-content>
|
<div id="detailView" class="view-detail" hide-sm="hide-sm" layout="column" ui-view="calendarView">
|
||||||
|
<!-- calendar view -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,71 +1,75 @@
|
||||||
<?xml version="1.0" standalone="yes"?>
|
<?xml version="1.0" standalone="yes"?>
|
||||||
<!DOCTYPE container>
|
<!DOCTYPE container>
|
||||||
<container
|
<container
|
||||||
xmlns="http://www.w3.org/1999/xhtml"
|
xmlns="http://www.w3.org/1999/xhtml"
|
||||||
xmlns:var="http://www.skyrix.com/od/binding"
|
xmlns:var="http://www.skyrix.com/od/binding"
|
||||||
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">
|
||||||
|
|
||||||
<div class="menu" id="currentViewMenu" ng-hide="true">
|
<md-toolbar hide-sm="hide-sm">
|
||||||
<ul>
|
<div class="md-toolbar-tools">
|
||||||
<li><var:string label:value="New Event..."/></li>
|
<md-button class="md-icon-button"
|
||||||
<li><var:string label:value="New Task..."/></li>
|
label:aria-label="Previous Month"
|
||||||
<li><!-- separator --></li>
|
var:date="prevMonthQueryParameters.day"
|
||||||
<li><var:string label:value="Previous Month"/></li>
|
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
||||||
<li><var:string label:value="Next Month"/></li>
|
<div><var:string value="monthNameOfThisMonth" /> <var:string value="selectedDate.yearOfCommonEra" /></div>
|
||||||
<li><!-- separator --></li>
|
<md-button class="md-icon-button"
|
||||||
<li><var:string label:value="Delete Event"/></li>
|
label:aria-label="Next Month"
|
||||||
<li><var:string label:value="Copy event to my calendar"/></li>
|
var:date="nextMonthQueryParameters.day"
|
||||||
<li><var:string label:value="View Raw Source"/></li>
|
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
||||||
</ul>
|
<div class="md-flex"><!-- spacer --></div>
|
||||||
|
<md-button class="md-icon-button md-accent"
|
||||||
|
label:aria-label="Today"
|
||||||
|
ng-click="app.today()"><md-icon>today</md-icon></md-button>
|
||||||
|
<a class="md-icon-button md-button"
|
||||||
|
label:aria-label="Day"
|
||||||
|
href="#/calendar/day"><md-icon>view_day</md-icon></a>
|
||||||
|
<a class="md-icon-button md-button"
|
||||||
|
label:aria-label="Week"
|
||||||
|
href="#/calendar/week"><md-icon>view_week</md-icon></a>
|
||||||
</div>
|
</div>
|
||||||
|
</md-toolbar>
|
||||||
|
|
||||||
<md-content>
|
<md-toolbar md-scroll-shrink="true" class="monthView md-hue-1">
|
||||||
<div layout="row" layout-align="center">
|
<div layout="row" layout-align="center center"
|
||||||
<h5>
|
class="md-flex md-default-theme md-fg md-hue-2">
|
||||||
<md-button
|
<var:foreach list="headerDaysToDisplay" item="currentTableDay">
|
||||||
class="sg-icon-button"
|
<div class="md-flex-fix dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
|
||||||
label:aria-label="Previous Month"
|
</var:foreach>
|
||||||
var:date="prevMonthQueryParameters.day"
|
</div>
|
||||||
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
</md-toolbar>
|
||||||
<var:string value="monthNameOfThisMonth" />
|
|
||||||
<md-button
|
<md-content class="md-flex" md-scroll-y="md-scroll-y">
|
||||||
class="sg-icon-button"
|
<div class="calendarView monthView">
|
||||||
label:aria-label="Next Month"
|
<md-grid-list
|
||||||
var:date="nextMonthQueryParameters.day"
|
md-cols="7"
|
||||||
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
md-row-height="1:1">
|
||||||
</h5>
|
<var:foreach list="weeksToDisplay" item="currentWeek">
|
||||||
</div>
|
<var:foreach list="currentWeek" item="currentTableDay">
|
||||||
<div class="monthView">
|
<md-grid-tile
|
||||||
<div layout="row" layout-align="center center">
|
md-rowspan="1"
|
||||||
<var:foreach list="headerDaysToDisplay" item="currentTableDay">
|
md-colspan="1"
|
||||||
<div class="md-flex-fix dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
|
class="day"
|
||||||
|
var:day="currentTableDay.shortDateString"
|
||||||
|
var:day-number="currentDayNumber"
|
||||||
|
var:id="currentDayId">
|
||||||
|
<div layout="column" layout-fill="true">
|
||||||
|
<var:if condition="currentTableDay.isToday">
|
||||||
|
<div class="sg-calendar-tile-header md-default-theme md-fg md-accent md-hue-2"><var:string value="dayHeaderNumber"/></div>
|
||||||
|
</var:if>
|
||||||
|
<var:if condition="currentTableDay.isToday" const:negate="YES">
|
||||||
|
<div class="sg-calendar-tile-header md-default-theme md-fg md-hue-2"><var:string value="dayHeaderNumber"/></div>
|
||||||
|
</var:if>
|
||||||
|
<sg-calendar-month-day
|
||||||
|
sg-blocks="calendar.blocks"
|
||||||
|
sg-click="list.openEvent(event, component)"
|
||||||
|
var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day>
|
||||||
|
</div>
|
||||||
|
</md-grid-tile>
|
||||||
</var:foreach>
|
</var:foreach>
|
||||||
</div>
|
</var:foreach>
|
||||||
<md-grid-list
|
</md-grid-list>
|
||||||
md-cols="7"
|
</div>
|
||||||
md-row-height="1:1">
|
</md-content>
|
||||||
<var:foreach list="weeksToDisplay" item="currentWeek">
|
</container>
|
||||||
<var:foreach list="currentWeek" item="currentTableDay">
|
|
||||||
<md-grid-tile
|
|
||||||
md-rowspan="1"
|
|
||||||
md-colspan="1"
|
|
||||||
class="day"
|
|
||||||
var:day="currentTableDay.shortDateString"
|
|
||||||
var:day-number="currentDayNumber"
|
|
||||||
var:id="currentDayId">
|
|
||||||
<div layout="column" layout-fill="true">
|
|
||||||
<div class="sg-calendar-tile-header"><var:string value="dayHeaderNumber"/></div>
|
|
||||||
<sg-calendar-month-day
|
|
||||||
sg-blocks="calendar.blocks"
|
|
||||||
sg-click="list.openEvent(event, component)"
|
|
||||||
var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day>
|
|
||||||
</div>
|
|
||||||
</md-grid-tile>
|
|
||||||
</var:foreach>
|
|
||||||
</var:foreach>
|
|
||||||
</md-grid-list>
|
|
||||||
</div>
|
|
||||||
</md-content>
|
|
||||||
</container>
|
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,40 @@
|
||||||
<?xml version="1.0" standalone="yes"?>
|
<?xml version="1.0" standalone="yes"?>
|
||||||
<container
|
<!DOCTYPE container>
|
||||||
xmlns="http://www.w3.org/1999/xhtml"
|
<container
|
||||||
xmlns:var="http://www.skyrix.com/od/binding"
|
xmlns="http://www.w3.org/1999/xhtml"
|
||||||
xmlns:const="http://www.skyrix.com/od/constant"
|
xmlns:var="http://www.skyrix.com/od/binding"
|
||||||
xmlns:rsrc="OGo:url"
|
xmlns:const="http://www.skyrix.com/od/constant"
|
||||||
xmlns:label="OGo:label">
|
xmlns:rsrc="OGo:url"
|
||||||
|
xmlns:label="OGo:label">
|
||||||
|
|
||||||
<md-content>
|
<md-toolbar hide-sm="hide-sm">
|
||||||
<div layout="row" layout-align="center">
|
<div class="md-toolbar-tools">
|
||||||
<h5>
|
<md-button class="md-icon-button"
|
||||||
<md-button
|
label:aria-label="Previous Week"
|
||||||
class="sg-icon-button"
|
var:date="prevWeekQueryParameters.day"
|
||||||
label:aria-label="Previous Week"
|
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
||||||
var:date="prevWeekQueryParameters.day"
|
<div><var:string value="currentWeekName" /></div>
|
||||||
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
<md-button class="md-icon-button"
|
||||||
<var:string value="currentWeekName" />
|
label:aria-label="Next Week"
|
||||||
<md-button
|
var:date="nextWeekQueryParameters.day"
|
||||||
class="sg-icon-button"
|
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
||||||
label:aria-label="Next Week"
|
<div class="md-flex"><!-- spacer --></div>
|
||||||
var:date="nextWeekQueryParameters.day"
|
<md-button class="md-icon-button md-accent"
|
||||||
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
label:aria-label="Today"
|
||||||
</h5>
|
ng-click="app.today()"><md-icon>today</md-icon></md-button>
|
||||||
</div>
|
<a class="md-icon-button md-button"
|
||||||
<div id="calendarContent">
|
label:aria-label="Day"
|
||||||
<var:component
|
href="#/calendar/day"><md-icon>view_day</md-icon></a>
|
||||||
className="UIxCalDayTable"
|
<a class="md-icon-button md-button"
|
||||||
startDate="startDate"
|
label:aria-label="Month"
|
||||||
const:CSSClass="weekOverview"
|
href="#/calendar/month"><md-icon>view_module</md-icon></a>
|
||||||
const:numberOfDays="7"
|
</div>
|
||||||
const:currentView="weekview"/>
|
</md-toolbar>
|
||||||
</div>
|
|
||||||
</md-content>
|
<var:component
|
||||||
</container>
|
className="UIxCalDayTable"
|
||||||
|
startDate="startDate"
|
||||||
|
const:CSSClass="weekOverview"
|
||||||
|
const:numberOfDays="7"
|
||||||
|
const:currentView="weekview"/>
|
||||||
|
</container>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,18 @@
|
||||||
/// SchedulerUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
/// SchedulerUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||||
$hours_margin: 50px;
|
$hours_margin: 50px;
|
||||||
|
$scrollbar_width: 16px;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Affected templates:
|
||||||
|
* - SchedulerUI/UIxCalDayView.wox
|
||||||
|
* - SchedulerUI/UIxCalWeekView.wox
|
||||||
|
* - SchedulerUI/UIxCalDayTable.wox
|
||||||
|
* - SchedulerUI/UIxCalMonthView.wox
|
||||||
|
*/
|
||||||
|
|
||||||
[ui-view=calendars] {
|
[ui-view=calendars] {
|
||||||
|
|
||||||
|
// Decrease with of middle column (list of events and tasks)
|
||||||
$listView-width: grid-step(5) !global;
|
$listView-width: grid-step(5) !global;
|
||||||
$detailView-width: grid-step(11) !global;
|
$detailView-width: grid-step(11) !global;
|
||||||
|
|
||||||
|
|
@ -21,31 +32,73 @@ $hours_margin: 50px;
|
||||||
@include flex-col(md, 10);
|
@include flex-col(md, 10);
|
||||||
}
|
}
|
||||||
@include from(lg) {
|
@include from(lg) {
|
||||||
@include flex-col(lg, 11, 2, 1);
|
@include flex-col(lg, 11, 1, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-draggable {
|
// The calendar view container
|
||||||
cursor: move;
|
.calendarView {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dayLabels {
|
// The days labels appear in the toolbar
|
||||||
//color: sg-color($sogoBlue, 700);
|
md-toolbar {
|
||||||
overflow: hidden;
|
&.daysView {
|
||||||
.day {
|
overflow: hidden;
|
||||||
text-align: center;
|
z-index: $z-index-toolbar - 1;
|
||||||
|
.days {
|
||||||
|
margin-left: $hours_margin;
|
||||||
|
margin-right: $scrollbar_width; // scrollbar
|
||||||
|
&.dayLabels {
|
||||||
|
.day {
|
||||||
|
padding-left: 1%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
&[sg-view=dayview] {
|
||||||
|
.dayLabels {
|
||||||
|
.day {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// &.monthView {
|
||||||
|
// > div {
|
||||||
|
// margin-right: $scrollbar_width;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
.allDays {
|
// The all-day events appear in the shrinkable toolbar, bellow the days labels
|
||||||
|
.allDaysView {
|
||||||
border-bottom: 1px solid sg-color($sogoPaper, 300);
|
border-bottom: 1px solid sg-color($sogoPaper, 300);
|
||||||
|
max-height: $sg-font-size-4 * 6;
|
||||||
|
|
||||||
|
.sg-event {
|
||||||
|
margin: 2%; // See sgCalendarDayBlock.directive.js
|
||||||
|
line-height: initial;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient, .text {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Days row
|
||||||
.days {
|
.days {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
.day {
|
.day {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-basis: 0;
|
||||||
border-left: 1px solid sg-color($sogoPaper, 300);
|
border-left: 1px solid sg-color($sogoPaper, 300);
|
||||||
.clickableHourCell {
|
.clickableHourCell {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
@ -54,26 +107,18 @@ $hours_margin: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.daysViewFor1Days,
|
// Header of month tiles
|
||||||
.daysViewFor7Days {
|
|
||||||
margin-left: $hours_margin;
|
|
||||||
.day {
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-basis: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-calendar-tile-header {
|
.sg-calendar-tile-header {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: sg-color($sogoPaper, 800);
|
|
||||||
font-size: $sg-font-size-2;
|
font-size: $sg-font-size-2;
|
||||||
font-weight: $sg-font-light;
|
//font-weight: $sg-font-light;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// The left column of hours
|
||||||
.hours {
|
.hours {
|
||||||
color: sg-color($sogoBlue, 700);
|
color: sg-color($sogoBlue, 700);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -97,6 +142,12 @@ $hours_margin: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// A container for a day-long (column) of hour cells
|
||||||
|
.hourCells {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
// The outer event container
|
||||||
.sg-event {
|
.sg-event {
|
||||||
font-size: $sg-font-size-2;
|
font-size: $sg-font-size-2;
|
||||||
&, md-icon {
|
&, md-icon {
|
||||||
|
|
@ -105,41 +156,28 @@ $hours_margin: 50px;
|
||||||
.material-icons {
|
.material-icons {
|
||||||
font-size: $sg-font-size-2;
|
font-size: $sg-font-size-2;
|
||||||
}
|
}
|
||||||
.allDays & {
|
|
||||||
margin: 2%; // See sgCalendarDayBlock.directive.js
|
|
||||||
line-height: initial;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.daysView {
|
// Events from editable calendars are draggable
|
||||||
bottom: 0;
|
.sg-draggable {
|
||||||
overflow-x: hidden;
|
cursor: move;
|
||||||
overflow: auto;
|
}
|
||||||
top: 0;
|
|
||||||
.hourCells {
|
.sg-event {
|
||||||
position: relative;
|
border-radius: 3px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
opacity: 0.9; // When events from a same calendar overlap, it creates a border to help distinguish the events
|
||||||
|
overflow: hidden;
|
||||||
|
$i: 0;
|
||||||
|
@while $i < 96 { // number of 15-minutes blocks in a day
|
||||||
|
&.starts#{$i} { top: 10px * $i; }
|
||||||
|
&.lasts#{$i} { height: 10px * $i; }
|
||||||
|
$i: $i + 1;
|
||||||
}
|
}
|
||||||
.sg-event {
|
.eventInside {
|
||||||
border-radius: 3px;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
opacity: 0.9; // When events from a same calendar overlap, it creates a border to help distinguish the events
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
$i: 0;
|
|
||||||
@while $i < 96 { // number of 15-minutes blocks in a day
|
|
||||||
&.starts#{$i} { top: 10px * $i; }
|
|
||||||
&.lasts#{$i} { height: 10px * $i; }
|
|
||||||
$i: $i + 1;
|
|
||||||
}
|
|
||||||
.eventInside {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.daysHeader {
|
|
||||||
.sg-event {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -149,10 +187,11 @@ $hours_margin: 50px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
.sg-event {
|
.sg-event {
|
||||||
|
position: relative;
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 2px;
|
padding: 2%;
|
||||||
margin-bottom: 1px;
|
margin: 2%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
span { // hours
|
span { // hours
|
||||||
|
|
@ -177,9 +216,6 @@ $hours_margin: 50px;
|
||||||
right: 2px;
|
right: 2px;
|
||||||
bottom: 1px;
|
bottom: 1px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.allDays & {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient > IMG {
|
.gradient > IMG {
|
||||||
|
|
@ -218,9 +254,9 @@ $hours_margin: 50px;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: initial;
|
background-color: initial;
|
||||||
}
|
}
|
||||||
// img {
|
// img {
|
||||||
// margin-right: $mg/4;
|
// margin-right: $mg/4;
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
.md-tile-left {
|
.md-tile-left {
|
||||||
height: initial;
|
height: initial;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue