2006-08-19 00:42:53 +02:00
<?xml version="1.0" standalone="yes"?>
2007-06-19 20:00:08 +02:00
<!DOCTYPE var:component>
2015-08-03 17:53:54 +02:00
<var:component
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"
className="UIxPageFrame"
title="title"
2016-07-08 21:44:47 +02:00
const:jsFiles="vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/ng-sortable.min.js, Common.js, Preferences.services.js, Contacts.services.js, Mailer.services.js, vendor/angular-file-upload.min.js, Scheduler.js, Scheduler.services.js, vendor/FileSaver.min.js">
2008-07-18 21:25:26 +02:00
<script type="text/javascript">
var firstDayOfWeek = <var:string value="firstDayOfWeek"/>;
2008-07-25 20:44:31 +02:00
var dayStartHour = <var:string value="dayStartHour"/>;
2009-06-09 23:25:41 +02:00
var currentView = '<var:string value="currentView"/>';
2014-02-04 22:25:52 +01:00
var localeCode = '<var:string value="localeCode" />';
2008-07-18 21:25:26 +02:00
</script>
2015-03-30 21:11:20 +02:00
<var:component className="UIxCalendarSelector" />
2009-09-03 19:53:38 +02:00
2016-03-08 19:20:34 +01:00
<main class="view"
layout="row" layout-fill="layout-fill"
ui-view="calendars"
ng-controller="navController"><!-- calendars list --></main>
2006-08-19 00:42:53 +02:00
2015-11-14 20:29:21 +01:00
<script type="text/ng-template" id="UIxCalMainView">
2015-04-10 18:36:18 +02:00
<!-- calendars colors -->
2015-11-14 20:29:21 +01:00
<sg-folder-stylesheet
2016-11-01 17:09:08 +01:00
ng-repeat="calendar in app.service.$findAll()"
ng-model="calendar"><!-- stylesheet --></sg-folder-stylesheet>
2016-09-28 18:02:49 +02:00
<!-- categories colors -->
2015-11-14 20:29:21 +01:00
<sg-category-stylesheet
2016-11-01 17:09:08 +01:00
ng-repeat="category in app.categories"
ng-model="category"><!-- stylesheet --></sg-category-stylesheet>
2015-03-30 21:11:20 +02:00
<!-- Sidenav -->
2015-11-30 20:13:15 +01:00
<md-sidenav class="md-sidenav-left md-whiteframe-z1" layout="column"
md-component-id="left" md-is-locked-open="isGtMedium"
2016-03-08 19:20:34 +01:00
ng-class="{ 'sg-close': leftIsClose }">
2015-03-30 21:11:20 +02:00
<var:component className="UIxSidenavToolbarTemplate" />
2016-07-08 21:44:47 +02:00
<md-content id="sidenav-content" class="md-flex" md-scroll-y="md-scroll-y"
ng-class="{'sg-list-sortable': app.sortableMode}"
2016-04-21 19:40:47 +02:00
md-colors="::{ backgroundColor: 'default-background-300' }">
2015-04-24 21:08:55 +02:00
<!-- User's calendars -->
2016-04-27 21:48:31 +02:00
<section>
2016-05-17 21:10:09 +02:00
<md-subheader class="sg-md-subheader--with-secondary-icon"
2016-04-21 19:40:47 +02:00
md-colors="::{background: 'default-background-300'}">
2015-04-24 21:08:55 +02:00
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Calendars"/></span>
2015-07-04 03:40:37 +02:00
<md-button class="sg-icon-button"
2015-04-29 17:23:21 +02:00
label:aria-label="New Calendar..."
2015-09-17 16:33:12 +02:00
ng-click="app.newCalendar()">
2015-07-04 03:40:37 +02:00
<md-icon>add_circle_outline</md-icon>
2015-04-24 21:08:55 +02:00
</md-button>
</div>
</md-subheader>
2016-07-08 21:44:47 +02:00
<md-list ng-model="app.service.$calendars"
as-sortable="app.sortableCalendars" is-disabled="!app.sortableMode">
<md-list-item ng-repeat="calendar in app.service.$calendars | filter:app.filter"
as-sortable-item="as-sortable-item">
2015-03-30 21:11:20 +02:00
<md-checkbox ng-model="calendar.active"
2015-04-29 17:23:21 +02:00
ng-class="calendar.getClassName('checkbox')"
2015-03-30 21:11:20 +02:00
ng-true-value="1"
ng-false-value="0"
2015-04-24 21:08:55 +02:00
label:aria-label="Enable"><!-- enable --></md-checkbox>
2016-06-02 19:22:03 +02:00
<p class="sg-item-name"
ng-dblclick="app.editFolder(calendar)"
ng-show="app.editMode != calendar.id">
2015-09-21 15:48:42 +02:00
{{calendar.name}}
2016-06-17 21:41:10 +02:00
<md-tooltip md-delay="2000">{{calendar.name}}</md-tooltip>
2015-09-21 15:48:42 +02:00
<span class="sg-counter-badge" ng-show="calendar.activeTasks">{{calendar.activeTasks}}</span>
</p>
2015-09-17 16:33:12 +02:00
<md-input-container class="md-flex"
ng-show="app.editMode == calendar.id">
<input class="sg-item-name" type="text"
label:aria-label="Name of the Calendar"
ng-model="calendar.name"
ng-blur="app.renameFolder(calendar)"
sg-focus-on="calendarName_{{calendar.id}}"
sg-enter="app.renameFolder(calendar)"
sg-escape="app.revertEditing(calendar)"/>
</md-input-container>
2016-07-08 21:44:47 +02:00
<md-button class="md-secondary md-icon-button" md-no-ink="md-no-ink"
as-sortable-item-handle="as-sortable-item-handle">
<md-icon md-colors="::{color: 'accent-400'}">drag_handle</md-icon>
</md-button>
<md-menu class="md-secondary sg-list-sortable-hide" label:aria-label="Options">
2015-10-02 15:41:57 +02:00
<md-button class="md-icon-button" label:aria-label="Options"
2016-11-01 20:54:56 +01:00
ng-click="$mdMenu.open()"
2015-10-02 15:41:57 +02:00
md-menu-origin="md-menu-origin">
<md-icon>more_vert</md-icon>
</md-button>
2015-06-12 19:34:08 +02:00
<md-menu-content width="2">
<md-menu-item>
2016-03-08 19:54:09 +01:00
<md-button ng-click="app.showOnly(calendar)">
<var:string label:value="Show Only This Calendar"/>
2015-06-12 19:34:08 +02:00
</md-button>
</md-menu-item>
<md-menu-item>
2016-03-08 19:54:09 +01:00
<md-button ng-click="app.showAll()">
<var:string label:value="Show All Calendars"/>
2015-11-11 17:18:49 +01:00
</md-button>
</md-menu-item>
2016-03-08 19:54:09 +01:00
<md-menu-divider><!-- divider --></md-menu-divider>
2015-11-11 17:18:49 +01:00
<md-menu-item>
2016-03-08 19:54:09 +01:00
<md-button ng-click="app.showProperties(calendar)">
<var:string label:value="Properties"/>
2015-06-12 19:34:08 +02:00
</md-button>
</md-menu-item>
2016-02-10 19:47:17 +01:00
<md-menu-item>
2016-03-08 19:54:09 +01:00
<md-button type="button" ng-click="app.editFolder(calendar)">
<var:string label:value="Rename"/>
2016-02-10 19:47:17 +01:00
</md-button>
</md-menu-item>
2016-03-08 19:54:09 +01:00
<md-menu-item ng-show="calendar.id != 'personal'">
<md-button ng-click="app.confirmDelete(calendar)">
<var:string label:value="Delete"/>
2016-02-10 19:47:17 +01:00
</md-button>
</md-menu-item>
<md-menu-divider><!-- divider --></md-menu-divider>
2015-06-12 19:34:08 +02:00
<md-menu-item>
2015-09-17 16:33:12 +02:00
<md-button ng-click="app.showLinks(calendar)">
2015-06-12 19:34:08 +02:00
<var:string label:value="Links to this Calendar"/>
</md-button>
</md-menu-item>
2016-03-08 19:54:09 +01:00
<md-menu-divider><!-- divider --></md-menu-divider>
2015-06-12 19:34:08 +02:00
<md-menu-item>
2016-03-08 19:54:09 +01:00
<md-button ng-click="app.importCalendar($event, calendar)">
<var:string label:value="Import"/>
</md-button>
</md-menu-item>
<md-menu-item>
2016-05-04 20:52:06 +02:00
<md-button ng-click="calendar.export()">
2016-03-08 19:54:09 +01:00
<var:string label:value="Export"/>
2015-06-12 19:34:08 +02:00
</md-button>
</md-menu-item>
2015-06-15 15:53:10 +02:00
<md-menu-divider><!-- divider --></md-menu-divider>
<md-menu-item>
2016-03-08 19:54:09 +01:00
<md-button ng-click="app.share(calendar)">
<var:string label:value="Sharing..."/>
2015-06-15 15:53:10 +02:00
</md-button>
</md-menu-item>
2015-06-12 19:34:08 +02:00
</md-menu-content>
</md-menu>
2015-04-24 21:08:55 +02:00
</md-list-item>
</md-list>
</section>
<!-- Subscriptions -->
2016-04-27 21:48:31 +02:00
<section>
2016-05-17 21:10:09 +02:00
<md-subheader class="sg-md-subheader--with-secondary-icon"
2016-04-21 19:40:47 +02:00
md-colors="::{background: 'default-background-300'}">
2015-04-24 21:08:55 +02:00
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Subscriptions"/></span>
2015-07-04 03:40:37 +02:00
<md-button class="sg-icon-button"
2015-04-29 17:23:21 +02:00
label:aria-label="Subscribe to a Calendar..."
sg-subscribe="calendar"
2015-09-17 16:33:12 +02:00
sg-subscribe-on-select="app.subscribeToFolder(folderData)">
2015-07-04 03:40:37 +02:00
<md-icon>add_circle_outline</md-icon>
2015-04-24 21:08:55 +02:00
</md-button>
</div>
</md-subheader>
2016-07-08 21:44:47 +02:00
<md-list ng-model="app.service.$subscriptions"
as-sortable="app.sortableCalendars" is-disabled="!app.sortableMode">
<md-list-item ng-repeat="calendar in app.service.$subscriptions | filter:app.filter"
as-sortable-item="as-sortable-item">
2015-04-29 17:23:21 +02:00
<md-checkbox ng-model="calendar.active"
ng-class="calendar.getClassName('checkbox')"
ng-true-value="1"
ng-false-value="0"
2016-06-17 21:41:10 +02:00
label:aria-label="Enable"><!-- enable -->
</md-checkbox>
2016-06-02 19:22:03 +02:00
<p class="sg-item-name"
ng-dblclick="app.editFolder(calendar)"
ng-show="app.editMode != calendar.id">
2015-10-02 15:41:57 +02:00
{{calendar.name}}
2016-06-17 21:41:10 +02:00
<md-tooltip md-delay="2000">{{calendar.name}}</md-tooltip>
2015-10-02 15:41:57 +02:00
<span class="sg-counter-badge" ng-show="calendar.activeTasks">{{calendar.activeTasks}}</span>
</p>
2015-09-17 16:33:12 +02:00
<md-input-container class="md-flex"
ng-show="app.editMode == calendar.id">
<input class="sg-item-name" type="text"
label:aria-label="Name of the Calendar"
ng-model="calendar.name"
ng-blur="app.renameFolder(calendar)"
sg-focus-on="calendarName_{{calendar.id}}"
sg-enter="app.renameFolder(calendar)"
sg-escape="app.revertEditing(calendar)"/>
</md-input-container>
2016-07-08 21:44:47 +02:00
<md-button class="md-secondary md-icon-button" md-no-ink="md-no-ink"
as-sortable-item-handle="as-sortable-item-handle">
<md-icon md-colors="::{color: 'accent-400'}">drag_handle</md-icon>
</md-button>
<md-menu class="md-secondary sg-list-sortable-hide" label:aria-label="Options">
2015-10-02 15:41:57 +02:00
<md-button class="md-icon-button" label:aria-label="Options"
2016-11-01 20:54:56 +01:00
ng-click="$mdMenu.open()"
2016-11-01 17:09:08 +01:00
md-menu-origin="md-menu-origin">
2015-10-02 15:41:57 +02:00
<md-icon>more_vert</md-icon>
</md-button>
2015-06-15 15:53:10 +02:00
<md-menu-content width="2">
2016-11-01 17:09:08 +01:00
<md-menu-item>
<md-button ng-click="app.showOnly(calendar)">
<var:string label:value="Show Only This Calendar"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="app.showAll()">
<var:string label:value="Show All Calendars"/>
</md-button>
</md-menu-item>
<md-menu-divider><!-- divider --></md-menu-divider>
2016-03-08 19:54:09 +01:00
<md-menu-item>
<md-button ng-click="app.showProperties(calendar)">
<var:string label:value="Properties"/>
</md-button>
</md-menu-item>
2015-06-15 15:53:10 +02:00
<md-menu-item>
2015-09-17 16:33:12 +02:00
<md-button type="button" ng-click="app.editFolder(calendar)">
<var:string label:value="Rename"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="app.confirmDelete(calendar)">
2015-06-15 15:53:10 +02:00
<var:string label:value="Unsubscribe Calendar"/>
</md-button>
</md-menu-item>
2016-05-13 21:50:24 +02:00
<md-menu-item>
<md-button ng-click="app.exportCalendar(calendar)">
<var:string label:value="Export"/>
</md-button>
</md-menu-item>
2015-06-15 15:53:10 +02:00
<md-menu-divider><!-- divider --></md-menu-divider>
<md-menu-item>
2015-09-17 16:33:12 +02:00
<md-button ng-click="app.showLinks(calendar)">
2015-06-15 15:53:10 +02:00
<var:string label:value="Links to this Calendar"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
2015-04-29 17:23:21 +02:00
</md-list-item>
</md-list>
</section>
<!-- Web Calendars -->
2016-04-27 21:48:31 +02:00
<section>
2016-05-17 21:10:09 +02:00
<md-subheader class="sg-md-subheader--with-secondary-icon"
2016-04-21 19:40:47 +02:00
md-colors="::{background: 'default-background-300'}">
2015-04-29 17:23:21 +02:00
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Web Calendars"/></span>
2015-07-04 03:40:37 +02:00
<md-button class="sg-icon-button"
2015-04-29 17:23:21 +02:00
label:aria-label="Subscribe to a web calendar..."
2015-09-17 16:33:12 +02:00
ng-click="app.addWebCalendar()">
2015-07-04 03:40:37 +02:00
<md-icon>add_circle_outline</md-icon>
2015-04-29 17:23:21 +02:00
</md-button>
</div>
</md-subheader>
2016-07-08 21:44:47 +02:00
<md-list ng-model="app.service.$webcalendars"
as-sortable="app.sortableCalendars" is-disabled="!app.sortableMode">
<md-list-item ng-repeat="calendar in app.service.$webcalendars | filter:app.filter"
as-sortable-item="as-sortable-item">
2015-04-24 21:08:55 +02:00
<md-checkbox ng-model="calendar.active"
2015-05-01 15:51:30 +02:00
ng-class="calendar.getClassName('checkbox')"
2015-04-24 21:08:55 +02:00
ng-true-value="1"
ng-false-value="0"
label:aria-label="Enable"><!-- enable --></md-checkbox>
2016-06-02 19:22:03 +02:00
<p class="sg-item-name"
ng-dblclick="app.editFolder(calendar)"
ng-show="app.editMode != calendar.id">
2016-05-13 21:50:24 +02:00
<span class="ng-hide" ng-show="calendar.$error">
<md-icon class="md-warn">warning</md-icon>
<md-tooltip>{{ calendar.$error }}</md-tooltip>
</span>
2016-06-17 21:41:10 +02:00
<md-tooltip md-delay="2000">{{calendar.name}}</md-tooltip>
2016-05-13 21:50:24 +02:00
{{calendar.name}}
</p>
2015-09-17 16:33:12 +02:00
<md-input-container class="md-flex"
ng-show="app.editMode == calendar.id">
<input class="sg-item-name" type="text"
label:aria-label="Name of the Calendar"
ng-model="calendar.name"
ng-blur="app.renameFolder(calendar)"
sg-focus-on="calendarName_{{calendar.id}}"
sg-enter="app.renameFolder(calendar)"
sg-escape="app.revertEditing(calendar)"/>
</md-input-container>
2016-07-08 21:44:47 +02:00
<md-button class="md-secondary md-icon-button" md-no-ink="md-no-ink"
as-sortable-item-handle="as-sortable-item-handle">
<md-icon md-colors="::{color: 'accent-400'}">drag_handle</md-icon>
</md-button>
<md-menu class="md-secondary sg-list-sortable-hide" label:aria-label="Options">
2015-10-02 15:41:57 +02:00
<md-button class="md-icon-button" label:aria-label="Options"
2016-11-01 20:54:56 +01:00
ng-click="$mdMenu.open()"
2015-10-02 15:41:57 +02:00
md-menu-origin="md-menu-origin">
<md-icon>more_vert</md-icon>
</md-button>
2015-06-15 15:53:10 +02:00
<md-menu-content width="2">
2016-03-08 19:54:09 +01:00
<md-menu-item>
<md-button ng-click="app.showProperties(calendar)">
<var:string label:value="Properties"/>
</md-button>
</md-menu-item>
2015-06-15 15:53:10 +02:00
<md-menu-item>
2015-09-17 16:33:12 +02:00
<md-button type="button" ng-click="app.editFolder(calendar)">
<var:string label:value="Rename"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="app.confirmDelete(calendar)">
2015-06-15 15:53:10 +02:00
<var:string label:value="Delete"/>
</md-button>
</md-menu-item>
<md-menu-divider><!-- divider --></md-menu-divider>
<md-menu-item>
2015-09-17 16:33:12 +02:00
<md-button ng-click="app.showLinks(calendar)">
2015-06-15 15:53:10 +02:00
<var:string label:value="Links to this Calendar"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
2015-04-24 21:08:55 +02:00
</md-list-item>
</md-list>
</section>
2015-03-30 21:11:20 +02:00
</md-content>
2016-05-18 22:43:00 +02:00
<md-toolbar class="sg-toolbar-multiple sg-toolbar-tools--dense">
2016-04-27 21:48:31 +02:00
<div class="md-toolbar-tools sg-toolbar-tools--dense"
md-colors="::{backgroundColor: 'background-500'}"
2016-07-08 21:44:47 +02:00
ng-hide="app.sortableMode">
2016-04-27 21:48:31 +02:00
<md-input-container class="md-flex" md-no-float="md-no-float">
<md-icon>search</md-icon>
<input ng-model="app.filter.name" type="search" label:placeholder="Filter"/>
</md-input-container>
<md-button class="md-icon-button"
ng-click="app.toggleSortableMode()">
<md-icon>reorder</md-icon>
</md-button>
</div>
<div class="md-toolbar-tools sg-toolbar-tools--dense ng-hide" layout-align="center center"
md-colors="::{backgroundColor: 'accent-600'}"
2016-07-08 21:44:47 +02:00
ng-show="app.sortableMode">
2016-04-27 21:48:31 +02:00
<md-button ng-click="app.resetSort()"><var:string label:value="Reset"/></md-button>
<div class="md-flex"><!-- spacer --></div>
<md-button ng-click="app.toggleSortableMode()"><var:string label:value="Done"/></md-button>
</div>
</md-toolbar>
2015-03-30 21:11:20 +02:00
</md-sidenav>
2006-08-19 00:42:53 +02:00
2015-03-30 21:11:20 +02:00
<!-- Main section -->
2016-03-08 19:20:34 +01:00
<section layout="column" layout-fill="layout-fill"
2015-03-30 21:11:20 +02:00
ng-controller="CalendarListController as list">
2016-03-08 19:20:34 +01:00
<md-toolbar class="toolbar-main" flex-none="flex-none" layout="row" layout-align="space-between center">
2016-03-30 03:59:21 +02:00
<var:component className="UIxTopnavToolbar"/>
2015-09-09 21:18:00 +02:00
<!-- <div class="sg-toolbar-group-2">
<md-button class="sg-icon-button" label:aria-label="Search">
<md-icon>search</md-icon>
</md-button>
</div> -->
</md-toolbar>
2015-09-23 21:19:39 +02:00
<div layout="row" class="md-flex">
2016-11-01 17:09:08 +01:00
<div class="view-list" layout="column">
<md-toolbar class="md-accent md-hue-1" flex-none="flex-none"
ng-hide="list.mode.multiple">
<!-- sort/filter mode (default) -->
<div class="md-toolbar-tools" layout="row" ng-hide="list.mode.search">
<md-button class="sg-icon-button" label:aria-label="Search"
ng-click="list.searchMode()">
<md-icon>search</md-icon>
</md-button>
<div class="md-flex"><!-- spacer --></div>
<md-menu>
<md-button class="sg-icon-button" label:aria-label="Filter"
2016-11-01 20:54:56 +01:00
ng-click="$mdMenu.open()">
2016-11-01 17:09:08 +01:00
<md-icon>filter_list</md-icon>
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button ng-click="list.filter('view_all')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_all') }">
<!-- selected --></md-icon> <var:string label:value="view_all"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_today')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_today') }">
<!-- selected --></md-icon> <var:string label:value="view_today"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_next7')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_next7') }">
<!-- selected --></md-icon> <var:string label:value="view_next7"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_next14')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_next14') }">
<!-- selected --></md-icon> <var:string label:value="view_next14"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_next31')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_next31') }">
<!-- selected --></md-icon><var:string label:value="view_next31"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_thismonth')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_thismonth') }">
<!-- selected --></md-icon><var:string label:value="view_thismonth"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'events'">
<md-button ng-click="list.filter('view_future')">
<md-icon ng-class="{ 'icon-check': list.component.$queryEvents.filterpopup == 'view_future' }">
<!-- selected --></md-icon> <var:string label:value="view_future"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'events'">
<md-button ng-click="list.filter('view_selectedday')">
<md-icon ng-class="{ 'icon-check': list.component.$queryEvents.filterpopup == 'view_selectedday' }">
<!-- selected --></md-icon> <var:string label:value="view_selectedday"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.filter('view_not_started')">
<md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_not_started' }">
<!-- selected --></md-icon> <var:string label:value="view_not_started"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.filter('view_overdue')">
<md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_overdue' }">
<!-- selected --></md-icon> <var:string label:value="view_overdue"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.filter('view_incomplete')">
<md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_incomplete' }">
<!-- selected --></md-icon> <var:string label:value="view_incomplete"/>
</md-button>
</md-menu-item>
<md-menu-divider ng-if="list.componentType == 'tasks'"><!-- divider --></md-menu-divider>
<md-menu-item ng-if="list.componentType == 'tasks'">
<sg-checkmark
ng-change="list.component.$filter(list.componentType)"
ng-model="list.component.$queryTasks.show_completed"
sg-true-value="1"
sg-false-value="0"> <var:string label:value="Show completed tasks"/></sg-checkmark>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu>
<md-button class="sg-icon-button" label:aria-label="Sort"
2016-11-01 20:54:56 +01:00
ng-click="$mdMenu.open()">
2016-11-01 17:09:08 +01:00
<md-icon>sort</md-icon>
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button ng-click="list.sort('title')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('title') }">
<!-- selected --></md-icon> <var:string label:value="Title"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.sort('location')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('location') }">
<!-- selected --></md-icon> <var:string label:value="Location"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.sort('calendarName')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('calendarName') }">
<!-- selected --></md-icon> <var:string label:value="Calendar"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'events'">
<md-button ng-click="list.sort('start')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('start') }">
<!-- selected --></md-icon> <var:string label:value="Start"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'events'">
<md-button ng-click="list.sort('end')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('end') }">
<!-- selected --></md-icon> <var:string label:value="End"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.sort('end')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('end') }">
<!-- selected --></md-icon> <var:string label:value="Due Date"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.sort('priority')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('priority') }">
<!-- selected --></md-icon> <var:string label:value="Priority"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.sort('category')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('category') }">
<!-- selected --></md-icon> <var:string label:value="Category"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.sort('status')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('status') }">
<!-- selected --></md-icon> <var:string label:value="Status"/>
</md-button>
</md-menu-item>
<md-menu-divider><!-- divider --></md-menu-divider>
<md-menu-item ng-if="list.componentType == 'events'">
<sg-checkmark
class="sg-no-wrap"
ng-change="list.component.$filter(list.componentType)"
ng-model="list.component.$queryEvents.asc"
sg-true-value="0"
sg-false-value="1"><var:string label:value="Descending Order"/></sg-checkmark>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<sg-checkmark
class="sg-no-wrap"
ng-change="list.component.$filter(list.componentType)"
ng-model="list.component.$queryTasks.asc"
sg-true-value="0"
sg-false-value="1"><var:string label:value="Descending Order"/></sg-checkmark>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-button class="sg-icon-button" ng-click="list.reload()">
<md-icon>refresh</md-icon>
2015-07-08 20:46:07 +02:00
</md-button>
2016-11-01 17:09:08 +01:00
</div>
<!-- search mode -->
<form class="md-toolbar-tools sg-toolbar-secondary"
name="searchForm"
layout="row"
ng-show="list.mode.search"
sg-search="list.component.$filter(list.componentType, { value: searchText, search: searchField })"
sg-allow-dot="false">
<md-button class="md-icon-button"
sg-search-cancel="list.cancelSearch()"
label:aria-label="Back">
<md-icon>arrow_back</md-icon>
2015-08-14 22:31:29 +02:00
</md-button>
2016-11-01 17:09:08 +01:00
<md-input-container class="md-flex" md-no-float="md-no-float">
<input name="folderSearch" type="search" var:minlength="minimumSearchLength" label:placeholder="Search"
sg-focus-on="search"/>
<div ng-messages="searchForm.folderSearch.$error" ng-show="searchForm.folderSearch.$dirty">
<div ng-message="minlength"><var:string value="minimumSearchLengthLabel"/></div>
</div>
</md-input-container>
<md-input-container flex="25">
<md-select label:aria-label="Search scope">
<md-option value="title_Category_Location" selected="selected"><var:string label:value="Title, category or location"/></md-option>
<md-option value="entireContent"><var:string label:value="Entire content"/></md-option>
</md-select>
</md-input-container>
</form>
</md-toolbar>
2015-09-09 21:18:00 +02:00
2016-11-01 17:09:08 +01:00
<!-- multiple-selection mode -->
<md-toolbar class="md-whiteframe-z1 md-hue-1 sg-toolbar-secondary"
ng-show="list.mode.multiple">
<div class="md-toolbar-tools">
<md-button class="sg-icon-button" ng-click="list.unselectComponents()">
<md-icon>arrow_back</md-icon>
</md-button>
<label>{{list.component.$selectedCount()}} <var:string label:value="selected"/></label>
<div class="md-flex"><!-- spacer --></div>
<md-button class="sg-icon-button" ng-click="list.selectAll()">
<md-tooltip md-direction="left"><var:string label:value="Select All"/></md-tooltip>
<md-icon>select_all</md-icon>
</md-button>
<md-button class="sg-icon-button" ng-click="list.confirmDeleteSelectedComponents()">
<md-icon>delete</md-icon>
</md-button>
</div>
</md-toolbar>
2015-09-09 22:35:09 +02:00
2016-11-01 17:09:08 +01:00
<md-divider><!-- divider --></md-divider>
2015-12-04 21:00:58 +01:00
2016-11-01 17:09:08 +01:00
<md-content layout="column" class="view-list">
<md-tabs md-dynamic-height="true"
md-selected="list.selectedList">
<!-- Events list -->
<md-tab label:label="Events"
md-on-select="list.selectComponentType('events')">
<md-subheader>
<span>{{list.filterpopup() | loc}}</span>
</md-subheader>
<md-list class="sg-section-list"
ng-class="{ 'sg-list-selectable': list.mode.multiple }">
<md-list-item ng-repeat="event in list.component.$events"
aria-label="{{::event.c_title}}"
ng-click="list.openEvent($event, event)">
<div class="md-secondary sg-avatar-selectable"
label:aria-label="Toggle item"
ng-class="[event.getClassName('fg'), { 'sg-avatar-selected' : event.selected }]"
ng-click="list.toggleComponentSelection($event, event)">
<div class="sg-color-chip"
ng-class="::event.getClassName('bg')"><!-- calendar color --></div>
</div>
<div class="sg-category"
ng-repeat="category in ::event.categories | limitTo:5"
ng-class="::'bg-category' + category"
ng-style="::{ left: ($index * 3) + 'px' }"><!-- calendar color --></div>
<div class="sg-tile-content">
<div class="sg-md-subhead">
<div>
<span ng-show="::event.c_priority" class="sg-priority">{{::event.c_priority}}</span>
{{::event.c_title}}
</div>
2016-04-21 23:02:07 +02:00
</div>
2016-11-01 17:09:08 +01:00
<div class="sg-md-body">
<div>{{::event.c_location}}</div>
<div class="sg-tile-date" ng-bind="::event.formatted_startdate"><!-- start --></div>
</div>
</div>
<div class="sg-tile-icons">
<md-icon ng-show="::event.c_iscycle">repeat</md-icon>
<md-icon ng-show="::event.c_nextalarm">alarm</md-icon>
2015-09-25 22:07:56 +02:00
</div>
2016-11-01 17:09:08 +01:00
<md-divider><!-- divider --></md-divider>
</md-list-item>
<md-list-item disabled="disabled" ng-if="list.component.$events.length == 0">
<p class="sg-md-caption"><var:string label:value="No events for selected criteria"/></p>
</md-list-item>
</md-list>
</md-tab>
<!-- Tasks list -->
<md-tab label:label="Tasks"
md-on-select="list.selectComponentType('tasks')">
<md-subheader>
<span>{{list.filterpopup() | loc}}</span>
</md-subheader>
<md-list class="sg-section-list"
ng-class="{ 'sg-list-selectable': list.mode.multiple }">
<md-list-item ng-repeat="task in list.component.$tasks"
aria-label="{{::task.c_title}}"
ng-click="list.openTask($event, task)">
<div class="md-secondary sg-avatar-selectable"
label:aria-label="Toggle item"
ng-class="[task.getClassName('fg'), { 'sg-avatar-selected' : task.selected }]"
ng-click="list.toggleComponentSelection($event, task)">
<div class="sg-color-chip"
ng-class="::task.getClassName('bg')"><!-- calendar color --></div>
2015-09-25 22:07:56 +02:00
</div>
2016-11-01 17:09:08 +01:00
<div class="sg-category"
ng-repeat="category in ::task.categories | limitTo:5"
ng-class="::'bg-category' + category"
ng-style="::{ left: ($index * 3) + 'px' }"><!-- calendar color --></div>
<div class="sg-tile-content">
<div class="sg-md-subhead">
<div>
<span ng-show="::task.c_priority" class="sg-priority">{{::task.c_priority}}</span>
{{::task.c_title}}
</div>
</div>
<div class="sg-md-body">
<div><!-- spacer --></div>
<div>{{::task.formatted_enddate}}</div>
2016-04-21 23:02:07 +02:00
</div>
2015-09-25 22:07:56 +02:00
</div>
2016-11-01 17:09:08 +01:00
<div class="sg-tile-icons">
<md-icon ng-show="::task.c_iscycle">repeat</md-icon>
2016-11-01 19:52:18 +01:00
<md-icon ng-show="::task.c_nextalarm">alarm</md-icon>
2015-09-25 22:07:56 +02:00
</div>
2016-11-01 17:09:08 +01:00
<md-divider><!-- divider --></md-divider>
</md-list-item>
<md-list-item disabled="disabled" ng-if="list.component.$tasks.length == 0">
<p class="sg-md-caption"><var:string label:value="No tasks for selected criteria"/></p>
</md-list-item>
</md-list>
</md-tab>
</md-tabs>
</md-content>
<div class="sg-progress-circular-floating"
ng-show="list.component.$isLoading()">
<md-progress-circular class="md-accent"
md-mode="indeterminate"
md-diameter="32"><!-- mailbox loading progress --></md-progress-circular>
</div>
<md-fab-speed-dial
class="md-scale md-fab-bottom-right"
ng-cloak="ng-cloak"
md-direction="up">
2016-06-10 22:50:21 +02:00
<md-fab-trigger>
<md-button class="md-fab md-accent" label:aria-label="New Event">
<md-icon>add</md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button var:aria-label="Create a new event" class="md-fab md-raised md-mini"
ng-click="list.newComponent($event, 'appointment')">
<md-tooltip md-direction="left"><var:string label:value="Create a new event"/></md-tooltip>
<md-icon>event</md-icon>
</md-button>
<md-button var:aria-label="Create a new task" class="md-fab md-raised md-mini"
ng-click="list.newComponent($event, 'task')">
<md-tooltip md-direction="left"><var:string label:value="Create a new task"/></md-tooltip>
<md-icon>assignment_turned_in</md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
2015-09-23 21:19:39 +02:00
</div>
2016-07-21 20:34:46 +02:00
<div id="detailView" class="view-detail hide show-gt-xs md-default-theme md-background md-bg md-hue-2"
2016-03-08 19:20:34 +01:00
layout="column" ui-view="calendarView">
2015-09-23 21:19:39 +02:00
<!-- calendar view -->
</div>
</div>
2015-03-30 21:11:20 +02:00
</section>
</script>
2016-05-13 21:50:24 +02:00
<!-- modal inner content for acl editor -->
2015-04-24 22:07:48 +02:00
<script type="text/ng-template" id="UIxUserRightsEditor">
<var:component className="UIxCalUserRightsEditor" />
</script>
2015-11-11 17:18:49 +01:00
<!-- modal for calendar import -->
<script type="text/ng-template" id="UIxCalendarImportDialog">
2015-12-04 21:00:58 +01:00
<md-dialog flex="40" flex-xs="100" label:aria-label="Import Calendar">
2015-11-11 17:18:49 +01:00
<md-toolbar>
<div class="md-toolbar-tools">
<md-icon class="material-icons sg-icon-toolbar-bg">import_export</md-icon>
<div class="md-flex">
<div class="sg-md-title"><var:string label:value="Import Calendar"/></div>
</div>
<md-button class="md-icon-button" ng-click="$CalendarImportDialogController.close()">
<md-icon aria-label="Close dialog">close</md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content class="md-dialog-content">
<p><var:string label:value="Select an ICS file."/></p>
</md-dialog-content>
<md-dialog-actions>
2016-10-17 18:04:18 +02:00
<div layout="row" layout-align="space-around" class="md-flex"
ng-if="$CalendarImportDialogController.uploader.isUploading">
<md-progress-circular class="md-accent"
md-mode="determinate"
md-diameter="25"
ng-if="$CalendarImportDialogController.uploader.progress != 100"
value="{{$CalendarImportDialogController.uploader.progress}}">
<!-- while uploading -->
</md-progress-circular>
<md-progress-circular class="md-warn"
md-mode="indeterminate"
md-diameter="25"
ng-if="$CalendarImportDialogController.uploader.progress == 100">
<!-- while waiting for server's response -->
</md-progress-circular>
</div>
2015-11-11 17:18:49 +01:00
<label class="md-button" for="file-input" ng-hide="$CalendarImportDialogController.uploader.isUploading">
<span><var:string label:value="Upload"/></span>
</label>
<input id="file-input" type="file" class="ng-hide"
nv-file-select="nv-file-select"
uploader="$CalendarImportDialogController.uploader"/>
</md-dialog-actions>
</md-dialog>
</script>
2016-02-15 21:58:58 +01:00
<!-- modal for attendee availability conflict -->
<script type="text/ng-template" id="UIxAttendeeConflictDialog">
<md-dialog flex="60" flex-xs="100">
2016-02-16 18:40:59 +01:00
<md-dialog-content class="md-dialog-content"
ng-show="$AttendeeConflictDialogController.conflictError.attendee_email">
2016-08-04 20:20:06 +02:00
<h2 class="md-title">{{ ::'Warning' | loc }}</h2>
2016-11-04 19:29:54 +01:00
<p ng-bind-html="::'A time conflict exists with one or more attendees.\nWould you like to keep the current settings anyway?' | loc | ln2br"><!-- warning --></p>
2016-02-15 21:58:58 +01:00
<md-list>
<md-list-item>
<md-icon>person</md-icon> {{$AttendeeConflictDialogController.conflictError.attendee_name}} ({{$AttendeeConflictDialogController.conflictError.attendee_email}})
</md-list-item>
<md-list-item ng-repeat="conflict in $AttendeeConflictDialogController.conflictError.conflicts">
<md-icon>schedule</md-icon>
<div class="pseudo-input-container">
<label class="pseudo-input-label"><var:string label:value="From"/></label>
<div>{{conflict.startDate}}</div>
</div>
<div class="pseudo-input-container md-flex">
<label class="pseudo-input-label"><var:string label:value="To"/></label>
<div>{{conflict.endDate}}</div>
</div>
</md-list-item>
</md-list>
</md-dialog-content>
2016-02-16 18:40:59 +01:00
<md-dialog-content class="md-dialog-content"
ng-show="$AttendeeConflictDialogController.conflictError.reject">
2016-08-04 20:20:06 +02:00
<h2 class="md-title">{{ ::'Warning' | loc }}</h2>
2016-02-16 18:40:59 +01:00
<p>{{$AttendeeConflictDialogController.conflictError.reject}}</p>
</md-dialog-content>
2016-02-15 21:58:58 +01:00
<md-dialog-actions>
<md-button type="button" ng-click="$AttendeeConflictDialogController.cancel()">
<var:string label:value="Cancel"/>
</md-button>
<md-button class="md-warn" type="button"
2016-02-16 18:40:59 +01:00
ng-show="$AttendeeConflictDialogController.conflictError.conflicts"
2016-02-15 21:58:58 +01:00
ng-click="$AttendeeConflictDialogController.save()">
<var:string label:value="Save"/>
</md-button>
</md-dialog-actions>
</md-dialog>
</script>
2016-05-13 21:50:24 +02:00
<!-- modal for Web calendar authentication -->
<script type="text/ng-template" id="UIxWebCalendarAuthDialog">
<md-dialog flex="50" flex-xs="90">
<form name="authForm" ng-submit="$WebCalendarAuthDialogController.authenticate(authForm)">
<md-dialog-content class="md-dialog-content" layout="column">
<h2 class="md-title" ng-bind="$WebCalendarAuthDialogController.title"><!-- title --></h2>
<md-input-container>
<label>{{ ::'Username' | loc }}</label>
<input type="text" name="username"
ng-model="$WebCalendarAuthDialogController.username" md-autofocus="true" required="required" />
</md-input-container>
<md-input-container>
<label>{{ ::'Password' | loc }}</label>
<input type="password" name="password"
ng-model="$WebCalendarAuthDialogController.password" required="required" />
<div ng-messages="authForm.password.$error">
<div ng-message="credentials">{{ ::'Wrong username or password.' | loc }}</div>
</div>
</md-input-container>
</md-dialog-content>
<md-dialog-actions>
<md-button ng-click="$WebCalendarAuthDialogController.cancel()"
aria-label="::'Cancel' | loc"
ng-bind="::'Cancel' | loc"><!-- Cancel --></md-button>
<md-button class="md-primary" type="submit"
ng-disabled="authForm.$error.required"
aria-label="::'OK' | loc"
ng-bind="::'OK' | loc"><!-- Submit --></md-button>
</md-dialog-actions>
</form>
</md-dialog>
</script>
2007-06-19 20:00:08 +02:00
</var:component>