LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve lists in sidenav 

- the ripple effect is now visible when clicking on list items;
- the fab icon has been moved over the items list;
- colorized the checkboxes of the calendars list.
pull/91/head
Francis Lachapelle 2015-04-29 11:23:21 -04:00
parent 4dbd796fd5
commit 16b75b1deb
13 changed files with 249 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
UI/Templates/ContactsUI/UIxContactFoldersView.wox
View File

@ -8,8 +8,7 @@
const:userDefaultsKeys="SOGoContactsCategories"
const:jsFiles="Common/user-model.js, Common/acl-model.js, Common/resource.js, Contacts/card-model.js, Contacts/addressbook-model.js"
className="UIxPageFrame"
title="name"
var:popup="isPopup">
title="name">
<script type="text/javascript">
var contactFolders = <var:string value="contactFolders" const:escapeHTML="NO" />;
</script>
@ -153,28 +152,26 @@
<md-subheader class="sg-md-subheader">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="AddressBooks"/></span>
<md-button
class="iconButton"
label:aria-label="New Addressbook..."
ng-click="newAddressbook()">
<md-button class="iconButton"
label:aria-label="New Addressbook..."
ng-click="newAddressbook()">
<i class="md-icon-add-circle-outline"><!-- add --></i>
</md-button>
</div>
</md-subheader>
<md-list>
<md-list-item ng-repeat="folder in service.$addressbooks track by folder.id"
ui-sref-active="sg-active"
ng-dblclick="edit($index, folder)">
ng-click="select(folder)"
ng-dblclick="edit($index, folder)"
ui-sref="app.addressbook({addressbookId: folder.id})"
ui-sref-active="sg-active">
<i ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
<button class="md-button md-flex sg-item-name"
ng-show="editMode!=folder.id"
ng-click="select(folder)"
ng-cloak="ng-cloak"
ui-sref="app.addressbook({addressbookId: folder.id})">{{folder.name}}</button>
<md-input-container
class="md-flex md-tile-content"
ng-show="editMode==folder.id">
<p class="sg-item-name"
ng-show="editMode!=folder.id"> {{folder.name}}</p>
<md-input-container class="md-flex md-tile-content"
ng-show="editMode==folder.id">
<input class="folder-name" type="text"
label:aria-label="Name of the Address Book"
ng-model="folder.name"
ng-cloak="ng-cloak"
ng-blur="save($index, folder)"
@ -182,10 +179,10 @@
sg-enter="save(folder)"
sg-escape="revertEditing(folder)"/>
</md-input-container>
<md-button class="iconButton" label:aria-label="Options"
<md-button class="iconButton md-secondary" label:aria-label="Options"
ng-show="currentFolder.id==folder.id"
ng-click="share()">
<i class="md-icon-more-vert"><!-- options --></i>
ng-click="share(folder)">
<i class="md-icon-more-vert"><!-- options --></i>
</md-button>
</md-list-item>
</md-list>
@ -195,29 +192,27 @@
<md-subheader class="sg-md-subheader">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Subscriptions"/></span>
<md-button
class="iconButton"
label:aria-label="Subscribe to an Addressbook..."
sg-subscribe="contact"
sg-subscribe-on-select="subscribeToFolder(folderData)">
<md-button class="iconButton"
label:aria-label="Subscribe to an Addressbook..."
sg-subscribe="contact"
sg-subscribe-on-select="subscribeToFolder(folderData)">
<i class="md-icon-add-circle-outline"><!-- add --></i>
</md-button>
</div>
</md-subheader>
<md-list>
<md-list-item ng-repeat="folder in service.$subscriptions track by folder.id"
ui-sref-active="sg-active"
ng-dblclick="edit($index, folder)">
ng-click="select(folder)"
ng-dblclick="edit($index, folder)"
ui-sref="app.addressbook({addressbookId: folder.id})"
ui-sref-active="sg-active">
<i ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
<button class="md-button md-flex sg-item-name"
ng-show="editMode!=folder.id"
ng-click="select(folder)"
ng-cloak="ng-cloak"
ui-sref="app.addressbook({addressbookId: folder.id})">{{folder.name}}</button>
<md-input-container
class="md-flex md-tile-content"
ng-show="editMode==folder.id">
<p class="sg-item-name"
ng-show="editMode!=folder.id">{{folder.name}}</p>
<md-input-container class="md-flex md-tile-content"
ng-show="editMode==folder.id">
<input class="folder-name" type="text"
label:aria-label="Name of the Address Book"
ng-model="folder.name"
ng-cloak="ng-cloak"
ng-blur="save($index, folder)"
@ -225,9 +220,10 @@
sg-enter="save(folder)"
sg-escape="revertEditing(folder)"/>
</md-input-container>
<md-button class="iconButton" label:aria-label="Options"
ng-show="currentFolder.id==folder.id">
<i class="md-icon-more-vert"><!-- options --></i>
<md-button class="iconButton md-secondary" label:aria-label="Options"
ng-show="currentFolder.id==folder.id"
ng-click="">
<i class="md-icon-more-vert"><!-- options --></i>
</md-button>
</md-list-item>
</md-list>
@ -235,16 +231,15 @@
<!-- Remote/domain addressbooks -->
<section>
<md-subheader class="sg-md-subheader md-padding">
<var:string label:value="Global Addressbooks"/>
<var:string label:value="Global Addressbooks"/>
</md-subheader>
<md-list>
<md-list-item ng-repeat="folder in service.$remotes track by folder.id"
ng-click="select(folder)"
ui-sref="app.addressbook({addressbookId: folder.id})"
ui-sref-active="sg-active">
<i ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
<button class="md-button md-flex sg-item-name"
ng-click="select(folder)"
ng-cloak="ng-cloak"
ui-sref="app.addressbook({addressbookId: folder.id})">{{folder.name}}</button>
<p class="sg-item-name">{{folder.name}}</p>
</md-list-item>
</md-list>
</section>
@ -260,7 +255,7 @@
<var:component className="UIxTopnavToolbarTemplate" />
</div>
<div class="md-toolbar-tools md-toolbar-tools-bottom" layout="row" layout-align="space-between center">
<div class="view-list cols-6 sg-padded" layout="row" layout-align="space-between center"
<div class="view-list sg-padded" layout="row" layout-align="space-between center"
sg-search="addressbook.$filter(searchText, { search: searchField })">
<md-input-container class="sg-search-field-container">
<label style="color: white"><i class="md-icon-search"><!--icon--></i><var:string label:value="Search"/></label>
@ -278,7 +273,8 @@
</div>
</md-toolbar>
<div layout="row" class="md-flex" layout-align="space-between">
<md-content class="view-list" id="contactsList">
<div class="view-list" layout="column" flex="true" style="position: relative;">
<md-content id="contactsList">
<header class="sg-md-subheader sg-md-subheader--fixed">
<h2 class="sg-md-subhead-solo fg-sogoBlue-700">Contacts</h2>
</header>
@ -300,7 +296,7 @@
<md-list-item ng-repeat="currentCard in currentFolder.cards track by currentCard.id">
<div layout="row" flex="true"
ng-class="{_selected: card.id == currentCard.id}"
ng-click="select($index); toggleDetailView()">
ng-click="toggleDetailView()">
<div class="sg-avatar" ng-show="currentCard.tag == 'vcard'">
<!--card avatar-->
</div>
@ -318,11 +314,12 @@
</md-list>
</md-content>
<md-button class="iconButton md-fab md-fab--bottom md-accent hide-sm"
<md-button class="iconButton md-fab md-fab-bottom-right md-accent"
label:aria-label="New Contact"
ng-click="newComponent()">
<i class="md-icon-add"><!--icon--></i>
</md-button>
</div>
<!-- This extra container is used to animate views transitions
double quotes in ng-animate is not a typo -->
@ -330,11 +327,6 @@
<md-card class="viewer" ui-view="card"><!-- card view --></md-card>
</div>
<md-button class="iconButton md-fab md-accent show-sm"
label:aria-label="New Contact"
ng-click="newComponent()">
<i class="md-icon-add"><!--icon--></i>
</md-button>
</div>
</script>

