sogo/UI/Templates/PreferencesUI/UIxPreferences.wox
Francis Lachapelle 5b3d84ee24 refactor(preferences): conditionally activate the Sieve script
All the user defaults are now editable through the Preferences module,
even if an external Sieve script is enabled. However, the user can
disable the external Sieve script and force the activation of the
"sogo" Sieve script.
2019-11-15 14:37:35 -05:00

1118 lines
54 KiB
XML

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE var:component>
<var:component
xmlns="http://www.w3.org/1999/xhtml"
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label"
className="UIxPageFrame"
title="title"
const:jsFiles="vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js, vendor/ng-sortable.min.js, Common.js, Preferences.js, Preferences.services.js, Mailer.services.js, Contacts.services.js">
<main layout-fill="layout-fill" ui-view="preferences"
ng-controller="navController"><!-- preferences --> </main>
<script type="text/javascript">
var mailCustomFromEnabled = <var:string value="mailCustomFromEnabled" const:escapeHTML="NO"/>;
var forwardEnabled = <var:string value="forwardEnabled" const:escapeHTML="NO"/>;
var vacationEnabled = <var:string value="isVacationEnabled" const:escapeHTML="NO"/>;
var timeZonesList = <var:string value="timeZonesList" const:escapeHTML="NO"/>;
var defaultEmailAddresses = '<var:string value="defaultEmailAddresses" const:escapeHTML="NO"/>';
var defaultCalendarCategories = <var:string value="defaultCalendarCategoriesColors" const:escapeHTML="NO"/>;
var forwardConstraints = <var:string value="forwardConstraints" const:escapeHTML="NO"/>;
var forwardConstraintsDomains = <var:string value="forwardConstraintsDomains" const:escapeHTML="NO"/>;
var sieveCapabilities = <var:string value="sieveCapabilities" const:escapeHTML="NO"/>;
</script>
<script type="text/ng-template" id="preferences.html">
<form name="preferencesForm" class="view"
layout="row" layout-fill="layout-fill">
<md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" layout="column"
md-component-id="left" md-is-locked-open="isGtMedium"
ng-class="{ 'sg-close': leftIsClose }">
<var:component className="UIxSidenavToolbarTemplate" />
<md-content md-scroll-y="md-scroll-y" class="md-flex"
md-colors="::{ backgroundColor: 'default-background-300' }">
<md-subheader
md-colors="::{background: 'default-background-300'}">{{ ::'Preferences' | loc }}</md-subheader>
<md-list>
<md-list-item ng-click="app.go('general', preferencesForm)"
ng-disabled="preferencesForm.$invalid"
ui-sref="preferences.general"
ui-sref-active="md-default-theme md-background md-bg md-hue-1">
<md-icon>settings</md-icon>
<p class="sg-item-name"><var:string label:value="General"/></p>
</md-list-item>
<var:if condition="userHasCalendarAccess">
<md-list-item ng-click="app.go('calendars', preferencesForm)"
ng-disabled="preferencesForm.$invalid"
ui-sref="preferences.calendars"
ui-sref-active="md-default-theme md-background md-bg md-hue-1">
<md-icon>event</md-icon>
<p class="sg-item-name"><var:string label:value="Calendar"/></p>
</md-list-item>
</var:if>
<md-list-item ng-click="app.go('addressbooks', preferencesForm)"
ng-disabled="preferencesForm.$invalid"
ui-sref="preferences.addressbooks"
ui-sref-active="md-default-theme md-background md-bg md-hue-1">
<md-icon>contacts</md-icon>
<p class="sg-item-name"><var:string label:value="Contacts"/></p>
</md-list-item>
<var:if condition="userHasMailAccess">
<md-list-item ng-click="app.go('mailer', preferencesForm)"
ng-disabled="preferencesForm.$invalid"
ui-sref="preferences.mailer"
ui-sref-active="md-default-theme md-background md-bg md-hue-1">
<md-icon>email</md-icon>
<p class="sg-item-name"><var:string label:value="Mail"/></p>
</md-list-item>
</var:if>
</md-list>
</md-content>
</md-sidenav>
<section layout="column" layout-fill="layout-fill">
<!-- TOP RIGHT TOOLBAR -->
<md-toolbar layout="row" layout-align="space-between start" class="md-tall">
<var:component className="UIxTopnavToolbar" const:navButtonClick="app.confirmChanges($event, preferencesForm)"/>
<md-button type="button" class="md-fab md-fab-bottom-right md-fab-overlap-bottom"
ng-disabled="preferencesForm.$invalid || preferencesForm.$pristine"
ng-click="app.save(preferencesForm)">
<md-icon>save</md-icon>
</md-button>
</md-toolbar>
<md-content layout="column">
<div ui-view="module"><!-- view --></div>
</md-content>
</section>
</form>
</script>
<!--
GENERAL PREFERENCE PANEL
-->
<script type="text/ng-template" id="generalPreferences.html">
<md-tabs class="md-flex" md-border-bottom="md-border-bottom" md-dynamic-height="true">
<!-- GENERAL OPTIONS -->
<md-tab id="generalOptionsView" aria-controls="generalOptionsView-content" label:label="General">
<md-content layout="row"
aria-labelledby="generalOptionsView"
id="generalOptionsView-content" class="md-inline-form md-padding">
<div layout="column" flex="100">
<md-input-container>
<label><var:string label:value="SOGo Version"/></label>
<input type="text" ng-readonly="true" var:value="sogoVersion"/>
</md-input-container>
<div layout="row">
<md-input-container class="md-block" flex="50">
<label><var:string label:value="Language"/></label>
<md-select ng-model="app.preferences.defaults.SOGoLanguage"
ng-change="app.onLanguageChange(preferencesForm)">
<var:foreach list="languages" item="item">
<md-option var:value="item">
<var:string value="languageText"/> <small md-colors="::{ color: 'default-background-500'}"><var:string value="languageLocale.NSLocaleCode"/></small>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<md-autocomplete
class="md-block" flex="50"
md-search-text="app.timeZonesSearchText"
md-selected-item="app.preferences.defaults.SOGoTimeZone"
md-items="timezone in app.timeZonesListFilter(app.timeZonesSearchText)"
md-item-text="timezone"
md-min-length="3"
md-select-on-match="true"
md-match-case-insensitive="true"
ng-required="true"
sg-select-only="sg-select-only"
label:md-floating-label="Current Time Zone">
<md-item-template>
<span md-highlight-text="app.timeZonesSearchText">{{timezone}}</span>
</md-item-template>
<md-not-found>
<var:string label:value="No matches found."/>
</md-not-found>
</md-autocomplete>
</div>
<div layout="row" layout-wrap="layout-wrap">
<md-input-container class="md-block" flex="30" flex-xs="100">
<label><var:string label:value="Short Date Format"/></label>
<md-select ng-model="app.preferences.defaults.SOGoShortDateFormat">
<var:foreach list="shortDateFormatsList" item="item">
<md-option var:value="item">
<var:string value="itemShortDateFormatText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex="40" flex-xs="100">
<label><var:string label:value="Long Date Format"/></label>
<md-select ng-model="app.preferences.defaults.SOGoLongDateFormat">
<var:foreach list="longDateFormatsList" item="item">
<md-option var:value="item">
<var:string value="itemLongDateFormatText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex="30" flex-xs="100">
<label><var:string label:value="Time Format"/></label>
<md-select ng-model="app.preferences.defaults.SOGoTimeFormat">
<var:foreach list="timeFormatsList" item="item">
<md-option var:value="item">
<var:string value="itemTimeFormatText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
</div>
<md-input-container>
<label><var:string label:value="Default Module"/></label>
<md-select ng-model="app.preferences.defaults.SOGoLoginModule">
<var:foreach list="availableModules" item="item">
<md-option var:value="item">
<var:string value="itemModuleText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<md-input-container>
<label><var:string label:value="Refresh View"/></label>
<md-select ng-model="app.preferences.defaults.SOGoRefreshViewCheck">
<var:foreach list="refreshViewList" item="item">
<md-option var:value="item">
<var:string value="itemRefreshViewCheckText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<var:if condition="externalAvatarsEnabled">
<div layout="row" layout-align="start start">
<md-checkbox flex="20"
ng-model="app.preferences.defaults.SOGoGravatarEnabled"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Use Gravatar">
<var:string label:value="Use Gravatar"/>
</md-checkbox>
<md-input-container class="md-flex">
<label><var:string label:value="Alternate Avatar"/></label>
<md-select ng-model="app.preferences.defaults.SOGoAlternateAvatar"
ng-disabled="!app.preferences.defaults.SOGoGravatarEnabled">
<var:foreach list="alternateAvatar" item="item">
<md-option var:value="item">
<var:string value="itemAlternateAvatarText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
</div>
</var:if>
<md-input-container class="md-block md-input-has-value">
<label><var:string label:value="Animation Level"/></label>
<md-radio-group ng-model="app.preferences.defaults.SOGoAnimationMode">
<md-radio-button value="normal"><var:string label:value="animation_NORMAL"/></md-radio-button>
<md-radio-button value="limited"><var:string label:value="animation_LIMITED"/></md-radio-button>
<md-radio-button value="none"><var:string label:value="animation_NONE"/></md-radio-button>
</md-radio-group>
</md-input-container>
</div>
</md-content>
</md-tab>
<!-- PASSWORD OPTIONS -->
<var:if condition="shouldDisplayPasswordChange">
<md-tab id="generalPasswordView"
aria-controls="generalPasswordView-content"
label:label="Password">
<md-content id="passwordView" class="md-padding">
<div layout="row">
<md-input-container class="md-block" flex="50">
<label><var:string label:value="New password"/>
</label>
<input type="password" sg-no-dirty-check="true" ng-model="app.passwords.newPassword"/>
</md-input-container>
<md-input-container class="md-block" flex="50">
<label><var:string label:value="Confirmation"/>
</label>
<input type="password" sg-no-dirty-check="true" ng-model="app.passwords.newPasswordConfirmation"/>
</md-input-container>
</div>
<div layout="row" layout-align="end center">
<md-button ng-click="app.changePassword()" type="button" ng-disabled="!app.canChangePassword()">
<var:string label:value="Change"/>
</md-button>
</div>
</md-content>
</md-tab>
</var:if>
</md-tabs>
</script>
<!--
CALENDAR PREFERENCE PANEL
-->
<script type="text/ng-template" id="calendarsPreferences.html">
<var:if condition="userHasCalendarAccess">
<md-tabs md-border-bottom="md-border-bottom" md-dynamic-height="true">
<!-- CALENDAR - GENERAL -->
<md-tab id="calendarOptionsView"
aria-controls="calendarOptionsView-content"
label:label="General">
<md-content layout="row" layout-align="center center"
aria-labelledby="calendarOptionsView"
class="md-padding"
id="calendarOptionsView-content">
<div layout="column" flex="100">
<div layout="row">
<md-input-container class="md-block" flex="33">
<label><var:string label:value="Week begins on" /></label>
<md-select ng-model="app.preferences.defaults.SOGoFirstDayOfWeek">
<var:foreach list="daysList" item="item">
<md-option var:value="item">
<var:string value="itemWeekStartDay"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex="33">
<label><var:string label:value="Day start time" /></label>
<md-select ng-model="app.preferences.defaults.SOGoDayStartTime">
<var:foreach list="hoursList" item="item">
<md-option var:value="item">
<var:string value="item"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex="33">
<label><var:string label:value="Day end time" /></label>
<md-select ng-model="app.preferences.defaults.SOGoDayEndTime">
<var:foreach list="hoursList" item="item">
<md-option var:value="item">
<var:string value="item"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
</div>
<div class="pseudo-input-container"
layout="row" layout-align="center center">
<label class="pseudo-input-label"><var:string label:value="Week days to display"/></label>
<md-grid-list md-cols="7" md-row-height="2em" md-gutter="0.5em"
flex="50" flex-sm="80" flex-xs="100"
ng-model="app.preferences.defaults.SOGoCalendarWeekdays"
ng-required="true"
sg-toggle-grid="sg-toggle-grid">
<var:foreach list="shortWeekDaysList" item="item">
<md-grid-tile var:value="valueForWeekDay"><var:string value="item"/></md-grid-tile>
</var:foreach>
</md-grid-list>
</div>
<md-checkbox layout-padding="layout-padding"
ng-model="app.preferences.defaults.SOGoBusyOffHours"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Show time as busy outside working hours"/>
</md-checkbox>
<md-input-container>
<label><var:string label:value="First week of year"/></label>
<md-select label:aria-label="First week of year"
ng-model="app.preferences.defaults.SOGoFirstWeekOfYear">
<var:foreach list="firstWeekList" item="item">
<md-option var:value="item">
<var:string value="itemFirstWeekText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<md-input-container>
<label><var:string label:value="Default calendar" /></label>
<md-select ng-model="app.preferences.defaults.SOGoDefaultCalendar">
<var:foreach list="defaultCalendarList" item="item">
<md-option var:value="item">
<var:string value="itemCalendarText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<div layout="row">
<md-input-container class="md-block" flex="50">
<label><var:string label:value="Default events classification" /></label>
<md-select ng-model="app.preferences.defaults.SOGoCalendarEventsDefaultClassification">
<var:foreach list="calendarClassificationsList" item="item">
<md-option var:value="item">
<var:string value="itemClassificationText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex="50">
<label><var:string label:value="Default tasks classification"/></label>
<md-select ng-model="app.preferences.defaults.SOGoCalendarTasksDefaultClassification">
<var:foreach list="calendarClassificationsList" item="item">
<md-option var:value="item">
<var:string value="itemClassificationText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
</div>
<md-input-container>
<label><var:string label:value="Default reminder"/></label>
<md-select ng-model="app.preferences.defaults.SOGoCalendarDefaultReminder">
<var:foreach list="reminderValues" item="item">
<md-option var:value="item">
<var:string value="itemReminderText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
</div>
</md-content>
</md-tab>
<!-- CALENDAR - CATEGORIES -->
<md-tab id="calendarCategories"
aria-controls="calendarCategories-content"
label:label="Categories">
<md-content class="md-padding">
<div layout="column" flex="100">
<md-list layout="row" layout-wrap="layout-wrap">
<md-list-item flex="50" flex-xs="100"
ng-repeat="item in
app.preferences.defaults.SOGoCalendarCategories
track by $index">
<sg-color-picker ng-model="app.preferences.defaults.SOGoCalendarCategoriesColorsValues[$index]"><!-- color picker--></sg-color-picker>
<md-input-container class="md-block md-flex">
<input type="text" label:aria-label="Calendar Category" required="required"
name="calendarCategory_{{$index}}"
ng-model="app.preferences.defaults.SOGoCalendarCategories[$index]"
ng-change="app.resetCalendarCategoryValidity($index, preferencesForm)"
sg-focus-on="calendarCategory_{{$index}}"/>
<div ng-messages="preferencesForm['calendarCategory_' + $index].$error">
<div ng-message="duplicate"><var:string label:value="Duplicate name"/></div>
</div>
</md-input-container>
<md-button class="sg-icon-button" type="button"
layout="row" layout-align="end center"
label:aria-label="Remove Calendar Category"
ng-click="app.removeCalendarCategory($index, preferencesForm)">
<md-icon>remove_circle</md-icon>
</md-button>
</md-list-item>
</md-list>
<div layout="row" layout-align="end center">
<md-button type="button"
label:aria-label="Reset to defaults"
ng-click="app.resetCalendarCategories(preferencesForm)">
<var:string label:value="Reset to defaults"/>
</md-button>
<md-button type="button"
label:aria-label="Add Calendar Category"
ng-click="app.addCalendarCategory(preferencesForm)">
<var:string label:value="Add Calendar Category"/>
</md-button>
</div>
</div>
</md-content>
</md-tab>
<!-- CALENDAR - INVITATIONS -->
<md-tab id="calendarInvitationsTab"
aria-controls="calendarInvitationsTab-content"
label:label="Invitations">
<md-content layout="row" layout-align="space-around start"
class="md-padding"
aria-labelledby="calendarInvitationsTab"
id="calendarInvitationsTab-content">
<div layout="column" flex="100">
<md-checkbox
ng-model="app.preferences.settings.Calendar.PreventInvitations"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Prevent from being invited to appointments"/>
</md-checkbox>
<div flex-offset="5"
ng-show="app.preferences.settings.Calendar.PreventInvitations == 1">
<label>
<var:string label:value="White list for appointment invitations"/>
</label>
<md-contact-chips
flex="100"
class="sg-chips-autocomplete"
ng-model="app.preferences.settings.Calendar.PreventInvitationsWhitelist"
md-contacts="app.userFilter($query, app.preferences.settings.Calendar.PreventInvitationsWhitelist)"
md-contact-name="cn"
md-contact-image="$$image"
md-contact-email="c_email"
md-require-match="true"
md-highlight-flags="i"
filter-selected="false"
label:placeholder="Add"><!-- users --></md-contact-chips>
</div>
</div>
</md-content>
</md-tab>
</md-tabs>
</var:if>
</script>
<!--
CONTACTS PREFERENCE PANEL
-->
<script type="text/ng-template" id="addressbooksPreferences.html">
<md-tabs md-dynamic-height="true">
<!-- CONTACT > CATEGORIES -->
<md-tab id="contactsCategoriesTab" aria-controls="contactsCategoriesTab-content" label:label="Categories">
<md-content role="tabpanel" aria-labelledby="contactsCategoriesView"
id="contactsCategoriesView-content" class="md-padding">
<div layout="column" flex="100">
<md-list layout="row" layout-wrap="layout-wrap">
<md-list-item flex="50" flex-sm="100"
ng-repeat="item in
app.preferences.defaults.SOGoContactsCategories
track by $index">
<md-input-container class="md-block md-flex">
<input type="text"
label:aria-label="Contact Category"
required="required"
name="contactCategory_{{$index}}"
ng-model="app.preferences.defaults.SOGoContactsCategories[$index]"
sg-focus-on="contactCategory_{{$index}}"/>
<div ng-messages="preferencesForm['contactCategory_' + $index].$error">
<div ng-message="duplicate"><var:string label:value="Duplicate name"/></div>
</div>
</md-input-container>
<md-button type="button" class="sg-icon-button"
label:aria-label="Remove Contact Category"
ng-click="app.removeContactCategory($index, preferencesForm)">
<md-icon>remove_circle</md-icon>
</md-button>
</md-list-item>
</md-list>
<div layout="row" layout-align="end center">
<md-button type="button"
label:aria-label="Add Contact Category"
ng-click="app.addContactCategory(preferencesForm)">
<var:string label:value="Add Contact Category"/>
</md-button>
</div>
</div>
</md-content>
</md-tab>
<!-- END OF CONTACT > CATEGORIES -->
</md-tabs>
</script>
<!--
MAIL PREFERENCE PANEL
-->
<script type="text/ng-template" id="mailerPreferences.html">
<var:if condition="userHasMailAccess">
<md-tabs md-dynamic-height="true">
<!-- MAIL > GENERAL -->
<md-tab id="mailGeneralTab" aria-controls="mailGeneralTab-content" label:label="General">
<md-content role="tabpanel" aria-labelledby="mailGeneralView"
id="mailGeneralView-content" class="md-padding md-inline-form">
<div>
<md-checkbox
ng-model="app.preferences.defaults.SOGoMailShowSubscribedFoldersOnly"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Show subscribed mailboxes only">
<var:string label:value="Show subscribed mailboxes only"/>
</md-checkbox>
</div>
<div>
<md-checkbox
ng-model="app.preferences.defaults.SOGoMailSynchronizeOnlyDefaultFolders"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Synchronize only default mail folders (EAS)">
<var:string label:value="Synchronize only default mail folders (EAS)"/>
</md-checkbox>
</div>
<div>
<md-checkbox
ng-model="app.preferences.defaults.SOGoMailFetchAllUnseenCountFolders"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Fetch count of unseen messages for all mailboxes">
<var:string label:value="Fetch count of unseen messages for all mailboxes"/>
</md-checkbox>
</div>
<div>
<md-checkbox
ng-model="app.preferences.defaults.SOGoMailSortByThreads"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Sort messages by threads">
<var:string label:value="Sort messages by threads"/>
</md-checkbox>
</div>
<div class="hide-xs" layout="row" layout-align="start center" flex="50">
<md-checkbox
class="md-align-top-left"
ng-model="app.preferences.defaults.SOGoMailComposeWindowEnabled"
label:aria-label="Always show mail composer">
<!-- SOGoMailComposeWindow -->
</md-checkbox>
<md-input-container class="md-block hide-xs" flex="50">
<label><var:string label:value="Always open mail composer"/></label>
<md-select
ng-disabled="!app.preferences.defaults.SOGoMailComposeWindowEnabled"
ng-model="app.preferences.defaults.SOGoMailComposeWindow">
<md-option value="inline">
<var:string label:value="Inside current window"/>
</md-option>
<md-option value="popup">
<var:string label:value="In a popup window"/>
</md-option>
</md-select>
</md-input-container>
</div>
<div layout="row" layout-align="start center" flex="50" flex-xs="100">
<md-checkbox
class="md-align-top-left"
ng-model="app.preferences.defaults.SOGoMailAddOutgoingAddresses"
ng-true-value="1"
ng-false-value="0"
label:aria-label="When sending mail, add unknown recipients to my">
<!-- SOGoMailAddOutgoingAddresses -->
</md-checkbox>
<md-input-container class="md-block md-flex">
<label><var:string label:value="When sending mail, add unknown recipients to my"/></label>
<md-select
ng-disabled="app.preferences.defaults.SOGoMailAddOutgoingAddresses != 1"
ng-model="app.preferences.defaults.SOGoSelectedAddressBook">
<var:foreach list="addressBookList" item="item">
<md-option var:value="item.id">
<var:string value="item.name"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
</div>
<md-input-container class="md-block" flex="50" flex-xs="100">
<label><var:string label:value="Forward messages"/></label>
<md-select ng-model="app.preferences.defaults.SOGoMailMessageForwarding">
<var:foreach list="messageForwardingList" item="item">
<md-option var:value="item">
<var:string value="itemMessageForwardingText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<div layout="row" layout-wrap="layout-wrap">
<md-input-container class="md-block" flex="50" flex-xs="100">
<label><var:string label:value="When replying to a message"/></label>
<md-select ng-model="app.preferences.defaults.SOGoMailReplyPlacement">
<var:foreach list="replyPlacementList" item="item">
<md-option var:value="item">
<var:string value="itemReplyPlacementText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex="50" flex-xs="100">
<label><var:string label:value="And place my signature"/></label>
<md-select ng-model="app.preferences.defaults.SOGoMailSignaturePlacement">
<var:foreach list="signaturePlacementList" item="item">
<md-option var:value="item">
<var:string value="itemSignaturePlacementText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
</div>
<div layout="row" layout-wrap="layout-wrap">
<md-input-container class="md-block" flex="50">
<label><var:string label:value="Compose messages in"/></label>
<md-select ng-model="app.preferences.defaults.SOGoMailComposeMessageType">
<var:foreach list="composeMessagesType" item="item">
<md-option var:value="item">
<var:string value="itemComposeMessagesText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<div layout="row" flex="50"
ng-show="app.preferences.defaults.SOGoMailComposeMessageType == 'html'">
<md-checkbox
ng-model="app.preferences.defaults.SOGoMailComposeFontSizeEnabled"
label:aria-label="Default font size"><!-- default font size -->
</md-checkbox>
<md-input-container class="md-block md-flex">
<label><var:string label:value="Default font size"/></label>
<md-select label:aria-label="Default font size"
ng-disabled="!app.preferences.defaults.SOGoMailComposeFontSizeEnabled"
ng-required="app.preferences.defaults.SOGoMailComposeFontSizeEnabled"
ng-model="app.preferences.defaults.SOGoMailComposeFontSize">
<var:foreach list="fontSizesList" item="item">
<md-option var:value="item">
<var:string value="itemFontSizeText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
</div>
</div>
<md-input-container class="md-block" flex="50" flex-xs="100">
<label><var:string label:value="Display remote inline images"/></label>
<md-select ng-model="app.preferences.defaults.SOGoMailDisplayRemoteInlineImages">
<var:foreach list="displayRemoteInlineImages" item="item">
<md-option var:value="item">
<var:string value="itemDisplayRemoteInlineImagesText"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<div layout="row" layout-align="start center">
<p><var:string label:value="Auto save every"/></p>
<md-input-container class="md-input-number" md-no-float="md-no-float">
<input type="number" min="0" label:aria-label="minutes"
ng-model="app.preferences.defaults.SOGoMailAutoSave"/>
</md-input-container>
<var:string label:value="minutes"/>
</div>
</md-content>
</md-tab>
<!-- END OF MAIL > GENERAL -->
<!-- MAIL > LABELS -->
<md-tab id="mailLabelsTab"
aria-controls="mailLabelsTab-content" label:label="Labels">
<md-content role="tabpanel" aria-labelledby="mailLabelsView"
id="mailLabelsView-content" class="md-padding">
<md-list layout="row" layout-xs="column" layout-wrap="layout-wrap">
<md-list-item flex="50" flex-xs="100"
ng-repeat="key in app.preferences.defaults.SOGoMailLabelsColorsKeys
track by $index">
<sg-color-picker ng-model="app.preferences.defaults.SOGoMailLabelsColorsValues[$index][1]"><!-- color picker--></sg-color-picker>
<div layout="row" class="md-flex">
<md-input-container class="md-block md-flex">
<label><var:string label:value="Label"/></label>
<input type="text"
label:aria-label="Label"
ng-model="app.preferences.defaults.SOGoMailLabelsColorsValues[$index][0]"
sg-focus-on="mailLabel_{{$index}}"/>
</md-input-container>
<md-input-container class="md-block md-flex">
<label><var:string label:value="IMAP Label"/></label>
<input type="text"
name="mailIMAPLabel_{{$index}}"
label:aria-label="IMAP Label"
ng-model="app.preferences.defaults.SOGoMailLabelsColorsKeys[$index]"
ng-change="app.resetMailLabelValidity($index, preferencesForm)"
ng-pattern="app.mailLabelKeyRE" />
<div ng-messages="preferencesForm['mailIMAPLabel_' + $index].$error">
<div ng-message="pattern"><var:string label:value="Invalid label"/></div>
<div ng-message="duplicate"><var:string label:value="Duplicate label"/></div>
</div>
</md-input-container>
</div>
<md-button class="md-icon-button" type="button"
layout="row" layout-align="end center"
label:aria-label="Delete Label"
ng-click="app.removeMailLabel($index, preferencesForm)">
<md-icon>remove_circle</md-icon>
</md-button>
</md-list-item>
</md-list>
<div layout="row" layout-align="end center">
<md-button type="button"
label:aria-label="Create Label"
ng-click="app.addMailLabel(preferencesForm)">
<var:string label:value="Create Label"/>
</md-button>
</div>
</md-content>
</md-tab>
<!-- END OF MAIL > LABELS -->
<!-- MAIL > ACCOUNTS -->
<md-tab id="mailAccountsTab"
aria-controls="mailAccountsTab-content"
label:label="IMAP Accounts">
<md-list class="md-padding">
<md-list-item ng-repeat="item in
app.preferences.defaults.AuxiliaryMailAccounts
track by $index">
<md-input-container class="md-block md-flex">
<input type="text"
label:aria-label="Mail Account"
ng-model="app.preferences.defaults.AuxiliaryMailAccounts[$index].name"
ng-readonly="$index == 0"/>
</md-input-container>
<md-button class="sg-icon-button" type="button"
ng-click="app.editMailAccount($event, $index, preferencesForm)"
layout="row"
layout-align="end center"
label:aria-label="Edit Account">
<md-icon>edit</md-icon>
</md-button>
<md-button class="sg-icon-button" type="button"
ng-click="app.removeMailAccount($index, preferencesForm)"
ng-show="$index > 0"
layout="row"
layout-align="end center"
label:aria-label="Delete Account">
<md-icon>remove_circle</md-icon>
</md-button>
</md-list-item>
</md-list>
<var:if condition="mailAuxiliaryUserAccountsEnabled">
<div layout="row" layout-align="end center">
<md-button type="button"
ng-click="app.addMailAccount($event, preferencesForm)"
label:aria-label="Create Account">
<var:string label:value="New Mail Account"/>
</md-button>
</div>
</var:if>
</md-tab>
<!-- END OF MAIL > ACCOUNTS -->
<!-- MAIL > FILTERS -->
<var:if condition="isSieveScriptsEnabled">
<md-tab id="mailFiltersTab"
aria-controls="mailFiltersTab-content"
label:label="Filters"
sg-labels="MailerUI">
<md-content class="md-padding"
ng-include="'hasActiveExternalSieveScripts.html'"
ng-show="app.preferences.defaults.hasActiveExternalSieveScripts">
<!-- external Sieve script detected -->
</md-content>
<md-content role="tabpanel" aria-labelledby="mailFiltersView">
<div class="sg-list-sortable"
ng-model="app.preferences.defaults.SOGoSieveFilters"
as-sortable="{ scrollableContainer: '.sg-list-sortable', containment: '.sg-list-sortable', containerPositioning: 'relative', orderChanged: app.onFiltersOrderChanged(preferencesForm) }">
<div layout="row" layout-align="start center"
ng-repeat="item in app.preferences.defaults.SOGoSieveFilters"
as-sortable-item="as-sortable-item">
<md-button class="md-icon-button" md-no-ink="md-no-ink"
as-sortable-item-handle="as-sortable-item-handle">
<md-icon class="sg-sortable-grip">drag_handle</md-icon>
</md-button>
<md-checkbox
style="margin-bottom: 0;"
label:aria-label="Enable filter"
ng-model="app.preferences.defaults.SOGoSieveFilters[$index].active"
ng-true-value="1"
ng-false-value="0">
<!-- active or not-->
</md-checkbox>
<md-input-container class="md-flex">
<input type="text" label:aria-label="Filter name"
ng-model="app.preferences.defaults.SOGoSieveFilters[$index].name"/>
</md-input-container>
<md-button class="sg-icon-button" type="button"
ng-click="app.editMailFilter($event, $index, preferencesForm)"
layout="row" layout-align="end center"
label:aria-label="Edit Filter">
<md-icon>edit</md-icon>
</md-button>
<md-button class="sg-icon-button" type="button"
ng-click="app.removeMailFilter($index, preferencesForm)"
layout="row" layout-align="end center"
label:aria-label="Delete Filter">
<md-icon>remove_circle</md-icon>
</md-button>
</div>
</div>
<div layout="row" layout-align="end center">
<md-button type="button"
ng-click="app.addMailFilter($event, preferencesForm)"
label:aria-label="Create Filter">
<var:string label:value="Create Filter"/>
</md-button>
</div>
</md-content>
</md-tab>
</var:if>
<!-- END OF MAIL > FILTERS -->
<!-- MAIL > VACATION -->
<var:if condition="isVacationEnabled">
<md-tab id="mailVacationTab" aria-controls="mailVacationTab-content" label:label="Vacation">
<md-content class="md-padding"
ng-include="'hasActiveExternalSieveScripts.html'"
ng-show="app.preferences.defaults.hasActiveExternalSieveScripts">
<!-- external Sieve script detected -->
</md-content>
<div role="tabpanel" aria-labelledby="mailVacationView"
id="mailVacationView-content" class="md-padding">
<md-checkbox
ng-model="app.preferences.defaults.Vacation.enabled"
ng-true-value="1"
ng-false-value="0"
ng-change="app.updateVacationDates()"
label:aria-label="Enable vacation auto reply">
<var:string label:value="Enable vacation auto reply"/>
</md-checkbox>
<div class="md-inline-form" layout="column" flex-offset="5"
ng-show="app.preferences.defaults.Vacation.enabled == 1">
<div layout="row">
<md-checkbox
ng-model="app.preferences.defaults.Vacation.customSubjectEnabled"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Enable custom auto reply subject">
<!-- enable auto reply subject --></md-checkbox>
<md-input-container class="md-block md-flex">
<label><var:string label:value="Auto reply subject"/></label>
<input type="text"
ng-required="app.preferences.defaults.Vacation.customSubjectEnabled"
ng-disabled="!app.preferences.defaults.Vacation.customSubjectEnabled"
ng-model="app.preferences.defaults.Vacation.customSubject"/>
<div class="sg-hint" ng-show="app.sieveVariablesCapability">
<var:string label:value="You can write ${subject} to insert the original subject"/>
</div>
</md-input-container>
</div>
<md-input-container class="md-block md-flex md-input-has-placeholder">
<label><var:string label:value="Auto reply message"/></label>
<var:if condition="vacationHeader.length">
<p class="text-preview" md-colors="::{color: 'default-background-600'}"><var:string value="vacationHeader"/></p>
</var:if>
<textarea name="autoReplyText"
id="autoReplyText"
ng-model="app.preferences.defaults.Vacation.autoReplyText"/>
<var:if condition="vacationFooter.length">
<p class="text-preview" md-colors="::{color: 'default-background-600'}"><var:string value="vacationFooter"/></p>
</var:if>
</md-input-container>
<div layout="row" layout-align="start center">
<md-input-container class="md-block md-flex">
<label><var:string label:value="Email addresses (separated by commas)"/></label>
<textarea name="autoReplyEmailAddresses"
required="required"
id="autoReplyEmailAddresses"
ng-model="app.preferences.defaults.Vacation.autoReplyEmailAddresses"/>
</md-input-container>
<md-button ng-click="app.addDefaultEmailAddresses(preferencesForm)">
<var:string label:value="Add default email addresses" type="button"/>
</md-button>
</div>
<md-input-container class="md-block md-flex">
<label><var:string label:value="Days between responses"/></label>
<md-select label:aria-label="Days between responses"
ng-model="app.preferences.defaults.Vacation.daysBetweenResponse">
<var:foreach list="daysBetweenResponsesList" item="item">
<md-option var:value="item">
<var:string value="item"/>
</md-option>
</var:foreach>
</md-select>
</md-input-container>
<div>
<md-checkbox
ng-model="app.preferences.defaults.Vacation.ignoreLists"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Do not send responses to mailing lists" />
</md-checkbox>
</div>
<var:if condition="isVacationPeriodEnabled">
<div>
<md-checkbox
ng-model="app.preferences.defaults.Vacation.startDateEnabled"
ng-true-value="1"
ng-false-value="0"
ng-change="app.toggleVacationStartDate()">
<var:string label:value="Enable auto reply on" />
</md-checkbox>
<md-input-container>
<label class="md-no-truncate"><var:string label:value="First day of vacation"/></label>
<md-datepicker
name="vacationStartDate"
label:md-placeholder="Enter date"
ng-disabled="!app.preferences.defaults.Vacation.startDateEnabled"
ng-required="app.preferences.defaults.Vacation.startDateEnabled"
ng-model="app.preferences.defaults.Vacation.startDate"
md-date-filter="app.validateVacationStartDate"
sg-reset-on-disabled="sg-reset-on-disabled"><!-- datepicker --></md-datepicker>
</md-input-container>
</div>
<div>
<md-checkbox
ng-model="app.preferences.defaults.Vacation.endDateEnabled"
ng-true-value="1"
ng-false-value="0"
ng-change="app.toggleVacationEndDate()">
<var:string label:value="Disable auto reply on" />
</md-checkbox>
<md-input-container>
<label class="md-no-truncate"><var:string label:value="Last day of vacation"/></label>
<md-datepicker
name="vacationEndDate"
label:md-placeholder="Enter date"
ng-disabled="!app.preferences.defaults.Vacation.endDateEnabled"
ng-required="app.preferences.defaults.Vacation.endDateEnabled"
ng-model="app.preferences.defaults.Vacation.endDate"
md-date-filter="app.validateVacationEndDate"
sg-reset-on-disabled="sg-reset-on-disabled"><!-- datepicker --></md-datepicker>
</md-input-container>
</div>
</var:if>
<div>
<md-checkbox
ng-model="app.preferences.defaults.Vacation.alwaysSend"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Always send vacation message response"/>
<div class="sg-hint"><var:string label:value="The vacation message is sent prior to apply your filters."/></div>
</md-checkbox>
</div>
<div>
<md-checkbox
ng-model="app.preferences.defaults.Vacation.discardMails"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Discard incoming mails during vacation"/>
<div class="sg-hint"><var:string label:value="The vacation message is sent but incoming messages are not delivered to your inbox."/></div>
</md-checkbox>
</div>
</div>
</div>
</md-tab>
</var:if>
<!-- END OF MAIL > VACATION -->
<!-- MAIL > FORWARD -->
<var:if condition="isForwardEnabled">
<md-tab id="mailForwardTab" aria-controls="mailForwardTab-content" label:label="Forward">
<md-content class="md-padding"
ng-include="'hasActiveExternalSieveScripts.html'"
ng-show="app.preferences.defaults.hasActiveExternalSieveScripts">
<!-- external Sieve script detected -->
</md-content>
<div role="tabpanel" aria-labelledby="mailForwardView"
id="mailForwardView-content" class="md-padding">
<md-checkbox
ng-model="app.preferences.defaults.Forward.enabled"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Forward incoming messages"/>
</md-checkbox>
<div flex-offset="5" ng-show="app.preferences.defaults.Forward.enabled == 1">
<md-input-container class="md-block md-flex">
<label><var:string label:value="Email addresses (separated by commas)"/></label>
<textarea name="forwardAddress"
id="forwardAddress"
ng-model="app.preferences.defaults.Forward.forwardAddress" />
</md-input-container>
<div>
<md-checkbox
ng-model="app.preferences.defaults.Forward.keepCopy"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Keep a copy" />
</md-checkbox>
</div>
</div>
</div>
</md-tab>
</var:if>
<!-- END OF MAIL > FORWARD -->
</md-tabs>
</var:if>
</script>
<script type="text/ng-template" id="hasActiveExternalSieveScripts.html">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline"><var:string label:value="An external Sieve script is active"/></span>
<span class="md-subhead"><var:string label:value="Sieve is a programming language that can be used for email filtering. If you let SOGo handle your filters, vacation and forward settings, your active script will be disabled." /></span>
</md-card-title-text>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button type="button" class="md-raised md-warn"
ng-click="app.manageSieveScript(preferencesForm)">
<var:string label:value="Let SOGo handle everything" />
</md-button>
</md-card-actions>
</md-card>
</script>
</var:component>