(html) Improve/fix appointment/task viewer/editor

UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox

@@ -6,15 +6,15 @@
     xmlns:label="OGo:label">
   <md-dialog flex="60">
     <form name="eventForm" ng-submit="editor.save(eventForm)">
-      <md-toolbar class="md-padding" ng-class="editor.component.getClassName('bg')">
+      <md-toolbar class="sg-padded" ng-class="editor.component.getClassName('bg')">
         <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>
-          <md-input-container md-no-float="true">
+          <md-input-container>
+            <label><var:string label:value="Title"/></label>
             <input type="text"
                    class="md-title"
-                   label:placeholder="Title"
                    ng-model="editor.component.summary"/>
           </md-input-container>
           <md-button class="md-icon-button" ng-click="editor.cancel()">
@@ -22,15 +22,20 @@
           </md-button>
         </div>
       </md-toolbar>
-      <!--<md-chips>
-          <md-chip ng-repeat="category in editor.component.categories">{{category}}</md-chip>
-        </md-chips>-->
     <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
@@ -41,14 +46,6 @@
           <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">
@@ -63,8 +60,8 @@
         </md-radio-button>
       </md-radio-group>
       <!-- priority -->
-      <div layout="row" layout-align="center center">
-        <div flex="20"><var:string label:value="Priority"/></div>
+      <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"
@@ -188,7 +185,7 @@
                          md-search-text="editor.searchText"
                          md-selected-item-change="editor.addAttendee(card)"
                          md-items="card in editor.cardFilter(editor.searchText)"
-                         md-item-text="user.empty"
+                         md-item-text="card.empty"
                          md-min-length="3"
                          md-delay="300"
                          md-no-cache="true"

UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox

@@ -144,7 +144,7 @@
               class="md-flex"
               md-input-name="delegatedTo"
               md-search-text="editor.component.delegatedTo"
-              md-selected-item="editor.cardToAdd"
+              md-selected-item="cardToAdd"
               md-items="card in editor.cardFilter(editor.component.delegatedTo)"
               md-item-text="card.$$email"
               md-min-length="3"

UI/Templates/SchedulerUI/UIxReminderEditor.wox

@@ -4,7 +4,7 @@
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
-  <div layout="row" layout-align="start center">
+  <div layout="row" layout-align="start center" layout-wrap="layout-wrap">
     <md-input-container class="md-input-number">
       <input type="number" label:aria-label="quantity" ng-model="editor.component.alarm.quantity"/>
     </md-input-container>

UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox

@@ -6,15 +6,15 @@
     xmlns:label="OGo:label">
   <md-dialog flex="60">
     <form name="eventForm" ng-submit="editor.save(eventForm)">
-      <md-toolbar class="md-padding" ng-class="editor.component.getClassName('bg')">
-        <div class="md-toolbar-tools">
+      <md-toolbar ng-class="editor.component.getClassName('bg')">
+        <div class="md-toolbar-tools sg-padded">
           <!-- 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>
-          <md-input-container md-no-float="true">
+          <md-input-container>
+            <label><var:string label:value="Title"/></label>
             <input type="text"
                    class="md-title"
-                   label:placeholder="Title"
                    ng-model="editor.component.summary"/>
           </md-input-container>
           <md-button class="md-icon-button" ng-click="editor.cancel()">

UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox

@@ -5,19 +5,19 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
   <md-dialog flex="40">
-    <md-toolbar class="md-padding" ng-class="viewer.component.getClassName('bg')">
+    <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">assignment_turned_in</md-icon>
         <h2 class="md-flex">
           <!-- classification -->
-          <md-icon ng-if="viewer.component.classification == 'confidential'">visibility_off</md-icon>
-          <md-icon ng-if="viewer.component.classification == 'private'">vpn_key</md-icon>
+          <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 -->
-          {{viewer.component.summary}}
+          {{editor.component.summary}}
           <!-- priority -->
-          <md-icon ng-repeat="i in viewer.component.priority | range">star</md-icon>
+          <md-icon ng-repeat="i in editor.component.priority | range">star</md-icon>
         </h2>
-        <md-button class="md-icon-button" ng-click="viewer.close()">
+        <md-button class="md-icon-button" ng-click="editor.close()">
           <md-icon aria-label="Close dialog">close</md-icon>
         </md-button>
       </div>
@@ -25,77 +25,77 @@
     <md-dialog-content>
       <md-list>
         <!-- categories -->