19
UI/Templates/MailerUI/UIxMailFolderTemplate.wox
View File

@ -1,14 +1,15 @@
<?xml version='1.0' standalone='yes'?>
<container
xmlns="http://www.w3.org/1999/xhtml"
>
<md-content class="view-list cols-6" style="position: relative;" id="messagesList">
xmlns:label="OGo:label">
<div class="view-list md-layout-fill" layout="column" flex="true" style="position: relative;">
<md-content id="messagesList">
<style>
.vs-repeat-repeated-element {
width: 100%;
}
</style>
<header class="sg-md-subheader">
<header class="sg-md-subheader sg-md-subheader--fixed">
<h2 class="sg-md-subhead-solo fg-sogoBlue-700">Unread Messages</h2>
</header>
<md-list vs-repeat="72"
@ -41,13 +42,15 @@
</md-list-item>
</md-list>
</md-content>
<md-button class="iconButton md-fab md-fab-bottom-right md-accent"
label:aria-label="Write a new message"
ui-sref="mail.newMessage()">
<i class="md-icon-add"><!--icon--></i>
</md-button>
</div>
<!-- This extra container is used to animate views transitions
double quotes in ng-animate is not a typo -->
<div id="detailView" class="view-detail ng-cloak" layout="column" ui-view="message" ng-animate="'view'"><!-- message view --></div>
<!-- Responsive: show-small only -->
<md-button class="iconButton md-fab md-accent show-sm" aria-label="create" ui-sref="mail.newMessage()">
<i class="md-icon-add"><!-- icon --></i>
</md-button>
</container>

