mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-10-30 06:15:42 +00:00
Multicolumn day view
Restored multicolumn day view from v2. Month view as also been improved.
This commit is contained in:
Francis Lachapelle committed
1 parent
d51bef162a
commit
45bc5a5368
11 files changed
+285
-227
No files matched your search
@@ -8,66 +8,44 @@
|
||||
xmlns:label="OGo:label">
|
||||
<md-toolbar class="daysView md-hue-1" md-scroll-shrink="true" var:sg-view="currentView">
|
||||
|
||||
<!-- MultiColumnView -->
|
||||
<!-- Display the name of the calendar -->
|
||||
<!-- 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"><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>
|
||||
|
||||
<!-- 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">
|
||||
<div class="calendarLabels">
|
||||
<var:foreach list="calendarsToDisplay" item="currentCalendar">
|
||||
<div class="calendarsToDisplay" var:folder="currentCalendar.folder">
|
||||
<var:string value="labelForCalendar"/>
|
||||
</div>
|
||||
</var:foreach>
|
||||
</div>
|
||||
|
||||
<!-- Display today abreviation and date -->
|
||||
<div class="days 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 -->
|
||||
<!-- Calendars names in multicolumn day view -->
|
||||
<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" var:calendar="currentCalendar.folder" 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="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"><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>
|
||||
<!-- 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 class="day multicolumnDay"
|
||||
ng-repeat="view in calendar.views"
|
||||
ng-class="view.calendar.getClassName('bdr')">
|
||||
{{view.calendar.name}}
|
||||
</div>
|
||||
</div>
|
||||
</var:if>
|
||||
|
||||
@@ -75,9 +53,13 @@
|
||||
<div class="allDaysView md-default-theme md-background md-bg">
|
||||
<div class="days">
|
||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||
<div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" hour="allday">
|
||||
<div var:class="dayClasses"
|
||||
var:day="currentTableDay.shortDateString"
|
||||
var:id="currentAllDayId"
|
||||
hour="allday"
|
||||
ng-repeat="view in calendar.views">
|
||||
<sg-calendar-day-table
|
||||
sg-blocks="calendar.allDayBlocks"
|
||||
sg-blocks="view.allDayBlocks"
|
||||
sg-click="list.openEvent(event, component)"
|
||||
var:sg-day="currentTableDay.shortDateString" />
|
||||
</div>
|
||||
@@ -101,46 +83,28 @@
|
||||
<!-- 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>
|
||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||
<div var:class="dayClasses"
|
||||
var:id="currentDayId"
|
||||
var:day-number="currentDayNumber"
|
||||
var:day="currentTableDay.shortDateString"
|
||||
ng-repeat="view in calendar.views">
|
||||
<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>
|
||||
<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>
|
||||
</var:foreach>
|
||||
<sg-calendar-day-table
|
||||
sg-click="list.openEvent(event, component)"
|
||||
sg-blocks="view.blocks"
|
||||
var:sg-day="currentTableDay.shortDateString" />
|
||||
</div>
|
||||
</var:foreach>
|
||||
</var:if>
|
||||
<div class="events"><!-- space --></div>
|
||||
</div>
|
||||
</var:foreach>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,12 +22,19 @@
|
||||
<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"
|
||||
ng-disabled="true"
|
||||
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>
|
||||
<a class="md-icon-button md-button"
|
||||
label:aria-label="Multicolumn Day View"
|
||||
href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
|
||||
@@ -28,6 +28,13 @@
|
||||
<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"
|
||||
ng-disabled="true"
|
||||
href="#/calendar/month"><md-icon>view_module</md-icon></a>
|
||||
<a class="md-icon-button md-button"
|
||||
label:aria-label="Multicolumn Day View"
|
||||
href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
@@ -44,27 +51,31 @@
|
||||
<div class="calendarView monthView">
|
||||
<md-grid-list
|
||||
md-cols="7"
|
||||
md-row-height="1:1">
|
||||
md-row-height="1:1"
|
||||
md-gutter="0">
|
||||
<var:foreach list="weeksToDisplay" item="currentWeek">
|
||||
<var:foreach list="currentWeek" item="currentTableDay">
|
||||
<md-grid-tile
|
||||
md-rowspan="1"
|
||||
md-colspan="1"
|
||||
class="day"
|
||||
var:class="dayCellClasses"
|
||||
var:day="currentTableDay.shortDateString"
|
||||
var:day-number="currentDayNumber"
|
||||
var:id="currentDayId">
|
||||
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>
|
||||
<div class="sg-calendar-tile-header md-default-theme md-bg 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>
|
||||
<md-content>
|
||||
<sg-calendar-month-day
|
||||
sg-blocks="calendar.blocks"
|
||||
sg-blocks="calendar.views[0].blocks"
|
||||
sg-click="list.openEvent(event, component)"
|
||||
var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day>
|
||||
</md-content>
|
||||
</div>
|
||||
</md-grid-tile>
|
||||
</var:foreach>
|
||||
|
||||
@@ -1,56 +1,46 @@
|
||||
<?xml version="1.0" standalone="yes"?>
|
||||
<container
|
||||
<!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>
|
||||
<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="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>
|
||||
<a class="md-icon-button md-button"
|
||||
label:aria-label="Multicolumn Day View"
|
||||
ng-disabled="true"
|
||||
href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
|
||||
</div>
|
||||
<!-- Navigation header -->
|
||||
<span class="daysHeader">
|
||||
<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>
|
||||
</md-toolbar>
|
||||
|
||||
<!-- TODO : Move this inside the schedulerUI.css -->
|
||||
<style type="text/css">
|
||||
DIV.day
|
||||
{
|
||||
width: <var:string value="dayWidthPercentage" />% !important;
|
||||
}
|
||||
<var:foreach list="subscriptionUsers" item="currentTableUser">
|
||||
DIV[class~='day'].appointmentsOf<var:string value="currentTableUser" />
|
||||
{
|
||||
left: <var:string value="currentTableUserDayLeftPercentage" />% !important;
|
||||
}
|
||||
</var:foreach>
|
||||
</style>
|
||||
|
||||
<!-- Display the calendar header and the table view -->
|
||||
<div id="calendarContent">
|
||||
<var:component
|
||||
<var:component
|
||||
className="UIxCalDayTable"
|
||||
startDate="startDate"
|
||||
const:CSSClass="dayOverview"
|
||||
const:numberOfDays="1"
|
||||
const:currentView="multicolumndayview"/>
|
||||
</div>
|
||||
</container>
|
||||
</container>
|
||||
@@ -25,9 +25,16 @@
|
||||
<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"
|
||||
ng-disabled="true"
|
||||
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>
|
||||
<a class="md-icon-button md-button"
|
||||
label:aria-label="Multicolumn Day View"
|
||||
href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
|
||||
Reference in new issue
Block a user