(js) Don't load item in multi-selection mode

Also review the toolbars of the Calendar module.
This commit is contained in:
Francis Lachapelle
2015-09-09 15:18:00 -04:00
parent 295b53df66
commit 16d312eb98
5 changed files with 235 additions and 215 deletions

View File

@@ -163,10 +163,10 @@
<!-- ui-sref-active="sg-active"> -->
<div class="sg-selected-avatar"
ng-show="currentMessage.selected"
ng-click="currentMessage.selected = !currentMessage.selected"><!-- selected avatar --></div>
ng-click="mailbox.toggleMessageSelection($event, currentMessage)"><!-- selected avatar --></div>
<sg-avatar-image class="md-tile-left"
ng-show="!currentMessage.selected"
ng-click="currentMessage.selected = !currentMessage.selected"
ng-click="mailbox.toggleMessageSelection($event, currentMessage)"
sg-email="::currentMessage.from[0].email"
size="40"><!-- avatar --></sg-avatar-image>
<div class="sg-tile-content">

View File

@@ -307,199 +307,193 @@
<!-- Main section -->
<section layout="column" class="sg-app-content layout-fill"
ng-controller="CalendarListController as list">
<md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
<div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
<var:component className="UIxTopnavToolbarTemplate" />
<!-- <div class="sg-toolbar-group-2">
<md-button class="sg-icon-button" label:aria-label="Search">
<md-toolbar layout="row" layout-align="space-between center" class="toolbar-main" >
<var:component className="UIxTopnavToolbarTemplate" />
<!-- <div class="sg-toolbar-group-2">
<md-button class="sg-icon-button" label:aria-label="Search">
<md-icon>search</md-icon>
</md-button>
</div> -->
</md-toolbar>
<div layout="row">
<md-toolbar class="view-list" ng-show="list.component.$selectedCount() == 0">
<!-- sort/filter mode (default) -->
<div class="md-toolbar-tools" layout="row" ng-hide="list.mode.search">
<md-button class="sg-icon-button" label:aria-label="Search"
ng-click="list.mode.search = true">
<md-icon>search</md-icon>
</md-button>
</div> -->
</div><!-- .md-toolbar-tools -->
<div class="md-toolbar-tools" layout="row"
layout-align="space-between center"
ng-show="list.component.$selectedCount() == 0">
<!-- sort/filter mode -->
<div class="view-list" layout="row" layout-align="space-between center"
ng-hide="list.mode.search">
<div class="sg-toolbar-group">
<md-button class="sg-icon-button" label:aria-label="Search"
ng-click="list.mode.search = true">
<md-icon>search</md-icon>
<div class="md-flex"><!-- spacer --></div>
<md-menu>
<md-button class="sg-icon-button" label:aria-label="Filter"
ng-click="$mdOpenMenu()">
<md-icon>filter_list</md-icon>
</md-button>
</div>
<div class="sg-toolbar-group-last">
<md-menu>
<md-button class="sg-icon-button" label:aria-label="Filter"
ng-click="$mdOpenMenu()">
<md-icon>filter_list</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-click="list.filter('view_all')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_all') }">
<!-- selected --></md-icon> <var:string label:value="view_all"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_today')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_today') }">
<!-- selected --></md-icon> <var:string label:value="view_today"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_next7')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_next7') }">
<!-- selected --></md-icon> <var:string label:value="view_next7"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_next14')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_next14') }">
<!-- selected --></md-icon> <var:string label:value="view_next14"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_next31')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_next31') }">
<!-- selected --></md-icon><var:string label:value="view_next31"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_thismonth')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_thismonth') }">
<!-- selected --></md-icon><var:string label:value="view_thismonth"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'events'">
<md-button ng-click="list.filter('view_future')">
<md-icon ng-class="{ 'icon-check': list.component.$queryEvents.filterpopup == 'view_future' }">
<!-- selected --></md-icon> <var:string label:value="view_future"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'events'">
<md-button ng-click="list.filter('view_selectedday')">
<md-icon ng-class="{ 'icon-check': list.component.$queryEvents.filterpopup == 'view_selectedday' }">
<!-- selected --></md-icon> <var:string label:value="view_selectedday"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.filter('view_not_started')">
<md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_not_started' }">
<!-- selected --></md-icon> <var:string label:value="view_not_started"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.filter('view_overdue')">
<md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_overdue' }">
<!-- selected --></md-icon> <var:string label:value="view_overdue"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.filter('view_incomplete')">
<md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_incomplete' }">
<!-- selected --></md-icon> <var:string label:value="view_incomplete"/>
</md-button>
</md-menu-item>
<md-menu-divider ng-if="list.componentType == 'tasks'"><!-- divider --></md-menu-divider>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.component.$filter(list.componentType)">
<md-checkbox
ng-model="list.component.$queryTasks.show_completed"
ng-true-value="1"
ng-false-value="0"> <var:string label:value="Show completed tasks"/></md-checkbox>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu>
<md-button class="sg-icon-button" label:aria-label="Sort"
ng-click="$mdOpenMenu()">
<md-icon>sort</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-click="list.sort('title')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('title') }">
<!-- selected --></md-icon> <var:string label:value="Title"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.sort('location')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('location') }">
<!-- selected --></md-icon> <var:string label:value="Location"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.sort('calendarName')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('calendarName') }">
<!-- selected --></md-icon> <var:string label:value="Calendar"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'events'">
<md-button ng-click="list.sort('start')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('start') }">
<!-- selected --></md-icon> <var:string label:value="Start"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'events'">
<md-button ng-click="list.sort('end')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('end') }">
<!-- selected --></md-icon> <var:string label:value="End"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.sort('end')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('end') }">
<!-- selected --></md-icon> <var:string label:value="Due Date"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.sort('priority')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('priority') }">
<!-- selected --></md-icon> <var:string label:value="Priority"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.sort('category')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('category') }">
<!-- selected --></md-icon> <var:string label:value="Category"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.sort('status')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('status') }">
<!-- selected --></md-icon> <var:string label:value="Status"/>
</md-button>
</md-menu-item>
<md-menu-divider><!-- divider --></md-menu-divider>
<md-menu-item ng-if="list.componentType == 'events'">
<md-button ng-href="#">
<md-checkbox
ng-change="list.component.$filter(list.componentType)"
ng-model="list.component.$queryEvents.asc"
ng-true-value="0"
ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-href="#">
<md-checkbox
ng-change="list.component.$filter(list.componentType)"
ng-model="list.component.$queryTasks.asc"
ng-true-value="0"
ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-button class="sg-icon-button" ng-click="list.component.$filter(list.componentType)">
<md-icon>refresh</md-icon>
<md-menu-content>
<md-menu-item>
<md-button ng-click="list.filter('view_all')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_all') }">
<!-- selected --></md-icon> <var:string label:value="view_all"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_today')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_today') }">
<!-- selected --></md-icon> <var:string label:value="view_today"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_next7')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_next7') }">
<!-- selected --></md-icon> <var:string label:value="view_next7"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_next14')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_next14') }">
<!-- selected --></md-icon> <var:string label:value="view_next14"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_next31')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_next31') }">
<!-- selected --></md-icon><var:string label:value="view_next31"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.filter('view_thismonth')">
<md-icon ng-class="{ 'icon-check': list.filteredBy('view_thismonth') }">
<!-- selected --></md-icon><var:string label:value="view_thismonth"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'events'">
<md-button ng-click="list.filter('view_future')">
<md-icon ng-class="{ 'icon-check': list.component.$queryEvents.filterpopup == 'view_future' }">
<!-- selected --></md-icon> <var:string label:value="view_future"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'events'">
<md-button ng-click="list.filter('view_selectedday')">
<md-icon ng-class="{ 'icon-check': list.component.$queryEvents.filterpopup == 'view_selectedday' }">
<!-- selected --></md-icon> <var:string label:value="view_selectedday"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.filter('view_not_started')">
<md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_not_started' }">
<!-- selected --></md-icon> <var:string label:value="view_not_started"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.filter('view_overdue')">
<md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_overdue' }">
<!-- selected --></md-icon> <var:string label:value="view_overdue"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.filter('view_incomplete')">
<md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_incomplete' }">
<!-- selected --></md-icon> <var:string label:value="view_incomplete"/>
</md-button>
</md-menu-item>
<md-menu-divider ng-if="list.componentType == 'tasks'"><!-- divider --></md-menu-divider>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.component.$filter(list.componentType)">
<md-checkbox
ng-model="list.component.$queryTasks.show_completed"
ng-true-value="1"
ng-false-value="0"> <var:string label:value="Show completed tasks"/></md-checkbox>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu>
<md-button class="sg-icon-button" label:aria-label="Sort"
ng-click="$mdOpenMenu()">
<md-icon>sort</md-icon>
</md-button>
</div>
<md-menu-content>
<md-menu-item>
<md-button ng-click="list.sort('title')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('title') }">
<!-- selected --></md-icon> <var:string label:value="Title"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.sort('location')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('location') }">
<!-- selected --></md-icon> <var:string label:value="Location"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="list.sort('calendarName')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('calendarName') }">
<!-- selected --></md-icon> <var:string label:value="Calendar"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'events'">
<md-button ng-click="list.sort('start')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('start') }">
<!-- selected --></md-icon> <var:string label:value="Start"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'events'">
<md-button ng-click="list.sort('end')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('end') }">
<!-- selected --></md-icon> <var:string label:value="End"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.sort('end')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('end') }">
<!-- selected --></md-icon> <var:string label:value="Due Date"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.sort('priority')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('priority') }">
<!-- selected --></md-icon> <var:string label:value="Priority"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.sort('category')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('category') }">
<!-- selected --></md-icon> <var:string label:value="Category"/>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-click="list.sort('status')">
<md-icon ng-class="{ 'icon-check': list.sortedBy('status') }">
<!-- selected --></md-icon> <var:string label:value="Status"/>
</md-button>
</md-menu-item>
<md-menu-divider><!-- divider --></md-menu-divider>
<md-menu-item ng-if="list.componentType == 'events'">
<md-button ng-href="#">
<md-checkbox
ng-change="list.component.$filter(list.componentType)"
ng-model="list.component.$queryEvents.asc"
ng-true-value="0"
ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
</md-button>
</md-menu-item>
<md-menu-item ng-if="list.componentType == 'tasks'">
<md-button ng-href="#">
<md-checkbox
ng-change="list.component.$filter(list.componentType)"
ng-model="list.component.$queryTasks.asc"
ng-true-value="0"
ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-button class="sg-icon-button" ng-click="list.component.$filter(list.componentType)">
<md-icon>refresh</md-icon>
</md-button>
</div>
<!-- search mode -->
<div class="view-list sg-padded--right sg-toolbar-search" layout="row" layout-align="space-between center"
<div class="md-toolbar-tools sg-toolbar-secondary"
ng-show="list.mode.search"
sg-search="list.component.$filter(list.componentType, { value: searchText, search: searchField })">
<md-button class="sg-icon-button"
@@ -517,8 +511,28 @@
</md-select>
</md-input-container>
</div>
<!-- day/week/month views -->
<div>
</md-toolbar>
<!-- multiple-selection mode -->
<md-toolbar class="view-list md-hue-1 sg-toolbar-secondary" ng-show="list.component.$selectedCount() > 0">
<div class="md-toolbar-tools">
<md-button class="sg-icon-button" ng-click="list.unselectComponents()">
<md-icon>arrow_back</md-icon>
</md-button>
<label>{{list.component.$selectedCount()}} <var:string label:value="selected"/></label>
<div class="md-flex"><!-- spacer --></div>
<md-button class="sg-icon-button" ng-click="list.selectAll()">
<md-tooltip md-direction="left"><var:string label:value="Select All"/></md-tooltip>
<md-icon>select_all</md-icon>
</md-button>
<md-button class="sg-icon-button" ng-click="list.confirmDeleteSelectedComponents()">
<md-icon>delete</md-icon>
</md-button>
</div>
</md-toolbar>
<!-- day/week/month views -->
<md-toolbar class="view-detail">
<div class="md-toolbar-tools" layout-align="end center">
<a class="sg-icon-button md-button"
label:aria-label="Day"
href="#/calendar/day"><md-icon>view_day</md-icon></a>
@@ -529,21 +543,9 @@
label:aria-label="Month"
href="#/calendar/month"><md-icon>view_module</md-icon></a>
</div>
</div>
<div layout="row" layout-align="start center" ng-show="list.component.$selectedCount() > 0">
<md-button class="sg-icon-button" ng-click="list.unselectComponents()">
<md-icon>arrow_back</md-icon>
</md-button>
<label>{{list.component.$selectedCount()}} selected</label>
<md-button class="sg-icon-button" ng-click="list.selectAll()">
<md-tooltip md-direction="left"><var:string label:value="Select All"/></md-tooltip>
<md-icon>select_all</md-icon>
</md-button>
<md-button class="sg-icon-button" ng-click="list.confirmDeleteSelectedComponents()">
<md-icon>delete</md-icon>
</md-button>
</div>
</md-toolbar>
</md-toolbar>
</div>
<md-content layout="row" class="md-flex">
<md-content class="view-list md-flex" layout="column">
<md-tabs md-dynamic-height="true"
@@ -556,10 +558,12 @@
ng-repeat="event in list.component.$events"
ng-click="list.openEvent($event, event)">
<div class="sg-selected-avatar" ng-show="event.selected"
ng-click="event.selected = !event.selected">
ng-click="list.toggleComponentSelection($event, event)">
<!-- selected avatar -->
</div>
<i class="md-tile-left" ng-class="event.getClassName('bg')" ng-show="!event.selected" ng-click="event.selected = !event.selected"><!-- calendar color --></i>
<i class="md-tile-left" ng-class="event.getClassName('bg')"
ng-show="!event.selected"
ng-click="list.toggleComponentSelection($event, event)"><!-- calendar color --></i>
<div class="md-list-item-text">
<h3>{{event.c_title}}</h3>
<p>{{event.c_location}}</p>
@@ -585,10 +589,12 @@
ng-repeat="task in list.component.$tasks"
ng-click="list.openTask($event, task)">
<div class="sg-selected-avatar" ng-show="task.selected"
ng-click="task.selected = !task.selected">
ng-click="list.toggleComponentSelection($event, task)">
<!-- selected avatar -->
</div>
<i class="md-tile-left" ng-class="task.getClassName('bg')" ng-show="!task.selected" ng-click="task.selected = !task.selected"><!-- calendar color --></i>
<i class="md-tile-left" ng-class="task.getClassName('bg')"
ng-show="!task.selected"
ng-click="list.toggleComponentSelection($event, task)"><!-- calendar color --></i>
<div class="md-list-item-text">
<h3>{{task.c_title}}</h3>
<p class="md-secondary" layout="row">

