From fe6bd70b72c2138fb66649ef76b2aaf941d703b9 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Thu, 17 Dec 2015 13:55:43 -0500
Subject: [PATCH] (html,css) Group settings in event/task editors

---
 .../UIxAppointmentEditorTemplate.wox          | 454 +++++++++---------
 .../SchedulerUI/UIxAttendeesEditor.wox        |   1 +
 .../SchedulerUI/UIxTaskEditorTemplate.wox     | 399 +++++++--------
 .../scss/components/dialog/dialog.scss        |   3 -
 .../scss/core/structure.scss                  |  15 +
 5 files changed, 454 insertions(+), 418 deletions(-)

diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
index cafc6b9aa..1d524ea08 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -11,7 +11,7 @@
           <!-- 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-input-container class="md-flex">
             <label><var:string label:value="Title"/></label>
             <input type="text"
                    class="md-title"
@@ -23,147 +23,152 @@
           </md-button>
         </div>
       </md-toolbar>
-      <md-dialog-content class="md-dialog-content">
-        <div layout="row" layout-wrap="layout-wrap">
-          <!-- location -->
-          <md-input-container flex="50" flex-xs="100">
-            <label><var:string label:value="Location"/></label>
-            <input type="text" ng-model="editor.component.location"/>
-          </md-input-container>
-          <!-- calendar -->
-          <md-input-container flex="50" flex-xs="100">
-            <label><var:string label:value="Calendar"/></label>
-            <md-select ng-model="editor.component.destinationCalendar">
-              <md-option ng-repeat="calendar in editor.service.$findAll(null, true)"
-                         ng-value="calendar.id">{{calendar.name}}</md-option>
-            </md-select>
-          </md-input-container>
-        </div>
-        <!-- 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 class="md-padding" 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 -->
-        <div layout="row">
-        <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>
-        </div>
-        <!-- is transparent -->
-        <div layout="row">
-        <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>
-        </div>
-        <!-- send appointment notifications -->
-        <div layout="row">
-        <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>
-        </div>
-        <!-- 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">
-            <md-input-container class="md-block md-flex">
-              <label>
-                <var:string label:value="URL"/>
-              </label>
-              <input type="text" ng-model="attach.value"
-                     sg-focus-on="attachUrl_{{$index}}"/>
+      <md-dialog-content class="sg-has-form-sections">
+        <div class="sg-form-section">
+          <div layout="row" layout-wrap="layout-wrap">
+            <!-- location -->
+            <md-input-container flex="50" flex-xs="100">
+              <label><var:string label:value="Location"/></label>
+              <input type="text" ng-model="editor.component.location"/>
             </md-input-container>
-            <md-button class="sg-icon-button" type="button" ng-click="editor.component.deleteAttachUrl($index)">
-              <md-icon>remove_circle</md-icon>
+            <!-- calendar -->
+            <md-input-container flex="50" flex-xs="100">
+              <label><var:string label:value="Calendar"/></label>
+              <md-select ng-model="editor.component.destinationCalendar">
+                <md-option ng-repeat="calendar in editor.service.$findAll(null, true)"
+                           ng-value="calendar.id">{{calendar.name}}</md-option>
+              </md-select>
+            </md-input-container>
+          </div>
+          <!-- comment -->
+          <md-input-container class="md-block md-flex">
+            <label><var:string label:value="Description"/></label>
+            <textarea ng-model="editor.component.comment"><!-- comment --></textarea>
+          </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>
+          <div layout="row" layout-align="space-between end" layout-wrap="layout-wrap">
+            <!-- classification -->
+            <md-radio-group class="md-padding" layout="row"
+                            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" flex="50" flex-xs="100">
+              <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>
+          </div>
+          <!-- send appointment notifications -->
+          <md-input-container>
+          <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>
+          </md-input-container>
+          <!-- attach urls -->
+          <div class="attr" ng-repeat="attach in editor.component.attachUrls">
+            <div layout="row" layout-align="start center">
+              <md-input-container class="md-block md-flex">
+                <label>
+                  <var:string label:value="URL"/>
+                </label>
+                <input type="url" 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 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>
         </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 class="sg-form-section">