35
UI/Templates/MailerUI/UIxMailMainFrame.wox
View File

@ -266,10 +266,35 @@
<md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1 md-layout-fill" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
<var:component className="UIxSidenavToolbarTemplate" />
<md-content md-scroll-y="md-scroll-y" class="md-flex">
<md-list ng-repeat="account in accounts track by account.id">
<h2 class="sg-md-subheader--static sg-padded">{{account.name}}</h2>
<sg-folder-tree ng-repeat="folder in account.$mailboxes track by folder.id" sg-root="account" sg-folder="folder" sg-select-folder="setCurrentFolder"><!-- tree --></sg-folder-tree>
</md-list>
<section ng-repeat="account in accounts track by account.id">
<md-subheader class="sg-md-subheader md-padding">{{account.name}}</md-subheader>
<md-list>
<md-list-item ng-repeat="folder in account.$flattenMailboxes() track by folder.path"
ng-click="selectFolder(account, folder)"
ng-dblclick="editFolder(folder)"
ui-sref="mail.account.mailbox({accountId: account.id, mailboxId: (folder.path | encodeUri)})"
ui-sref-active="sg-active">
<i class="md-icon-folder" ng-class="'sg-child-level-' + folder.level"><!-- icon --></i>
<p class="sg-item-name"
ng-show="editMode != folder.path">{{folder.name}}</p>
<md-input-container class="md-flex md-tile-content"
ng-show="editMode == folder.path">
<input class="folder-name" type="text"
label:aria-label="Enter the new name of your folder :"
ng-model="folder.name"
ng-blur="saveFolder(folder)"
sg-focus-on="mailboxName_{{folder.path}}"
sg-enter="saveFolder(folder)"
sg-escape="revertEditing(folder)"/>
</md-input-container>
<md-button class="iconButton md-secondary" label:aria-label="Options"
ng-show="currentFolder.path == folder.path"
ng-click="confirmDelete(folder)">
<i class="md-icon-more-vert"><!-- options --></i>
</md-button>
</md-list-item>
</md-list>
</section>
</md-content>
</md-sidenav>
@ -305,7 +330,7 @@
</div>
</div>
</md-toolbar>
<div layout="row" ui-view="mailbox"><!-- messages list --></div>
<div layout="row" ui-view="mailbox"><!-- messages list --></div>
</section>
</script>

141
UI/Templates/SchedulerUI/UIxCalMainView.wox
View File

