LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Calendar module: initial AngularJS-based templates

pull/91/head
Francis Lachapelle 2015-03-30 15:11:20 -04:00
parent 22c9b61246
commit 4b47e5de83
9 changed files with 306 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
UI/Templates/SchedulerUI/UIxCalDayTable.wox
View File

@ -101,6 +101,9 @@
<span class="minutes45"><!-- space --></span>
</div>
</var:foreach>
<sg-calendar-day-table
sg-blocks="calendar.blocks"
var:sg-day="currentTableDay.shortDateString" />
</div>
<div class="events"><!-- space --></div>
</div>

224
UI/Templates/SchedulerUI/UIxCalMainView.wox
View File

@ -9,7 +9,7 @@
className="UIxPageFrame"
const:userDefaultsKeys="SOGoRefreshViewCheck, SOGoCalendarCategoriesColors,SOGoDefaultCalendar"
const:userSettingsKeys="Calendar,ShowCompletedTasks"
const:jsFiles="SchedulerUIDnD.js,jquery-ui.js"
const:jsFiles="Common/resource.js, Common/user-model.js, Common/acl-model.js, Contacts/card-model.js, Contacts/addressbook-model.js, Appointments/component-model.js, Appointments/calendar-model.js"
title="title">
<script type="text/javascript">
var firstDayOfWeek = <var:string value="firstDayOfWeek"/>;
@ -17,6 +17,7 @@
var currentView = '<var:string value="currentView"/>';
var localeCode = '<var:string value="localeCode" />';
</script>
<var:component className="UIxCalendarSelector" />
<style type="text/css">
<var:if condition="horizontalDragHandleStyle">
DIV#verticalDragHandle, DIV#rightPanel
@ -31,6 +32,8 @@
{ height: <var:string value="eventsListViewStyle" />; }
</var:if>
</style>
<!--
<div class="preload" style="visibility: hidden;">
<img rsrc:src="event-gradient.png"/>
</div>
@ -56,12 +59,12 @@
<ul>
<li><var:string label:value="New Event..."/></li>
<li><var:string label:value="New Task..."/></li>
<li><!-- separator --></li>
<li>!- separator -</li>
<li><var:string label:value="Edit Selected Event..."/></li>
<li><var:string label:value="Delete Selected Event"/></li>
<li><!-- separator --></li>
<li>!- separator -</li>
<li><var:string label:value="Select All"/></li>
<li><!-- separator --></li>
<li>!- separator -</li>
<li><var:string label:value="Workweek days only"/></li>
<li><var:string label:value="Tasks in View"/></li>
</ul>
@ -71,10 +74,10 @@
<ul>
<li><var:string label:value="Open Task..."/></li>
<li><var:string label:value="New Task..."/></li>
<li><!-- separator --></li>
<li>!- separator -</li>
<li><var:string label:value="Mark Completed"/></li>
<li><var:string label:value="Delete Task"/></li>
<li><!-- separator --></li>
<li>!- separator -</li>
<li><var:string label:value="View Raw Source"/></li>
</ul>
</div>
@ -82,28 +85,28 @@
<div class="menu" id="calendarsMenu">
<ul>
<li><var:string label:value="Properties"/></li>
<li><!-- separator --></li>
<li>!- separator -</li>
<li><var:string label:value="New Calendar..."/></li>
<li id="deleteCalendarMenuItem"><var:string label:value="Delete Calendar"/></li>
<li><!-- separator --></li>
<li>!- separator -</li>
<li><var:string label:value="Export Calendar..."/></li>
<li><var:string label:value="Import Events..."/></li>
<li><var:string label:value="Publish Calendar..."/></li>
<li><!-- separator --></li>
<li>!- separator -</li>
<li><var:string label:value="Reload Remote Calendars"/></li>
<li><!-- separator --></li>
<li>!- separator -</li>
<li><var:string label:value="Sharing..." /></li>
</ul>
</div>
<div id="eventDialog" style="display: none;" class="dialog">
<div>
<h1><!-- space --></h1>
<p><span><!-- space --></span></p>
<p><span class="label"><var:string label:value="Calendar:" /></span> <span><!-- space --></span></p>
<p><span class="label"><var:string label:value="Location:" /></span> <span><!-- space --></span></p>
<p><span class="label"><var:string label:value="Created by:" /></span> <span><!-- space --></span></p>
<p class="description"><!-- space --></p>
<h1>!- space -</h1>
<p><span>!- space -</span></p>
<p><span class="label"><var:string label:value="Calendar:" /></span> <span>!- space -</span></p>
<p><span class="label"><var:string label:value="Location:" /></span> <span>!- space -</span></p>
<p><span class="label"><var:string label:value="Created by:" /></span> <span>!- space -</span></p>
<p class="description">!- space -</p>
</div>
</div>
@ -129,97 +132,110 @@
<div id="uploadResults" style="display: none" class="dialog left">
<div>
<h3><var:string label:value="Import Events"/></h3>
<p><span id="uploadResultsContent"><!-- empty --></span>
<p><span id="uploadResultsContent">!- empty -</span>
<a href="#" class="button" const:id="uploadOK">
<span><var:string label:value="Done" /></span></a></p>
<hr/>
</div>
</div>
<div id="leftPanel">
<div id="dateSelectorView" class=""
><var:component className="UIxCalDateSelector"
selectedDate="thisMonth"
/></div>
<div id="calendarSelectorView"
><var:component className="UIxCalendarSelector"
var:calendarFolders="calendarFolders" /></div>
</div>
<div id="verticalDragHandle" class="dragHandle"><!-- space --></div>
<div id="rightPanel">
<div class="tabsContainer" id="schedulerTabs" var:style="listStateStyle">
<ul>
<li target="eventsListView" var:class="eventsTabClass"
><span><var:string label:value="Events" /></span></li>
<li target="tasksListView" var:class="tasksTabClass"
><span><var:string label:value="Tasks" /></span></li>
</ul>
<div class="tabs">
<div id="eventsListView" class="tab">
<var:component className="UIxCalFilterPanel" />
<table id="eventsList" cellspacing="0">
<thead>
<tr>
<td id="eventTitleHeader" class="headerCell headerTitle sortableTableHeader"><var:string label:value="Title"/></td>
<td id="eventStartHeader" class="headerCell headerDateTime sortableTableHeader"><var:string label:value="Start"/></td>
<td id="eventEndHeader" class="headerCell headerDateTime sortableTableHeader"><var:string label:value="End"/></td>
<td id="eventLocationHeader" class="headerCell headerLocation sortableTableHeader"><var:string label:value="Location"/></td>
<td id="eventCategoryHeader" class="headerCell headerCategory sortableTableHeader"><var:string label:value="Category"/></td>
<td id="eventCalendarNameHeader" class="headerCell headerCalendarName sortableTableHeader"><var:string label:value="Calendar"/></td>
</tr>
</thead>
<tbody><!-- events list --></tbody>
</table>
</div>
<div id="tasksListView" class="tab">
<div class="filterPanel" search="tasks">
<div class="menu" id="taskSearchMenu">
<ul class="choiceMenu">
<li option="title"><var:string label:value="Title"/></li>
<li option="title_Category_Location"><var:string label:value="Title, category or location"/></li>
<li option="entireContent"><var:string label:value="Entire content"/></li>
</ul>
</div>
<span class="searchBox" style="float: right">
<input name="criteria" type="hidden" />
<input name="search" class="textField"
autocomplete="off" type="text"
menuid="taskSearchMenu" />
</span>
<span>
<var:string label:value="View:" />
<var:popup list="tasksFilters"
const:id="tasksFilterpopup"
item="taskFilter" string="tasksFilterLabel" value="taskFilter"
selection="selectedTasksFilter"
const:name="tasksFilterpopup"
const:onchange="return onTasksListFilterChange();" />
</span>
<span>
<input id="showHideCompletedTasks" type="checkbox" class="checkBox" var:checked="showCompletedTasks"/>
<var:string label:value="Show completed tasks" />
</span>
</div>
<table id="tasksList" cellspacing="0">
<thead>
<tr>
<td id="taskCompletedHeader" class="headerCell"><entity name="nbsp"/></td>
<td id="taskPriorityHeader" class="headerCell headerPriority sortableTableHeader"><var:string label:value="Priority"/></td>
<td id="taskTitleHeader" class="headerCell headerTitle sortableTableHeader"><var:string label:value="Title"/></td>
<td id="taskEndHeader" class="headerCell headerDateTime sortableTableHeader"><var:string label:value="Due Date"/></td>
<td id="taskLocationHeader" class="headerCell headerLocation sortableTableHeader"><var:string label:value="Location"/></td>
<td id="taskCategoryHeader" class="headerCell headerCategory sortableTableHeader"><var:string label:value="Category"/></td>
<td id="taskCalendarNameHeader" class="headerCell headerCalendarName sortableTableHeader"><var:string label:value="Calendar"/></td>
</tr>
</thead>
<tbody><!-- tasks list --></tbody>
</table>
</div>
</div>
</div>
<div id="rightDragHandle" class="dragHandle" var:style="listStateStyle"><!-- space --></div>
<div id="calendarView" var:style="listStateStyle"><!-- space --></div>
</div>
-->
<main class="view md-layout-fill" ui-view="calendars" layout="row" ng-controller="navController"><!-- calendars list --></main>
<script type = "text/ng-template" id="UIxCalMainFrame">
<!-- Sidenav -->
<md-sidenav id="left-sidenav" class="md-sidenav-left" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
<var:component className="UIxSidenavToolbarTemplate" />
<md-content md-scroll-y="md-scroll-y" class="md-flex">
<md-list ng-repeat="calendar in calendars.list">
<md-item>
<md-item-content>
<md-checkbox ng-model="calendar.active"
ng-true-value="1"
ng-false-value="0"
aria-label="Enable"
class="md-button md-flex sg-item-name">{{calendar.name}}</md-checkbox>
</md-item-content>
</md-item>
</md-list>
</md-content>
</md-sidenav>
<!-- Main section -->
<section layout="column" class="sg-app-content md-layout-fill"
ng-controller="CalendarListController as list">
<md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
<div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
<div class="sg-toolbar-group-1" layout="row">
<md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon iconButton" label:aria-label="Toggle Menu">
<span class="md-icon-menu"></span>
</md-button>
<div class="sg-date-group" layout="column" layout-align="space-between end">
<p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
<p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
<p class="sg-year" ng-bind="currentDay.year"><!-- year --></p>
</div>
<p class="sg-md-display-3 sg-date-today" ng-bind="currentDay.day"><!-- day --></p>
</div>
<div class="sg-toolbar-group-2">
<md-button class="iconButton" label:aria-label="Search">
<i class="md-icon-search"><!--icon--></i>
</md-button>
</div>
</div><!-- .md-toolbar-tools -->
<div layout="row" layout-align="space-between center" class="md-toolbar-tools md-toolbar-tools-bottom">
<div class="cols-6" layout="row" layout-align="space-between center" style="padding-right: 16px"
sg-search="list.component.$filter(list.componentType, { value: searchText, search: searchField })">
<md-input-container class="sg-search-field-container">
<label style="color: white"><i class="md-icon-search"><!--icon--></i><var:string label:value="Search"/></label>
<input name="folderSearch" type="search" style="color: white"/>
</md-input-container>
<div class="sg-toolbar-group">
<md-select>
<md-option value="title_Category_Location"><var:string label:value="Title, category or location"/></md-option>
<md-option value="entireContent"><var:string label:value="Entire content"/></md-option>
</md-select>
<span class="md-icon-create"><!-- icon --></span>
</div>
</div>
<div class="spacer cols-8"><!-- spacer -->
<a class="iconButton md-button md-default-theme" label:aria-label="Week" href="#/calendar/weekView"><i class="md-icon-view-week"><!-- week view --></i>
</a>
</div>
</div>
</md-toolbar>
<md-content layout="row">
<md-content id="componentsList"
flex="33"
md-scroll-y="md-scroll-y">
<md-tabs md-selected="list.selectedList">
<md-tab label:label="Events"
md-on-select="list.selectComponentType('events')">
<md-list>
<md-item ng-repeat="event in list.component.$events">
<md-item-content>
<span>{{event.c_title}}</span>
<span class="right">{{event.formatted_startdate}}</span>
</md-item-content>
</md-item>
</md-list>
</md-tab>
<md-tab label:label="Tasks"
md-on-select="list.selectComponentType('tasks')">
<md-list>
<md-item ng-repeat="task in list.component.$tasks">
<md-item-content>
<span>{{task.c_title}}</span>
<span class="right">{{task.formatted_enddate}}</span>
</md-item-content>
</md-item>
</md-list>
</md-tab>
</md-tabs>
</md-content>
<md-content flex="67" ui-view="calendarView"><!-- calendar view --></md-content>
</md-content>
</section>
</script>
</var:component>