+          <!-- is all day -->
+          <div layout="row">
+            <md-checkbox flex="50"
+                         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 flex="50"
+                         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>
+          </div>
+          <!-- 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>
         </div>
-        <!-- comment -->
-        <md-input-container class="md-block md-flex">
-          <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">
+        <div class="sg-form-section">
+          <div layout="row" layout-align="start center">
             <md-input-container class="md-block md-flex">
               <label><var:string label:value="Repeat"/></label>
               <md-select ng-model="editor.component.repeat.frequency" ng-disabled="editor.component.occurrenceId">
@@ -172,97 +177,102 @@
                 </var:foreach>
               </md-select>
             </md-input-container>
+            <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 ng-show="editor.showRecurrenceEditor" flex-offset="5">
+            <var:component className="UIxRecurrenceEditor" />
+          </div>
+          <!-- end repeat -->
+          <div layout="row">
+            <md-input-container class="md-block" flex="50" flex-xs="100"
+                                ng-show="editor.component.repeat.frequency != 'never'">
+              <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>
+            <md-input-container class="md-block md-input-number"
+                                ng-show="editor.component.repeat.end == 'count'">
+              <label><var:string label:value="times"/></label>
+              <input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
+            </md-input-container>
+            <md-datepicker ng-show="editor.component.repeat.end == 'until'"
+                           ng-model="editor.component.repeat.until"
+                           label:md-placeholder="On Date"><!-- date picker --></md-datepicker>
           </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 ng-show="editor.showRecurrenceEditor" class="sg-subcontent">
-          <var:component className="UIxRecurrenceEditor" />
-        </div>
-        <!-- end repeat -->
-        <div layout="row">
-          <md-input-container class="md-block" flex="50" flex-xs="100"
-                              ng-show="editor.component.repeat.frequency != 'never'">
-            <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>
-          <md-input-container class="md-block md-input-number"
-                              ng-show="editor.component.repeat.end == 'count'">
-            <label><var:string label:value="times"/></label>
-            <input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
-          </md-input-container>
-          <md-datepicker ng-show="editor.component.repeat.end == 'until'"
-                         ng-model="editor.component.repeat.until"
-                         label:md-placeholder="On Date"><!-- date picker --></md-datepicker>
         </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">
-                <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 class="sg-form-section">
+          <div layout="row" layout-align="start start">
+            <md-icon>search</md-icon>
+            <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>
+          <!-- 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"
+                    ng-model="editor.component.attendees"
+                    ng-hide="editor.showAttendeesEditor"
+                    readonly="true">
+            <md-chip-template>
+              <div class="md-contact-avatar">
+                <sg-avatar-image sg-email="$chip.email" size="32"><!-- avatar --></sg-avatar-image>
               </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 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="attendees">
+            <var:component className="UIxAttendeesEditor" />
+          </div>
         </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"
-                  ng-model="editor.component.attendees"
-                  ng-hide="editor.showAttendeesEditor"
-                  readonly="true">
-          <md-chip-template>
-            <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="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 flex-offset="5"
-             ng-show="editor.component.$hasAlarm">
-          <var:component className="UIxReminderEditor" />
+        <div class="sg-form-section">
+          <!-- reminder -->
+          <md-checkbox ng-model="editor.component.$hasAlarm"
+                       label:aria-label="Reminder">
+            <var:string label:value="Reminder"/>
+          </md-checkbox>
+          <div flex-offset="5"
+               ng-show="editor.component.$hasAlarm">
+            <var:component className="UIxReminderEditor" />
+          </div>
         </div>
       </md-dialog-content>
       <!-- cancel/reset/save -->
