(feat) first pass at the calendar properties dialog

This commit is contained in:
Ludovic Marcotte
2015-06-15 09:53:10 -04:00
parent e18b61f180
commit b4f9b9095d
5 changed files with 276 additions and 266 deletions
@@ -161,7 +161,7 @@
sg-escape="app.revertEditing(folder)"/>
</md-input-container>
<md-menu class="md-secondary">
<md-menu class="md-secondary" ng-show="app.service.selectedFolder.id==folder.id">
<md-button class="iconButton"
label:aria-label="Options"
ng-click="$mdOpenMenu()">
@@ -231,11 +231,22 @@
sg-enter="app.save(folder)"
sg-escape="app.revertEditing(folder)"/>
</md-input-container>
<md-button class="iconButton md-secondary" label:aria-label="Options"
ng-show="app.service.selectedFolder.id==folder.id"
ng-click="app.confirmDelete(folder)">
<i class="md-icon-more-vert"><!-- options --></i>
</md-button>
<md-menu class="md-secondary" ng-show="app.service.selectedFolder.id==folder.id">
<md-button class="iconButton"
label:aria-label="Options"
ng-click="$mdOpenMenu()">
<i class="md-icon-more-vert" md-menu-origin="md-menu-origin"><!-- options --></i>
</md-button>
<md-menu-content width="2">
<md-menu-item>
<md-button type="button" ng-click="app.confirmDelete(folder)">
<var:string label:value="Delete"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-list-item>
</md-list>
</section>
+64 -8
View File
@@ -204,6 +204,12 @@
<var:string label:value="Sharing..."/>
</md-button>
</md-menu-item>
<md-menu-divider><!-- divider --></md-menu-divider>
<md-menu-item>
<md-button type="button" ng-click="calendars.showProperties(calendar)">
<var:string label:value="Properties"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
@@ -232,10 +238,35 @@
ng-false-value="0"
label:aria-label="Enable"><!-- enable --></md-checkbox>
<p class="sg-item-name">{{calendar.name}}</p>
<md-button class="iconButton md-secondary" label:aria-label="Options"
ng-click="calendars.confirmDelete(calendar)">
<i class="md-icon-more-vert"><!-- options --></i>
</md-button>
<md-menu class="md-secondary">
<md-button class="iconButton"
label:aria-label="Options"
ng-click="$mdOpenMenu()">
<i class="md-icon-more-vert" md-menu-origin="md-menu-origin"><!-- options --></i>
</md-button>
<md-menu-content width="2">
<md-menu-item>
<md-button type="button" ng-click="calendars.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 type="button" ng-click="calendars.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 type="button" ng-click="calendars.showProperties(calendar)">
<var:string label:value="Properties"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-list-item>
</md-list>
</section>
@@ -259,10 +290,35 @@
ng-false-value="0"
label:aria-label="Enable"><!-- enable --></md-checkbox>
<p class="sg-item-name">{{calendar.name}}</p>
<md-button class="iconButton md-secondary" label:aria-label="Options"
ng-click="calendars.confirmDelete(calendar)">
<i class="md-icon-more-vert"><!-- options --></i>
</md-button>
<md-menu class="md-secondary">
<md-button class="iconButton"
label:aria-label="Options"
ng-click="$mdOpenMenu()">
<i class="md-icon-more-vert" md-menu-origin="md-menu-origin"><!-- options --></i>
</md-button>
<md-menu-content width="2">
<md-menu-item>
<md-button type="button" ng-click="calendars.confirmDelete(calendar)">
<var:string label:value="Delete"/>
</md-button>
</md-menu-item>
<md-menu-divider><!-- divider --></md-menu-divider>
<md-menu-item>
<md-button type="button" ng-click="calendars.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 type="button" ng-click="calendars.showProperties(calendar)">
<var:string label:value="Properties"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-list-item>
</md-list>
</section>
+162 -250
View File
@@ -1,253 +1,165 @@
<?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:rsrc="OGo:url"
xmlns:label="OGo:label"
className="UIxPageFrame"
const:toolbar="none"
const:popup="YES"
title="title">
<div id="colorPickerDialog" style="display: none;" class="dialog left">
<div>
<span class="blc-FFFFFF"><!-- --></span>
<span class="blc-330033"><!-- --></span>
<span class="blc-C0C0C0"><!-- --></span>
<span class="blc-999999"><!-- --></span>
<span class="blc-666666"><!-- --></span>
<span class="blc-333333"><!-- --></span>
<span class="blc-000000"><!-- --></span>
<span class="blc-FFCCCC"><!-- --></span>
<span class="blc-FF6666"><!-- --></span>
<span class="blc-FF0000"><!-- --></span>
<span class="blc-CC0000"><!-- --></span>
<span class="blc-990000"><!-- --></span>
<span class="blc-660000"><!-- --></span>
<span class="blc-330000"><!-- --></span>
<span class="blc-FFCC99"><!-- --></span>
<span class="blc-FF9966"><!-- --></span>
<span class="blc-FF9900"><!-- --></span>
<span class="blc-FF6600"><!-- --></span>
<span class="blc-CC6600"><!-- --></span>
<span class="blc-993300"><!-- --></span>
<span class="blc-663300"><!-- --></span>
<span class="blc-FFFF99"><!-- --></span>
<span class="blc-FFFF66"><!-- --></span>
<span class="blc-FFCC66"><!-- --></span>
<span class="blc-FFCC33"><!-- --></span>
<span class="blc-CC9933"><!-- --></span>
<span class="blc-996633"><!-- --></span>
<span class="blc-663333"><!-- --></span>
<span class="blc-FFFFCC"><!-- --></span>
<span class="blc-FFFF33"><!-- --></span>
<span class="blc-FFFF00"><!-- --></span>
<span class="blc-FFCC00"><!-- --></span>
<span class="blc-999900"><!-- --></span>
<span class="blc-666600"><!-- --></span>
<span class="blc-333300"><!-- --></span>
<span class="blc-CCCCCC"><!-- --></span>
<span class="blc-66FF99"><!-- --></span>
<span class="blc-33FF33"><!-- --></span>
<span class="blc-33CC00"><!-- --></span>
<span class="blc-009900"><!-- --></span>
<span class="blc-006600"><!-- --></span>
<span class="blc-003300"><!-- --></span>
<span class="blc-99FFFF"><!-- --></span>
<span class="blc-33FFFF"><!-- --></span>
<span class="blc-66CCCC"><!-- --></span>
<span class="blc-00CCCC"><!-- --></span>
<span class="blc-339999"><!-- --></span>
<span class="blc-336666"><!-- --></span>
<span class="blc-003333"><!-- --></span>
<span class="blc-CCFFFF"><!-- --></span>
<span class="blc-66FFFF"><!-- --></span>
<span class="blc-33CCFF"><!-- --></span>
<span class="blc-3366FF"><!-- --></span>
<span class="blc-3333FF"><!-- --></span>
<span class="blc-000099"><!-- --></span>
<span class="blc-000066"><!-- --></span>
<span class="blc-CCCCFF"><!-- --></span>
<span class="blc-9999FF"><!-- --></span>
<span class="blc-6666CC"><!-- --></span>
<span class="blc-6633FF"><!-- --></span>
<span class="blc-6600CC"><!-- --></span>
<span class="blc-333399"><!-- --></span>
<span class="blc-330099"><!-- --></span>
<span class="blc-FFCCFF"><!-- --></span>
<span class="blc-FF99FF"><!-- --></span>
<span class="blc-CC66CC"><!-- --></span>
<span class="blc-CC33CC"><!-- --></span>
<span class="blc-993399"><!-- --></span>
<span class="blc-663366"><!-- --></span>
<span class="blc-99FF99"><!-- --></span>
</div>
</div>
<form const:href="saveProperties" name="propertiesform" id="propertiesform">
<input type="hidden" const:name="calendarID" const:id="calendarID"
var:value="calendarID"/>
<div class="tabsContainer" id="propertiesTabs">
<ul>
<li target="propertiesView"><span>
<var:string label:value="Properties" /></span></li>
<li target="davLinksView"><span>
<var:string label:value="Links to this Calendar"/></span></li>
</ul>
<div class="tabs">
<div id="propertiesView" class="tab">
<!--<div id="propertiesView">-->
<fieldset>
<legend><var:string label:value="Properties"/></legend>
<div><span class="label"><var:string label:value="Name:"/></span
><span class="content"><input type="text"
name="calendarName" id="calendarName"
class="textField"
var:value="calendarName"
/></span></div>
<div><span class="label"><var:string label:value="Color:"/></span
><span class="content"
><div id="colorButton" class="colorBox" var:color="calendarColor"><!-- space --></div
><input type="hidden" name="calendarColor" id="calendarColor" var:value="calendarColor"
/></span></div>
<div
><label><input type="checkbox" const:class="checkBox"
name="includeInFreeBusy"
id="includeInFreeBusy"
var:checked="includeInFreeBusy"
/><var:string label:value="Include in free-busy"
/></label
></div>
</fieldset>
<fieldset>
<legend><var:string label:value="Synchronization"/></legend>
<div><label
><input type="checkbox" const:class="checkBox"
name="synchronizeCalendar"
id="synchronizeCalendar"
var:checked="synchronizeCalendar"
var:disabled="mustSynchronize"
/><var:string label:value="Synchronize"
/></label></div>
<var:if condition="mustSynchronize" const:negate="YES"
><div><span class="label"><var:string
label:value="Tag:"/></span
><span class="content"><input type="text"
name="calendarSyncTag"
id="calendarSyncTag"
class="textField"
var:value="calendarSyncTag"
/></span
><var:if condition="synchronizeCalendar"><input type="hidden"
name="originalCalendarSyncTag"
id="originalCalendarSyncTag"
var:value="originalCalendarSyncTag"
/></var:if><input type="hidden"
name="allCalendarSyncTags"
id="allCalendarSyncTags"
var:value="allCalendarSyncTags"
/></div></var:if>
</fieldset>
<fieldset>
<legend><var:string label:value="Display"/></legend>
<div><label
><input type="checkbox" const:class="checkBox"
id="showCalendarAlarms" var:checked="showCalendarAlarms"
/><var:string label:value="Show alarms"/></label></div>
<div><label
><input type="checkbox" const:class="checkBox"
id="showCalendarTasks" var:checked="showCalendarTasks"
/><var:string label:value="Show tasks"
/></label></div>
<var:if condition="isWebCalendar"
><div><label
><input type="checkbox" const:class="checkBox"
id="reloadOnLogin" var:checked="reloadOnLogin"
/><var:string label:value="Reload on login"
/></label></div></var:if>
</fieldset>
<var:if condition="isWebCalendar" const:negate="YES">
<var:if condition="calendar.activeUserIsOwner">
<fieldset>
<legend><var:string label:value="Notifications"/></legend>
<div><label
><input type="checkbox" const:class="checkBox"
id="notifyOnPersonalModifications" var:checked="notifyOnPersonalModifications"
/><var:string label:value="Receive a mail when I modify my calendar"/></label></div>
<div><label
><input type="checkbox" const:class="checkBox"
id="notifyOnExternalModifications" var:checked="notifyOnExternalModifications"
/><var:string label:value="Receive a mail when someone else modifies my calendar"
/></label></div>
<div><label
><input type="checkbox" const:class="checkBox"
id="notifyUserOnPersonalModifications" var:checked="notifyUserOnPersonalModifications"
/><var:string label:value="When I modify my calendar, send a mail to:"
/></label></div>
<div><span class="label"
><entity name="nbsp"/></span><span class="content">
<input type="text" name="notifiedUserOnPersonalModifications" id="notifiedUserOnPersonalModifications"
class="textField"
var:value="notifiedUserOnPersonalModifications"
/></span></div>
</fieldset>
</var:if>
</var:if>
</div>
<div id="davLinksView" class="tab">
<var:if condition="isWebCalendar">
<fieldset id="webCalendarUrl">
<legend><var:string label:value="URL:"/></legend>
<div><a const:class="clickableLink" var:href="webCalendarURL" var:title="webCalendarURL"
target="_new"><var:string var:value="webCalendarURL"/></a></div>
</fieldset>
</var:if>
<var:if condition="isWebCalendar" const:negate="YES">
<fieldset id="authenticatedLinks">
<legend><var:string label:value="Authenticated User Access"/></legend>
<div>
<span>
<var:string label:value="CalDAV URL: "/>
<var:string value="calDavURL" />
</span><br/>
<a const:class="clickableLink" var:href="webDavICSURL" var:title="webDavICSURL">
<var:string label:value="WebDAV ICS URL"/></a><br/>
<a const:class="clickableLink" var:href="webDavXMLURL" var:title="webDavXMLURL">
<var:string label:value="WebDAV XML URL"/></a></div>
</fieldset>
<var:if condition="isPublicAccessEnabled">
<fieldset id="publicLinks">
<legend><var:string label:value="Public Access"/></legend>
<div>
<span>
<var:string label:value="CalDAV URL: "/>
<var:string value="publicCalDavURL"/>
</span><br/>
<a const:class="clickableLink" var:href="publicWebDavICSURL" var:title="publicWebDavICSURL">
<var:string label:value="WebDAV ICS URL"/></a><br/>
<a const:class="clickableLink" var:href="publicWebDavXMLURL" var:title="publicWebDavXMLURL">
<var:string label:value="WebDAV XML URL"/></a></div>
</fieldset>
</var:if>
</var:if>
<?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:label="OGo:label"
>
<md-dialog>
<md-dialog-content>
<div id="colorPickerDialog" style="display: none;" class="dialog left">
<div>
<span class="blc-FFFFFF"><!-- --></span>
<span class="blc-330033"><!-- --></span>
<span class="blc-C0C0C0"><!-- --></span>
<span class="blc-999999"><!-- --></span>
<span class="blc-666666"><!-- --></span>
<span class="blc-333333"><!-- --></span>
<span class="blc-000000"><!-- --></span>
<span class="blc-FFCCCC"><!-- --></span>
<span class="blc-FF6666"><!-- --></span>
<span class="blc-FF0000"><!-- --></span>
<span class="blc-CC0000"><!-- --></span>
<span class="blc-990000"><!-- --></span>
<span class="blc-660000"><!-- --></span>
<span class="blc-330000"><!-- --></span>
<span class="blc-FFCC99"><!-- --></span>
<span class="blc-FF9966"><!-- --></span>
<span class="blc-FF9900"><!-- --></span>
<span class="blc-FF6600"><!-- --></span>
<span class="blc-CC6600"><!-- --></span>
<span class="blc-993300"><!-- --></span>
<span class="blc-663300"><!-- --></span>
<span class="blc-FFFF99"><!-- --></span>
<span class="blc-FFFF66"><!-- --></span>
<span class="blc-FFCC66"><!-- --></span>
<span class="blc-FFCC33"><!-- --></span>
<span class="blc-CC9933"><!-- --></span>
<span class="blc-996633"><!-- --></span>
<span class="blc-663333"><!-- --></span>
<span class="blc-FFFFCC"><!-- --></span>
<span class="blc-FFFF33"><!-- --></span>
<span class="blc-FFFF00"><!-- --></span>
<span class="blc-FFCC00"><!-- --></span>
<span class="blc-999900"><!-- --></span>
<span class="blc-666600"><!-- --></span>
<span class="blc-333300"><!-- --></span>
<span class="blc-CCCCCC"><!-- --></span>
<span class="blc-66FF99"><!-- --></span>
<span class="blc-33FF33"><!-- --></span>
<span class="blc-33CC00"><!-- --></span>
<span class="blc-009900"><!-- --></span>
<span class="blc-006600"><!-- --></span>
<span class="blc-003300"><!-- --></span>
<span class="blc-99FFFF"><!-- --></span>
<span class="blc-33FFFF"><!-- --></span>
<span class="blc-66CCCC"><!-- --></span>
<span class="blc-00CCCC"><!-- --></span>
<span class="blc-339999"><!-- --></span>
<span class="blc-336666"><!-- --></span>
<span class="blc-003333"><!-- --></span>
<span class="blc-CCFFFF"><!-- --></span>
<span class="blc-66FFFF"><!-- --></span>
<span class="blc-33CCFF"><!-- --></span>
<span class="blc-3366FF"><!-- --></span>
<span class="blc-3333FF"><!-- --></span>
<span class="blc-000099"><!-- --></span>
<span class="blc-000066"><!-- --></span>
<span class="blc-CCCCFF"><!-- --></span>
<span class="blc-9999FF"><!-- --></span>
<span class="blc-6666CC"><!-- --></span>
<span class="blc-6633FF"><!-- --></span>
<span class="blc-6600CC"><!-- --></span>
<span class="blc-333399"><!-- --></span>
<span class="blc-330099"><!-- --></span>
<span class="blc-FFCCFF"><!-- --></span>
<span class="blc-FF99FF"><!-- --></span>
<span class="blc-CC66CC"><!-- --></span>
<span class="blc-CC33CC"><!-- --></span>
<span class="blc-993399"><!-- --></span>
<span class="blc-663366"><!-- --></span>
<span class="blc-99FF99"><!-- --></span>
</div>
</div>
<h2 class="md-headline"><var:string label:value="Properties"/> - {{properties.calendar.name}}</h2>
<md-input-container>
<label><var:string label:value="Name:"/></label>
<input ng-model="properties.calendar.name"/>
</md-input-container>
<span>
<var:string label:value="Color:"/>
<input type="color" value="{{properties.calendar.color}}"/>
</span>
<md-checkbox
ng-model="properties.calendar.includeInFreeBusy"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Include in free-busy"/>
</md-checkbox>
<md-checkbox
ng-model="properties.calendar.showCalendarAlarms"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Show alarms"/>
</md-checkbox>
<md-checkbox
ng-model="properties.calendar.showCalendarTasks"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Show tasks"/>
</md-checkbox>
<md-checkbox
ng-model="properties.calendar.reloadOnLogin"
ng-show="properties.calendar.isWebCalendar"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Reload on login"/>
</md-checkbox>
<div ng-hide="properties.calendar.isWebCalendar || !properties.calendar.isOwned">
<md-checkbox
ng-model="properties.calendar.notifyOnPersonalModifications"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Receive a mail when I modify my calendar"/>
</md-checkbox>
<md-checkbox
ng-model="properties.calendar.notifyOnExternalModifications"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Receive a mail when someone else modifies my calendar"/>
</md-checkbox>
<md-checkbox
ng-model="properties.calendar.notifyUserOnPersonalModifications"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="When I modify my calendar, send a mail to"/>
</md-checkbox>
<input type="text"
ng-value="properties.calendar.notifiedUserOnPersonalModifications"
ng-disabled="!properties.calendar.notifyUserOnPersonalModifications"/>
</div>
<div class="md-actions">
<md-button ng-click="properties.close()"><var:string label:value="Cancel"/></md-button>
<md-button class="md-primitive" ng-click="properties.saveProperties()"><var:string label:value="Save"/></md-button>
</div>
<div id="buttons">
<a href="#" class="button actionButton" id="okButton"
name="okButton">
<span><var:string label:value="OK"/></span></a>
<a href="#" class="button" id="cancelButton" name="cancelButton">
<span><var:string label:value="Cancel"/></span></a>
</div>
</div>
</form>
</var:component>
</md-dialog-content>
</md-dialog>
</container>
@@ -125,7 +125,7 @@
*/
LinksDialogController.$inject = ['scope', '$mdDialog'];
function LinksDialogController(scope, $mdDialog) {
scope.close = function(type) {
scope.close = function() {
$mdDialog.hide();
}
}
@@ -17,6 +17,7 @@
vm.confirmDelete = confirmDelete;
vm.share = share;
vm.showLinks = showLinks;
vm.showProperties = showProperties;
vm.subscribeToFolder = subscribeToFolder;
// Dispatch the event named 'calendars:list' when a calendar is activated or deactivated or
@@ -108,9 +109,39 @@
*/
LinksDialogController.$inject = ['scope', '$mdDialog'];
function LinksDialogController(scope, $mdDialog) {
scope.close = function(type) {
scope.close = function() {
$mdDialog.hide();
};
}
}
function showProperties(calendar) {
$mdDialog.show({
templateUrl: calendar.id + '/properties',
controller: PropertiesDialogController,
controllerAs: 'properties',
clickOutsideToClose: true,
escapeToClose: true,
locals: {
calendar: calendar
}
});
/**
* @ngInject
*/
PropertiesDialogController.$inject = ['$mdDialog', 'calendar'];
function PropertiesDialogController($mdDialog, calendar) {
var vm = this;
vm.calendar = calendar;
vm.close = function() {
$mdDialog.hide();
};
vm.saveProperties = function() {
vm.calendar.$save();
};
}
}