@ -151,7 +151,7 @@
ng-repeat="calendar in calendars.service.$subscriptions"
ng-model="calendar"><!-- stylesheet --></div>
<!-- Sidenav -->
<md-sidenav id="left-sidenav" class="md-sidenav-left" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
<md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
<var:component className="UIxSidenavToolbarTemplate" />
<md-content md-scroll-y="md-scroll-y" class="md-flex">
<!-- User's calendars -->
@ -159,10 +159,9 @@
<md-subheader class="sg-md-subheader">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Calendars"/></span>
<md-button
class="iconButton"
label:aria-label="New Calendar..."
ng-click="newCalendar()">
<md-button class="iconButton"
label:aria-label="New Calendar..."
ng-click="newCalendar()">
<i class="md-icon-add-circle-outline"><!-- add --></i>
</md-button>
</div>
@ -170,14 +169,12 @@
<md-list>
<md-list-item ng-repeat="calendar in calendars.service.$calendars">
<md-checkbox ng-model="calendar.active"
ng-class="calendar.getClassName('checkbox')"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Enable"><!-- enable --></md-checkbox>
<p class="sg-item-name">{{calendar.name}}</p>
<i class="md-icon-turned-in md-display-8"
ng-class="calendar.getClassName()"><!-- calendar
color --></i>
<md-button class="iconButton" label:aria-label="Options"
<md-button class="iconButton md-secondary" label:aria-label="Options"
ng-click="share(calendar)">
<i class="md-icon-more-vert"><!-- options --></i>
</md-button>
@ -189,17 +186,39 @@
<md-subheader class="sg-md-subheader">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Subscriptions"/></span>
<md-button
class="iconButton"
label:aria-label="Subscribe to a Calendar..."
sg-subscribe="calendar"
sg-subscribe-on-select="subscribeToFolder(folderData)">
<md-button class="iconButton"
label:aria-label="Subscribe to a Calendar..."
sg-subscribe="calendar"
sg-subscribe-on-select="subscribeToFolder(folderData)">
<i class="md-icon-add-circle-outline"><!-- add --></i>
</md-button>
</div>
</md-subheader>
<md-list>
<md-list-item ng-repeat="calendar in calendars.service.$subscriptions">
<md-checkbox ng-model="calendar.active"
ng-class="calendar.getClassName('checkbox')"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Enable"><!-- enable --></md-checkbox>
<p class="sg-item-name">{{calendar.name}}</p>
</md-list-item>
</md-list>
</section>
<!-- Web Calendars -->
<section>
<md-subheader class="sg-md-subheader">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Web Calendars"/></span>
<md-button class="iconButton"
label:aria-label="Subscribe to a web calendar..."
ng-click="addWebCalendar()">
<i class="md-icon-add-circle-outline"><!-- add --></i>
</md-button>
</div>
</md-subheader>
<md-list>
<md-list-item ng-repeat="calendar in calendars.service.$webcalendars">
<md-checkbox ng-model="calendar.active"
ng-true-value="1"
ng-false-value="0"
@ -217,7 +236,7 @@
<section layout="column" class="sg-app-content md-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">
<div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
<var:component className="UIxTopnavToolbarTemplate" />
<div class="sg-toolbar-group-2">
<md-button class="iconButton" label:aria-label="Search">
@ -225,8 +244,8 @@
</md-button>
</div>
</div><!-- .md-toolbar-tools -->
<div layout="row" layout-align="space-between center" class="md-toolbar-tools md-toolbar-tools-bottom">
<div class="cols-6" layout="row" layout-align="space-between center" style="padding-right: 16px"
<div class="md-toolbar-tools md-toolbar-tools-bottom" layout="row" layout-align="space-between center">
<div class="view-list sg-padded" layout="row" layout-align="space-between center"
sg-search="list.component.$filter(list.componentType, { value: searchText, search: searchField })">
<md-input-container class="sg-search-field-container">
<label style="color: white"><i class="md-icon-search"><!--icon--></i><var:string label:value="Search"/></label>
@ -237,10 +256,9 @@
<md-option value="title_Category_Location"><var:string label:value="Title, category or location"/></md-option>
<md-option value="entireContent"><var:string label:value="Entire content"/></md-option>
</md-select>
<span class="md-icon-create"><!-- icon --></span>
</div>
</div>
<div class="spacer"><!-- spacer -->
<div class="sg-padded">
<a class="iconButton md-button md-default-theme"
label:aria-label="Day"
href="#/calendar/day"><i class="md-icon-view-day"><!-- day view --></i></a>
@ -254,46 +272,51 @@
</div>
</md-toolbar>
<md-content layout="row">
<md-content id="componentsList"
flex="33"
md-scroll-y="md-scroll-y">
<md-tabs md-dynamic-height="true"
md-selected="list.selectedList">
<md-tab label:label="Events"
md-on-select="list.selectComponentType('events')">
<md-list>
<md-list-item
class="md-clickable md-2-line"
ng-repeat="event in list.component.$events">
<i class="md-avatar" ng-class="event.getClassName('bg')" ><!-- calendar color --></i>
<div class="md-list-item-text"
ui-sref="calendars.component({calendarId: event.c_folder, componentId: event.c_name})">
<h3>{{event.c_title}}</h3>
<p>{{event.c_location}}</p>
<p class="md-secondary">
{{event.formatted_startdate}}
<i class="md-icon-repeat" ng-show="event.c_iscycle"><!-- recurrent --></i>
<i class="md-icon-alarm" ng-show="event.c_nextalarm"><!-- alarm --></i>
</p>
</div>
</md-list-item>
</md-list>
</md-tab>
<md-tab label:label="Tasks"
md-on-select="list.selectComponentType('tasks')">
<md-list>
<md-list-item
class="md-clickable"
ng-repeat="task in list.component.$tasks">
<i class="md-avatar" ng-class="task.getClassName()" ><!-- calendar color --></i>
<p>{{task.c_title}}</p>
<p class="md-secondary">{{task.formatted_enddate}}</p>
</md-list-item>
</md-list>
</md-tab>
</md-tabs>
</md-content>
<md-content flex="67" ui-view="calendarView"><!-- calendar view --></md-content>
<div class="view-list" layout="column" flex="true" style="position: relative;">
<md-content id="componentsList">
<md-tabs md-dynamic-height="true"
md-selected="list.selectedList">
<md-tab label:label="Events"
md-on-select="list.selectComponentType('events')">
<md-list>
<md-list-item
class="md-clickable md-2-line"
ng-repeat="event in list.component.$events">
<i class="md-avatar" ng-class="event.getClassName('bg')" ><!-- calendar color --></i>
<div class="md-list-item-text"
ui-sref="calendars.component({calendarId: event.c_folder, componentId: event.c_name})">
<h3>{{event.c_title}}</h3>
<p>{{event.c_location}}</p>
<p class="md-secondary">
{{event.formatted_startdate}}
<i class="md-icon-repeat" ng-show="event.c_iscycle"><!-- recurrent --></i>
<i class="md-icon-alarm" ng-show="event.c_nextalarm"><!-- alarm --></i>
</p>
</div>
</md-list-item>
</md-list>
</md-tab>
<md-tab label:label="Tasks"
md-on-select="list.selectComponentType('tasks')">
<md-list>
<md-list-item
class="md-clickable"
ng-repeat="task in list.component.$tasks">
<i class="md-avatar" ng-class="task.getClassName()" ><!-- calendar color --></i>
<p>{{task.c_title}}</p>
<p class="md-secondary">{{task.formatted_enddate}}</p>
</md-list-item>
</md-list>
</md-tab>
</md-tabs>
</md-content>
<md-button class="iconButton md-fab md-fab-bottom-right md-accent hide-sm"
label:aria-label="New Appointment"
ng-click="newComponent()">
<i class="md-icon-add"><!--icon--></i>
</md-button>
</div>
<md-content class="view-detail sg-padded" ui-view="calendarView"><!-- calendar view --></md-content>
</md-content>
<md-sidenav class="md-sidenav-right" md-component-id="right" layout="column" ui-view="componentEditor"><!-- appointment editor view --><!--<var:component className="UIxAppointmentEditorTemplate" />--></md-sidenav>
</section>