diff --git a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
index 4dccaf377..5d28ded3d 100644
--- a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
+++ b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
@@ -55,6 +55,7 @@
             <div class="busy" ng-show="currentAttendee.freebusy[day.getDayString][hour][3]"><!-- 15 minutes --></div>
           </div>
         </div>
+        <md-divider><!-- divider --></md-divider>
       </md-list-item>
     </md-list>
   </md-content>
diff --git a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
index 97f87eebb..8d997bfb5 100644
--- a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
@@ -23,205 +23,218 @@
           </md-button>
         </div>
       </md-toolbar>
-      <md-dialog-content class="md-dialog-content">
-        <div layout="row" layout-wrap="layout-wrap">
-          <!-- location -->
-          <md-input-container flex="50" flex-xs="100">
-            <label><var:string label:value="Location"/></label>
-            <input type="text" ng-model="editor.component.location"/>
-          </md-input-container>
-          <!-- calendar -->
-          <md-input-container flex="50" flex-xs="100">
-            <label><var:string label:value="Calendar"/></label>
-            <md-select ng-model="editor.component.destinationCalendar">
-              <md-option ng-repeat="calendar in editor.service.$findAll(null, true)"
-                         ng-value="calendar.id">{{calendar.name}}</md-option>
-            </md-select>
-          </md-input-container>
-        </div>
-        <!-- 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 class="md-padding" 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>
-        <!-- 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 class="md-block md-flex">
-              <label>
-                <var:string label:value="URL"/>
-              </label>
-              <input type="text" ng-model="attach.value"
-                     sg-focus-on="attachUrl_{{$index}}"/>
+      <md-dialog-content class="sg-has-form-sections">
+        <div class="sg-form-section">
+          <div layout="row" layout-wrap="layout-wrap">
+            <!-- location -->
+            <md-input-container flex="50" flex-xs="100">
+              <label><var:string label:value="Location"/></label>
+              <input type="text" ng-model="editor.component.location"/>
             </md-input-container>
-            <md-button class="md-icon-button" type="button" ng-click="editor.component.deleteAttachUrl($index)">
-              <md-icon>remove_circle</md-icon>
+            <!-- calendar -->
+            <md-input-container flex="50" flex-xs="100">
+              <label><var:string label:value="Calendar"/></label>
+              <md-select ng-model="editor.component.destinationCalendar">
+                <md-option ng-repeat="calendar in editor.service.$findAll(null, true)"
+                           ng-value="calendar.id">{{calendar.name}}</md-option>
+              </md-select>
+            </md-input-container>
+          </div>
+          <!-- comment -->
+          <md-input-container class="md-block md-flex">
+            <label><var:string label:value="Description"/></label>
+            <textarea ng-model="editor.component.comment"><!-- comment --></textarea>
+          </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>
+          <div layout="row" layout-align="space-between end" layout-wrap="layout-wrap">
+            <!-- classification -->
+            <md-radio-group class="md-padding" layout="row"
+                            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" flex="50" flex-xs="100">
+              <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>
+          </div>
+          <!-- attach urls -->
+          <div class="attr" ng-repeat="attach in editor.component.attachUrls">
+            <div layout="row" layout-align="center end">
+              <md-input-container class="md-block md-flex">
+                <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>
         </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 class="sg-form-section">
+          <!-- 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>
         </div>
