sogo/UI/Templates/SchedulerUI/UIxCalDayTable.wox

136 lines
6.3 KiB
XML

<?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">
<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>
<div layout="column" class="md-flex">
<!-- 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>
</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:id="currentAllDayId"
var:day="currentTableDay.shortDateString"
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">
<div class="calendarView">
<!-- The hours -->
<div class="hours">
<var:foreach list="hoursToDisplay" item="currentTableHour">
<div class="hour" var:id="currentHourId">
<var:string value="currentFormattedHour"/>
</div>
</var:foreach>
</div>
<!-- The quarters grid -->
<div class="daysView">
<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">
<div class="hourCells">
<var:foreach list="hoursToDisplay" item="currentTableHour">
<div var:class="clickableHourCellClass"
sg-draggable-calendar-block="sg-draggable-calendar-block"
var:sg-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="view.blocks"
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>
</div>
<div class="events"><!-- space --></div>
</sg-calendar-day>
</var:foreach>
</div>
</div>
</div>
</md-content>
</container>