-        <md-list-item ng-show="viewer.component.categories.length > 0">
-          <md-chips ng-model="viewer.component.categories" readonly="true">
+        <md-list-item ng-show="editor.component.categories.length > 0">
+          <md-chips class="sg-readonly" ng-model="editor.component.categories" readonly="true">
             <md-chip-template>
               <span>{{$chip}}</span>
             </md-chip-template>
           </md-chips>
         </md-list-item>
         <!-- location -->
-        <md-list-item ng-show="viewer.component.location">
+        <md-list-item ng-show="editor.component.location">
           <md-icon>place</md-icon>
-          <p>{{viewer.component.location}}</p>
+          <p>{{editor.component.location}}</p>
         </md-list-item>
         <!-- calendar -->
         <md-list-item>
           <md-icon>event</md-icon>
-          <p>{{viewer.component.calendar}}</p>
+          <p>{{editor.component.calendar}}</p>
         </md-list-item>
         <!-- start/due dates -->
         <md-list-item class="md-2-line">
           <md-icon>access_time</md-icon>
           <div layout="row" class="md-flex">
-            <div class="md-list-item-text" ng-show="viewer.component.startDate">
+            <div class="md-list-item-text" ng-show="editor.component.startDate">
               <p><var:string label:value="Start"/></p>
               <h3>
-                {{viewer.component.localizedStartDate}}
-                <span ng-hide="viewer.component.isAllDay"> {{viewer.component.localizedStartTime}}</span>
+                {{editor.component.localizedStartDate}}
+                <span ng-hide="editor.component.isAllDay"> {{editor.component.localizedStartTime}}</span>
               </h3>
             </div>
-            <div class="md-list-item-text" ng-show="viewer.component.dueDate">
+            <div class="md-list-item-text" ng-show="editor.component.dueDate">
               <p><var:string label:value="Due Date"/></p>
               <h3>
-                {{viewer.component.localizedDueDate}}
-                <span ng-hide="viewer.component.isAllDay">{{viewer.component.localizedDueTime}}</span>
+                {{editor.component.localizedDueDate}}
+                <span ng-hide="editor.component.isAllDay">{{editor.component.localizedDueTime}}</span>
               </h3>
             </div>
           </div>
         </md-list-item>
         <!-- status -->
-        <md-list-item ng-show="viewer.component.status == 'completed'">
+        <md-list-item ng-show="editor.component.status == 'completed'">
           <md-icon>check</md-icon>
-          <p>{{viewer.component.localizedCompletedDate}} {{viewer.component.localizedCompletedTime}}</p>
+          <p>{{editor.component.localizedCompletedDate}} {{editor.component.localizedCompletedTime}}</p>
         </md-list-item>
-        <md-list-item ng-show="viewer.component.enablePercentComplete()">
+        <md-list-item ng-show="editor.component.enablePercentComplete()">
           <md-icon>call_made</md-icon>
-          <p>{{viewer.component.percentComplete}} %</p>
+          <p>{{editor.component.percentComplete}} %</p>
         </md-list-item>
         <!-- attach urls -->
-        <md-list-item ng-show="viewer.component.attachUrls.length > 0">
+        <md-list-item  ng-repeat="url in editor.component.attachUrls">
           <md-icon>link</md-icon>
-          <p ng-repeat="url in viewer.component.attachUrls"><a ng-href="url.value">{{url.value}}</a></p>
+          <p><a ng-href="url.value">{{url.value}}</a></p>
         </md-list-item>
         <!-- comment -->
-        <md-list-item ng-show="viewer.component.comment">
+        <md-list-item ng-show="editor.component.comment">
           <md-icon>mode_comment</md-icon>
-          <p>{{viewer.component.comment}}</p>
+          <p>{{editor.component.comment}}</p>
         </md-list-item>
         <!-- repeat -->
-        <md-list-item ng-show="viewer.component.repeat">
+        <md-list-item ng-show="editor.component.repeat">
           <md-icon>repeat</md-icon>
-          <p><!-- viewer.component.repeat.toString() --></p>
+          <p><!-- editor.component.repeat.toString() --></p>
         </md-list-item>
         <!-- reminder -->
-        <md-list-item ng-show="viewer.component.$hasAlarm">
+        <md-list-item ng-show="editor.component.$hasAlarm">
           <md-icon>alarm</md-icon>
-          <p><!-- viewer.component.alarm.toString() --></p>
+          <p><!-- editor.component.alarm.toString() --></p>
         </md-list-item>
       </md-list>
     </md-dialog-content>
     <!-- edit -->
     <div class="md-actions">
-      <md-button ng-click="viewer.edit()">
+      <md-button ng-click="editor.edit()">
         <var:string label:value="Edit"/>
       </md-button>
     </div>