View File

@@ -17,6 +17,7 @@
vm.account = stateAccount;
vm.selectedFolder = stateMailbox;
vm.selectMessage = selectMessage;
vm.toggleMessageSelection = toggleMessageSelection;
vm.unselectMessages = unselectMessages;
vm.confirmDeleteSelectedMessages = confirmDeleteSelectedMessages;
vm.copySelectedMessages = copySelectedMessages;
@@ -35,6 +36,12 @@
$state.go('mail.account.mailbox.message', {accountId: stateAccount.id, mailboxId: encodeUriFilter(stateMailbox.path), messageId: message.uid});
}
function toggleMessageSelection($event, message) {
message.selected = !message.selected;
$event.preventDefault();
$event.stopPropagation();
}
function unselectMessages() {
_.each(vm.selectedFolder.$messages, function(message) { message.selected = false; });
}
@@ -154,7 +161,7 @@
}
angular
.module('SOGo.MailerUI')
.controller('MailboxController', MailboxController);
.module('SOGo.MailerUI')
.controller('MailboxController', MailboxController);
})();

View File

@@ -6,8 +6,8 @@
/**
* @ngInject
*/
CalendarListController.$inject = ['$scope', '$timeout', '$state', '$mdDialog', 'encodeUriFilter', 'Dialog', 'Preferences', 'Calendar', 'Component'];
function CalendarListController($scope, $timeout, $state, $mdDialog, encodeUriFilter, Dialog, Preferences, Calendar, Component) {
CalendarListController.$inject = ['$scope', '$timeout', '$state', '$mdDialog', 'Dialog', 'Preferences', 'Calendar', 'Component'];
function CalendarListController($scope, $timeout, $state, $mdDialog, Dialog, Preferences, Calendar, Component) {
var vm = this;
vm.component = Component;
@@ -16,6 +16,7 @@
vm.selectComponentType = selectComponentType;
vm.unselectComponents = unselectComponents;
vm.selectAll = selectAll;
vm.toggleComponentSelection = toggleComponentSelection;
vm.confirmDeleteSelectedComponents = confirmDeleteSelectedComponents;
vm.openEvent = openEvent;
vm.openTask = openTask;
@@ -64,6 +65,12 @@
});
}
function toggleComponentSelection($event, component) {
component.selected = !component.selected;
$event.preventDefault();
$event.stopPropagation();
}
function confirmDeleteSelectedComponents() {
Dialog.confirm(l('Warning'),
l('Are you sure you want to delete the selected components?'))

View File

@@ -101,7 +101,7 @@
count = (_.filter(Component.$events, function(event) { return event.selected; })).length;
}
if (Component.$tasks) {
count = (_.filter(Component.$tasks, function(event) { return event.selected; })).length;
count = (_.filter(Component.$tasks, function(task) { return task.selected; })).length;
}
return count;
};