42
UI/Templates/SchedulerUI/UIxCalWeekView.wox
View File

@ -6,35 +6,21 @@
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 Week"/></li>
<li><var:string label:value="Next Week"/></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 layout="row" layout-align="center">
<h5>
<md-button
class="iconButton"
label:aria-label="Previous Week"
var:date="prevWeekQueryParameters.day"
ng-click="calendar.changeView($event)"><i class="md-icon-chevron-left"><!--icon--></i></md-button>
<var:string value="currentWeekName" />
<md-button
class="iconButton"
label:aria-label="Next Week"
var:date="nextWeekQueryParameters.day"
ng-click="calendar.changeView($event)"><i class="md-icon-chevron-right"><!--icon--></i></md-button>
</h5>
</div>
<span class="weeksHeader">
<span class="week1">
<a href="#"
id="leftNavigationArrow"
var:date="prevWeekQueryParameters.day"
onclick="return onCalendarGotoDay(this);"><img rsrc:src="arrow-left.png"/></a>
</span>
<span class="week0"><var:string value="currentWeekName" /></span>
<span class="week1">
<a href="#"
id="rightNavigationArrow"
var:date="nextWeekQueryParameters.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>
<div id="calendarContent">
<var:component
className="UIxCalDayTable"

45
UI/Templates/SchedulerUI/UIxCalendarSelector.wox
View File

