amorfo77/sogo
1
0 Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-10-11 14:57:12 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into feature/addMissingStrings2

Browse Source 
Conflicts:
	UI/AdministrationUI/English.lproj/Localizable.strings
	UI/PreferencesUI/English.lproj/Localizable.strings
	UI/Templates/PreferencesUI/UIxFilterEditor.wox
This commit is contained in:
Ludovic Marcotte committed 2015-12-03 11:16:17 -05:00
2 parents 9445315b30 9e776be2ce
commit 9b0a2c5fae
390 files changed
+57470 -27697
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+224 -198
View File
@@ -4,9 +4,9 @@
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label">
<md-dialog flex="60" flex-sm="100">
<md-dialog flex="60" flex-md="80" flex-sm="100">
<form name="eventForm" ng-submit="editor.save(eventForm)">
<md-toolbar class="sg-padded" ng-class="editor.component.getClassName('bg')">
<md-toolbar ng-class="editor.component.getClassName('bg')">
<div class="md-toolbar-tools">
<!-- summary -->
<md-icon ng-if="editor.component.classification == 'confidential'">visibility_off</md-icon>
@@ -23,191 +23,212 @@
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<!-- location -->
<md-input-container>
<label><var:string label:value="Location"/></label>
<input type="text" ng-model="editor.component.location"/>
</md-input-container>
<!-- calendar -->
<md-input-container>
<label><var:string label:value="Calendar"/></label>
<md-select ng-model="editor.component.destinationCalendar">
<md-option ng-repeat="calendar in ::editor.calendars"
ng-value="calendar.id">{{calendar.name}}</md-option>
</md-select>
</md-input-container>
<!-- categories -->
<md-chips ng-model="editor.component.categories">
<md-autocomplete
md-selected-item="editor.categories.selected"
md-search-text="editor.categories.searchText"
md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
label:placeholder="Add a category">
<span md-highlight-text="editor.categories.searchText">{{category}}</span>
</md-autocomplete>
</md-chips>
<!-- classification -->
<md-radio-group layout="row" layout-align="space-around center"
ng-model="editor.component.classification">
<md-radio-button value="public">
<var:string label:value="label_Public"/>
</md-radio-button>
<md-radio-button value="confidential">
<var:string label:value="label_Confidential"/>
</md-radio-button>
<md-radio-button value="private">
<var:string label:value="label_Private"/>
</md-radio-button>
</md-radio-group>
<!-- priority -->
<div class="pseudo-input-container">
<label class="pseudo-input-label"><var:string label:value="Priority"/></label>
<md-slider class="md-flex"
md-discrete="true"
ng-model="editor.component.priority"
step="1"
min="0"
max="9"
label:aria-label="Priority"><!-- slider --></md-slider>
</div>
<!-- is all day -->
<md-checkbox
ng-model="editor.component.isAllDay"
ng-true-value="1"
ng-false-value="0"
label:aria-label="All day Event">
<var:string label:value="All day Event"/>
</md-checkbox>
<!-- is transparent -->
<md-checkbox
ng-model="editor.component.isTransparent"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Show Time as Free">
<var:string label:value="Show Time as Free"/>
</md-checkbox>
<!-- send appointment notifications -->
<md-checkbox
ng-model="editor.component.sendAppointmentNotifications"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Send Appointment Notifications">
<var:string label:value="Send Appointment Notifications"/>
</md-checkbox>
<!-- start + end -->
<div layout="row">
<md-dialog-content class="md-dialog-content">
<!-- location -->
<md-input-container>
<label><var:string label:value="From"/></label>
<input type="text" ng-model="editor.component.startDate" required="required"/>
<label><var:string label:value="Location"/></label>
<input type="text" ng-model="editor.component.location"/>
</md-input-container>
<!-- calendar -->
<md-input-container>
<label><var:string label:value="To"/></label>
<input type="text" ng-model="editor.component.endDate" required="required"/>
<label><var:string label:value="Calendar"/></label>
<md-select ng-model="editor.component.destinationCalendar">
<md-option ng-repeat="calendar in ::editor.calendars"
ng-value="calendar.id">{{calendar.name}}</md-option>
</md-select>
</md-input-container>
</div>
<!-- attach urls -->
<div class="attr" ng-repeat="attach in editor.component.attachUrls">
<div layout="row" layout-align="center end">
<md-input-container>
<label>
<var:string label:value="URL"/>
</label>
<input type="text" ng-model="attach.value"
sg-focus-on="attachUrl_{{$index}}"/>
</md-input-container>
<md-button class="sg-icon-button" type="button" ng-click="editor.component.deleteAttachUrl($index)">
<md-icon>remove_circle</md-icon>
<!-- categories -->
<md-chips ng-model="editor.component.categories">
<md-autocomplete
md-selected-item="editor.categories.selected"
md-search-text="editor.categories.searchText"
md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
md-min-length="0"
label:placeholder="Add a category">
<span md-highlight-text="editor.categories.searchText">{{category}}</span>
</md-autocomplete>
</md-chips>
<!-- classification -->
<md-radio-group layout="row" layout-align="space-around center"
ng-model="editor.component.classification">
<md-radio-button value="public">
<var:string label:value="label_Public"/>
</md-radio-button>
<md-radio-button value="confidential">
<var:string label:value="label_Confidential"/>
</md-radio-button>
<md-radio-button value="private">
<var:string label:value="label_Private"/>
</md-radio-button>
</md-radio-group>
<!-- priority -->
<div class="pseudo-input-container">
<label class="pseudo-input-label"><var:string label:value="Priority"/></label>
<md-slider class="md-flex"
md-discrete="true"
ng-model="editor.component.priority"
step="1"
min="0"
max="9"
label:aria-label="Priority"><!-- slider --></md-slider>
</div>
<!-- is all day -->
<md-checkbox
ng-model="editor.component.isAllDay"
ng-true-value="1"
ng-false-value="0"
label:aria-label="All day Event">
<var:string label:value="All day Event"/>
</md-checkbox>
<!-- is transparent -->
<md-checkbox
ng-model="editor.component.isTransparent"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Show Time as Free">
<var:string label:value="Show Time as Free"/>
</md-checkbox>
<!-- send appointment notifications -->
<md-checkbox
ng-model="editor.component.sendAppointmentNotifications"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Send Appointment Notifications">
<var:string label:value="Send Appointment Notifications"/>
</md-checkbox>
<!-- start + end -->
<div layout="row">
<div flex="50">
<div class="pseudo-input-container">
<label class="pseudo-input-label"><var:string label:value="From"/></label>
</div>
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
<md-datepicker ng-model="editor.component.start"
ng-change="editor.updateStartTime()"
label:md-placeholder="From"><!-- date picker --></md-datepicker>
<sg-timepicker ng-model="editor.component.start"
ng-change="editor.adjustStartTime()"
ng-hide="editor.component.isAllDay"><!-- time picker --></sg-timepicker>
</div>
</div>
<div flex="50">
<div class="pseudo-input-container">
<label class="pseudo-input-label"><var:string label:value="To"/></label>
</div>
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
<md-datepicker ng-model="editor.component.end"
ng-change="editor.updateEndTime()"
label:md-placeholder="To"><!-- date picker --></md-datepicker>
<sg-timepicker ng-model="editor.component.end"
ng-change="editor.adjustEndTime()"
ng-hide="editor.component.isAllDay"><!-- time picker --></sg-timepicker>
</div>
</div>
</div>
<!-- attach urls -->
<div class="attr" ng-repeat="attach in editor.component.attachUrls">
<div layout="row" layout-align="center end">
<md-input-container>
<label>
<var:string label:value="URL"/>
</label>
<input type="text" ng-model="attach.value"
sg-focus-on="attachUrl_{{$index}}"/>
</md-input-container>
<md-button class="sg-icon-button" type="button" ng-click="editor.component.deleteAttachUrl($index)">
<md-icon>remove_circle</md-icon>
</md-button>
</div>
</div>
<div class="md-layout-margin" layout="row" layout-align="start center">
<md-button class="sg-icon-button" type="button" ng-click="editor.addAttachUrl($event)">
<md-icon>add_circle</md-icon>
</md-button>
<label class="button-label">
<var:string label:value="Attach"/>
</label>
</div>
<!-- comment -->
<md-input-container>
<label><var:string label:value="Description"/></label>
<textarea ng-model="editor.component.comment"><!-- comment --></textarea>
</md-input-container>
<!-- repeat -->
<div layout="row" layout-align="start end">
<div class="md-flex">
<md-input-container>
<label><var:string label:value="Repeat"/></label>
<md-select ng-model="editor.component.repeat.frequency" ng-disabled="editor.component.occurrenceId">
<var:foreach list="repeatList" item="item">
<md-option var:value="item"><var:string var:value="itemRepeatText"/></md-option>
</var:foreach>
</md-select>
</md-input-container>
</div>
<md-button type="button" class="sg-icon-button"
label:aria-label="repeat_CUSTOM"
ng-disabled="editor.component.occurrenceId"
ng-show="editor.component.repeat.frequency != 'never'"
ng-click="editor.toggleRecurrenceEditor()">
<md-icon ng-class="{'md-rotate-45': editor.showRecurrenceEditor}">add</md-icon>
</md-button>
</div>
</div>
<div class="md-layout-margin" layout="row" layout-align="start center">
<md-button class="sg-icon-button" type="button" ng-click="editor.addAttachUrl($event)">
<md-icon>add_circle</md-icon>
</md-button>
<label class="button-label">
<var:string label:value="Attach"/>
</label>
</div>
<!-- comment -->
<md-input-container>
<label><var:string label:value="Description"/></label>
<textarea ng-model="editor.component.comment"><!-- comment --></textarea>
</md-input-container>
<!-- repeat -->
<div layout="row" layout-align="start end">
<div class="md-flex">
<md-input-container>
<label><var:string label:value="Repeat"/></label>
<md-select ng-model="editor.component.repeat.frequency" ng-disabled="editor.component.occurrenceId">
<var:foreach list="repeatList" item="item">
<md-option var:value="item"><var:string var:value="itemRepeatText"/></md-option>
</var:foreach>
</md-select>
<div ng-show="editor.showRecurrenceEditor" class="sg-subcontent">
<var:component className="UIxRecurrenceEditor" />
</div>
<!-- end repeat -->
<div layout="row" layout-align="start end">
<div ng-show="editor.component.repeat.frequency != 'never'">
<md-input-container>
<label><var:string label:value="End Repeat"/></label>
<md-select ng-model="editor.component.repeat.end"
ng-disabled="editor.component.occurrenceId">
<md-option value="never"><var:string label:value="Never"/></md-option>
<md-option value="count"><var:string label:value="After"/></md-option>
<md-option value="until"><var:string label:value="On Date"/></md-option>
</md-select>
</md-input-container>
</div>
<div layout="row" layout-align="start center" ng-show="editor.component.repeat.end == 'count'">
<md-input-container class="md-input-number">
<input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
</md-input-container>
<var:string label:value="times"/>
</div>
<md-input-container ng-show="editor.component.repeat.end == 'until'">
<input type="date" label:aria-label="Repeat until" ng-model="editor.component.repeat.until"/>
</md-input-container>
</div>
<md-button type="button" class="sg-icon-button"
label:aria-label="repeat_CUSTOM"
ng-show="editor.component.repeat.frequency != 'never'"
ng-click="editor.toggleRecurrenceEditor()">
<md-icon ng-class="{'md-rotate-45': editor.showRecurrenceEditor}">add</md-icon>
</md-button>
</div>
<div ng-show="editor.showRecurrenceEditor" class="sg-subcontent">
<var:component className="UIxRecurrenceEditor" />
</div>
<!-- end repeat -->
<div layout="row" layout-align="start end">
<div ng-show="editor.component.repeat.frequency != 'never'">
<md-input-container>
<label><var:string label:value="End Repeat"/></label>
<md-select ng-model="editor.component.repeat.end">
<md-option value="never"><var:string label:value="Never"/></md-option>
<md-option value="count"><var:string label:value="After"/></md-option>
<md-option value="until"><var:string label:value="On Date"/></md-option>
</md-select>
</md-input-container>
<!-- attendees -->
<div layout="row" layout-align="start start">
<md-autocomplete class="md-flex"
label:md-floating-label="Invite Attendees"
md-selected-item="attendeeToAdd"
md-search-text="editor.searchText"
md-selected-item-change="editor.addAttendee(card)"
md-items="card in editor.cardFilter(editor.searchText)"
md-item-text="card.empty"
md-min-length="3"
md-delay="300"
md-no-cache="true"
sg-enter="editor.addAttendee(editor.searchText)">
<md-item-template>
<div class="md-contact-suggestion">
<span class="md-contact-name"
md-highlight-text="editor.searchText"
md-highlight-flags="^i">{{card.$$fullname}}</span>
<span class="md-contact-email"
md-highlight-text="editor.searchText"
md-highlight-flags="^i">{{card.$$email}}</span>
</div>
</md-item-template>
</md-autocomplete>
<md-button type="button" class="sg-icon-button"
label:aria-label="repeat_CUSTOM"
ng-click="editor.toggleAttendeesEditor()">
<md-icon ng-class="{'md-rotate-180': editor.showAttendeesEditor}">expand_more</md-icon>
</md-button>
</div>
<div layout="row" layout-align="start center" ng-show="editor.component.repeat.end == 'count'">
<md-input-container class="md-input-number">
<input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
</md-input-container>
<var:string label:value="times"/>
</div>
<md-input-container ng-show="editor.component.repeat.end == 'until'">
<input type="date" label:aria-label="Repeat until" ng-model="editor.component.repeat.until"/>
</md-input-container>
</div>
<!-- attendees -->
<div layout="row" layout-align="start start">
<md-autocomplete class="md-flex"
label:md-floating-label="Invite Attendees"
md-selected-item="attendeeToAdd"
md-search-text="editor.searchText"
md-selected-item-change="editor.addAttendee(card)"
md-items="card in editor.cardFilter(editor.searchText)"
md-item-text="card.empty"
md-min-length="3"
md-delay="300"
md-no-cache="true"
sg-enter="editor.addAttendee(editor.searchText)">
<md-item-template>
<div class="md-contact-suggestion" layout="row" layout-align="space-between center">
<span class="md-contact-name"
md-highlight-text="editor.searchText"
md-highlight-flags="^i">{{card.$$fullname}}</span>
<span class="md-contact-email"
md-highlight-text="editor.searchText"
md-highlight-flags="^i">{{card.$$email}}</span>
</div>
</md-item-template>
</md-autocomplete>
<md-button type="button" class="sg-icon-button"
label:aria-label="repeat_CUSTOM"
ng-click="editor.toggleAttendeesEditor()">
<md-icon ng-class="{'md-rotate-180': editor.showAttendeesEditor}">expand_more</md-icon>
</md-button>
</div>
<!-- md-contact-chips don't support "readonly", so we build them using md-chips
in readonly mode and a template similar to the one of md-contact-chips -->
<md-chips class="md-contact-chips sg-readonly"
@@ -215,37 +236,42 @@
ng-hide="editor.showAttendeesEditor"
readonly="true">
<md-chip-template>
<div class="md-contact-avatar"><img src="#" ng-src="{{$chip.image}}" alt="{{$chip.name}}"/></div>
<div class="md-contact-name">{{$chip.name}}</div>
<div class="md-contact-avatar">
<sg-avatar-image sg-email="$chip.email" size="32"><!-- avatar --></sg-avatar-image>
</div>
<div class="md-contact-name">{{$chip.name || $chip.email}}</div>
<md-icon ng-class="'icon-' + $chip.status"><!-- partstat --></md-icon>
<md-icon class="sg-chip-remove"
label:aria-label="Delete"
ng-click="editor.component.deleteAttendee($chip)">close</md-icon>
</md-chip-template>
</md-chips>
<div ng-show="editor.showAttendeesEditor" class="sg-subcontent attendees">
<var:component className="UIxAttendeesEditor" />
</div>
<!-- reminder -->
<md-checkbox ng-model="editor.component.$hasAlarm"
label:aria-label="Reminder">
<var:string label:value="Reminder"/>
</md-checkbox>
<div class="sg-subcontent"
ng-show="editor.component.$hasAlarm">
<var:component className="UIxReminderEditor" />
</div>
</md-dialog-content>
<div ng-show="editor.showAttendeesEditor" class="attendees">
<var:component className="UIxAttendeesEditor" />
</div>
<!-- reminder -->
<md-checkbox ng-model="editor.component.$hasAlarm"
label:aria-label="Reminder">
<var:string label:value="Reminder"/>
</md-checkbox>
<div class="sg-subcontent"
ng-show="editor.component.$hasAlarm">
<var:component className="UIxReminderEditor" />
</div>
</md-dialog-content>
<!-- cancel/reset/save -->
<div class="md-actions">
<md-dialog-actions>
<md-button type="button" ng-click="editor.cancel()">
<var:string label:value="Cancel"/>
</md-button>
<md-button type="button" ng-click="editor.component.$reset()">
<var:string label:value="Reset"/>
</md-button>
<md-button class="md-primary md-hue-3" type="submit"
<md-button class="md-primary" type="submit"
ng-disabled="editor.eventForm.$invalid">
<var:string label:value="Save"/>
</md-button>
</div>
</form>
</md-dialog>
</md-dialog-actions>
</form>
</md-dialog>
</container>
UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
+123 -44
View File
@@ -4,25 +4,38 @@
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label">
<md-dialog flex="40" flex-md="60" flex-sm="100">
<md-toolbar class="md-padding" ng-class="editor.component.getClassName('bg')">
<div class="md-toolbar-tools">
<md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
<div class="sg-md-title md-flex">
<!-- classification -->
<md-icon ng-if="editor.component.classification == 'confidential'">visibility_off</md-icon>
<md-icon ng-if="editor.component.classification == 'private'">vpn_key</md-icon>
<!-- summary -->
{{::editor.component.summary}}
<!-- priority -->
<md-icon ng-repeat="i in ::editor.component.priority | range">star</md-icon>
</div>
<md-button class="md-icon-button" ng-click="editor.close()">
<md-icon aria-label="Close dialog">close</md-icon>
</md-button>
<md-dialog flex="40" flex-md="80" flex-sm="100">
<md-toolbar ng-class="editor.component.getClassName('bg')">
<div class="md-toolbar-tools">
<md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
<div class="sg-md-title md-flex">
<!-- classification -->
<md-icon ng-if="editor.component.classification == 'confidential'">visibility_off</md-icon>
<md-icon ng-if="editor.component.classification == 'private'">vpn_key</md-icon>
<!-- summary -->
{{::editor.component.summary}}
<!-- priority -->
<md-icon ng-repeat="i in ::editor.component.priority | range">star</md-icon>
</div>
</md-toolbar>
<md-dialog-content>
<md-menu>
<md-button label:aria-label="More options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
<md-icon>more_vert</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button label:aria-label="View Raw Source"
ng-click="editor.viewRawSource($event)">
<var:string label:value="View Raw Source"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-button class="md-icon-button" ng-click="editor.close()">
<md-icon label:aria-label="Close">close</md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<md-list>
<!-- categories -->
<md-list-item ng-show="editor.component.categories.length > 0">
@@ -45,17 +58,15 @@
<!-- start/end dates -->
<md-list-item ng-class="{ 'md-2-line': editor.component.isAllDay, 'md-3-line': !editor.component.isAllDay }">
<md-icon>access_time</md-icon>
<div layout="row" class="md-flex">
<div class="md-list-item-text" ng-show="editor.component.startDate">
<p><var:string label:value="Start"/></p>
<h3>{{::editor.component.localizedStartDate}}</h3>
<h3 ng-hide="editor.component.isAllDay">{{::editor.component.localizedStartTime}}</h3>
</div>
<div class="md-list-item-text" ng-show="editor.component.endDate">
<p><var:string label:value="End"/></p>
<h3>{{::editor.component.localizedEndDate}}</h3>
<h3 ng-hide="editor.component.isAllDay">{{::editor.component.localizedEndTime}}</h3>
</div>
<div class="md-list-item-text" ng-show="editor.component.startDate">
<p><var:string label:value="Start"/></p>
<h3>{{::editor.component.localizedStartDate}}</h3>
<h3 ng-hide="editor.component.isAllDay">{{::editor.component.localizedStartTime}}</h3>
</div>
<div class="md-list-item-text" ng-show="editor.component.endDate">
<p><var:string label:value="End"/></p>
<h3>{{::editor.component.localizedEndDate}}</h3>
<h3 ng-hide="editor.component.isAllDay">{{::editor.component.localizedEndTime}}</h3>
</div>
</md-list-item>
<!-- is transparent -->
@@ -81,14 +92,14 @@
<!-- repeat -->
<md-list-item ng-show="editor.component.$isRecurrent">
<md-icon>repeat</md-icon>
<p><!-- editor.component.repeat.toString() --></p>
<p>{{editor.component.repeatDescription()}}</p>
</md-list-item>
<!-- reminder -->
<md-list-item ng-show="editor.component.$hasAlarm" ng-hide="editor.component.userHasRSVP">
<md-list-item ng-hide="!editor.component.$hasAlarm || editor.component.userHasRSVP">
<md-icon>alarm_on</md-icon>
<p><!-- editor.component.alarm.toString() --></p>
<p>{{editor.component.alarmDescription()}}</p>
</md-list-item>
<md-list-item class="md-2-line" ng-show="editor.component.organizer">
<md-list-item layout-align="start start" ng-show="editor.component.organizer">
<md-icon>people</md-icon>
<div layout="column" layout-fill="layout-fill">
<!-- organizer -->
@@ -98,7 +109,9 @@
ng-model="::editor.organizer"
readonly="true">
<md-chip-template>
<div class="md-contact-avatar"><img src="#" ng-src="{{$chip.$image}}" alt="{{$chip.name}}"/></div>
<div class="md-contact-avatar">
<sg-avatar-image sg-email="$chip.email" size="32"><!-- avatar --></sg-avatar-image>
</div>
<div class="md-contact-name">{{$chip.name}}</div>
</md-chip-template>
</md-chips>
@@ -112,7 +125,9 @@
ng-model="::editor.component.attendees"
readonly="true">
<md-chip-template>
<div class="md-contact-avatar"><img src="#" ng-src="{{$chip.image}}" alt="{{$chip.name}}"/></div>
<div class="md-contact-avatar">
<sg-avatar-image sg-email="$chip.email" size="32"><!-- avatar --></sg-avatar-image>
</div>
<div class="md-contact-name">{{$chip.name}}</div>
<md-icon ng-class="'icon-' + $chip.status"><!-- partstat --></md-icon>
</md-chip-template>
@@ -123,7 +138,7 @@
</md-list>
<!-- invitation -->
<md-list ng-show="editor.component.userHasRSVP">
<md-divider><!-- dividerd --></md-divider>
<md-divider><!-- divider --></md-divider>
<md-subheader class="md-no-sticky sg-padded--top"><var:string label:value="You are invited to participate"/></md-subheader>
<!-- participation status -->
<md-list-item>
@@ -170,32 +185,96 @@
<span ng-show="editor.component.$hasAlarm"><var:component className="UIxReminderEditor" /></span>
</div>
</md-dialog-content>
<!-- actions -->
<div class="md-actions" ng-show="editor.component.isEditable()">
<!-- editable but not recurrent -->
<md-dialog-actions ng-show="editor.component.isEditable()">
<md-button class="md-warn"
label:aria-label="Delete Event"
ng-click="editor.deleteAllOccurrences()">
<var:string label:value="Delete"/>
</md-button>
<div class="md-flex"><!-- spacer --></div>
<md-button type="button" ng-click="editor.edit()">
<var:string label:value="Edit"/>
</md-button>
</div>
<div class="md-actions" ng-show="editor.component.isEditableOccurrence()">
</md-dialog-actions>
<!-- editable and recurrent -->
<md-dialog-actions ng-show="editor.component.isEditableOccurrence()">
<md-menu>
<md-button class="md-warn"
label:aria-label="Delete Event"
ng-click="$mdOpenMenu()"
md-menu-origin="md-menu-origin">
<var:string label:value="Delete"/> <md-icon>arrow_drop_down</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button class="md-warn"
ng-click="editor.deleteOccurrence()">
<var:string label:value="Delete This Occurrence"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button class="md-warn"
ng-click="editor.deleteAllOccurrences()">
<var:string label:value="Delete All Occurrences"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<div class="md-flex"><!-- spacer --></div>
<md-button type="button" ng-click="editor.editAllOccurrences()">
<var:string label:value="Edit All Occurrences"/>
</md-button>
<md-button type="button" ng-click="editor.edit()">
<var:string label:value="Edit This Occurrence"/>
</md-button>
</div>
<div class="md-actions" ng-show="editor.component.isInvitation()">
</md-dialog-actions>
<!-- invitation but not recurrent -->
<md-dialog-actions ng-show="editor.component.isInvitation()">
<md-button class="md-warn"
label:aria-label="Delete Event"
ng-click="editor.deleteAllOccurrences()">
<var:string label:value="Delete"/>
</md-button>
<div class="md-flex"><!-- spacer --></div>
<md-button type="button" ng-click="editor.reply()">
<var:string label:value="Update"/>
</md-button>
</div>
<div class="md-actions" ng-show="editor.component.isInvitationOccurrence()">
</md-dialog-actions>
<!-- invitation and recurrent -->
<md-dialog-actions ng-show="editor.component.isInvitationOccurrence()">
<md-menu>
<md-button class="md-warn"
label:aria-label="Delete Event"
ng-click="$mdOpenMenu()"
md-menu-origin="md-menu-origin">
<var:string label:value="Delete"/>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button class="md-warn"
ng-click="editor.deleteOccurrence()">
<var:string label:value="Delete This Occurrence"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button class="md-warn"
ng-click="editor.deleteAllOccurrences()">
<var:string label:value="Delete All Occurrences"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<div class="md-flex"><!-- spacer --></div>
<md-button type="button" ng-click="editor.replyAllOccurrences()">
<var:string label:value="Update All Occurrences"/>
</md-button>
<md-button type="button" ng-click="editor.reply()">
<var:string label:value="Update This Occurrence"/>
</md-button>
</div>
</md-dialog-actions>
</md-dialog>
</container>
UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
+11 -5
View File
@@ -14,15 +14,21 @@
<!-- attendees -->
<md-list>
<md-list-item>
<div><!-- empty --></div>
<div class="md-tile-left"><!-- empty --></div>
</md-list-item>
<md-list-item ng-repeat="currentAttendee in editor.component.attendees track by currentAttendee.email">
<sg-avatar-image sg-email="currentAttendee.email"
size="32"><!-- avatar --></sg-avatar-image>
<sg-avatar-image class="md-avatar"
sg-email="currentAttendee.email"
size="40"><!-- avatar --></sg-avatar-image>
<div class="sg-tile-content">
<div class="sg-md-subhead-multi">{{currentAttendee.name}}</div>
<div class="sg-md-body-multi">{{currentAttendee.email}}</div>
<div class="sg-md-subhead"><div>{{currentAttendee.name}}</div></div>
<div class="sg-md-body"><div>{{currentAttendee.email}}</div></div>
</div>
<md-button class="md-icon-button"
label:aria-label="Delete"
ng-click="editor.component.deleteAttendee(currentAttendee)">
<md-icon>close</md-icon>
</md-button>
</md-list-item>
</md-list>
<!-- freebusy -->
UI/Templates/SchedulerUI/UIxCalDayTable.wox
+104 -94
View File
@@ -1,115 +1,125 @@
<?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">
<div var:class="daysViewClasses">
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">
<md-toolbar class="daysView md-hue-1" var:sg-view="currentView">
<!-- MultiColumnView -->
<!-- Display the name of the calendar -->
<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 -->
<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>
<!-- 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 md-default-theme md-fg md-primary md-hue-1"><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--thin 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>
<!-- 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">
<var:string value="labelForDate"/><br/>
<span class="dayOfWeek"><var:string value="labelForDay"/></span>
</div>
</var:foreach>
</div>
<!-- All day cells -->
<div class="days">
<var:foreach list="daysToDisplay" item="currentTableDay">
<div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" hour="allday"><!-- space --></div>
</var:foreach>
</div>
</var:if>
</div>
<!-- The hours cells -->
<div var:class="daysViewClasses">
<div class="hours">
<var:foreach list="hoursToDisplay" item="currentTableHour">
<div class="hour" var:id="currentHourId">
<var:string value="currentTableHour"/>
<!-- 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>
<div class="days">
<!-- MultiColumnView -->
<var:if condition="isMultiColumnView">
<var:foreach list="calendarsToDisplay" item="currentCalendar">
<var:if condition="isMultiColumnView">
<!-- Calendars names in multicolumn day view -->
<div class="days">
<div class="day multicolumnDay"
ng-repeat="view in calendar.views"
ng-class="view.calendar.getClassName('bdr')">
{{view.calendar.name}}
</div>
</div>
</var:if>
<!-- All day cells -->
<div class="allDaysView md-default-theme md-background md-bg">
<div class="days" sg-calendar-scroll-view="multiday-allday">
<var:foreach list="daysToDisplay" item="currentTableDay">
<sg-calendar-day var:class="dayClasses"
var:day="currentTableDay.shortDateString"
var:id="currentAllDayId"
hour="allday"
var:sg-day-number="currentDayNumber"
var:sg-day="currentTableDay.shortDateString"
var:sg-day-string="currentTableDay.iso8601DateString"
ng-repeat="view in calendar.views">
<sg-calendar-day-table
sg-blocks="view.allDayBlocks"
sg-click="list.openEvent(event, component)"
var:sg-day="currentTableDay.shortDateString"><!-- blocks for current day --></sg-calendar-day-table>
<sg-calendar-day-block
sg-calendar-ghost="sg-calendar-ghost"
sg-block="list.component.$ghost"><!-- drag ghost --></sg-calendar-day-block>
</sg-calendar-day>
</var:foreach>
</div>
</div>
</md-toolbar>
<md-content class="md-flex" sg-calendar-scroll-view="multiday">
<div class="calendarView">
<!-- The hours -->
<div class="hours">
<var:foreach list="hoursToDisplay" item="currentTableHour">
<div class="hour" var:id="currentHourId">
<var:string value="currentTableHour"/>
</div>
</var:foreach>
</div>
<!-- The quarters grid -->
<div class="daysView">
<div class="days">
<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">
<sg-calendar-day var:class="dayClasses"
var:id="currentDayId"
var:sg-day-number="currentDayNumber"
var:sg-day="currentTableDay.shortDateString"
var:sg-day-string="currentTableDay.iso8601DateString"
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">
<div var:class="clickableHourCellClass"
sg-draggable-calendar-block="sg-draggable-calendar-block"
var:sg-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-click="list.openEvent(event, component)"
sg-blocks="view.blocks"
var:sg-day-number="currentDayNumber"
var:sg-day="currentTableDay.shortDateString"><!-- blocks for current day --></sg-calendar-day-table>
<sg-calendar-day-block
sg-calendar-ghost="sg-calendar-ghost"
sg-block="list.component.$ghost"><!-- drag ghost --></sg-calendar-day-block>
</div>
<div class="events"><!-- space --></div>
</div>
</sg-calendar-day>
</var:foreach>
</var:foreach>
</var:if>
<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>
</div>
</var:foreach>
</var:if>
</div>
</div>
</div>
</div>
</md-content>
</container>
UI/Templates/SchedulerUI/UIxCalDayView.wox
+45 -45
View File
@@ -1,47 +1,47 @@
<?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:rsrc="OGo:url"
xmlns:label="OGo:label">
<!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>
</div>-->
<md-content>
<div layout="row" layout-align="center">
<h5>
<md-button
class="sg-icon-button"
label:aria-label="Previous Day"
var:date="prevDayQueryParameters.day"
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
<var:string value="currentDayName" />
<md-button
class="sg-icon-button"
label:aria-label="Next Day"
var:date="nextDayQueryParameters.day"
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
</h5>
</div>
<div id="calendarContent">
<var:component
className="UIxCalDayTable"
startDate="startDate"
const:CSSClass="dayOverview"
const:numberOfDays="1"
const:currentView="dayview"/>
</div>
</md-content>
</container>
<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"
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>
<var:component
className="UIxCalDayTable"
startDate="startDate"
const:CSSClass="dayOverview"
const:numberOfDays="1"
const:currentView="dayview"/>
</container>
UI/Templates/SchedulerUI/UIxCalMainView.wox
+427 -324
View File
@@ -8,7 +8,7 @@
xmlns:label="OGo:label"
className="UIxPageFrame"
title="title"
const:jsFiles="Common.js, Preferences.services.js, Contacts.services.js, Mailer.services.js, Scheduler.js, Scheduler.services.js">
const:jsFiles="Common.js, Preferences.services.js, Contacts.services.js, Mailer.services.js, vendor/angular-file-upload.min.js, Scheduler.js, Scheduler.services.js">
<script type="text/javascript">
var firstDayOfWeek = <var:string value="firstDayOfWeek"/>;
var dayStartHour = <var:string value="dayStartHour"/>;
@@ -106,101 +106,101 @@
<p><span class="label"><var:string label:value="Created by" /></span> <span>!- space -</span></p>
<p class="description">!- space -</p>
</div>
</div>
<div id="uploadDialog" style="display: none" class="dialog left">
<div>
<h3><var:string label:value="Import Events"/></h3>
<p class="prompt"><var:string label:value="Select an iCalendar file (.ics)."/></p>
<form const:href="" name="uploadForm" id="uploadForm" method="post"
enctype="multipart/form-data"
onsubmit="return AIM.submit(this, {'onStart' : validateUploadForm,
'onComplete' : uploadCompleted})">
<p class="prompt"><input type="file" name="calendarFile" class="textField" id="calendarFile" />
<a href="#" class="button actionButton" id="uploadSubmit"
onclick="if($('uploadForm').onsubmit()) $('uploadForm').submit()">
<span><var:string label:value="Upload" /></span></a>
<a href="#" class="button" const:id="uploadCancel">
<span><var:string label:value="Cancel" /></span></a>
</p></form>
<hr/>
</div>
</div>
<div id="uploadResults" style="display: none" class="dialog left">
<div>
<h3><var:string label:value="Import Events"/></h3>
<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>
-->
-->
<main class="view layout-fill" ui-view="calendars" layout="row" ng-controller="navController"><!-- calendars list --></main>
<script type = "text/ng-template" id="UIxCalMainFrame">
<script type="text/ng-template" id="UIxCalMainView">
<!-- calendars colors -->
<div sg-folder-stylesheet="true"
ng-repeat="calendar in calendars.service.$calendars"
ng-model="calendar"><!-- stylesheet --></div>
<div sg-folder-stylesheet="true"
ng-repeat="calendar in calendars.service.$subscriptions"
ng-model="calendar"><!-- stylesheet --></div>
<sg-folder-stylesheet
ng-repeat="calendar in app.service.$findAll()"
ng-model="calendar"><!-- stylesheet --></sg-folder-stylesheet>
<!-- calendars colors -->
<sg-category-stylesheet
ng-repeat="category in app.categories"
ng-model="category"><!-- stylesheet --></sg-category-stylesheet>
<!-- Sidenav -->
<md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
<md-sidenav class="md-sidenav-left md-whiteframe-z1" layout="column"
md-component-id="left" md-is-locked-open="isGtMedium"
ng-class="{ 'sg-closed': leftIsClose }">
<var:component className="UIxSidenavToolbarTemplate" />
<md-content md-scroll-y="md-scroll-y" class="md-flex">
<md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
<!-- User's calendars -->
<section>
<md-subheader class="sg-md-subheader">
<section class="sg-section-list">
<md-subheader class="md-hue-2">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Calendars"/></span>
<md-button class="sg-icon-button"
label:aria-label="New Calendar..."
ng-click="calendars.newCalendar()">
ng-click="app.newCalendar()">
<md-icon>add_circle_outline</md-icon>
</md-button>
</div>
</md-subheader>
<md-list>
<md-list-item ng-repeat="calendar in calendars.service.$calendars">
<md-list-item ng-repeat="calendar in app.service.$calendars"
ng-dblclick="app.editFolder(calendar)">
<md-checkbox ng-model="calendar.active"
ng-class="calendar.getClassName('checkbox')"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Enable"><!-- enable --></md-checkbox>
<p class="sg-item-name">{{calendar.name}}</p>
<p class="sg-item-name" ng-show="app.editMode != calendar.id">
{{calendar.name}}
<span class="sg-counter-badge" ng-show="calendar.activeTasks">{{calendar.activeTasks}}</span>
</p>
<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>
<md-menu class="md-secondary" label:aria-label="Options">
<md-icon label:aria-label="Options"
ng-click="$mdOpenMenu()"
md-menu-origin="md-menu-origin">more_vert</md-icon>
<md-button class="md-icon-button" label:aria-label="Options"
ng-click="$mdOpenMenu()"
md-menu-origin="md-menu-origin">
<md-icon>more_vert</md-icon>
</md-button>
<md-menu-content width="2">
<md-menu-item>
<md-button ng-click="calendars.confirmDelete(calendar)">
<md-button type="button" ng-click="app.editFolder(calendar)">
<var:string label:value="Rename"/>
</md-button>
</md-menu-item>
<md-menu-item ng-show="calendar.id != 'personal'">
<md-button ng-click="app.confirmDelete(calendar)">
<var:string label:value="Delete"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="calendars.exportCalendar()">
<md-button ng-click="app.importCalendar($event, calendar)">
<var:string label:value="Import"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="app.exportCalendar(calendar)">
<var:string label:value="Export"/>
</md-button>
</md-menu-item>
<md-menu-divider><!-- divider --></md-menu-divider>
<md-menu-item>
<md-button ng-click="calendars.showLinks(calendar)">
<md-button ng-click="app.showLinks(calendar)">
<var:string label:value="Links to this Calendar"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="calendars.share(calendar)">
<md-button ng-click="app.share(calendar)">
<var:string label:value="Sharing..."/>
</md-button>
</md-menu-item>
<md-menu-divider><!-- divider --></md-menu-divider>
<md-menu-item>
<md-button ng-click="calendars.showProperties(calendar)">
<md-button ng-click="app.showProperties(calendar)">
<var:string label:value="Properties"/>
</md-button>
</md-menu-item>
@@ -210,45 +210,66 @@
</md-list>
</section>
<!-- Subscriptions -->
<section>
<md-subheader class="sg-md-subheader">
<section class="sg-section-list">
<md-subheader class="md-hue-2">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Subscriptions"/></span>
<md-button class="sg-icon-button"
label:aria-label="Subscribe to a Calendar..."
sg-subscribe="calendar"
sg-subscribe-on-select="calendars.subscribeToFolder(folderData)">
sg-subscribe-on-select="app.subscribeToFolder(folderData)">
<md-icon>add_circle_outline</md-icon>
</md-button>
</div>
</md-subheader>
<md-list>
<md-list-item ng-repeat="calendar in calendars.service.$subscriptions">
<md-list-item ng-repeat="calendar in app.service.$subscriptions"
ng-dblclick="app.editFolder(calendar)">
<md-checkbox ng-model="calendar.active"
ng-class="calendar.getClassName('checkbox')"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Enable"><!-- enable --></md-checkbox>
<p class="sg-item-name">{{calendar.name}}</p>
<md-menu class="md-secondary" label:aria-label="Options" ng-click="true">
<md-icon label:aria-label="Options"
<p class="sg-item-name" ng-show="app.editMode != calendar.id">
{{calendar.name}}
<span class="sg-counter-badge" ng-show="calendar.activeTasks">{{calendar.activeTasks}}</span>
</p>
<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>
<md-menu class="md-secondary" label:aria-label="Options">
<md-button class="md-icon-button" label:aria-label="Options"
ng-click="$mdOpenMenu()"
md-menu-origin="md-menu-origin">more_vert</md-icon>
md-menu-origin="md-menu-origin">
<md-icon>more_vert</md-icon>
</md-button>
<md-menu-content width="2">
<md-menu-item>
<md-button ng-click="calendars.confirmDelete(calendar)">
<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)">
<var:string label:value="Unsubscribe Calendar"/>
</md-button>
</md-menu-item>
<md-menu-divider><!-- divider --></md-menu-divider>
<md-menu-item>
<md-button ng-click="calendars.showLinks(calendar)">
<md-button ng-click="app.showLinks(calendar)">
<var:string label:value="Links to this Calendar"/>
</md-button>
</md-menu-item>
<md-menu-divider><!-- divider --></md-menu-divider>
<md-menu-item>
<md-button ng-click="calendars.showProperties(calendar)">
<md-button ng-click="app.showProperties(calendar)">
<var:string label:value="Properties"/>
</md-button>
</md-menu-item>
@@ -258,44 +279,62 @@
</md-list>
</section>
<!-- Web Calendars -->
<section>
<md-subheader class="sg-md-subheader">
<section class="sg-section-list">
<md-subheader class="md-hue-2">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Web Calendars"/></span>
<md-button class="sg-icon-button"
label:aria-label="Subscribe to a web calendar..."
ng-click="calendars.addWebCalendar()">
ng-click="app.addWebCalendar()">
<md-icon>add_circle_outline</md-icon>
</md-button>
</div>
</md-subheader>
<md-list>
<md-list-item ng-repeat="calendar in calendars.service.$webcalendars">
<md-list-item ng-repeat="calendar in app.service.$webcalendars"
ng-dblclick="app.editFolder(calendar)">
<md-checkbox ng-model="calendar.active"
ng-class="calendar.getClassName('checkbox')"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Enable"><!-- enable --></md-checkbox>
<p class="sg-item-name">{{calendar.name}}</p>
<md-menu class="md-secondary" label:aria-label="Options" ng-click="true">
<md-icon label:aria-label="Options"
ng-click="$mdOpenMenu()"
md-menu-origin="md-menu-origin">more_vert</md-icon>
<p class="sg-item-name" ng-show="app.editMode != calendar.id">{{calendar.name}}</p>
<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>
<md-menu class="md-secondary" label:aria-label="Options">
<md-button class="md-icon-button" label:aria-label="Options"
ng-click="$mdOpenMenu()"
md-menu-origin="md-menu-origin">
<md-icon>more_vert</md-icon>
</md-button>
<md-menu-content width="2">
<md-menu-item>
<md-button ng-click="calendars.confirmDelete(calendar)">
<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)">
<var:string label:value="Delete"/>
</md-button>
</md-menu-item>
<md-menu-divider><!-- divider --></md-menu-divider>
<md-menu-item>
<md-button ng-click="calendars.showLinks(calendar)">
<md-button ng-click="app.showLinks(calendar)">
<var:string label:value="Links to this Calendar"/>
</md-button>
</md-menu-item>
<md-menu-divider><!-- divider --></md-menu-divider>
<md-menu-item>
<md-button ng-click="calendars.showProperties(calendar)">
<md-button ng-click="app.showProperties(calendar)">
<var:string label:value="Properties"/>
</md-button>
</md-menu-item>
@@ -310,197 +349,196 @@
<!-- Main section -->
<section layout="column" class="sg-app-content 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 sg-padded" layout="row" layout-align="space-between start">
<var:component className="UIxTopnavToolbarTemplate" />
<!-- <div class="sg-toolbar-group-2">
<md-button class="sg-icon-button" label:aria-label="Search">
<md-toolbar layout="row" layout-align="space-between center" class="toolbar-main" >
<var:component className="UIxTopnavToolbarTemplate" />
<!-- <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>
<div layout="row" class="md-flex">
<div class="view-list" layout="column">
<md-toolbar class="md-whiteframe-z1"
ng-show="list.component.$selectedCount() == 0">
<!-- 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.mode.search = true">
<md-icon>search</md-icon>
</md-button>
</div> -->
</div><!-- .md-toolbar-tools -->
<div class="md-toolbar-tools" layout="row"
layout-align="space-between center"
ng-show="list.component.$selectedCount() == 0">
<!-- sort/filter mode -->
<div class="view-list" layout="row" layout-align="space-between center"
ng-hide="list.mode.search">
<div class="sg-toolbar-group">
<md-button class="sg-icon-button" label:aria-label="Search"
ng-click="list.mode.search = true">
<md-icon>search</md-icon>
<div class="md-flex"><!-- spacer --></div>
<md-menu>
<md-button class="sg-icon-button" label:aria-label="Filter"
ng-click="$mdOpenMenu()">
<md-icon>filter_list</md-icon>
</md-button>
</div>
<div class="sg-toolbar-group-last">
<md-menu>
<md-button class="sg-icon-button" label:aria-label="Filter"
ng-click="$mdOpenMenu()">
<md-icon>filter_list</md-icon>
</md-button>
<md-menu-content>
<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'">
<md-button ng-click="list.component.$filter(list.componentType)">
<md-checkbox
ng-model="list.component.$queryTasks.show_completed"
ng-true-value="1"
ng-false-value="0"> <var:string label:value="Show completed tasks"/></md-checkbox>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu>
<md-button class="sg-icon-button" label:aria-label="Sort"
ng-click="$mdOpenMenu()">
<md-icon>sort</md-icon>
</md-button>
<md-menu-content>
<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'">
<md-button ng-click="list.component.$filter(list.componentType)">
<md-checkbox
ng-model="list.component.$queryEvents.asc"
ng-true-value="0"
ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.component.$filter(list.componentType)">
<md-checkbox
ng-model="list.component.$queryTasks.asc"
ng-true-value="0"
ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-button class="sg-icon-button" ng-click="list.component.$filter(list.componentType)">
<md-icon>refresh</md-icon>
<md-menu-content>
<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'">
<md-button ng-click="list.component.$filter(list.componentType)">
<md-checkbox
ng-model="list.component.$queryTasks.show_completed"
ng-true-value="1"
ng-false-value="0"> <var:string label:value="Show completed tasks"/></md-checkbox>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu>
<md-button class="sg-icon-button" label:aria-label="Sort"
ng-click="$mdOpenMenu()">
<md-icon>sort</md-icon>
</md-button>
</div>
<md-menu-content>
<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'">
<md-button ng-href="#">
<md-checkbox
ng-change="list.component.$filter(list.componentType)"
ng-model="list.component.$queryEvents.asc"
ng-true-value="0"
ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-href="#">
<md-checkbox
ng-change="list.component.$filter(list.componentType)"
ng-model="list.component.$queryTasks.asc"
ng-true-value="0"
ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-button class="sg-icon-button" ng-click="list.reload()">
<md-icon>refresh</md-icon>
</md-button>
</div>
<!-- search mode -->
<div class="view-list sg-padded--right sg-toolbar-search" layout="row" layout-align="space-between center"
<div class="md-toolbar-tools sg-toolbar-secondary"
ng-show="list.mode.search"
sg-search="list.component.$filter(list.componentType, { value: searchText, search: searchField })">
<md-button class="sg-icon-button"
@@ -511,67 +549,73 @@
<md-input-container>
<input name="folderSearch" type="search" />
</md-input-container>
<md-input-container>
<md-input-container flex="25">
<md-select>
<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>
</div>
<!-- day/week/month views -->
<div class="sg-padded">
<a class="sg-icon-button md-button"
label:aria-label="Day"
href="#/calendar/day"><md-icon>view_day</md-icon></a>
<a class="sg-icon-button md-button"
label:aria-label="Week"
href="#/calendar/week"><md-icon>view_week</md-icon></a>
<a class="sg-icon-button md-button"
label:aria-label="Month"
href="#/calendar/month"><md-icon>view_module</md-icon></a>
</md-toolbar>
<!-- multiple-selection mode -->
<md-toolbar class="md-whiteframe-z1 md-hue-1 sg-toolbar-secondary" ng-show="list.component.$selectedCount() > 0">
<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>
</div>
<div layout="row" layout-align="start center" ng-show="list.component.$selectedCount() > 0">
<md-button class="sg-icon-button" ng-click="list.unselectComponents()">
<md-icon>arrow_back</md-icon>
</md-button>
<label>{{list.component.$selectedCount()}} selected</label>
<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>
<md-content layout="row" class="md-flex">
<md-content class="view-list md-flex" layout="column">
</md-toolbar>
<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>
<md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<span>{{list.component.$queryEvents.filterpopup | loc}}</span>
</md-subheader>
<md-list class="sg-section-list">
<md-list-item class="md-2-line"
ng-repeat="event in list.component.$events"
<md-list-item ng-repeat="event in list.component.$events"
ng-click="list.openEvent($event, event)">
<div class="sg-selected-avatar" ng-show="event.selected"
ng-click="event.selected = !event.selected">
<div class="md-avatar sg-avatar-selected" ng-show="event.selected"
ng-click="list.toggleComponentSelection($event, event)">
<!-- selected avatar -->
</div>
<i class="md-tile-left" ng-class="event.getClassName('bg')" ng-show="!event.selected" ng-click="event.selected = !event.selected"><!-- calendar color --></i>
<div class="md-list-item-text">
<h3>{{event.c_title}}</h3>
<p>{{event.c_location}}</p>
<p class="md-secondary" layout="row">
{{event.formatted_startdate}}
<i class="sg-tile-icons">
<md-icon ng-show="event.c_iscycle">repeat</md-icon>
<md-icon ng-show="event.c_nextalarm">alarm</md-icon>
</i>
</p>
<div class="sg-color-chip" ng-class="event.getClassName('bg')"
ng-show="!event.selected"
ng-click="list.toggleComponentSelection($event, event)"><!-- calendar color --></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>{{event.c_title}}</div>
</div>
<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>
</div>
<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>
@@ -581,25 +625,40 @@
<!-- Tasks list -->
<md-tab label:label="Tasks"
md-on-select="list.selectComponentType('tasks')">
<md-subheader>
<md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<span>{{list.component.$queryTasks.filterpopup | loc}}</span>
</md-subheader>
<md-list class="sg-section-list">
<md-list-item class="md-2-line"
ng-repeat="task in list.component.$tasks"
<md-list-item ng-repeat="task in list.component.$tasks"
ng-click="list.openTask($event, task)">
<div class="sg-selected-avatar" ng-show="task.selected"
ng-click="task.selected = !task.selected">
<div class="md-avatar sg-avatar-selected" ng-show="task.selected"
ng-click="list.toggleComponentSelection($event, task)">
<!-- selected avatar -->
</div>
<i class="md-tile-left" ng-class="task.getClassName('bg')" ng-show="!task.selected" ng-click="task.selected = !task.selected"><!-- calendar color --></i>
<div class="md-list-item-text">
<h3>{{task.c_title}}</h3>
<p class="md-secondary" layout="row">
{{task.formatted_enddate}}
<span class="sg-tile-icons">
<md-icon ng-show="task.c_iscycle">repeat</md-icon>
<md-icon ng-show="event.c_nextalarm">alarm</md-icon>
</span>
</p>
<div class="sg-color-chip" ng-class="task.getClassName('bg')"
ng-show="!task.selected"
ng-click="list.toggleComponentSelection($event, task)"><!-- calendar color --></div>
<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>{{task.c_title}}</div>
</div>
<div class="sg-md-body">
<div><!-- spacer --></div>
<div>{{task.formatted_enddate}}</div>
</div>
</div>
<div class="sg-tile-icons">
<md-icon ng-show="task.c_iscycle">repeat</md-icon>
<md-icon ng-show="event.c_nextalarm">alarm</md-icon>
</div>
<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>
@@ -608,17 +667,61 @@
</md-tab>
</md-tabs>
<md-button class="md-fab md-fab-bottom-right"
label:aria-label="New Appointment"
ng-click="list.newComponent($event)">
<md-icon>add</md-icon>
label:aria-label="Create a new event"
ng-click="list.newComponent($event)"
ng-if="list.componentType == 'events'">
<md-icon >event</md-icon>
</md-button>
<md-button class="md-fab md-fab-bottom-right"
label:aria-label="Create a new task"
ng-click="list.newComponent($event)"
ng-if="list.componentType == 'tasks'">
<md-icon>assignment_turned_in</md-icon>
</md-button>
</md-content>
<div id="detailView" hide-sm="hide-sm" class="view-detail" layout="column" ui-view="calendarView"><!-- calendar view --></div>
</md-content>
</div>
<div id="detailView" class="view-detail" hide-xs="hide-xs" layout="column" ui-view="calendarView">
<!-- calendar view -->
</div>
</div>
</section>
</script>
<script type="text/ng-template" id="UIxUserRightsEditor">
<var:component className="UIxCalUserRightsEditor" />
</script>
<!-- modal for calendar import -->
<script type="text/ng-template" id="UIxCalendarImportDialog">
<md-dialog flex="40" flex-sm="100" label:aria-label="Import Calendar">
<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>
<md-progress-circular class="md-accent"
md-mode="determinate"
md-diameter="20px"
ng-show="$CalendarImportDialogController.uploader.isUploading"
ng-value="$CalendarImportDialogController.uploader.progress"><!-- progress --></md-progress-circular>
<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>
</var:component>
UI/Templates/SchedulerUI/UIxCalMonthView.wox
+94 -62
View File
@@ -1,71 +1,103 @@
<?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 class="md-whiteframe-z1" 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>
<md-input-container>
<md-select ng-model="calendar.nav.month">
<md-option><var:string value="monthNameOfThisMonth" /></md-option>
</md-select>
</md-input-container>
<md-input-container>
<md-select ng-model="calendar.nav.year">
<md-option><var:string value="selectedDate.yearOfCommonEra" /></md-option>
</md-select>
</md-input-container>
<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>
<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>
<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>
</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>
<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-1">
<var:foreach list="headerDaysToDisplay" item="currentTableDay">
<div class="dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
</var:foreach>
</div>
</md-toolbar>
<md-content class="md-flex" sg-calendar-scroll-view="monthly">
<div class="calendarView monthView">
<md-grid-list
md-cols="7"
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"
var:class="dayCellClasses"
var:id="currentDayId"
>
<sg-calendar-day layout="column" layout-fill="true"
var:sg-day="currentTableDay.shortDateString"
var:sg-day-number="currentDayNumber"
var:sg-day-string="currentTableDay.iso8601DateString">
<div class="sg-calendar-tile-header md-default-theme md-fg md-hue-2">
<var:if condition="currentTableDay.isToday">
<span class="md-default-theme md-bg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
</var:if>
<var:if condition="currentTableDay.isToday" const:negate="YES">
<span class=""><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
</var:if>
</div>
<md-content
sg-draggable-calendar-block="sg-draggable-calendar-block"
class="clickableDayCell">
<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>
</div>
</md-grid-tile>
</var:foreach>
</md-content>
<sg-calendar-month-event
sg-calendar-ghost="sg-calendar-ghost"
sg-block="list.component.$ghost"><!-- drag ghost --></sg-calendar-month-event>
</sg-calendar-day>
</md-grid-tile>
</var:foreach>
</md-grid-list>
</div>
</md-content>
</container>
</var:foreach>
</md-grid-list>
</div>
</md-content>
</container>
UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
+34 -44
View File
@@ -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>
UI/Templates/SchedulerUI/UIxCalUserRightsEditor.wox
+8 -12
View File
@@ -1,16 +1,12 @@
<?xml version="1.0" standalone="yes"?>
<!DOCTYPE var:component>
<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:uix="OGo:uix"
xmlns:label="OGo:label"
xmlns:rsrc="OGo:url"
className="UIxPageFrame"
title="title"
const:toolbar="none"
const:popup="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:rsrc="OGo:url"
xmlns:label="OGo:label"
xmlns:uix="OGo:uix">
<div layout="column">
<md-input-container>
@@ -74,4 +70,4 @@
</div>
</var:component>
</container>
UI/Templates/SchedulerUI/UIxCalWeekView.wox
+45 -32
View File
@@ -1,34 +1,47 @@
<?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:rsrc="OGo:url"
xmlns:label="OGo:label">
<!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">
<md-content>
<div layout="row" layout-align="center">
<h5>
<md-button
class="sg-icon-button"
label:aria-label="Previous Week"
var:date="prevWeekQueryParameters.day"
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
<var:string value="currentWeekName" />
<md-button
class="sg-icon-button"
label:aria-label="Next Week"
var:date="nextWeekQueryParameters.day"
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
</h5>
</div>
<div id="calendarContent">
<var:component
className="UIxCalDayTable"
startDate="startDate"
const:CSSClass="weekOverview"
const:numberOfDays="7"
const:currentView="weekview"/>
</div>
</md-content>
</container>
<md-toolbar hide-sm="hide-sm">
<div class="md-toolbar-tools">
<md-button class="md-icon-button"
label:aria-label="Previous Week"
var:date="prevWeekQueryParameters.day"
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
<div><var:string value="currentWeekName" /></div>
<md-button class="md-icon-button"
label:aria-label="Next Week"
var:date="nextWeekQueryParameters.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"
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>
<var:component
className="UIxCalDayTable"
startDate="startDate"
const:CSSClass="weekOverview"
const:numberOfDays="7"
const:currentView="weekview"/>
</container>
UI/Templates/SchedulerUI/UIxCalendarFolderLinksTemplate.wox
+3 -3
View File
@@ -8,7 +8,7 @@
>
<md-dialog flex="60" flex-sm="100">
<md-toolbar class="sg-padded">
<md-toolbar>
<md-icon class="material-icons sg-icon-toolbar-bg">link</md-icon>
<div class="md-toolbar-tools">
<div class="pseudo-input-container md-flex">
@@ -21,8 +21,8 @@
</div>
</md-toolbar>
<md-dialog-content>
<div layout="column" layout-padding="layout-padding">
<md-dialog-content class="md-padding">
<div layout="column">
<div layout="column" layout-padding="layout-padding">
<md-input-container ng-show="links.calendar.isWebCalendar">
UI/Templates/SchedulerUI/UIxCalendarProperties.wox
+15 -7
View File
@@ -8,10 +8,10 @@
>
<md-dialog flex-sm="100">
<md-toolbar ng-style="{ 'background-color': properties.calendar.color }">
<div class="md-toolbar-tools sg-padded--right">
<md-toolbar ng-class="properties.calendar.getClassName('bg')">
<div class="md-toolbar-tools">
<!-- color -->
<sg-color-picker sg-on-select="properties.calendar.color = color"><!-- color picker --></sg-color-picker>
<sg-color-picker ng-model="properties.calendar.color"><!-- color picker --></sg-color-picker>
<!-- name -->
<md-input-container>
<label><var:string label:value="Name"/></label>
@@ -25,7 +25,7 @@
</div>
</md-toolbar>
<md-dialog-content>
<md-dialog-content class="md-dialog-content" layout="column">
<md-checkbox
ng-model="properties.calendar.includeInFreeBusy"
ng-true-value="1"
@@ -44,6 +44,14 @@
ng-false-value="0">
<var:string label:value="Show tasks"/>
</md-checkbox>
<md-checkbox
ng-model="properties.calendar.synchronize"
ng-show="!properties.calendar.isWebCalendar"
ng-disabled="properties.calendar.id == 'personal'"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Synchronize"/>
</md-checkbox>
<md-checkbox
ng-model="properties.calendar.reloadOnLogin"
ng-show="properties.calendar.isWebCalendar"
@@ -51,7 +59,7 @@
ng-false-value="0">
<var:string label:value="Reload on login"/>
</md-checkbox>
<div ng-hide="properties.calendar.isWebCalendar || !properties.calendar.isOwned">
<div ng-hide="properties.calendar.isWebCalendar || !properties.calendar.isOwned" layout="column">
<md-divider><!-- divider --></md-divider>
<md-checkbox
ng-model="properties.calendar.notifications.notifyOnPersonalModifications"
@@ -80,10 +88,10 @@
</div>
</md-dialog-content>
<div class="md-actions">
<md-dialog-actions>
<md-button type="button" ng-click="properties.close()"><var:string label:value="Cancel"/></md-button>
<md-button ng-click="properties.saveProperties()"><var:string label:value="Save"/></md-button>
</div>
</md-dialog-actions>
</md-dialog>
</container>
UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
+200 -176
View File
@@ -7,7 +7,7 @@
<md-dialog flex="60" flex-sm="100">
<form name="eventForm" ng-submit="editor.save(eventForm)">
<md-toolbar ng-class="editor.component.getClassName('bg')">
<div class="md-toolbar-tools sg-padded">
<div class="md-toolbar-tools">
<!-- summary -->
<md-icon ng-if="editor.component.classification == 'confidential'">visibility_off</md-icon>
<md-icon ng-if="editor.component.classification == 'private'">vpn_key</md-icon>
@@ -23,130 +23,155 @@
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<!-- location -->
<md-input-container>
<label><var:string label:value="Location"/></label>
<input type="text" ng-model="editor.component.location"/>
</md-input-container>
<!-- categories -->
<md-chips ng-model="editor.component.categories">
<md-autocomplete
md-selected-item="editor.categories.selected"
md-search-text="editor.categories.searchText"
md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
label:placeholder="Add a category">
<span md-highlight-text="editor.categories.searchText">{{category}}</span>
</md-autocomplete>
</md-chips>
<!-- calendar -->
<md-input-container>
<label><var:string label:value="Calendar"/></label>
<md-select ng-model="editor.component.destinationCalendar">
<md-option ng-repeat="calendar in ::editor.calendars"
ng-value="calendar.id">{{calendar.name}}</md-option>
</md-select>
</md-input-container>
<!-- classification -->
<md-radio-group layout="row" layout-align="space-around center"
ng-model="editor.component.classification">
<md-radio-button value="public">
<var:string label:value="label_Public"/>
</md-radio-button>
<md-radio-button value="confidential">
<var:string label:value="label_Confidential"/>
</md-radio-button>
<md-radio-button value="private">
<var:string label:value="label_Private"/>
</md-radio-button>
</md-radio-group>
<!-- priority -->
<div layout="row" layout-align="center center">
<div flex="20"><var:string label:value="Priority"/></div>
<md-slider class="md-flex"
md-discrete="true"
ng-model="editor.component.priority"
step="1"
min="0"
max="9"
label:aria-label="Priority"><!-- slider --></md-slider>
</div>
<!-- is all day -->
<md-checkbox
ng-model="editor.component.isAllDay"
ng-true-value="1"
ng-false-value="0"
label:aria-label="All day Event">
<var:string label:value="All day Event"/>
</md-checkbox>
<!-- start + end -->
<div layout="row">
<md-dialog-content class="md-dialog-content">
<!-- location -->
<md-input-container>
<label><var:string label:value="Start"/></label>
<input type="text" ng-model="editor.component.startDate"/>
<label><var:string label:value="Location"/></label>
<input type="text" ng-model="editor.component.location"/>
</md-input-container>
<!-- categories -->
<md-chips ng-model="editor.component.categories">
<md-autocomplete
md-selected-item="editor.categories.selected"
md-search-text="editor.categories.searchText"
md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
md-min-length="0"
label:placeholder="Add a category">
<span md-highlight-text="editor.categories.searchText">{{category}}</span>
</md-autocomplete>
</md-chips>
<!-- calendar -->
<md-input-container>
<label><var:string label:value="Due"/></label>
<input type="text" ng-model="editor.component.dueDate"/>
</md-input-container>
</div>
<!-- status -->
<div layout="row">
<md-input-container flex="50">
<label><var:string label:value="Status"/></label>
<md-select ng-model="editor.component.status">
<var:foreach list="statusList" item="item">
<md-option var:value="item"><var:string value="itemStatusText"/></md-option>
</var:foreach>
<label><var:string label:value="Calendar"/></label>
<md-select ng-model="editor.component.destinationCalendar">
<md-option ng-repeat="calendar in ::editor.calendars"
ng-value="calendar.id">{{calendar.name}}</md-option>
</md-select>
</md-input-container>
<md-input-container ng-show="editor.component.status == 'completed'">
<label><var:string label:value="status_COMPLETED"/></label>
<input type="text" ng-model="editor.component.completedDate"/>
</md-input-container>
</div>
<div layout="row" layout-align="center center"
ng-show="editor.component.enablePercentComplete()">
<md-slider class="md-flex"
md-discrete="true"
ng-model="editor.component.percentComplete"
step="5"
min="0"
max="100"
label:aria-label="% complete"><!-- slider --></md-slider>
<div flex="30">{{editor.component.percentComplete}} <var:string label:value="% complete"/></div>
</div>
<!-- attach urls -->
<div class="attr" ng-repeat="attach in editor.component.attachUrls">
<div layout="row" layout-align="center end">
<md-input-container>
<label>
<var:string label:value="URL"/>
</label>
<input type="text" ng-model="attach.value"
sg-focus-on="attachUrl_{{$index}}"/>
</md-input-container>
<md-button class="sg-icon-button" type="button" ng-click="editor.component.deleteAttachUrl($index)">
<md-icon>remove_circle</md-icon>
</md-button>
<!-- classification -->
<md-radio-group layout="row" layout-align="space-around center"
ng-model="editor.component.classification">
<md-radio-button value="public">
<var:string label:value="label_Public"/>
</md-radio-button>
<md-radio-button value="confidential">
<var:string label:value="label_Confidential"/>
</md-radio-button>
<md-radio-button value="private">
<var:string label:value="label_Private"/>
</md-radio-button>
</md-radio-group>
<!-- priority -->
<div layout="row" layout-align="center center">
<div flex="20"><var:string label:value="Priority"/></div>
<md-slider class="md-flex"
md-discrete="true"
ng-model="editor.component.priority"
step="1"
min="0"
max="9"
label:aria-label="Priority"><!-- slider --></md-slider>
</div>
</div>
<div class="md-layout-margin" layout="row" layout-align="start center">
<md-button class="sg-icon-button" type="button" ng-click="editor.addAttachUrl($event)">
<md-icon>add_circle</md-icon>
</md-button>
<label class="button-label">
<var:string label:value="Attach"/>
</label>
</div>
<!-- comment -->
<md-input-container>
<label><var:string label:value="Description"/></label>
<textarea ng-model="editor.component.comment"><!-- comment --></textarea>
</md-input-container>
<!-- repeat -->
<div layout="row" layout-align="start end">
<div class="md-flex">
<!-- start -->
<div ng-show="editor.component.start">
<div class="pseudo-input-container">
<label class="pseudo-input-label"><var:string label:value="From"/></label>
</div>
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
<md-datepicker ng-model="editor.component.start"
ng-change="editor.updateStartTime()"
label:md-placeholder="From"> <!-- date picker--></md-datepicker>
<sg-timepicker ng-model="editor.component.start"
ng-change="editor.adjustStartTime()"><!-- time picker --></sg-timepicker>
<md-button class="md-icon-button" type="button" ng-click="editor.component.$deleteStartDate()">
<md-icon>remove_circle</md-icon>
</md-button>
</div>
</div>
<div class="md-layout-margin" layout="row" layout-align="start center" ng-hide="editor.component.start">
<md-button class="md-icon-button" type="button" ng-click="editor.addStartDate()">
<md-icon>add_circle</md-icon>
</md-button>
<label class="button-label"><var:string label:value="Add From"/></label>
</div>
<!-- due -->
<div ng-show="editor.component.due">
<div class="pseudo-input-container">
<label class="pseudo-input-label"><var:string label:value="Due"/></label>
</div>
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
<md-datepicker ng-model="editor.component.due"
ng-change="editor.updateDueTime()"
label:md-placeholder="Due"> <!-- date picker--></md-datepicker>
<sg-timepicker ng-model="editor.component.due"
ng-change="editor.adjustDueTime()"><!-- time picker --></sg-timepicker>
<md-button class="md-icon-button" type="button" ng-click="editor.component.$deleteDueDate()">
<md-icon>remove_circle</md-icon>
</md-button>
</div>
</div>
<div class="md-layout-margin" layout="row" layout-align="start center" ng-hide="editor.component.due">
<md-button class="md-icon-button" type="button" ng-click="editor.addDueDate()">
<md-icon>add_circle</md-icon>
</md-button>
<label class="button-label"><var:string label:value="Add Due"/></label>
</div>
<!-- status -->
<div layout="row">
<md-input-container flex="50">
<label><var:string label:value="Status"/></label>
<md-select ng-model="editor.component.status">
<var:foreach list="statusList" item="item">
<md-option var:value="item"><var:string value="itemStatusText"/></md-option>
</var:foreach>
</md-select>
</md-input-container>
<md-input-container ng-show="editor.component.status == 'completed'">
<label><var:string label:value="status_COMPLETED"/></label>
<input type="text" ng-model="editor.component.completedDate"/>
</md-input-container>
</div>
<div layout="row" layout-align="center center"
ng-show="editor.component.enablePercentComplete()">
<md-slider class="md-flex"
md-discrete="true"
ng-model="editor.component.percentComplete"
step="5"
min="0"
max="100"
label:aria-label="% complete"><!-- slider --></md-slider>
<div flex="30">{{editor.component.percentComplete}} <var:string label:value="% complete"/></div>
</div>
<!-- attach urls -->
<div class="attr" ng-repeat="attach in editor.component.attachUrls">
<div layout="row" layout-align="center end">
<md-input-container>
<label>
<var:string label:value="URL"/>
</label>
<input type="text" ng-model="attach.value"
sg-focus-on="attachUrl_{{$index}}"/>
</md-input-container>
<md-button class="md-icon-button" type="button" ng-click="editor.component.deleteAttachUrl($index)">
<md-icon>remove_circle</md-icon>
</md-button>
</div>
</div>
<div class="md-layout-margin" layout="row" layout-align="start center">
<md-button class="md-icon-button" type="button" ng-click="editor.addAttachUrl($event)">
<md-icon>add_circle</md-icon>
</md-button>
<label class="button-label">
<var:string label:value="Attach"/>
</label>
</div>
<!-- comment -->
<md-input-container>
<label><var:string label:value="Description"/></label>
<textarea ng-model="editor.component.comment"><!-- comment --></textarea>
</md-input-container>
<!-- repeat -->
<div layout="row" layout-align="start end">
<md-input-container>
<label><var:string label:value="Repeat"/></label>
<md-select class="pseudo-input-field" ng-model="editor.component.repeat.frequency">
@@ -155,63 +180,62 @@
</var:foreach>
</md-select>
</md-input-container>
<div class="md-flex"><!-- spacer --></div>
<md-button type="button" class="md-icon-button"
label:aria-label="repeat_CUSTOM"
ng-show="editor.component.repeat.frequency != 'never'"
ng-click="editor.toggleRecurrenceEditor()">
<md-icon ng-class="{'md-rotate-45': editor.showRecurrenceEditor}">add</md-icon>
</md-button>
</div>
<md-button type="button" class="sg-icon-button"
label:aria-label="repeat_CUSTOM"
ng-show="editor.component.repeat.frequency != 'never'"
ng-click="editor.toggleRecurrenceEditor()">
<md-icon ng-class="{'icon-more-horiz': !editor.showRecurrenceEditor,
'icon-clear': editor.showRecurrenceEditor}"><!-- toggle custom rule --></md-icon>
<div ng-show="editor.showRecurrenceEditor" class="sg-subcontent">
<var:component className="UIxRecurrenceEditor" />
</div>
<!-- end repeat -->
<div layout="row" layout-align="start end">
<div ng-show="editor.component.repeat.frequency != 'never'">
<md-input-container>
<label><var:string label:value="End Repeat"/></label>
<md-select class="pseudo-input-field" ng-model="editor.component.repeat.end">
<md-option value="never"><var:string label:value="Never"/></md-option>
<md-option value="count"><var:string label:value="After"/></md-option>
<md-option value="until"><var:string label:value="On Date"/></md-option>
</md-select>
</md-input-container>
</div>
<div layout="row" layout-align="start center" ng-show="editor.component.repeat.end == 'count'">
<md-input-container class="md-input-number">
<input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
</md-input-container>
<var:string label:value="times"/>
</div>
<md-input-container ng-show="editor.component.repeat.end == 'until'">
<input type="date" label:aria-label="Repeat until" ng-model="editor.component.repeat.until"/>
</md-input-container>
</div>
<!-- reminder -->
<md-checkbox ng-model="editor.component.$hasAlarm"
label:aria-label="Reminder">
<var:string label:value="Reminder"/>
</md-checkbox>
<div class="sg-subcontent"
ng-show="editor.component.$hasAlarm">
<var:component className="UIxReminderEditor" />
</div>
</md-dialog-content>
<!-- cancel/reset/save -->
<md-dialog-actions>
<md-button type="button" ng-click="editor.cancel()">
<var:string label:value="Cancel"/>
</md-button>
</div>
<div ng-show="editor.showRecurrenceEditor" class="sg-subcontent">
<var:component className="UIxRecurrenceEditor" />
</div>
<!-- end repeat -->
<div layout="row" layout-align="start end">
<div ng-show="editor.component.repeat.frequency != 'never'">
<md-input-container>
<label><var:string label:value="End Repeat"/></label>
<md-select class="pseudo-input-field" ng-model="editor.component.repeat.end">
<md-option value="never"><var:string label:value="Never"/></md-option>
<md-option value="count"><var:string label:value="After"/></md-option>
<md-option value="until"><var:string label:value="On Date"/></md-option>
</md-select>
</md-input-container>
</div>
<div layout="row" layout-align="start center" ng-show="editor.component.repeat.end == 'count'">
<md-input-container class="md-input-number">
<input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
</md-input-container>
<var:string label:value="times"/>
</div>
<md-input-container ng-show="editor.component.repeat.end == 'until'">
<input type="date" label:aria-label="Repeat until" ng-model="editor.component.repeat.until"/>
</md-input-container>
</div>
<!-- reminder -->
<md-checkbox ng-model="editor.component.$hasAlarm"
label:aria-label="Reminder">
<var:string label:value="Reminder"/>
</md-checkbox>
<div class="sg-subcontent"
ng-show="editor.component.$hasAlarm">
<var:component className="UIxReminderEditor" />
</div>
</md-dialog-content>
<!-- cancel/reset/save -->
<div class="md-actions">
<md-button type="button" ng-click="editor.cancel()">
<var:string label:value="Cancel"/>
</md-button>
<md-button type="button" ng-click="editor.component.$reset()">
<var:string label:value="Reset"/>
</md-button>
<md-button class="md-primary md-hue-3" type="submit"
ng-disabled="editor.eventForm.$invalid">
<var:string label:value="Save"/>
</md-button>
</div>
</form>
</md-dialog>
<md-button type="button" ng-click="editor.component.$reset()">
<var:string label:value="Reset"/>
</md-button>
<md-button class="md-primary md-hue-3" type="submit"
ng-disabled="editor.eventForm.$invalid">
<var:string label:value="Save"/>
</md-button>
</md-dialog-actions>
</form>
</md-dialog>
</container>
UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
+66 -31
View File
@@ -5,7 +5,7 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label">
<md-dialog flex="40" flex-md="60" flex-sm="100">
<md-toolbar class="md-padding" ng-class="editor.component.getClassName('bg')">
<md-toolbar ng-class="editor.component.getClassName('bg')">
<div class="md-toolbar-tools">
<md-icon class="material-icons sg-icon-toolbar-bg">assignment_turned_in</md-icon>
<div class="sg-md-title md-flex">
@@ -13,12 +13,25 @@
<md-icon ng-if="editor.component.classification == 'confidential'">visibility_off</md-icon>
<md-icon ng-if="editor.component.classification == 'private'">vpn_key</md-icon>
<!-- summary -->
{{editor.component.summary}}
{{::editor.component.summary}}
<!-- priority -->
<md-icon ng-repeat="i in editor.component.priority | range">star</md-icon>
<md-icon ng-repeat="i in ::editor.component.priority | range">star</md-icon>
</div>
<md-button class="md-icon-button" ng-click="editor.close()">
<md-icon aria-label="Close dialog">close</md-icon>
<md-menu>
<md-button label:aria-label="More options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
<md-icon>more_vert</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button label:aria-label="View Raw Source"
ng-click="editor.viewRawSource($event)">
<var:string label:value="View Raw Source"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-button class="sg-icon-button" ng-click="editor.close()">
<md-icon label:aria-label="Close">close</md-icon>
</md-button>
</div>
</md-toolbar>
@@ -26,7 +39,7 @@
<md-list>
<!-- categories -->
<md-list-item ng-show="editor.component.categories.length > 0">
<md-chips class="sg-readonly" ng-model="editor.component.categories" readonly="true">
<md-chips class="sg-readonly" ng-model="::editor.component.categories" readonly="true">
<md-chip-template>
<span>{{$chip}}</span>
</md-chip-template>
@@ -35,7 +48,7 @@
<!-- location -->
<md-list-item ng-show="editor.component.location">
<md-icon>place</md-icon>
<p>{{editor.component.location}}</p>
<p>{{::editor.component.location}}</p>
</md-list-item>
<!-- calendar -->
<md-list-item>
@@ -43,23 +56,18 @@
<p>{{editor.component.calendar}}</p>
</md-list-item>
<!-- start/due dates -->
<md-list-item class="md-2-line">
<md-list-item ng-class="{ 'md-2-line': editor.component.isAllDay, 'md-3-line': !editor.component.isAllDay }"
ng-show="editor.component.startDate || editor.component.dueDate">
<md-icon>access_time</md-icon>
<div layout="row" class="md-flex">
<div class="md-list-item-text" ng-show="editor.component.startDate">
<p><var:string label:value="Start"/></p>
<h3>
{{editor.component.localizedStartDate}}
<span ng-hide="editor.component.isAllDay"> {{editor.component.localizedStartTime}}</span>
</h3>
</div>
<div class="md-list-item-text" ng-show="editor.component.dueDate">
<p><var:string label:value="Due Date"/></p>
<h3>
{{editor.component.localizedDueDate}}
<span ng-hide="editor.component.isAllDay">{{editor.component.localizedDueTime}}</span>
</h3>
</div>
<div class="md-list-item-text" ng-show="editor.component.startDate">
<p><var:string label:value="Start"/></p>
<h3>{{::editor.component.localizedStartDate}}</h3>
<h3 ng-hide="editor.component.isAllDay"> {{::editor.component.localizedStartTime}}</h3>
</div>
<div class="md-list-item-text" ng-show="editor.component.dueDate">
<p><var:string label:value="Due Date"/></p>
<h3>{{::editor.component.localizedDueDate}}</h3>
<h3 ng-hide="editor.component.isAllDay">{{::editor.component.localizedDueTime}}</h3>
</div>
</md-list-item>
<!-- status -->
@@ -72,32 +80,59 @@
<p>{{editor.component.percentComplete}} %</p>
</md-list-item>
<!-- attach urls -->
<md-list-item ng-repeat="url in editor.component.attachUrls">
<md-list-item ng-repeat="url in ::editor.component.attachUrls">
<md-icon>link</md-icon>
<p><a ng-href="url.value">{{url.value}}</a></p>
</md-list-item>
<!-- comment -->
<md-list-item ng-show="editor.component.comment">
<md-icon>mode_comment</md-icon>
<p>{{editor.component.comment}}</p>
<p>{{::editor.component.comment}}</p>
</md-list-item>
<!-- repeat -->
<md-list-item ng-show="editor.component.repeat">
<md-list-item ng-show="editor.component.$isRecurrent">
<md-icon>repeat</md-icon>
<p><!-- editor.component.repeat.toString() --></p>
<p>{{editor.component.repeatDescription()}}</p>
</md-list-item>
<!-- reminder -->
<md-list-item ng-show="editor.component.$hasAlarm">
<md-icon>alarm</md-icon>
<p><!-- editor.component.alarm.toString() --></p>
<md-icon>alarm_on</md-icon>
<p>{{editor.component.alarmDescription()}}</p>
</md-list-item>
</md-list>
</md-dialog-content>
<!-- edit -->
<div class="md-actions" ng-show="editor.component.isEditable()">
<md-dialog-actions ng-show="editor.component.isEditable()">
<md-button class="md-warn" label:aria-label="Delete Task"
ng-show="editor.component.isEditable() || editor.component.isInvitation()"
ng-click="editor.deleteAllOccurrences()">
<var:string label:value="Delete"/>
</md-button>
<md-menu ng-show="editor.component.isEditableOccurrence() || editor.component.isInvitationOccurrence()">
<md-button class="md-warn" label:aria-label="Delete Task"
ng-click="$mdOpenMenu()"
md-menu-origin="md-menu-origin">
<var:string label:value="Delete"/><md-icon>arrow_drop_down</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button class="md-warn"
ng-click="editor.deleteOccurrence()">
<var:string label:value="Delete This Occurrence"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button class="md-warn"
ng-click="editor.deleteAllOccurrences()">
<var:string label:value="Delete All Occurrences"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<div class="md-flex"><!-- spacer --></div>
<md-button ng-click="editor.edit()">
<var:string label:value="Edit"/>
</md-button>
</div>
</md-dialog-actions>
</md-dialog>
</container>