Calendar module: initial AngularJS-based templates
parent
22c9b61246
commit
4b47e5de83
|
@ -101,6 +101,9 @@
|
||||||
<span class="minutes45"><!-- space --></span>
|
<span class="minutes45"><!-- space --></span>
|
||||||
</div>
|
</div>
|
||||||
</var:foreach>
|
</var:foreach>
|
||||||
|
<sg-calendar-day-table
|
||||||
|
sg-blocks="calendar.blocks"
|
||||||
|
var:sg-day="currentTableDay.shortDateString" />
|
||||||
</div>
|
</div>
|
||||||
<div class="events"><!-- space --></div>
|
<div class="events"><!-- space --></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
className="UIxPageFrame"
|
className="UIxPageFrame"
|
||||||
const:userDefaultsKeys="SOGoRefreshViewCheck, SOGoCalendarCategoriesColors,SOGoDefaultCalendar"
|
const:userDefaultsKeys="SOGoRefreshViewCheck, SOGoCalendarCategoriesColors,SOGoDefaultCalendar"
|
||||||
const:userSettingsKeys="Calendar,ShowCompletedTasks"
|
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">
|
title="title">
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var firstDayOfWeek = <var:string value="firstDayOfWeek"/>;
|
var firstDayOfWeek = <var:string value="firstDayOfWeek"/>;
|
||||||
|
@ -17,6 +17,7 @@
|
||||||
var currentView = '<var:string value="currentView"/>';
|
var currentView = '<var:string value="currentView"/>';
|
||||||
var localeCode = '<var:string value="localeCode" />';
|
var localeCode = '<var:string value="localeCode" />';
|
||||||
</script>
|
</script>
|
||||||
|
<var:component className="UIxCalendarSelector" />
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
<var:if condition="horizontalDragHandleStyle">
|
<var:if condition="horizontalDragHandleStyle">
|
||||||
DIV#verticalDragHandle, DIV#rightPanel
|
DIV#verticalDragHandle, DIV#rightPanel
|
||||||
|
@ -31,6 +32,8 @@
|
||||||
{ height: <var:string value="eventsListViewStyle" />; }
|
{ height: <var:string value="eventsListViewStyle" />; }
|
||||||
</var:if>
|
</var:if>
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<!--
|
||||||
<div class="preload" style="visibility: hidden;">
|
<div class="preload" style="visibility: hidden;">
|
||||||
<img rsrc:src="event-gradient.png"/>
|
<img rsrc:src="event-gradient.png"/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -56,12 +59,12 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li><var:string label:value="New Event..."/></li>
|
<li><var:string label:value="New Event..."/></li>
|
||||||
<li><var:string label:value="New Task..."/></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="Edit Selected Event..."/></li>
|
||||||
<li><var:string label:value="Delete 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><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="Workweek days only"/></li>
|
||||||
<li><var:string label:value="Tasks in View"/></li>
|
<li><var:string label:value="Tasks in View"/></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -71,10 +74,10 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li><var:string label:value="Open Task..."/></li>
|
<li><var:string label:value="Open Task..."/></li>
|
||||||
<li><var:string label:value="New 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="Mark Completed"/></li>
|
||||||
<li><var:string label:value="Delete Task"/></li>
|
<li><var:string label:value="Delete Task"/></li>
|
||||||
<li><!-- separator --></li>
|
<li>!- separator -</li>
|
||||||
<li><var:string label:value="View Raw Source"/></li>
|
<li><var:string label:value="View Raw Source"/></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -82,28 +85,28 @@
|
||||||
<div class="menu" id="calendarsMenu">
|
<div class="menu" id="calendarsMenu">
|
||||||
<ul>
|
<ul>
|
||||||
<li><var:string label:value="Properties"/></li>
|
<li><var:string label:value="Properties"/></li>
|
||||||
<li><!-- separator --></li>
|
<li>!- separator -</li>
|
||||||
<li><var:string label:value="New Calendar..."/></li>
|
<li><var:string label:value="New Calendar..."/></li>
|
||||||
<li id="deleteCalendarMenuItem"><var:string label:value="Delete 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="Export Calendar..."/></li>
|
||||||
<li><var:string label:value="Import Events..."/></li>
|
<li><var:string label:value="Import Events..."/></li>
|
||||||
<li><var:string label:value="Publish Calendar..."/></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><var:string label:value="Reload Remote Calendars"/></li>
|
||||||
<li><!-- separator --></li>
|
<li>!- separator -</li>
|
||||||
<li><var:string label:value="Sharing..." /></li>
|
<li><var:string label:value="Sharing..." /></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="eventDialog" style="display: none;" class="dialog">
|
<div id="eventDialog" style="display: none;" class="dialog">
|
||||||
<div>
|
<div>
|
||||||
<h1><!-- space --></h1>
|
<h1>!- space -</h1>
|
||||||
<p><span><!-- space --></span></p>
|
<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="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="Location:" /></span> <span>!- space -</span></p>
|
||||||
<p><span class="label"><var:string label:value="Created by:" /></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>
|
<p class="description">!- space -</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -129,97 +132,110 @@
|
||||||
<div id="uploadResults" style="display: none" class="dialog left">
|
<div id="uploadResults" style="display: none" class="dialog left">
|
||||||
<div>
|
<div>
|
||||||
<h3><var:string label:value="Import Events"/></h3>
|
<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">
|
<a href="#" class="button" const:id="uploadOK">
|
||||||
<span><var:string label:value="Done" /></span></a></p>
|
<span><var:string label:value="Done" /></span></a></p>
|
||||||
<hr/>
|
<hr/>
|
||||||
</div>
|
</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>
|
||||||
<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>
|
</var:component>
|
||||||
|
|
|
@ -6,35 +6,21 @@
|
||||||
xmlns:rsrc="OGo:url"
|
xmlns:rsrc="OGo:url"
|
||||||
xmlns:label="OGo:label">
|
xmlns:label="OGo:label">
|
||||||
|
|
||||||
<div class="menu" id="currentViewMenu">
|
<div layout="row" layout-align="center">
|
||||||
<ul>
|
<h5>
|
||||||
<li><var:string label:value="New Event..."/></li>
|
<md-button
|
||||||
<li><var:string label:value="New Task..."/></li>
|
class="iconButton"
|
||||||
<li><!-- separator --></li>
|
label:aria-label="Previous Week"
|
||||||
<li><var:string label:value="Previous Week"/></li>
|
var:date="prevWeekQueryParameters.day"
|
||||||
<li><var:string label:value="Next Week"/></li>
|
ng-click="calendar.changeView($event)"><i class="md-icon-chevron-left"><!--icon--></i></md-button>
|
||||||
<li><!-- separator --></li>
|
<var:string value="currentWeekName" />
|
||||||
<li><var:string label:value="Delete Event"/></li>
|
<md-button
|
||||||
<li><var:string label:value="Copy event to my calendar"/></li>
|
class="iconButton"
|
||||||
<li><var:string label:value="View Raw Source"/></li>
|
label:aria-label="Next Week"
|
||||||
</ul>
|
var:date="nextWeekQueryParameters.day"
|
||||||
|
ng-click="calendar.changeView($event)"><i class="md-icon-chevron-right"><!--icon--></i></md-button>
|
||||||
|
</h5>
|
||||||
</div>
|
</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">
|
<div id="calendarContent">
|
||||||
<var:component
|
<var:component
|
||||||
className="UIxCalDayTable"
|
className="UIxCalDayTable"
|
||||||
|
|
|
@ -6,46 +6,7 @@
|
||||||
xmlns:const="http://www.skyrix.com/od/constant"
|
xmlns:const="http://www.skyrix.com/od/constant"
|
||||||
xmlns:rsrc="OGo:url"
|
xmlns:rsrc="OGo:url"
|
||||||
xmlns:label="OGo:label">
|
xmlns:label="OGo:label">
|
||||||
<style type="text/css">
|
<script type="text/javascript">
|
||||||
<var:foreach list="calendars" item="currentCalendar">
|
var calendarsData = <var:string value="calendars.jsonRepresentation" const:escapeHTML="NO" />;
|
||||||
.calendarFolder<var:string value="currentCalendar.folder" />
|
</script>
|
||||||
{ 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>
|
|
||||||
</container>
|
</container>
|
||||||
|
|
|
@ -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>
|
|
@ -1 +1,7 @@
|
||||||
@import 'extends';
|
@import 'extends';
|
||||||
|
|
||||||
|
// Checkbox for the sidenav folders list
|
||||||
|
// -------------------------------------
|
||||||
|
md-sidenav md-checkbox {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
|
@ -154,11 +154,14 @@ $i: 1;
|
||||||
&.sg-loading {
|
&.sg-loading {
|
||||||
color: sg-color($sogoBlue, 500);
|
color: sg-color($sogoBlue, 500);
|
||||||
}
|
}
|
||||||
.sg-item-name {
|
.sg-item-name, .md-label {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
.md-label {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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%;
|
||||||
|
}
|
|
@ -9,6 +9,7 @@
|
||||||
@import 'MailerUI.scss';
|
@import 'MailerUI.scss';
|
||||||
@import 'ContactsUI.scss';
|
@import 'ContactsUI.scss';
|
||||||
@import 'MessageEditorUI';
|
@import 'MessageEditorUI';
|
||||||
|
@import 'SchedulerUI';
|
||||||
|
|
||||||
.view[layout=row] {
|
.view[layout=row] {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
|
|
Loading…
Reference in New Issue