mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-10-05 20:10:33 +00:00
The multiColumns view
This commit is contained in:
Alexandre Cloutier
@@ -7,51 +7,105 @@
|
||||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
<div id="calendarHeader" var:class="daysViewClasses">
|
||||
<div class="dayLabels"
|
||||
><var:foreach list="daysToDisplay" item="currentTableDay"
|
||||
><div var:class="dayClasses"
|
||||
><var:string value="labelForDate"/><br
|
||||
/><span class="dayOfWeek"><var:string value="labelForDay"/></span
|
||||
></div
|
||||
></var:foreach>
|
||||
</div>
|
||||
<div class="days"
|
||||
><var:foreach list="daysToDisplay" item="currentTableDay"
|
||||
><div var:class="dayClasses"
|
||||
var:day="currentTableDay.shortDateString"
|
||||
var:id="currentAllDayId"
|
||||
hour="allday"
|
||||
><!-- space --></div
|
||||
></var:foreach
|
||||
></div>
|
||||
|
||||
<!-- MultiColumnView -->
|
||||
<!-- Display the name of the calendar -->
|
||||
<var:if condition="isMultiColumnView">
|
||||
<div class="calendarLabels">
|
||||
<var:foreach list="calendarsToDisplay" item="currentCalendar">
|
||||
<div class="calendarsToDisplay">
|
||||
<var:string value="labelForCalendar"/>
|
||||
</div>
|
||||
</var:foreach>
|
||||
</div>
|
||||
|
||||
<!-- Display today abreviation and date -->
|
||||
<div class="dayLabels">
|
||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||
<div var:class="dayClasses">
|
||||
<var:string value="labelForDate"/><br/>
|
||||
<span class="dayOfWeek"><var:string value="labelForDay"/></span>
|
||||
</div>
|
||||
</var:foreach>
|
||||
</div>
|
||||
|
||||
<!-- All day cells -->
|
||||
<div class="days">
|
||||
<var:foreach list="calendarsToDisplay" item="currentCalendar">
|
||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||
<div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" hour="allday"><!-- space --></div>
|
||||
</var:foreach>
|
||||
</var:foreach>
|
||||
</div>
|
||||
</var:if>
|
||||
|
||||
<!-- DayView or WeekView -->
|
||||
<var:if condition="isNotMultiColumnView">
|
||||
<!-- Display today abreviation and date -->
|
||||
<div class="dayLabels">
|
||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||
<div var:class="dayClasses">
|
||||
<var:string value="labelForDate"/><br/>
|
||||
<span class="dayOfWeek"><var:string value="labelForDay"/></span>
|
||||
</div>
|
||||
</var:foreach>
|
||||
</div>
|
||||
|
||||
<!-- All day cells -->
|
||||
<div class="days">
|
||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||
<div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" hour="allday"><!-- space --></div>
|
||||
</var:foreach>
|
||||
</div>
|
||||
</var:if>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- The hours cells -->
|
||||
<div id="daysView" var:class="daysViewClasses">
|
||||
<div class="hours"
|
||||
><var:foreach list="hoursToDisplay" item="currentTableHour"
|
||||
><div class="hour" var:id="currentHourId"
|
||||
><var:string value="currentTableHour"/></div
|
||||
></var:foreach>
|
||||
</div>
|
||||
|
||||
<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></div>
|
||||
<div class="events"><!-- space --></div>
|
||||
<div class="hours">
|
||||
<var:foreach list="hoursToDisplay" item="currentTableHour">
|
||||
<div class="hour" var:id="currentHourId">
|
||||
<var:string value="currentTableHour"/>
|
||||
</div>
|
||||
</var:foreach>
|
||||
</div>
|
||||
<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: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">
|
||||
<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>
|
||||
</div>
|
||||
<div class="events"><!-- space --></div>
|
||||
</div>
|
||||
</var:foreach>
|
||||
</var:if>
|
||||
</div>
|
||||
</div>
|
||||
</container>
|
||||
|
||||
@@ -40,6 +40,7 @@
|
||||
className="UIxCalDayTable"
|
||||
startDate="startDate"
|
||||
const:CSSClass="dayOverview"
|
||||
const:numberOfDays="1" />
|
||||
const:numberOfDays="1"
|
||||
const:currentView="dayview"/>
|
||||
</div>
|
||||
</container>
|
||||
|
||||
@@ -5,40 +5,33 @@
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
<a href="#"
|
||||
id="leftNavigationArrow"
|
||||
var:date="prevDayQueryParameters.day"
|
||||
onclick="return onCalendarGotoDay(this);"
|
||||
><img rsrc:src="arrow-left.png"/></a>
|
||||
|
||||
<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>
|
||||
<!-- Navigation header -->
|
||||
<span class="daysHeader">
|
||||
<span class="day2"><a href="#"
|
||||
var:date="dayBeforePrevDayQueryParameters.day"
|
||||
onclick="return onCalendarGotoDay(this);"
|
||||
><var:string value="dayBeforeYesterdayName"
|
||||
/></a></span
|
||||
><span class="day1"><a href="#"
|
||||
var:date="prevDayQueryParameters.day"
|
||||
onclick="return onCalendarGotoDay(this);"
|
||||
><var:string value="yesterdayName"
|
||||
/></a></span
|
||||
><span class="day0"><var:string value="currentDayName" /></span
|
||||
><span class="day1"><a href="#"
|
||||
var:date="nextDayQueryParameters.day"
|
||||
onclick="return onCalendarGotoDay(this);"
|
||||
><var:string value="tomorrowName"
|
||||
/></a></span
|
||||
><span class="day2"><a href="#"
|
||||
var:date="dayAfterNextDayQueryParameters.day"
|
||||
onclick="return onCalendarGotoDay(this);"
|
||||
><var:string value="dayAfterTomorrowName"
|
||||
/></a></span
|
||||
></span>
|
||||
<a href="#"
|
||||
id="rightNavigationArrow"
|
||||
var:date="nextDayQueryParameters.day"
|
||||
onclick="return onCalendarGotoDay(this);"
|
||||
><img rsrc:src="arrow-right.png"/></a>
|
||||
<span class="day1">
|
||||
<a href="#" id="leftNavigationArrow" var:date="prevDayQueryParameters.day" onclick="return onCalendarGotoDay(this);">
|
||||
<img rsrc:src="arrow-left.png"/></a></span>
|
||||
<span class="day0"><var:string value="currentDayName" /></span>
|
||||
<span class="day1">
|
||||
<a href="#" id="rightNavigationArrow" var:date="nextDayQueryParameters.day" onclick="return onCalendarGotoDay(this);">
|
||||
<img rsrc:src="arrow-right.png"/></a></span>
|
||||
<a href="#" id="listCollapse"><img var:class="collapseBtnClass" rsrc:src="collapse.png"/></a>
|
||||
</span>
|
||||
|
||||
<!-- TODO : Move this inside the schedulerUI.css -->
|
||||
<style type="text/css">
|
||||
DIV.day
|
||||
{
|
||||
@@ -51,69 +44,13 @@
|
||||
}
|
||||
</var:foreach>
|
||||
</style>
|
||||
|
||||
|
||||
<!-- Display the calendar header and the table view -->
|
||||
<div id="calendarContent">
|
||||
<div id="daysView" class="daysView multicolumnDayView">
|
||||
<div class="hours">
|
||||
<var:foreach list="hoursToDisplay" item="currentTableHour"
|
||||
><div class="hour"><var:string value="currentTableHour" />:00</div
|
||||
></var:foreach>
|
||||
</div>
|
||||
<div class="hourLines">
|
||||
<div class="hourLine hourLine0"><!-- space --></div
|
||||
><div class="hourLine hourLine1"><!-- space --></div
|
||||
><div class="hourLine hourLine2"><!-- space --></div
|
||||
><div class="hourLine hourLine3"><!-- space --></div
|
||||
><div class="hourLine hourLine4"><!-- space --></div
|
||||
><div class="hourLine hourLine5"><!-- space --></div
|
||||
><div class="hourLine hourLine6"><!-- space --></div
|
||||
><div class="hourLine hourLine7"><!-- space --></div
|
||||
><div class="hourLine hourLine8"><!-- space --></div
|
||||
><div class="hourLine hourLine9"><!-- space --></div
|
||||
><div class="hourLine hourLine10"><!-- space --></div
|
||||
><div class="hourLine hourLine11"><!-- space --></div
|
||||
><div class="hourLine hourLine12"><!-- space --></div
|
||||
><div class="hourLine hourLine13"><!-- space --></div
|
||||
><div class="hourLine hourLine14"><!-- space --></div
|
||||
><div class="hourLine hourLine15"><!-- space --></div
|
||||
><div class="hourLine hourLine16"><!-- space --></div
|
||||
><div class="hourLine hourLine17"><!-- space --></div
|
||||
><div class="hourLine hourLine18"><!-- space --></div
|
||||
><div class="hourLine hourLine19"><!-- space --></div
|
||||
><div class="hourLine hourLine20"><!-- space --></div
|
||||
><div class="hourLine hourLine21"><!-- space --></div
|
||||
><div class="hourLine hourLine22"><!-- space --></div
|
||||
><div class="hourLine hourLine23"><!-- space --></div>
|
||||
</div>
|
||||
|
||||
<div class="days" var:day="selectedDate.shortDateString">
|
||||
<var:foreach list="subscriptionUsers" item="currentTableUser"
|
||||
><div var:class="currentUserClasses"
|
||||
var:user="currentTableUser"
|
||||
><div class="header"><var:string value="currentTableUser" /></div>
|
||||
<div class="appointments">
|
||||
<var:foreach list="hoursToDisplay" item="currentTableHour"
|
||||
><div var:class="clickableHourCellClass"
|
||||
var:hour="currentAppointmentHour">
|
||||
</div></var:foreach>
|
||||
<var:foreach list="appointmentsForCurrentUser" item="currentAppointment"
|
||||
><var:component className="UIxCalInlineAptView"
|
||||
dayStartHour="dayStartHour"
|
||||
dayEndHour="dayEndHour"
|
||||
appointment="currentAppointment"
|
||||
formatter="aptFormatter"
|
||||
tooltipFormatter="aptTooltipFormatter"
|
||||
url="appointmentViewURL"
|
||||
const:style="dayoverview"
|
||||
queryDictionary="currentDateQueryParameters"
|
||||
referenceDate="selectedDate"
|
||||
canAccess="canAccessApt"
|
||||
/></var:foreach
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</var:foreach>
|
||||
</div>
|
||||
</div>
|
||||
<var:component
|
||||
className="UIxCalDayTable"
|
||||
startDate="startDate"
|
||||
const:CSSClass="dayOverview"
|
||||
const:currentView="multicolumndayview"/>
|
||||
</div>
|
||||
</container>
|
||||
</container>
|
||||
@@ -40,6 +40,7 @@
|
||||
className="UIxCalDayTable"
|
||||
startDate="startDate"
|
||||
const:CSSClass="weekOverview"
|
||||
const:numberOfDays="7" />
|
||||
const:numberOfDays="7"
|
||||
const:currentView="weekview"/>
|
||||
</div>
|
||||
</container>
|
||||
|
||||
Reference in New Issue
Block a user