amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-08-20 06:03:20 +00:00
Code Issues Projects Releases Wiki Activity

Improve Calendar views

Browse Source 
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.
This commit is contained in:
Francis Lachapelle
2015-09-23 15:24:24 -04:00
parent eb50f94b2b
commit fcba6f2ddb
7 changed files with 380 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/Templates/SchedulerUI/UIxCalMonthView.wox
+69 -65
View File
@@ -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>