@ -6,46 +6,7 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label">
<style type="text/css">
<var:foreach list="calendars" item="currentCalendar">
.calendarFolder<var:string value="currentCalendar.folder" />
{ background-color: <var:string value="currentCalendar.color" />; color: <var:string value="contrastingTextColor" />; }
div.colorBox.calendarFolder<var:string value="currentCalendar.folder" />
{ color: <var:string value="currentCalendar.color" />; }
.calendarLabels [folder='<var:string value="currentCalendar.folder" />']
{ border-color: <var:string value="currentCalendar.color" />; }
</var:foreach>
</style>
<div id="calendarSelector">
<h6><var:string label:value="Calendars"/></h6>
<div id="calendarSelectorButtons">
<a href="#" class="smallToolbarButton"
><span><img rsrc:src="add-calendar.png"
label:title="New Calendar..."
/></span></a>
<a href="#" class="smallToolbarButton"
><span><img rsrc:src="add-web-calendar.png"
label:title="Subscribe to a web calendar..."
/></span></a>
<a href="#" class="smallToolbarButton"
><span><img rsrc:src="add-user-calendar.png"
label:title="Subscribe to a Calendar..."
/></span></a>
<a href="#" class="smallToolbarButton"
><span><img rsrc:src="remove-calendar.png"
label:title="Remove the selected Calendar"
/></span></a>
</div>
<ul id="calendarList">
<var:foreach list="calendars" item="currentCalendar"
><li class="denied" var:id="currentCalendar.id" var:owner="currentCalendar.owner" >
<input type="checkbox" class="checkBox" const:disabled="disabled" var:checked="currentCalendar.active" />
<div var:class="currentCalendarClass"><entity name="nbsp"/></div>
<span><var:string value="currentCalendar.displayName"/></span><var:if
condition="currentCalendar.activeTasks"><span class="badge"><var:string value="currentCalendar.activeTasks"/></span
></var:if>
</li>
</var:foreach>
</ul>
</div>
<script type="text/javascript">
var calendarsData = <var:string value="calendars.jsonRepresentation" const:escapeHTML="NO" />;
</script>
</container>

