From 1c689719acdd794bcbd93dba43a071e2b1f943b8 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 1 Nov 2016 12:09:08 -0400
Subject: [PATCH] (html) Add missing options to subscribed calendars

Fixes #3863
---
 NEWS                                        |   1 +
 UI/Templates/SchedulerUI/UIxCalMainView.wox | 659 ++++++++++----------
 2 files changed, 336 insertions(+), 324 deletions(-)

diff --git a/NEWS b/NEWS
index 02b8b52a0..4ebb81e11 100644
--- a/NEWS
+++ b/NEWS
@@ -22,6 +22,7 @@ Bug fixes
  - [web] improved validation of mail account delegators
  - [web] fixed auto-completion of list members (#3870)
  - [web] added missing options to subscribed addressbooks (#3850)
+ - [web] added missing options to subscribed calendars (#3863)
  - [web] fixed resource conflict error handling (403 vs 409 HTTP code)
  - [web] restored immediate deletion of messages (without moving them to the trash)
  - [eas] improve handling of email folders without a parent
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index ceacba57c..5587df286 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -25,12 +25,12 @@
   <script type="text/ng-template" id="UIxCalMainView">
     <!-- calendars colors -->
     <sg-folder-stylesheet
-         ng-repeat="calendar in app.service.$findAll()"
-         ng-model="calendar"><!-- stylesheet --></sg-folder-stylesheet>
+        ng-repeat="calendar in app.service.$findAll()"
+        ng-model="calendar"><!-- stylesheet --></sg-folder-stylesheet>
     <!-- categories colors -->
     <sg-category-stylesheet
-         ng-repeat="category in app.categories"
-         ng-model="category"><!-- stylesheet --></sg-category-stylesheet>
+        ng-repeat="category in app.categories"
+        ng-model="category"><!-- stylesheet --></sg-category-stylesheet>
     <!-- Sidenav -->
     <md-sidenav class="md-sidenav-left md-whiteframe-z1" layout="column"
                 md-component-id="left" md-is-locked-open="isGtMedium"
@@ -190,11 +190,22 @@
               </md-button>
               <md-menu class="md-secondary sg-list-sortable-hide" label:aria-label="Options">
                 <md-button class="md-icon-button" label:aria-label="Options"
-                         ng-click="$mdOpenMenu()"
-                         md-menu-origin="md-menu-origin">
+                           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="app.showOnly(calendar)">
+                      <var:string label:value="Show Only This Calendar"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item>
+                    <md-button ng-click="app.showAll()">
+                      <var:string label:value="Show All Calendars"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-divider><!-- divider --></md-menu-divider>
                   <md-menu-item>
                     <md-button ng-click="app.showProperties(calendar)">
                       <var:string label:value="Properties"/>
@@ -342,335 +353,335 @@
       </md-toolbar>
       <div layout="row" class="md-flex">
 
-      <div class="view-list" layout="column">
-        <md-toolbar class="md-accent md-hue-1" flex-none="flex-none"
-                    ng-hide="list.mode.multiple">
-          <!-- sort/filter mode (default) -->
-          <div class="md-toolbar-tools" layout="row" ng-hide="list.mode.search">
-            <md-button class="sg-icon-button" label:aria-label="Search"
-                       ng-click="list.searchMode()">
-              <md-icon>search</md-icon>
-            </md-button>
-            <div class="md-flex"><!-- spacer --></div>
-            <md-menu>
-              <md-button class="sg-icon-button" label:aria-label="Filter"
-                         ng-click="$mdOpenMenu()">
-                <md-icon>filter_list</md-icon>
+        <div class="view-list" layout="column">
+          <md-toolbar class="md-accent md-hue-1" flex-none="flex-none"
+                      ng-hide="list.mode.multiple">
+            <!-- sort/filter mode (default) -->
+            <div class="md-toolbar-tools" layout="row" ng-hide="list.mode.search">
+              <md-button class="sg-icon-button" label:aria-label="Search"
+                         ng-click="list.searchMode()">
+                <md-icon>search</md-icon>
               </md-button>
-              <md-menu-content width="4">
-                <md-menu-item>
-                  <md-button ng-click="list.filter('view_all')">
-                    <md-icon ng-class="{ 'icon-check': list.filteredBy('view_all') }">
-                      <!-- selected --></md-icon> <var:string label:value="view_all"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="list.filter('view_today')">
-                    <md-icon ng-class="{ 'icon-check': list.filteredBy('view_today') }">
-                      <!-- selected --></md-icon> <var:string label:value="view_today"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="list.filter('view_next7')">
-                    <md-icon ng-class="{ 'icon-check': list.filteredBy('view_next7') }">
-                      <!-- selected --></md-icon> <var:string label:value="view_next7"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="list.filter('view_next14')">
-                    <md-icon ng-class="{ 'icon-check': list.filteredBy('view_next14') }">
-                      <!-- selected --></md-icon> <var:string label:value="view_next14"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="list.filter('view_next31')">
-                    <md-icon ng-class="{ 'icon-check': list.filteredBy('view_next31') }">
-                      <!-- selected --></md-icon><var:string label:value="view_next31"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="list.filter('view_thismonth')">
-                    <md-icon ng-class="{ 'icon-check': list.filteredBy('view_thismonth') }">
-                      <!-- selected --></md-icon><var:string label:value="view_thismonth"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item ng-if="list.componentType == 'events'">
-                  <md-button ng-click="list.filter('view_future')">
-                    <md-icon ng-class="{ 'icon-check': list.component.$queryEvents.filterpopup == 'view_future' }">
-                      <!-- selected --></md-icon> <var:string label:value="view_future"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item ng-if="list.componentType == 'events'">
-                  <md-button ng-click="list.filter('view_selectedday')">
-                    <md-icon ng-class="{ 'icon-check': list.component.$queryEvents.filterpopup == 'view_selectedday' }">
-                      <!-- selected --></md-icon> <var:string label:value="view_selectedday"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item ng-if="list.componentType == 'tasks'">
-                  <md-button ng-click="list.filter('view_not_started')">
-                    <md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_not_started' }">
-                      <!-- selected --></md-icon> <var:string label:value="view_not_started"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item ng-if="list.componentType == 'tasks'">
-                  <md-button ng-click="list.filter('view_overdue')">
-                    <md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_overdue' }">
-                      <!-- selected --></md-icon> <var:string label:value="view_overdue"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item ng-if="list.componentType == 'tasks'">
-                  <md-button ng-click="list.filter('view_incomplete')">
-                    <md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_incomplete' }">
-                      <!-- selected --></md-icon> <var:string label:value="view_incomplete"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-divider ng-if="list.componentType == 'tasks'"><!-- divider --></md-menu-divider>
-                <md-menu-item ng-if="list.componentType == 'tasks'">
-                  <sg-checkmark
-                      ng-change="list.component.$filter(list.componentType)"
-                      ng-model="list.component.$queryTasks.show_completed"
-                      sg-true-value="1"
-                      sg-false-value="0"> <var:string label:value="Show completed tasks"/></sg-checkmark>
-                </md-menu-item>
-              </md-menu-content>
-            </md-menu>
-            <md-menu>
-              <md-button class="sg-icon-button" label:aria-label="Sort"
-                         ng-click="$mdOpenMenu()">
-                <md-icon>sort</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>
+                <md-menu-content width="4">
+                  <md-menu-item>
+                    <md-button ng-click="list.filter('view_all')">
+                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_all') }">
+                        <!-- selected --></md-icon> <var:string label:value="view_all"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item>
+                    <md-button ng-click="list.filter('view_today')">
+                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_today') }">
+                        <!-- selected --></md-icon> <var:string label:value="view_today"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item>
+                    <md-button ng-click="list.filter('view_next7')">
+                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_next7') }">
+                        <!-- selected --></md-icon> <var:string label:value="view_next7"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item>
+                    <md-button ng-click="list.filter('view_next14')">
+                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_next14') }">
+                        <!-- selected --></md-icon> <var:string label:value="view_next14"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item>
+                    <md-button ng-click="list.filter('view_next31')">
+                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_next31') }">
+                        <!-- selected --></md-icon><var:string label:value="view_next31"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item>
+                    <md-button ng-click="list.filter('view_thismonth')">
+                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_thismonth') }">
+                        <!-- selected --></md-icon><var:string label:value="view_thismonth"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item ng-if="list.componentType == 'events'">
+                    <md-button ng-click="list.filter('view_future')">
+                      <md-icon ng-class="{ 'icon-check': list.component.$queryEvents.filterpopup == 'view_future' }">
+                        <!-- selected --></md-icon> <var:string label:value="view_future"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item ng-if="list.componentType == 'events'">
+                    <md-button ng-click="list.filter('view_selectedday')">
+                      <md-icon ng-class="{ 'icon-check': list.component.$queryEvents.filterpopup == 'view_selectedday' }">
+                        <!-- selected --></md-icon> <var:string label:value="view_selectedday"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item ng-if="list.componentType == 'tasks'">
+                    <md-button ng-click="list.filter('view_not_started')">
+                      <md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_not_started' }">
+                        <!-- selected --></md-icon> <var:string label:value="view_not_started"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item ng-if="list.componentType == 'tasks'">
+                    <md-button ng-click="list.filter('view_overdue')">
+                      <md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_overdue' }">
+                        <!-- selected --></md-icon> <var:string label:value="view_overdue"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item ng-if="list.componentType == 'tasks'">
+                    <md-button ng-click="list.filter('view_incomplete')">
+                      <md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_incomplete' }">
+                        <!-- selected --></md-icon> <var:string label:value="view_incomplete"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-divider ng-if="list.componentType == 'tasks'"><!-- divider --></md-menu-divider>
+                  <md-menu-item ng-if="list.componentType == 'tasks'">
+                    <sg-checkmark
+                        ng-change="list.component.$filter(list.componentType)"
+                        ng-model="list.component.$queryTasks.show_completed"
+                        sg-true-value="1"
+                        sg-false-value="0"> <var:string label:value="Show completed tasks"/></sg-checkmark>
+                  </md-menu-item>
+                </md-menu-content>
+              </md-menu>
+              <md-menu>
+                <md-button class="sg-icon-button" label:aria-label="Sort"
+                           ng-click="$mdOpenMenu()">
+                  <md-icon>sort</md-icon>
+                </md-button>
+                <md-menu-content width="4">
+                  <md-menu-item>
+                    <md-button ng-click="list.sort('title')">
+                      <md-icon ng-class="{ 'icon-check': list.sortedBy('title') }">
+                        <!-- selected --></md-icon> <var:string label:value="Title"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item>
+                    <md-button ng-click="list.sort('location')">
+                      <md-icon ng-class="{ 'icon-check': list.sortedBy('location') }">
+                        <!-- selected --></md-icon> <var:string label:value="Location"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item>
+                    <md-button ng-click="list.sort('calendarName')">
+                      <md-icon ng-class="{ 'icon-check': list.sortedBy('calendarName') }">
+                        <!-- selected --></md-icon> <var:string label:value="Calendar"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item ng-if="list.componentType == 'events'">
+                    <md-button ng-click="list.sort('start')">
+                      <md-icon ng-class="{ 'icon-check': list.sortedBy('start') }">
+                        <!-- selected --></md-icon> <var:string label:value="Start"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item ng-if="list.componentType == 'events'">
+                    <md-button ng-click="list.sort('end')">
+                      <md-icon ng-class="{ 'icon-check': list.sortedBy('end') }">
+                        <!-- selected --></md-icon> <var:string label:value="End"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item ng-if="list.componentType == 'tasks'">
+                    <md-button ng-click="list.sort('end')">
+                      <md-icon ng-class="{ 'icon-check': list.sortedBy('end') }">
+                        <!-- selected --></md-icon> <var:string label:value="Due Date"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item ng-if="list.componentType == 'tasks'">
+                    <md-button ng-click="list.sort('priority')">
+                      <md-icon ng-class="{ 'icon-check': list.sortedBy('priority') }">
+                        <!-- selected --></md-icon> <var:string label:value="Priority"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item ng-if="list.componentType == 'tasks'">
+                    <md-button ng-click="list.sort('category')">
+                      <md-icon ng-class="{ 'icon-check': list.sortedBy('category') }">
+                        <!-- selected --></md-icon> <var:string label:value="Category"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-item ng-if="list.componentType == 'tasks'">
+                    <md-button ng-click="list.sort('status')">
+                      <md-icon ng-class="{ 'icon-check': list.sortedBy('status') }">
+                        <!-- selected --></md-icon> <var:string label:value="Status"/>
+                    </md-button>
+                  </md-menu-item>
+                  <md-menu-divider><!-- divider --></md-menu-divider>
+                  <md-menu-item ng-if="list.componentType == 'events'">
+                    <sg-checkmark
+                        class="sg-no-wrap"
+                        ng-change="list.component.$filter(list.componentType)"
+                        ng-model="list.component.$queryEvents.asc"
+                        sg-true-value="0"
+                        sg-false-value="1"><var:string label:value="Descending Order"/></sg-checkmark>
+                  </md-menu-item>
+                  <md-menu-item ng-if="list.componentType == 'tasks'">
+                    <sg-checkmark
+                        class="sg-no-wrap"
+                        ng-change="list.component.$filter(list.componentType)"
+                        ng-model="list.component.$queryTasks.asc"
+                        sg-true-value="0"
+                        sg-false-value="1"><var:string label:value="Descending Order"/></sg-checkmark>
+                  </md-menu-item>
+                </md-menu-content>
+              </md-menu>
+              <md-button class="sg-icon-button" ng-click="list.reload()">
+                <md-icon>refresh</md-icon>
               </md-button>
-              <md-menu-content width="4">
-                <md-menu-item>
-                  <md-button ng-click="list.sort('title')">
-                    <md-icon ng-class="{ 'icon-check': list.sortedBy('title') }">
-                      <!-- selected --></md-icon> <var:string label:value="Title"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="list.sort('location')">
-                    <md-icon ng-class="{ 'icon-check': list.sortedBy('location') }">
-                      <!-- selected --></md-icon> <var:string label:value="Location"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="list.sort('calendarName')">
-                    <md-icon ng-class="{ 'icon-check': list.sortedBy('calendarName') }">
-                      <!-- selected --></md-icon> <var:string label:value="Calendar"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item ng-if="list.componentType == 'events'">
-                  <md-button ng-click="list.sort('start')">
-                    <md-icon ng-class="{ 'icon-check': list.sortedBy('start') }">
-                      <!-- selected --></md-icon> <var:string label:value="Start"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item ng-if="list.componentType == 'events'">
-                  <md-button ng-click="list.sort('end')">
-                    <md-icon ng-class="{ 'icon-check': list.sortedBy('end') }">
-                      <!-- selected --></md-icon> <var:string label:value="End"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item ng-if="list.componentType == 'tasks'">
-                  <md-button ng-click="list.sort('end')">
-                    <md-icon ng-class="{ 'icon-check': list.sortedBy('end') }">
-                      <!-- selected --></md-icon> <var:string label:value="Due Date"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item ng-if="list.componentType == 'tasks'">
-                  <md-button ng-click="list.sort('priority')">
-                    <md-icon ng-class="{ 'icon-check': list.sortedBy('priority') }">
-                      <!-- selected --></md-icon> <var:string label:value="Priority"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item ng-if="list.componentType == 'tasks'">
-                  <md-button ng-click="list.sort('category')">
-                    <md-icon ng-class="{ 'icon-check': list.sortedBy('category') }">
-                      <!-- selected --></md-icon> <var:string label:value="Category"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item ng-if="list.componentType == 'tasks'">
-                  <md-button ng-click="list.sort('status')">
-                    <md-icon ng-class="{ 'icon-check': list.sortedBy('status') }">
-                      <!-- selected --></md-icon> <var:string label:value="Status"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-divider><!-- divider --></md-menu-divider>
-                <md-menu-item ng-if="list.componentType == 'events'">
-                  <sg-checkmark
-                      class="sg-no-wrap"
-                      ng-change="list.component.$filter(list.componentType)"
-                      ng-model="list.component.$queryEvents.asc"
-                      sg-true-value="0"
-                      sg-false-value="1"><var:string label:value="Descending Order"/></sg-checkmark>
-                </md-menu-item>
-                <md-menu-item ng-if="list.componentType == 'tasks'">
-                  <sg-checkmark
-                      class="sg-no-wrap"
-                      ng-change="list.component.$filter(list.componentType)"
-                      ng-model="list.component.$queryTasks.asc"
-                      sg-true-value="0"
-                      sg-false-value="1"><var:string label:value="Descending Order"/></sg-checkmark>
-                </md-menu-item>
-              </md-menu-content>
-            </md-menu>
-            <md-button class="sg-icon-button" ng-click="list.reload()">
-              <md-icon>refresh</md-icon>
-            </md-button>
-          </div>
-          <!-- search mode -->
-          <form class="md-toolbar-tools sg-toolbar-secondary"
-                name="searchForm"
-                layout="row"
-                ng-show="list.mode.search"
-                sg-search="list.component.$filter(list.componentType, { value: searchText, search: searchField })"
-                sg-allow-dot="false">
-            <md-button class="md-icon-button"
-                       sg-search-cancel="list.cancelSearch()"
-                       label:aria-label="Back">
-              <md-icon>arrow_back</md-icon>
-            </md-button>
-            <md-input-container class="md-flex" md-no-float="md-no-float">
-              <input name="folderSearch" type="search" var:minlength="minimumSearchLength" label:placeholder="Search"
-                     sg-focus-on="search"/>
-              <div ng-messages="searchForm.folderSearch.$error" ng-show="searchForm.folderSearch.$dirty">
-                <div ng-message="minlength"><var:string value="minimumSearchLengthLabel"/></div>
-              </div>
-            </md-input-container>
-            <md-input-container flex="25">
-              <md-select label:aria-label="Search scope">
-                <md-option value="title_Category_Location" selected="selected"><var:string label:value="Title, category or location"/></md-option>
-                <md-option value="entireContent"><var:string label:value="Entire content"/></md-option>
-              </md-select>
-            </md-input-container>
-          </form>
-        </md-toolbar>
+            </div>
+            <!-- search mode -->
+            <form class="md-toolbar-tools sg-toolbar-secondary"
+                  name="searchForm"
+                  layout="row"
+                  ng-show="list.mode.search"
+                  sg-search="list.component.$filter(list.componentType, { value: searchText, search: searchField })"
+                  sg-allow-dot="false">
+              <md-button class="md-icon-button"
+                         sg-search-cancel="list.cancelSearch()"
+                         label:aria-label="Back">
+                <md-icon>arrow_back</md-icon>
+              </md-button>
+              <md-input-container class="md-flex" md-no-float="md-no-float">
+                <input name="folderSearch" type="search" var:minlength="minimumSearchLength" label:placeholder="Search"
+                       sg-focus-on="search"/>
+                <div ng-messages="searchForm.folderSearch.$error" ng-show="searchForm.folderSearch.$dirty">
+                  <div ng-message="minlength"><var:string value="minimumSearchLengthLabel"/></div>
+                </div>
+              </md-input-container>
+              <md-input-container flex="25">
+                <md-select label:aria-label="Search scope">
+                  <md-option value="title_Category_Location" selected="selected"><var:string label:value="Title, category or location"/></md-option>
+                  <md-option value="entireContent"><var:string label:value="Entire content"/></md-option>
+                </md-select>
+              </md-input-container>
+            </form>
+          </md-toolbar>
 
-        <!-- multiple-selection mode -->
-        <md-toolbar class="md-whiteframe-z1 md-hue-1 sg-toolbar-secondary"
-                    ng-show="list.mode.multiple">
-          <div class="md-toolbar-tools">
-            <md-button class="sg-icon-button" ng-click="list.unselectComponents()">
-              <md-icon>arrow_back</md-icon>
-            </md-button>
-            <label>{{list.component.$selectedCount()}} <var:string label:value="selected"/></label>
-            <div class="md-flex"><!-- spacer --></div>
-            <md-button class="sg-icon-button" ng-click="list.selectAll()">
-              <md-tooltip md-direction="left"><var:string label:value="Select All"/></md-tooltip>
-              <md-icon>select_all</md-icon>
-            </md-button>
-            <md-button class="sg-icon-button" ng-click="list.confirmDeleteSelectedComponents()">
-              <md-icon>delete</md-icon>
-            </md-button>
-          </div>
-        </md-toolbar>
+          <!-- multiple-selection mode -->
+          <md-toolbar class="md-whiteframe-z1 md-hue-1 sg-toolbar-secondary"
+                      ng-show="list.mode.multiple">
+            <div class="md-toolbar-tools">
+              <md-button class="sg-icon-button" ng-click="list.unselectComponents()">
+                <md-icon>arrow_back</md-icon>
+              </md-button>
+              <label>{{list.component.$selectedCount()}} <var:string label:value="selected"/></label>
+              <div class="md-flex"><!-- spacer --></div>
+              <md-button class="sg-icon-button" ng-click="list.selectAll()">
+                <md-tooltip md-direction="left"><var:string label:value="Select All"/></md-tooltip>
+                <md-icon>select_all</md-icon>
+              </md-button>
+              <md-button class="sg-icon-button" ng-click="list.confirmDeleteSelectedComponents()">
+                <md-icon>delete</md-icon>
+              </md-button>
+            </div>
+          </md-toolbar>
 
-        <md-divider><!-- divider --></md-divider>
+          <md-divider><!-- divider --></md-divider>
 
-        <md-content layout="column" class="view-list">
-          <md-tabs md-dynamic-height="true"
-                   md-selected="list.selectedList">
-            <!-- Events list -->
-            <md-tab label:label="Events"
-                    md-on-select="list.selectComponentType('events')">
-              <md-subheader>
-                <span>{{list.filterpopup() | loc}}</span>
-              </md-subheader>
-              <md-list class="sg-section-list"
-                       ng-class="{ 'sg-list-selectable': list.mode.multiple }">
-                <md-list-item ng-repeat="event in list.component.$events"
-                              aria-label="{{::event.c_title}}"
-                              ng-click="list.openEvent($event, event)">
-                  <div class="md-secondary sg-avatar-selectable"
-                       label:aria-label="Toggle item"
-                       ng-class="[event.getClassName('fg'), { 'sg-avatar-selected' : event.selected }]"
-                       ng-click="list.toggleComponentSelection($event, event)">
-                    <div class="sg-color-chip"
-                         ng-class="::event.getClassName('bg')"><!-- calendar color --></div>
-                  </div>
-                  <div class="sg-category"
-                       ng-repeat="category in ::event.categories | limitTo:5"
-                       ng-class="::'bg-category' + category"
-                       ng-style="::{ left: ($index * 3) + 'px' }"><!-- calendar color --></div>
-                  <div class="sg-tile-content">
-                    <div class="sg-md-subhead">
-                      <div>
-                        <span ng-show="::event.c_priority" class="sg-priority">{{::event.c_priority}}</span>
-                        {{::event.c_title}}
+          <md-content layout="column" class="view-list">
+            <md-tabs md-dynamic-height="true"
+                     md-selected="list.selectedList">
+              <!-- Events list -->
+              <md-tab label:label="Events"
+                      md-on-select="list.selectComponentType('events')">
+                <md-subheader>
+                  <span>{{list.filterpopup() | loc}}</span>
+                </md-subheader>
+                <md-list class="sg-section-list"
+                         ng-class="{ 'sg-list-selectable': list.mode.multiple }">
+                  <md-list-item ng-repeat="event in list.component.$events"
+                                aria-label="{{::event.c_title}}"
+                                ng-click="list.openEvent($event, event)">
+                    <div class="md-secondary sg-avatar-selectable"
+                         label:aria-label="Toggle item"
+                         ng-class="[event.getClassName('fg'), { 'sg-avatar-selected' : event.selected }]"
+                         ng-click="list.toggleComponentSelection($event, event)">
+                      <div class="sg-color-chip"
+                           ng-class="::event.getClassName('bg')"><!-- calendar color --></div>
+                    </div>
+                    <div class="sg-category"
+                         ng-repeat="category in ::event.categories | limitTo:5"
+                         ng-class="::'bg-category' + category"
+                         ng-style="::{ left: ($index * 3) + 'px' }"><!-- calendar color --></div>
+                    <div class="sg-tile-content">
+                      <div class="sg-md-subhead">
+                        <div>
+                          <span ng-show="::event.c_priority" class="sg-priority">{{::event.c_priority}}</span>
+                          {{::event.c_title}}
+                        </div>
+                      </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-md-body">
-                      <div>{{::event.c_location}}</div>
-                      <div class="sg-tile-date" ng-bind="::event.formatted_startdate"><!-- start --></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>
-                  </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>
-                </md-list-item>
-              </md-list>
-            </md-tab>
-            <!-- Tasks list -->
-            <md-tab label:label="Tasks"
-                    md-on-select="list.selectComponentType('tasks')">
-              <md-subheader>
-                <span>{{list.filterpopup() | loc}}</span>
-              </md-subheader>
-              <md-list class="sg-section-list"
-                       ng-class="{ 'sg-list-selectable': list.mode.multiple }">
-                <md-list-item ng-repeat="task in list.component.$tasks"
-                              aria-label="{{::task.c_title}}"
-                              ng-click="list.openTask($event, task)">
-                  <div class="md-secondary sg-avatar-selectable"
-                       label:aria-label="Toggle item"
-                       ng-class="[task.getClassName('fg'), { 'sg-avatar-selected' : task.selected }]"
-                       ng-click="list.toggleComponentSelection($event, task)">
-                    <div class="sg-color-chip"
-                         ng-class="::task.getClassName('bg')"><!-- calendar color --></div>
-                  </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>
-                        <span ng-show="::task.c_priority" class="sg-priority">{{::task.c_priority}}</span>
-                        {{::task.c_title}}
+                    <md-divider><!-- divider --></md-divider>
+                  </md-list-item>
+                  <md-list-item disabled="disabled" ng-if="list.component.$events.length == 0">
+                    <p class="sg-md-caption"><var:string label:value="No events for selected criteria"/></p>
+                  </md-list-item>
+                </md-list>
+              </md-tab>
+              <!-- Tasks list -->
+              <md-tab label:label="Tasks"
+                      md-on-select="list.selectComponentType('tasks')">
+                <md-subheader>
+                  <span>{{list.filterpopup() | loc}}</span>
+                </md-subheader>
+                <md-list class="sg-section-list"
+                         ng-class="{ 'sg-list-selectable': list.mode.multiple }">
+                  <md-list-item ng-repeat="task in list.component.$tasks"
+                                aria-label="{{::task.c_title}}"
+                                ng-click="list.openTask($event, task)">
+                    <div class="md-secondary sg-avatar-selectable"
+                         label:aria-label="Toggle item"
+                         ng-class="[task.getClassName('fg'), { 'sg-avatar-selected' : task.selected }]"
+                         ng-click="list.toggleComponentSelection($event, task)">
+                      <div class="sg-color-chip"
+                           ng-class="::task.getClassName('bg')"><!-- calendar color --></div>
+                    </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>
+                          <span ng-show="::task.c_priority" class="sg-priority">{{::task.c_priority}}</span>
+                          {{::task.c_title}}
+                        </div>
+                      </div>
+                      <div class="sg-md-body">
+                        <div><!-- spacer --></div>
+                        <div>{{::task.formatted_enddate}}</div>
                       </div>
                     </div>
-                    <div class="sg-md-body">
-                      <div><!-- spacer --></div>
-                      <div>{{::task.formatted_enddate}}</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>
-                  </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>
-                </md-list-item>
-              </md-list>
-            </md-tab>
-          </md-tabs>
-        </md-content>
-        <div class="sg-progress-circular-floating"
-             ng-show="list.component.$isLoading()">
-          <md-progress-circular class="md-accent"
-                                md-mode="indeterminate"
-                                md-diameter="32"><!-- mailbox loading progress --></md-progress-circular>
-        </div>
-        <md-fab-speed-dial
-             class="md-scale md-fab-bottom-right"
-             ng-cloak="ng-cloak"
-             md-direction="up">
+                    <md-divider><!-- divider --></md-divider>
+                  </md-list-item>
+                  <md-list-item disabled="disabled" ng-if="list.component.$tasks.length == 0">
+                    <p class="sg-md-caption"><var:string label:value="No tasks for selected criteria"/></p>
+                  </md-list-item>
+                </md-list>
+              </md-tab>
+            </md-tabs>
+          </md-content>
+          <div class="sg-progress-circular-floating"
+               ng-show="list.component.$isLoading()">
+            <md-progress-circular class="md-accent"
+                                  md-mode="indeterminate"
+                                  md-diameter="32"><!-- mailbox loading progress --></md-progress-circular>
+          </div>
+          <md-fab-speed-dial
+              class="md-scale md-fab-bottom-right"
+              ng-cloak="ng-cloak"
+              md-direction="up">
             <md-fab-trigger>
               <md-button class="md-fab md-accent" label:aria-label="New Event">
                 <md-icon>add</md-icon>