-        <!-- comment -->
-        <md-input-container class="md-block md-flex">
-          <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 class="md-block md-flex">
-            <label><var:string label:value="Repeat"/></label>
-            <md-select class="pseudo-input-field" ng-model="editor.component.repeat.frequency">
-              <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 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 class="sg-form-section">
+          <!-- repeat -->
+          <div layout="row" layout-align="start end">
+            <md-input-container class="md-block md-flex">
+              <label><var:string label:value="Repeat"/></label>
+              <md-select class="pseudo-input-field" ng-model="editor.component.repeat.frequency">
+                <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 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>
+          <div ng-show="editor.showRecurrenceEditor" flex-offset="5">
+            <var:component className="UIxRecurrenceEditor" />
+          </div>
+          <!-- end repeat -->
+          <div layout="row">
+            <md-input-container class="md-block" flex="50" flex-xs="100"
+                                ng-show="editor.component.repeat.frequency != 'never'">
+              <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>
+            <md-input-container class="md-block md-input-number"
+                                ng-show="editor.component.repeat.end == 'count'">
+              <label><var:string label:value="times"/></label>
+              <input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
+            </md-input-container>
+            <md-datepicker ng-show="editor.component.repeat.end == 'until'"
+                           ng-model="editor.component.repeat.until"
+                           label:md-placeholder="On Date"><!-- date picker --></md-datepicker>
+          </div>
         </div>
-        <div ng-show="editor.showRecurrenceEditor" class="sg-subcontent">
-          <var:component className="UIxRecurrenceEditor" />
-        </div>
-        <!-- end repeat -->
-        <div layout="row">
-          <md-input-container class="md-block" flex="50" flex-xs="100"
-                              ng-show="editor.component.repeat.frequency != 'never'">
-            <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>
-          <md-input-container class="md-block md-input-number"
-                              ng-show="editor.component.repeat.end == 'count'">
-            <label><var:string label:value="times"/></label>
-            <input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
-          </md-input-container>
-          <md-datepicker ng-show="editor.component.repeat.end == 'until'"
-                         ng-model="editor.component.repeat.until"
-                         label:md-placeholder="On Date"><!-- date picker --></md-datepicker>
-        </div>
-        <!-- reminder -->
-        <md-checkbox ng-model="editor.component.$hasAlarm"
-                     label:aria-label="Reminder">
-          <var:string label:value="Reminder"/>
-        </md-checkbox>
-        <div flex-offset="5"
-             ng-show="editor.component.$hasAlarm">
-          <var:component className="UIxReminderEditor" />
+
+        <div class="sg-form-section">
+          <!-- reminder -->
+          <md-checkbox ng-model="editor.component.$hasAlarm"
+                       label:aria-label="Reminder">
+            <var:string label:value="Reminder"/>
+          </md-checkbox>
+          <div flex-offset="5"
+               ng-show="editor.component.$hasAlarm">
+            <var:component className="UIxReminderEditor" />
+          </div>
         </div>
       </md-dialog-content>
       <!-- cancel/reset/save -->
diff --git a/UI/WebServerResources/scss/components/dialog/dialog.scss b/UI/WebServerResources/scss/components/dialog/dialog.scss
index 2a96dcc92..f03da576a 100644
--- a/UI/WebServerResources/scss/components/dialog/dialog.scss
+++ b/UI/WebServerResources/scss/components/dialog/dialog.scss
@@ -8,9 +8,6 @@
   height: 100%;
   border-radius: 0;
   flex-basis: 100%;
-  md-dialog-content {
-    padding: $layout-gutter-width;
-  }
 }
 
 body.popup {
diff --git a/UI/WebServerResources/scss/core/structure.scss b/UI/WebServerResources/scss/core/structure.scss
index c1f020830..ac41b6f66 100644
--- a/UI/WebServerResources/scss/core/structure.scss
+++ b/UI/WebServerResources/scss/core/structure.scss
@@ -24,6 +24,9 @@ html * {
   &--top {
     padding-top: $mg;
   }
+  &--bottom {
+    padding-bottom: $mg;
+  }
 }
 
 .sg-logo {
@@ -41,4 +44,16 @@ html * {
   top: 0;
   bottom: 0;
   width: 3px;
+}
+
+// Group fields of a form
+// See https://www.google.com/design/spec/patterns/settings.html#settings-grouping-settings
+.sg-has-form-sections {
+  background-color: $colorGrey300;
+}
+.sg-form-section {
+  @extend .md-whiteframe-2dp;
+  @extend .md-padding;
+  background-color: white;
+  margin-bottom: $mg/2;
 }
\ No newline at end of file