30
UI/Templates/UIxSidenavToolbarTemplate.wox 100644
View File

@ -0,0 +1,30 @@
<?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:label="OGo:label"
>
<md-toolbar class="md-tall" layout-align="start start">
<div class="md-toolbar-tools" layout="row">
<md-button
class="iconButton sg-button-navicon"
label:aria-label="Apps"
ng-click="openBottomSheet()">
<i class="md-icon-apps"><!-- icon --></i>
</md-button>
<span class="sg-logo"><!-- logo.svg --></span>
</div>
<div class="md-toolbar-tools" layout="row">
<div layout="column">
<p class="sg-md-title">{{activeUser.identification}}</p>
<!--fixme: implement this with the proper model and actions -->
<md-select class="sg-logout" ng-model="accounts.options" var:placeholder="shortUserNameForDisplay">
<md-option var:value="relativePreferencesPath"><var:string label:value="Preferences"/></md-option>
<var:if condition="canLogoff"><md-option var:value="logoffPath"><var:string label:value="Disconnect" /></md-option></var:if>
</md-select>
</div>
</div>
</md-toolbar>
</container>

8
UI/WebServerResources/scss/components/checkbox/checkbox.scss
View File

@ -1 +1,7 @@
@import 'extends';
@import 'extends';
// Checkbox for the sidenav folders list
// -------------------------------------
md-sidenav md-checkbox {
margin: 0;
}

