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)
|
||||
{
|
||||
int max=0, i;
|
||||
NSArray *folders;
|
||||
SOGoAppointmentFolders *co;
|
||||
SOGoAppointmentFolder *folder;
|
||||
|
|
@ -298,23 +297,34 @@
|
|||
- (NSString *) labelForMonth
|
||||
{
|
||||
NSCalendarDate *nextDay;
|
||||
NSString *calendarFormat;
|
||||
BOOL isLastOrFirstDay;
|
||||
|
||||
isLastOrFirstDay = NO;
|
||||
if ([currentTableDay dayOfMonth] == 1)
|
||||
calendarFormat = @"%b";
|
||||
|
||||
if ([currentView isEqualToString:@"dayview"])
|
||||
{
|
||||
isLastOrFirstDay = YES;
|
||||
calendarFormat = @"%B";
|
||||
}
|
||||
else if ([currentTableDay dayOfMonth] > 27)
|
||||
else
|
||||
{
|
||||
nextDay = [currentTableDay dateByAddingYears: 0
|
||||
months: 0
|
||||
days: 1];
|
||||
if ([nextDay dayOfMonth] == 1)
|
||||
isLastOrFirstDay = YES;
|
||||
if ([currentTableDay 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
|
||||
|
|
@ -422,23 +432,23 @@
|
|||
numberOfDays];
|
||||
}
|
||||
|
||||
- (NSString *) daysViewClasses
|
||||
{
|
||||
NSString *daysView;
|
||||
// - (NSString *) daysViewClasses
|
||||
// {
|
||||
// NSString *daysView;
|
||||
|
||||
if ([currentView isEqualToString:@"multicolumndayview"])
|
||||
daysView = @"daysView daysViewForMultipleDays";
|
||||
// if ([currentView isEqualToString:@"multicolumndayview"])
|
||||
// daysView = @"daysView daysViewForMultipleDays";
|
||||
|
||||
else
|
||||
daysView = [NSString stringWithFormat: @"daysView daysViewFor%dDays", numberOfDays];
|
||||
// else
|
||||
// daysView = [NSString stringWithFormat: @"daysView daysViewFor%dDays", numberOfDays];
|
||||
|
||||
return daysView;
|
||||
}
|
||||
// return daysView;
|
||||
//}
|
||||
|
||||
- (NSString *) daysViewHeaderClasses
|
||||
{
|
||||
return [NSString stringWithFormat: @"%@ daysHeader", [self daysViewClasses]];
|
||||
}
|
||||
// - (NSString *) daysViewHeaderClasses
|
||||
// {
|
||||
// return [NSString stringWithFormat: @"%@ daysHeader", [self daysViewClasses]];
|
||||
// }
|
||||
|
||||
- (NSString *) dayClasses
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<?xml version="1.0" standalone="yes"?>
|
||||
<!DOCTYPE container>
|
||||
<container
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
<div var:class="daysViewHeaderClasses">
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
<md-toolbar class="daysView md-hue-1" md-scroll-shrink="true" var:sg-view="currentView">
|
||||
|
||||
<!-- MultiColumnView -->
|
||||
<!-- MultiColumnView -->
|
||||
<!-- Display the name of the calendar -->
|
||||
<var:if condition="isMultiColumnView">
|
||||
<div class="calendarLabels">
|
||||
|
|
@ -39,89 +39,110 @@
|
|||
</div>
|
||||
</var:if>
|
||||
|
||||
<!-- DayView or WeekView -->
|
||||
<!-- DayView or WeekView -->
|
||||
<var:if condition="isNotMultiColumnView">
|
||||
<!-- Display today abreviation and date -->
|
||||
<div class="days dayLabels">
|
||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||
<div var:class="dayClasses">
|
||||
<var:if condition="isWeekView"><div><var:string value="labelForDay"/></div></var:if>
|
||||
<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>
|
||||
<!-- Week view day header -->
|
||||
<var:if condition="isWeekView">
|
||||
<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 condition="currentTableDay.isToday" const:negate="YES">
|
||||
<div class="sg-md-display-2 md-default-theme md-fg md-hue-1"><var:string value="currentTableDay.dayOfMonth"/></div>
|
||||
<!-- 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 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>
|
||||
</var:foreach>
|
||||
</div>
|
||||
</var:if>
|
||||
</div>
|
||||
|
||||
<!-- 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 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">
|
||||
<!-- All day cells -->
|
||||
<div class="allDaysView md-default-theme md-background md-bg">
|
||||
<div class="days">
|
||||
<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: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>
|
||||
</var:foreach>
|
||||
</var:if>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,40 @@
|
|||
<?xml version="1.0" standalone="yes"?>
|
||||
<container
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
<!DOCTYPE container>
|
||||
<container
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
|
||||
<!-- <div class="menu" id="currentViewMenu">
|
||||
<ul>
|
||||
<li><var:string label:value="New Event..."/></li>
|
||||
<li><var:string label:value="New Task..."/></li>
|
||||
<li>!- separator -</li>
|
||||
<li><var:string label:value="Previous Day"/></li>
|
||||
<li><var:string label:value="Next Day"/></li>
|
||||
<li>!- separator -</li>
|
||||
<li><var:string label:value="Delete Event"/></li>
|
||||
<li><var:string label:value="Copy event to my calendar"/></li>
|
||||
<li><var:string label:value="View Raw Source"/></li>
|
||||
</ul>
|
||||
</div>-->
|
||||
<md-content>
|
||||
<div layout="row" layout-align="center">
|
||||
<h5>
|
||||
<md-button
|
||||
class="sg-icon-button"
|
||||
label:aria-label="Previous Day"
|
||||
var:date="prevDayQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
||||
<var:string value="currentDayName" />
|
||||
<md-button
|
||||
class="sg-icon-button"
|
||||
label:aria-label="Next Day"
|
||||
var:date="nextDayQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="calendarContent">
|
||||
<var:component
|
||||
className="UIxCalDayTable"
|
||||
startDate="startDate"
|
||||
const:CSSClass="dayOverview"
|
||||
const:numberOfDays="1"
|
||||
const:currentView="dayview"/>
|
||||
</div>
|
||||
</md-content>
|
||||
</container>
|
||||
<md-toolbar hide-sm="hide-sm">
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Previous Day"
|
||||
var:date="prevDayQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
||||
<div><var:string value="currentDayName" /></div>
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Next Day"
|
||||
var:date="nextDayQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
||||
<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="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>
|
||||
|
||||
<var:component
|
||||
className="UIxCalDayTable"
|
||||
startDate="startDate"
|
||||
const:CSSClass="dayOverview"
|
||||
const:numberOfDays="1"
|
||||
const:currentView="dayview"/>
|
||||
</container>
|
||||
|
|
|
|||
|
|
@ -366,8 +366,10 @@
|
|||
</md-button>
|
||||
</div> -->
|
||||
</md-toolbar>
|
||||
<div layout="row">
|
||||
<md-toolbar class="view-list" ng-show="list.component.$selectedCount() == 0">
|
||||
<div layout="row" class="md-flex">
|
||||
<div class="view-list" layout="column">
|
||||
|
||||
<md-toolbar ng-show="list.component.$selectedCount() == 0">
|
||||
<!-- sort/filter mode (default) -->
|
||||
<div class="md-toolbar-tools" layout="row" ng-hide="list.mode.search">
|
||||
<md-button class="sg-icon-button" label:aria-label="Search"
|
||||
|
|
@ -565,7 +567,7 @@
|
|||
</md-toolbar>
|
||||
|
||||
<!-- 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">
|
||||
<md-button class="sg-icon-button" ng-click="list.unselectComponents()">
|
||||
<md-icon>arrow_back</md-icon>
|
||||
|
|
@ -582,28 +584,7 @@
|
|||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<!-- day/week/month views -->
|
||||
<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-content layout="column" class="view-list">
|
||||
<md-tabs md-dynamic-height="true"
|
||||
md-selected="list.selectedList">
|
||||
<!-- Events list -->
|
||||
|
|
@ -674,8 +655,11 @@
|
|||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</md-content>
|
||||
<div id="detailView" class="view-detail" hide-sm="hide-sm" layout="column" ui-view="calendarView"><!-- calendar view --></div>
|
||||
</md-content>
|
||||
</div>
|
||||
<div id="detailView" class="view-detail" hide-sm="hide-sm" layout="column" ui-view="calendarView">
|
||||
<!-- calendar view -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,71 +1,75 @@
|
|||
<?xml version="1.0" standalone="yes"?>
|
||||
<!DOCTYPE container>
|
||||
<container
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
<container
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
|
||||
<div class="menu" id="currentViewMenu" ng-hide="true">
|
||||
<ul>
|
||||
<li><var:string label:value="New Event..."/></li>
|
||||
<li><var:string label:value="New Task..."/></li>
|
||||
<li><!-- separator --></li>
|
||||
<li><var:string label:value="Previous Month"/></li>
|
||||
<li><var:string label:value="Next Month"/></li>
|
||||
<li><!-- separator --></li>
|
||||
<li><var:string label:value="Delete Event"/></li>
|
||||
<li><var:string label:value="Copy event to my calendar"/></li>
|
||||
<li><var:string label:value="View Raw Source"/></li>
|
||||
</ul>
|
||||
<md-toolbar hide-sm="hide-sm">
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Previous Month"
|
||||
var:date="prevMonthQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
||||
<div><var:string value="monthNameOfThisMonth" /> <var:string value="selectedDate.yearOfCommonEra" /></div>
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Next Month"
|
||||
var:date="nextMonthQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
||||
<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>
|
||||
</md-toolbar>
|
||||
|
||||
<md-content>
|
||||
<div layout="row" layout-align="center">
|
||||
<h5>
|
||||
<md-button
|
||||
class="sg-icon-button"
|
||||
label:aria-label="Previous Month"
|
||||
var:date="prevMonthQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
||||
<var:string value="monthNameOfThisMonth" />
|
||||
<md-button
|
||||
class="sg-icon-button"
|
||||
label:aria-label="Next Month"
|
||||
var:date="nextMonthQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="monthView">
|
||||
<div layout="row" layout-align="center center">
|
||||
<var:foreach list="headerDaysToDisplay" item="currentTableDay">
|
||||
<div class="md-flex-fix dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
|
||||
<md-toolbar md-scroll-shrink="true" class="monthView md-hue-1">
|
||||
<div layout="row" layout-align="center center"
|
||||
class="md-flex md-default-theme md-fg md-hue-2">
|
||||
<var:foreach list="headerDaysToDisplay" item="currentTableDay">
|
||||
<div class="md-flex-fix dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
|
||||
</var:foreach>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-content class="md-flex" md-scroll-y="md-scroll-y">
|
||||
<div class="calendarView monthView">
|
||||
<md-grid-list
|
||||
md-cols="7"
|
||||
md-row-height="1:1">
|
||||
<var:foreach list="weeksToDisplay" item="currentWeek">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
<md-grid-list
|
||||
md-cols="7"
|
||||
md-row-height="1:1">
|
||||
<var:foreach list="weeksToDisplay" item="currentWeek">
|
||||
<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>
|
||||
</var:foreach>
|
||||
</md-grid-list>
|
||||
</div>
|
||||
</md-content>
|
||||
</container>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,40 @@
|
|||
<?xml version="1.0" standalone="yes"?>
|
||||
<container
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
<!DOCTYPE container>
|
||||
<container
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
|
||||
<md-content>
|
||||
<div layout="row" layout-align="center">
|
||||
<h5>
|
||||
<md-button
|
||||
class="sg-icon-button"
|
||||
label:aria-label="Previous Week"
|
||||
var:date="prevWeekQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
||||
<var:string value="currentWeekName" />
|
||||
<md-button
|
||||
class="sg-icon-button"
|
||||
label:aria-label="Next Week"
|
||||
var:date="nextWeekQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="calendarContent">
|
||||
<var:component
|
||||
className="UIxCalDayTable"
|
||||
startDate="startDate"
|
||||
const:CSSClass="weekOverview"
|
||||
const:numberOfDays="7"
|
||||
const:currentView="weekview"/>
|
||||
</div>
|
||||
</md-content>
|
||||
</container>
|
||||
<md-toolbar hide-sm="hide-sm">
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Previous Week"
|
||||
var:date="prevWeekQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
||||
<div><var:string value="currentWeekName" /></div>
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Next Week"
|
||||
var:date="nextWeekQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
||||
<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="Month"
|
||||
href="#/calendar/month"><md-icon>view_module</md-icon></a>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<var:component
|
||||
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 -*-
|
||||
$hours_margin: 50px;
|
||||
$scrollbar_width: 16px;
|
||||
|
||||
/**
|
||||
* Affected templates:
|
||||
* - SchedulerUI/UIxCalDayView.wox
|
||||
* - SchedulerUI/UIxCalWeekView.wox
|
||||
* - SchedulerUI/UIxCalDayTable.wox
|
||||
* - SchedulerUI/UIxCalMonthView.wox
|
||||
*/
|
||||
|
||||
[ui-view=calendars] {
|
||||
|
||||
// Decrease with of middle column (list of events and tasks)
|
||||
$listView-width: grid-step(5) !global;
|
||||
$detailView-width: grid-step(11) !global;
|
||||
|
||||
|
|
@ -21,31 +32,73 @@ $hours_margin: 50px;
|
|||
@include flex-col(md, 10);
|
||||
}
|
||||
@include from(lg) {
|
||||
@include flex-col(lg, 11, 2, 1);
|
||||
@include flex-col(lg, 11, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.sg-draggable {
|
||||
cursor: move;
|
||||
// The calendar view container
|
||||
.calendarView {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dayLabels {
|
||||
//color: sg-color($sogoBlue, 700);
|
||||
overflow: hidden;
|
||||
.day {
|
||||
text-align: center;
|
||||
// The days labels appear in the toolbar
|
||||
md-toolbar {
|
||||
&.daysView {
|
||||
overflow: hidden;
|
||||
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);
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
.day {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
border-left: 1px solid sg-color($sogoPaper, 300);
|
||||
.clickableHourCell {
|
||||
height: 40px;
|
||||
|
|
@ -54,26 +107,18 @@ $hours_margin: 50px;
|
|||
}
|
||||
}
|
||||
|
||||
.daysViewFor1Days,
|
||||
.daysViewFor7Days {
|
||||
margin-left: $hours_margin;
|
||||
.day {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Header of month tiles
|
||||
.sg-calendar-tile-header {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: sg-color($sogoPaper, 800);
|
||||
font-size: $sg-font-size-2;
|
||||
font-weight: $sg-font-light;
|
||||
//font-weight: $sg-font-light;
|
||||
overflow: hidden;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
// The left column of hours
|
||||
.hours {
|
||||
color: sg-color($sogoBlue, 700);
|
||||
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 {
|
||||
font-size: $sg-font-size-2;
|
||||
&, md-icon {
|
||||
|
|
@ -105,41 +156,28 @@ $hours_margin: 50px;
|
|||
.material-icons {
|
||||
font-size: $sg-font-size-2;
|
||||
}
|
||||
.allDays & {
|
||||
margin: 2%; // See sgCalendarDayBlock.directive.js
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.daysView {
|
||||
bottom: 0;
|
||||
overflow-x: hidden;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
.hourCells {
|
||||
position: relative;
|
||||
// Events from editable calendars are draggable
|
||||
.sg-draggable {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.sg-event {
|
||||
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 {
|
||||
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
|
||||
.eventInside {
|
||||
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;
|
||||
}
|
||||
.sg-event {
|
||||
position: relative;
|
||||
border-radius: 1px;
|
||||
overflow: hidden;
|
||||
padding: 2px;
|
||||
margin-bottom: 1px;
|
||||
padding: 2%;
|
||||
margin: 2%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
span { // hours
|
||||
|
|
@ -177,9 +216,6 @@ $hours_margin: 50px;
|
|||
right: 2px;
|
||||
bottom: 1px;
|
||||
overflow: hidden;
|
||||
.allDays & {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.gradient > IMG {
|
||||
|
|
@ -218,9 +254,9 @@ $hours_margin: 50px;
|
|||
&:hover {
|
||||
background-color: initial;
|
||||
}
|
||||
// img {
|
||||
// margin-right: $mg/4;
|
||||
// }
|
||||
// img {
|
||||
// margin-right: $mg/4;
|
||||
// }
|
||||
}
|
||||
.md-tile-left {
|
||||
height: initial;
|
||||
|
|
|
|||
Loading…
Reference in New Issue