6
UI/WebServerResources/js/Appointments/calendar-model.js
View File

@ -140,8 +140,10 @@
* @desc Return the calendar CSS class name based on its ID.
* @returns a string representing the foreground CSS class name
*/
Calendar.prototype.getClassName = function() {
return 'fg-folder' + this.id;
Calendar.prototype.getClassName = function(base) {
if (angular.isUndefined(base))
base = 'fg';
return base + '-folder' + this.id;
};
/**

20
UI/WebServerResources/js/Common/ui-desktop.js
View File

@ -702,15 +702,19 @@
scope: {
ngModel: '='
},
template:
'<style type="text/css">' +
' .bg-folder{{ ngModel.id }} {' +
' background-color: {{ ngModel.color }} !important;' +
' }' +
' .fg-folder{{ ngModel.id }} {' +
' color: {{ ngModel.color }} !important;' +
' }' +
template: [
'<style type="text/css">',
' .bg-folder{{ ngModel.id }} {',
' background-color: {{ ngModel.color }} !important;',
' }',
' .fg-folder{{ ngModel.id }} {',
' color: {{ ngModel.color }} !important;',
' }',
' .checkbox-folder{{ ngModel.id }}.md-checked .md-icon {',
' background-color: {{ ngModel.color }} !important;',
' }',
'</style>'
].join('')
}
}])

11
UI/WebServerResources/js/ContactsUI.js
View File

@ -32,7 +32,7 @@
},
resolve: {
stateAddressbooks: ['sgAddressBook', function(AddressBook) {
return AddressBook.$findAll(contactFolders);
return AddressBook.$findAll(window.contactFolders);
}]
}
})
@ -112,7 +112,7 @@
// $scope functions
$scope.select = function(folder) {
$scope.editMode = false;
//$rootScope.currentFolder = folder;
$state.go('app.addressbook', {addressbookId: folder.id});
};
$scope.newAddressbook = function(ev) {
$scope.editMode = false;
@ -215,7 +215,12 @@
$scope.exportCards = function() {
window.location.href = ApplicationBaseURL + '/' + $scope.currentFolder.id + '/exportFolder';
};
$scope.share = function() {
$scope.share = function(folder) {
if (folder.id != $scope.currentFolder.id) {
// Counter the possibility to click on the "hidden" secondary button
$scope.select(folder);
return;
}
$mdDialog.show({
templateUrl: $scope.currentFolder.id + '/UIxAclEditor', // UI/Templates/UIxAclEditor.wox
controller: AddressBookACLController,

20
UI/WebServerResources/js/Mailer/account-model.js
View File

@ -83,6 +83,7 @@
else {
Account.$Mailbox.$find(this).then(function(data) {
_this.$mailboxes = data;
_this.$flattenMailboxes({reload: true});
deferred.resolve(_this.$mailboxes);
});
}
@ -90,23 +91,30 @@
return deferred.promise;
};
Account.prototype.$flattenMailboxes = function() {
/**
* @function $flattenMailboxes
* @memberof Account.prototype
* @desc Get a flatten array of the mailboxes.
* @param {object} [options] - force a reload
* @returns an array of Mailbox instances
*/
Account.prototype.$flattenMailboxes = function(options) {
var _this = this,
allMailboxes = [],
_visit = function(level, mailboxes) {
_visit = function(mailboxes) {
_.each(mailboxes, function(o) {
allMailboxes.push({ id: o.id, path: o.path, name: o.name, level: level });
allMailboxes.push(o);
if (o.children && o.children.length > 0) {
_visit(level+1, o.children);
_visit(o.children);
}
});
};
if (this.$$flattenMailboxes) {
if (this.$$flattenMailboxes && !(options && options.reload)) {
allMailboxes = this.$$flattenMailboxes;
}
else {
_visit(0, this.$mailboxes);
_visit(this.$mailboxes);
_this.$$flattenMailboxes = allMailboxes;
}

8
UI/WebServerResources/js/Mailer/mailbox-model.js
View File

@ -88,10 +88,11 @@
Mailbox.$unwrapCollection = function(account, futureMailboxData) {
var collection = [],
// Local recursive function
createMailboxes = function(mailbox) {
createMailboxes = function(level, mailbox) {
for (var i = 0; i < mailbox.children.length; i++) {
mailbox.children[i].level = level;
mailbox.children[i] = new Mailbox(account, mailbox.children[i]);
createMailboxes(mailbox.children[i]);
createMailboxes(level+1, mailbox.children[i]);
}
};
//collection.$futureMailboxData = futureMailboxData;
@ -100,8 +101,9 @@
return Mailbox.$timeout(function() {
// Each entry is spun up as a Mailbox instance
angular.forEach(data.mailboxes, function(data, index) {
data.level = 0;
var mailbox = new Mailbox(account, data);
createMailboxes(mailbox); // recursively create all sub-mailboxes
createMailboxes(1, mailbox); // recursively create all sub-mailboxes
collection.push(mailbox);
});
return collection;

61
UI/WebServerResources/js/MailerUI.js
View File

@ -186,45 +186,45 @@
});
};
$scope.editFolder = function(folder) {
$rootScope.$broadcast('sgEditFolder', folder.id);
$scope.editMode = folder.path;
focus('mailboxName_' + folder.path);
};
$scope.setCurrentFolder = function(account, folder) {
$scope.revertEditing = function(folder) {
folder.$reset();
$scope.editMode = false;
};
$scope.selectFolder = function(account, folder) {
if ($scope.editMode == folder.path)
return;
$rootScope.currentFolder = folder;
$scope.editMode = false;
$state.go('mail.account.mailbox', { accountId: account.id, mailboxId: encodeUriFilter(folder.path) });
};
$scope.saveFolder = function(folder) {
folder.$rename();
};
$scope.exportMails = function() {
window.location.href = ApplicationBaseURL + '/' + $rootScope.currentFolder.id + '/exportFolder';
};
$scope.confirmDelete = function() {
$scope.confirmDelete = function(folder) {
if (folder.path != $scope.currentFolder.path) {
// Counter the possibility to click on the "hidden" secondary button
$scope.selectFolder(folder.$account, folder);
return;
}
Dialog.confirm(l('Confirmation'), l('Do you really want to move this folder into the trash ?'))
.then(function(res) {
if (res) {
$rootScope.currentFolder.$delete()
.then(function() {
$rootScope.currentFolder = null;
}, function(data, status) {
Dialog.alert(l('An error occured while deleting the mailbox "%{0}".',
$rootScope.currentFolder.name),
l(data.error));
});
}
});
.then(function() {
folder.$delete()
.then(function() {
$rootScope.currentFolder = null;
$state.go('mail');
}, function(data, status) {
Dialog.alert(l('An error occured while deleting the mailbox "%{0}".', folder.name),
l(data.error));
});
});
};
// Register listeners
$scope.$on('sgRevertFolder', function(event, folderId) {
if (folderId == $scope.currentFolder.id) {
$scope.currentFolder.$reset();
event.stopPropagation();
}
});
$scope.$on('sgSaveFolder', function(event, folderId) {
if (folderId == $scope.currentFolder.id) {
$scope.currentFolder.$rename();
event.stopPropagation();
}
});
if ($state.current.name == 'mail' && $scope.accounts.length > 0 && $scope.accounts[0].$mailboxes.length > 0) {
// Redirect to first mailbox of first account if no mailbox is selected
var account = $scope.accounts[0];
@ -237,9 +237,6 @@
$scope.account = stateAccount;
$rootScope.mailbox = stateMailbox;
$rootScope.currentFolder = stateMailbox;
$timeout(function() {
$rootScope.$broadcast('sgSelectFolder', stateMailbox.id);
});
}])
.controller('MessageCtrl', ['$scope', '$rootScope', '$stateParams', '$state', 'stateAccount', 'stateMailbox', 'stateMessage', '$timeout', 'encodeUriFilter', 'sgFocus', 'sgDialog', 'sgAccount', 'sgMailbox', function($scope, $rootScope, $stateParams, $state, stateAccount, stateMailbox, stateMessage, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox) {

10
UI/WebServerResources/scss/components/button/button.scss
View File

@ -152,16 +152,10 @@ md-toolbar .md-toolbar-tools .iconButton:last-child,
// flex might stretch or squize fab bottons
min-width: $button-fab-width;
min-height: $button-fab-height;
// this is a temporary fix, see comment in variables
padding: $mg;
margin-right: $mg;
// this is to positioned the button on the toolbar's edge
transform: translate3d(0, -50%, 0);
&:hover {
transform: translate3d(0, -49%, 0);
[class ^= md-icon],
[class *= md-icon-] {
[class^=md-icon],
[class*=md-icon-] {
transform: scale($iconButton-hover-scale);
}
}

8
UI/WebServerResources/scss/components/list/list.scss
View File

@ -25,6 +25,7 @@
md-list {
.sg-item-name {
font-size: sg-size(button);
max-width: 75%; // leave some place for a secondary button
text-transform: initial;
overflow: hidden;
text-align: left;
@ -33,6 +34,13 @@ md-list {
}
}
// Add some padding to the first icon in a list item
.md-list-item-inner {
> i:first-child {
padding-right: $mg;
}
}
// The right tile for a list item.
// ----------------------------------------------------------------------------
.md-tile-right {

2
UI/WebServerResources/scss/components/sidenav/sidenav.scss
View File

@ -50,7 +50,7 @@ md-sidenav {
// ---------------------------------------
$i: 1;
@while $i < 12 {
md-item-content .sg-child-level-#{$i} { padding-left: 2em * $i; }
md-list-item .sg-child-level-#{$i} { padding-left: $mg * $i; }
$i: $i + 1;
}