5
UI/WebServerResources/scss/components/sidenav/sidenav.scss
View File

@ -154,11 +154,14 @@ $i: 1;
&.sg-loading {
color: sg-color($sogoBlue, 500);
}
.sg-item-name {
.sg-item-name, .md-label {
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.md-label {
display: inline;
}
}
}

124
UI/WebServerResources/scss/views/SchedulerUI.scss 100644
View File

@ -0,0 +1,124 @@
#calendarHeader {
position: relative;
top: 0;
height: 38px;
right: 0px;
.dayLabels {
height: 35px;
left: 0;
margin-left: 50px;
overflow: hidden;
position: relative;
.day {
height: 100%;
position: absolute;
text-align: center;
}
}
}
.monthView, .daysViewFor7Days {
.day {
width: 14.2857%;
}
$i: 0;
@while $i < 7 {
.day#{$i} { left: 1% * 100 / 7 * $i; }
$i: $i + 1;
}
}
#daysView {
position: relative;
top: 0;
bottom: 0;
overflow: auto;
overflow-x: hidden;
.hours {
height: auto;
display: inline-block;
position: relative;
float: left;
top: 0;
left: 0;
width: 50px;
.hour {
border-bottom: 1px solid #ccc;
height: 40px;
left: 0;
padding-right: 2px;
//padding-top: 2px;
position: relative;
right: 0;
top: 0;
}
}
.days {
left: 0;
right: 0;
top: 0;
margin-left: 50px;
position: relative;
.day {
border-left: 1px solid #ccc;
position: absolute;
.clickableHourCell {
height: 40px;
border-bottom: 1px solid #ccc;
}
}
}
.event {
cursor: default;
margin-right: 1px;
position: absolute;
left: 0%;
right: 0%;
$i: 0;
@while $i < 96 {
&.starts#{$i} { top: 10px * $i; }
&.lasts#{$i} { height: 10px * $i; }
$i: $i + 1;
}
.eventInside {
position: absolute;
overflow: hidden;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
-webkit-border-radius: 2px;
border-radius: 2px;
cursor:move;
}
}
}
.minutes15, .minutes30, .minutes45 {
display: block;
height: 25%;
}
.minutes30 {
border-bottom: 1px dotted #ccc;
}
.gradient, .text {
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
overflow: hidden;
}
.gradient > IMG {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
min-height: 15px; /* for 15-minute events */
width: 100%;
}

1
UI/WebServerResources/scss/views/_view.scss
View File

@ -9,6 +9,7 @@
@import 'MailerUI.scss';
@import 'ContactsUI.scss';
@import 'MessageEditorUI';
@import 'SchedulerUI';
.view[layout=row] {
max-height: 100%;