mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-04-07 14:28:52 +00:00
Improve toolbars on small screens
- normalized toolbars in message viewer, contact viewer and contact editor; - lower width of sidenav on medium screens; - reworked display of message headers
This commit is contained in:
Francis Lachapelle
@@ -5,8 +5,29 @@
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:label="OGo:label">
|
||||
|
||||
<md-content md-scroll-y="md-scroll-y" class="viewer md-padding md-whiteframe-z1 bg-sogoPaper-50">
|
||||
<!-- <div class="editor md-padding">-->
|
||||
<div layout="column" class="layout-fill">
|
||||
<md-toolbar>
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="sg-icon-button"
|
||||
label:aria-label="Cancel"
|
||||
ng-click="editor.cancel()">
|
||||
<md-icon>close</md-icon>
|
||||
</md-button>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button class="sg-icon-button"
|
||||
label:aria-label="Reset"
|
||||
ng-click="editor.reset()">
|
||||
<md-icon>undo</md-icon>
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button"
|
||||
label:aria-label="Save"
|
||||
ng-click="editor.save(editor.card.$isCard()?cardForm:listForm)">
|
||||
<md-icon>save</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-content class="md-flex md-static">
|
||||
<div layout="column" class="viewer md-padding">
|
||||
<hgroup class="header">
|
||||
<h1 class="sg-md-display-2--light" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
|
||||
<h6 class="sg-md-display-2-subheader">{{editor.card.$description()}}</h6>
|
||||
@@ -21,7 +42,7 @@
|
||||
</label>
|
||||
<input type="text" ng-maxlength="30" ng-model="editor.card.c_cn"/>
|
||||
</md-input-container>
|
||||
<!-- todo: look for better reset/normalization. Semanticaly this should be a fieldset, but content doesn't flex properly du to browser styles-->
|
||||
<!-- todo: look for better reset/normalization. Semanticaly this should be a fieldset, but content doesn't flex properly du to browser styles -->
|
||||
<div id="contact-identification" class="sg-fieldset" layout="row" layout-sm="column">
|
||||
<md-input-container flex="40">
|
||||
<label>
|
||||
@@ -298,22 +319,10 @@
|
||||
</label>
|
||||
<textarea ng-model="editor.card.note"><!-- note --></textarea>
|
||||
</md-input-container>
|
||||
|
||||
<div class="fieldset md-layout-margin" layout="row" layout-align="end center">
|
||||
<md-button type="button" ng-click="editor.cancel()">
|
||||
<var:string label:value="Cancel"/>
|
||||
</md-button>
|
||||
<md-button type="button" ng-click="editor.reset()">
|
||||
<var:string label:value="Reset"/>
|
||||
</md-button>
|
||||
<md-button class="md-primary md-hue-3" type="submit">
|
||||
<var:string label:value="Save"/>
|
||||
</md-button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- list editor -->
|
||||
<form name="listForm" ng-if="editor.card.$isList()" ng-submit="editor.save(listForm)">
|
||||
<form name="listForm" ng-show="editor.card.$isList()" ng-submit="editor.save(listForm)">
|
||||
<md-input-container>
|
||||
<label>
|
||||
<var:string label:value="Display"/>
|
||||
@@ -350,22 +359,8 @@
|
||||
filter-selected="false"
|
||||
label:placeholder="Add Member"><!-- members --></md-contact-chips>
|
||||
</div>
|
||||
|
||||
<div class="fieldset md-layout-margin" layout="row" layout-align="end center">
|
||||
<md-button type="button" ng-click="editor.cancel()">
|
||||
<var:string label:value="Cancel"/>
|
||||
</md-button>
|
||||
<md-button type="button" ng-click="editor.reset()">
|
||||
<var:string label:value="Reset"/>
|
||||
</md-button>
|
||||
<var:if condition="canCreateOrModify">
|
||||
<md-button class="md-primary md-hue-3" type="submit">
|
||||
<var:string label:value="Save"/>
|
||||
</md-button>
|
||||
</var:if>
|
||||
</div>
|
||||
</form>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</md-content>
|
||||
|
||||
</div>
|
||||
</container>
|
||||
|
||||
@@ -176,21 +176,23 @@
|
||||
</script>
|
||||
|
||||
<script type="text/ng-template" id="addressbook">
|
||||
<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>
|
||||
<div class="md-toolbar-tools" layout="row" layout-align="space-between center"
|
||||
ng-show="addressbook.selectedFolder.$selectedCount() == 0">
|
||||
<div class="view-list" layout="row" layout-align="space-between center"
|
||||
ng-hide="addressbook.mode.search">
|
||||
<div class="sg-toolbar-group">
|
||||
<md-toolbar layout="row" layout-align="space-between center" class="toolbar-main">
|
||||
<var:component className="UIxTopnavToolbarTemplate" />
|
||||
</md-toolbar>
|
||||
|
||||
<div layout="row" class="md-flex">
|
||||
|
||||
<div class="view-list" layout="column">
|
||||
|
||||
<!-- single-selection toolbar -->
|
||||
<md-toolbar ng-show="addressbook.selectedFolder.$selectedCount() == 0">
|
||||
<!-- sort mode -->
|
||||
<div class="md-toolbar-tools" ng-hide="addressbook.mode.search">
|
||||
<md-button class="sg-icon-button" label:aria-label="Search"
|
||||
ng-click="addressbook.mode.search = true">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
<div class="sg-toolbar-group-last">
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-menu>
|
||||
<md-button class="sg-icon-button" label:aria-label="Sort"
|
||||
ng-click="$mdOpenMenu()">
|
||||
@@ -246,94 +248,89 @@
|
||||
<md-icon>refresh</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- search mode -->
|
||||
<div class="view-list sg-padded--right sg-toolbar-search" layout="row" layout-align="space-between center"
|
||||
ng-show="addressbook.mode.search"
|
||||
sg-search="addressbook.selectedFolder.$filter(searchText, { search: searchField })">
|
||||
<md-button class="sg-icon-button"
|
||||
sg-search-cancel="addressbook.cancelSearch()"
|
||||
label:aria-label="Back">
|
||||
<md-icon>arrow_back</md-icon>
|
||||
</md-button>
|
||||
<md-input-container>
|
||||
<input name="folderSearch" type="search" />
|
||||
</md-input-container>
|
||||
<md-input-container>
|
||||
<md-select>
|
||||
<md-option value="name_or_address" selected="selected"><var:string label:value="Name or Email"/></md-option>
|
||||
<md-option value="category"><var:string label:value="Category"/></md-option>
|
||||
<md-option value="organization"><var:string label:value="Organization"/></md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</div>
|
||||
<!-- multiple selection mode -->
|
||||
<div class="md-toolbar-tools" layout="row" layout-align="space-between center"
|
||||
ng-show="addressbook.selectedFolder.$selectedCount() > 0">
|
||||
<div class="view-list" layout="row" layout-align="space-between center">
|
||||
<div class="sg-toolbar-group">
|
||||
<!-- search mode -->
|
||||
<div class="md-toolbar-tools sg-toolbar-secondary"
|
||||
ng-show="addressbook.mode.search"
|
||||
sg-search="addressbook.selectedFolder.$filter(searchText, { search: searchField })">
|
||||
<md-button class="sg-icon-button"
|
||||
sg-search-cancel="addressbook.cancelSearch()"
|
||||
label:aria-label="Back">
|
||||
<md-icon>arrow_back</md-icon>
|
||||
</md-button>
|
||||
<md-input-container>
|
||||
<input name="folderSearch" type="search" />
|
||||
</md-input-container>
|
||||
<md-input-container>
|
||||
<md-select>
|
||||
<md-option value="name_or_address" selected="selected"><var:string label:value="Name or Email"/></md-option>
|
||||
<md-option value="category"><var:string label:value="Category"/></md-option>
|
||||
<md-option value="organization"><var:string label:value="Organization"/></md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<!-- multiple selection mode -->
|
||||
<md-toolbar class="md-hue-1 sg-toolbar-secondary"
|
||||
ng-show="addressbook.selectedFolder.$selectedCount() > 0">
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="sg-icon-button" ng-click="addressbook.unselectCards()">
|
||||
<md-icon>arrow_back</md-icon>
|
||||
</md-button>
|
||||
<label>{{addressbook.selectedFolder.$selectedCount()}} <var:string label:value="selected"/></label>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button class="sg-icon-button" ng-click="addressbook.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-show="addressbook.selectedFolder.acls.objectEraser"
|
||||
ng-click="addressbook.confirmDeleteSelectedCards()">
|
||||
<md-icon>delete</md-icon>
|
||||
</md-button>
|
||||
<md-menu>
|
||||
<md-button class="sg-icon-button" label:aria-label="Copy contacts" ng-click="$mdOpenMenu()">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Copy To"/></md-tooltip>
|
||||
<md-icon>content_copy</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content width="4">
|
||||
<md-menu-item>
|
||||
<md-button class="md-primary" ng-disabled="true"><var:string label:value="Address Books"/></md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-divider><!-- divider --></md-menu-divider>
|
||||
<md-menu-item ng-repeat="folder in app.service.$addressbooks track by folder.id"
|
||||
ng-hide="addressbook.selectedFolder.id == folder.id">
|
||||
<md-button ng-click="addressbook.copySelectedCards(folder.id)">
|
||||
<span ng-class="'sg-child-level-' + folder.level">{{folder.name}}</span>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
<md-menu>
|
||||
<md-button class="sg-icon-button" label:aria-label="More messages options" ng-click="$mdOpenMenu()">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content width="2">
|
||||
<md-menu-item>
|
||||
<md-button ng-click="addressbook.newMessageWithSelectedCards($event)">
|
||||
<var:string label:value="Write"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="addressbook.saveSelectedCards()">
|
||||
<var:string label:value="Export"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
<div class="sg-toolbar-group-last">
|
||||
<md-button class="sg-icon-button" ng-click="addressbook.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-show="addressbook.selectedFolder.acls.objectEraser"
|
||||
ng-click="addressbook.confirmDeleteSelectedCards()">
|
||||
<md-icon>delete</md-icon>
|
||||
</md-button>
|
||||
<md-menu>
|
||||
<md-button class="sg-icon-button" label:aria-label="Copy contacts" ng-click="$mdOpenMenu()">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Copy To"/></md-tooltip>
|
||||
<md-icon>content_copy</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content width="4">
|
||||
<md-menu-item>
|
||||
<md-button class="md-primary" ng-disabled="true"><var:string label:value="Address Books"/></md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-divider><!-- divider --></md-menu-divider>
|
||||
<md-menu-item ng-repeat="folder in app.service.$addressbooks track by folder.id"
|
||||
ng-hide="addressbook.selectedFolder.id == folder.id">
|
||||
<md-button ng-click="addressbook.copySelectedCards(folder.id)">
|
||||
<span ng-class="'sg-child-level-' + folder.level">{{folder.name}}</span>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
<md-menu>
|
||||
<md-button class="sg-icon-button" label:aria-label="More messages options" ng-click="$mdOpenMenu()">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content width="2">
|
||||
<md-menu-item>
|
||||
<md-button ng-click="addressbook.newMessageWithSelectedCards($event)">
|
||||
<var:string label:value="Write"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="addressbook.saveSelectedCards()">
|
||||
<var:string label:value="Export"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<div layout="row" class="md-flex">
|
||||
<div class="view-list" layout="column">
|
||||
</md-toolbar>
|
||||
|
||||
<md-content id="contactsList" layout="column" class="md-flex">
|
||||
<header class="sg-md-subheader sg-md-subheader--fixed">
|
||||
<h2 class="md-default-theme sg-md-subhead-solo fg-sogoBlue-700">
|
||||
<span ng-show="addressbook.selectedFolder.cards.length > 0">{{addressbook.selectedFolder.cards.length}} <var:string label:value="contacts"/></span>
|
||||
<span ng-show="addressbook.selectedFolder.cards.length == 0"><var:string label:value="No contact"/></span>
|
||||
<h2 ng-switch="addressbook.selectedFolder.cards.length">
|
||||
<span ng-switch-when="0"><var:string label:value="No contact"/></span>
|
||||
<span ng-switch-default="true">{{addressbook.selectedFolder.cards.length}} <var:string label:value="contacts"/></span>
|
||||
</h2>
|
||||
</header>
|
||||
<md-virtual-repeat-container class="md-flex">
|
||||
@@ -343,22 +340,22 @@
|
||||
ng-class="{'sg-active': currentCard.id == addressbook.selectedFolder.selectedCard}"
|
||||
ng-click="addressbook.selectCard(currentCard)"
|
||||
ui-sref="app.addressbook.card.view({addressbookId: addressbook.selectedFolder.id, cardId: currentCard.id})">
|
||||
<div class="sg-selected-avatar" ng-show="currentCard.selected"
|
||||
ng-click="currentCard.selected = !currentCard.selected">
|
||||
<!-- selected avatar -->
|
||||
</div>
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
ng-show="addressbook.notSelectedComponent(currentCard, 'vcard')"
|
||||
ng-click="currentCard.selected = !currentCard.selected"
|
||||
sg-email="currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query)"
|
||||
size="40">
|
||||
<!-- contact avatar -->
|
||||
</sg-avatar-image>
|
||||
<div class="sg-list-avatar"
|
||||
ng-show="addressbook.notSelectedComponent(currentCard, 'vlist')"
|
||||
ng-click="currentCard.selected = !currentCard.selected">
|
||||
<!-- list avatar -->
|
||||
</div>
|
||||
<div class="sg-selected-avatar" ng-show="currentCard.selected"
|
||||
ng-click="currentCard.selected = !currentCard.selected">
|
||||
<!-- selected avatar -->
|
||||
</div>
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
ng-show="addressbook.notSelectedComponent(currentCard, 'vcard')"
|
||||
ng-click="currentCard.selected = !currentCard.selected"
|
||||
sg-email="currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query)"
|
||||
size="40">
|
||||
<!-- contact avatar -->
|
||||
</sg-avatar-image>
|
||||
<div class="sg-list-avatar"
|
||||
ng-show="addressbook.notSelectedComponent(currentCard, 'vlist')"
|
||||
ng-click="currentCard.selected = !currentCard.selected">
|
||||
<!-- list avatar -->
|
||||
</div>
|
||||
<div class="sg-tile-content">
|
||||
<div class="sg-md-subhead-multi" ng-bind-html="currentCard.$fullname()"><!-- cn --></div>
|
||||
<div class="sg-md-body-multi">{{currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query)}}</div>
|
||||
@@ -382,14 +379,16 @@
|
||||
</md-content>
|
||||
</div>
|
||||
|
||||
<md-content id="detailView" class="view-detail md-hue-1" layout="column" layout-align="center center"
|
||||
<div id="detailView" class="view-detail" layout="column" layout-align="start center"
|
||||
ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
|
||||
ui-view="card">
|
||||
<md-input-container class="hide-sm md-hue-1" style="flex-grow: 0">
|
||||
<label class="sg-md-title"><var:string label:value="No contact selected"/></label>
|
||||
</md-input-container>
|
||||
</md-content>
|
||||
|
||||
<md-toolbar class="hide-sm"><!-- empty toolbar --></md-toolbar>
|
||||
<md-content class="hide-sm md-flex layout-fill md-hue-1" layout="column">
|
||||
<md-input-container layout-align="center center">
|
||||
<label class="sg-md-title"><var:string label:value="No contact selected"/></label>
|
||||
</md-input-container>
|
||||
</md-content>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
||||
@@ -3,51 +3,31 @@
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:label="OGo:label"
|
||||
>
|
||||
<md-card class="viewer flex-sm">
|
||||
<md-card-content>
|
||||
<header class="msg-header">
|
||||
<div ng-show="editor.card.tag == 'vcard'">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
sg-email="editor.card.$preferredEmail()"
|
||||
sg-src="editor.card.photoURL"
|
||||
size="48"><!-- avatar --></sg-avatar-image>
|
||||
</div>
|
||||
<div class="sg-list-avatar" ng-show="editor.card.tag == 'vlist'">
|
||||
<!--list avatar-->
|
||||
</div>
|
||||
<div class="msg-header-content">
|
||||
<h1 class="sg-md-display-2--light" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
|
||||
<h6 class="sg-md-display-2-subheader">{{editor.card.$description()}}</h6>
|
||||
<md-chips ng-model="editor.card.categories"
|
||||
class="sg-readonly" readonly="true">
|
||||
<md-chip-template>
|
||||
{{$chip.value}}
|
||||
</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
<div class="sg-icon-bar--vertical">
|
||||
<md-button class="sg-icon-button show-sm"
|
||||
label:aria-label="Close"
|
||||
ng-click="editor.close()">
|
||||
<md-icon>close</md-icon>
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button"
|
||||
label:aria-label="Edit"
|
||||
ng-show="editor.currentFolder.acls.objectEditor"
|
||||
ui-sref="app.addressbook.card.editor({addressbookId: editor.currentFolder.id, cardId: editor.card.id})">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Edit"/></md-tooltip>
|
||||
<md-icon>mode_edit</md-icon>
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button"
|
||||
label:aria-label="Delete"
|
||||
ng-show="editor.currentFolder.acls.objectEraser"
|
||||
ng-click="editor.confirmDelete(editor.card)">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Delete"/></md-tooltip>
|
||||
<md-icon>delete</md-icon>
|
||||
</md-button>
|
||||
xmlns:label="OGo:label">
|
||||
|
||||
<div layout="column" class="layout-fill">
|
||||
<md-toolbar>
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="sg-icon-button hide show-sm"
|
||||
label:aria-label="Close"
|
||||
ng-click="editor.close()">
|
||||
<md-icon>close</md-icon>
|
||||
</md-button>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button class="sg-icon-button"
|
||||
label:aria-label="Edit"
|
||||
ng-show="editor.currentFolder.acls.objectEditor"
|
||||
ui-sref="app.addressbook.card.editor({addressbookId: editor.currentFolder.id, cardId: editor.card.id})">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Edit"/></md-tooltip>
|
||||
<md-icon>mode_edit</md-icon>
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button"
|
||||
label:aria-label="Delete"
|
||||
ng-show="editor.currentFolder.acls.objectEraser"
|
||||
ng-click="editor.confirmDelete(editor.card)">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Delete"/></md-tooltip>
|
||||
<md-icon>delete</md-icon>
|
||||
</md-button>
|
||||
<md-menu>
|
||||
<md-button label:aria-label="More contact options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
|
||||
<md-icon>more_vert</md-icon>
|
||||
@@ -67,110 +47,133 @@
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<section class="msg-body">
|
||||
|
||||
<div class="pseudo-input-container" ng-show="editor.card.$birthday().length">
|
||||
<div class="key">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Birthday"/>
|
||||
</label>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-content class="md-flex md-static">
|
||||
<div layout="column" class="viewer md-padding">
|
||||
<header class="msg-header">
|
||||
<div ng-show="editor.card.c_component == 'vcard'">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
sg-email="editor.card.$preferredEmail()"
|
||||
sg-src="editor.card.photoURL"
|
||||
size="48"><!-- avatar --></sg-avatar-image>
|
||||
</div>
|
||||
<div class="pseudo-input-field">
|
||||
<span>{{editor.card.$birthday()}}</span>
|
||||
<div class="sg-list-avatar" ng-show="editor.card.c_component == 'vlist'">
|
||||
<!--list avatar-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg-header-content">
|
||||
<h1 class="sg-md-display-2--light" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
|
||||
<h6 class="sg-md-display-2-subheader">{{editor.card.$description()}}</h6>
|
||||
<md-chips ng-model="editor.card.categories"
|
||||
class="sg-readonly" readonly="true">
|
||||
<md-chip-template>
|
||||
{{$chip.value}}
|
||||
</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
</header>
|
||||
<section class="msg-body">
|
||||
|
||||
<!-- list members -->
|
||||
<div class="section" ng-show="editor.card.refs.length > 0">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Members"/>
|
||||
</label>
|
||||
<md-list>
|
||||
<md-list-item class="md-3-line" ng-repeat="ref in editor.card.refs track by ref.reference">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
sg-email="ref.$preferredEmail()"
|
||||
size="48">
|
||||
<!-- contact avatar -->
|
||||
</sg-avatar-image>
|
||||
<div class="md-list-item-text">
|
||||
<h3>
|
||||
<a ui-sref="app.addressbook.card.view({addressbookId: editor.currentFolder.id, cardId: ref.reference})">
|
||||
{{ ref.$fullname() }}
|
||||
</a>
|
||||
</h3>
|
||||
<h4 ng-show="ref.email">
|
||||
<a ui-sref="mailto:{{ref.email}}" ng-class="ng-scope">
|
||||
{{ ref.email }}
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
<div class="section" ng-show="editor.card.emails.length > 0">
|
||||
<div class="pseudo-input-container" ng-repeat="email in editor.card.emails">
|
||||
<div class="pseudo-input-container" ng-show="editor.card.$birthday().length">
|
||||
<div class="key">
|
||||
<label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}</label>
|
||||
</div>
|
||||
|
||||
<div class="pseudo-input-field">
|
||||
<a href="#" ng-bind="email.value"
|
||||
ng-click="addressbook.newMessageWithRecipient($event, email.value, editor.card.$fullname())"><!-- recipient --></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" ng-show="editor.card.phones.length > 0">
|
||||
<div class="pseudo-input-container" ng-repeat="phone in editor.card.phones">
|
||||
<div class="key">
|
||||
<label class="pseudo-input-label">{{phone.type}}</label>
|
||||
</div>
|
||||
|
||||
<div class="pseudo-input-field">
|
||||
<a href="tel:{{phone.value}}">{{phone.value}}</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" ng-show="editor.card.urls">
|
||||
<div class="pseudo-input-container" ng-repeat="url in editor.card.urls">
|
||||
<div class="key">
|
||||
<label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Birthday"/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="pseudo-input-field">
|
||||
<a href="#" ng-href="{{url.value}}">{{url.value}}</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" ng-show="editor.card.addresses">
|
||||
<div class="pseudo-input-container" ng-repeat="address in editor.card.addresses">
|
||||
<div class="key">
|
||||
<label class="pseudo-input-label">{{address.type}}</label>
|
||||
</div>
|
||||
<div class="pseudo-input-field">
|
||||
<div sg-address="address"><!-- address --></div>
|
||||
<span>{{editor.card.$birthday()}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pseudo-input-container" ng-show="editor.card.note">
|
||||
<div class="key">
|
||||
|
||||
<!-- list members -->
|
||||
<div class="section" ng-show="editor.card.refs.length > 0">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Note"/>
|
||||
<var:string label:value="Members"/>
|
||||
</label>
|
||||
<md-list>
|
||||
<md-list-item class="md-3-line" ng-repeat="ref in editor.card.refs track by ref.reference">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
sg-email="ref.$preferredEmail()"
|
||||
size="48">
|
||||
<!-- contact avatar -->
|
||||
</sg-avatar-image>
|
||||
<div class="md-list-item-text">
|
||||
<h3>
|
||||
<a ui-sref="app.addressbook.card.view({addressbookId: editor.currentFolder.id, cardId: ref.reference})">
|
||||
{{ ref.$fullname() }}
|
||||
</a>
|
||||
</h3>
|
||||
<h4 ng-show="ref.email">
|
||||
<a ui-sref="mailto:{{ref.email}}" ng-class="ng-scope">
|
||||
{{ ref.email }}
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
<div class="pseudo-input-field">
|
||||
<div ng-bind-html="editor.card.note"><!-- note --></div>
|
||||
|
||||
<div class="section" ng-show="editor.card.emails.length > 0">
|
||||
<div class="pseudo-input-container" ng-repeat="email in editor.card.emails">
|
||||
<div class="key">
|
||||
<label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}</label>
|
||||
</div>
|
||||
|
||||
<div class="pseudo-input-field">
|
||||
<a href="#" ng-bind="email.value"
|
||||
ng-click="addressbook.newMessageWithRecipient($event, email.value, editor.card.$fullname())"><!-- recipient --></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
|
||||
<div class="section" ng-show="editor.card.phones.length > 0">
|
||||
<div class="pseudo-input-container" ng-repeat="phone in editor.card.phones">
|
||||
<div class="key">
|
||||
<label class="pseudo-input-label">{{phone.type}}</label>
|
||||
</div>
|
||||
|
||||
<div class="pseudo-input-field">
|
||||
<a href="tel:{{phone.value}}">{{phone.value}}</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" ng-show="editor.card.urls">
|
||||
<div class="pseudo-input-container" ng-repeat="url in editor.card.urls">
|
||||
<div class="key">
|
||||
<label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="pseudo-input-field">
|
||||
<a href="#" ng-href="{{url.value}}">{{url.value}}</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" ng-show="editor.card.addresses">
|
||||
<div class="pseudo-input-container" ng-repeat="address in editor.card.addresses">
|
||||
<div class="key">
|
||||
<label class="pseudo-input-label">{{address.type}}</label>
|
||||
</div>
|
||||
<div class="pseudo-input-field">
|
||||
<div sg-address="address"><!-- address --></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pseudo-input-container" ng-show="editor.card.note">
|
||||
<div class="key">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Note"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="pseudo-input-field">
|
||||
<div ng-bind-html="editor.card.note"><!-- note --></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</md-content>
|
||||
</div>
|
||||
</container>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
xmlns:label="OGo:label">
|
||||
|
||||
<md-dialog flex="80" flex-sm="100">
|
||||
<md-toolbar class="sg-padded--right">
|
||||
<md-toolbar>
|
||||
<div class="md-toolbar-tools">
|
||||
<md-icon class="material-icons sg-icon-toolbar-bg">edit</md-icon>
|
||||
<!-- from -->
|
||||
@@ -34,166 +34,166 @@
|
||||
</md-toolbar>
|
||||
|
||||
<md-dialog-content>
|
||||
<header>
|
||||
<div class="msg-header-content">
|
||||
<header>
|
||||
<div class="msg-header-content">
|
||||
|
||||
<!-- to -->
|
||||
<div class="pseudo-input-container">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="To"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.to"
|
||||
md-on-append="editor.addRecipient($chip)">
|
||||
<md-autocomplete
|
||||
class="sg-chips-autocomplete"
|
||||
md-search-text="editor.autocomplete.to.searchText"
|
||||
md-selected-item="editor.autocomplete.to.selected"
|
||||
md-items="user in editor.contactFilter(editor.autocomplete.to.searchText)"
|
||||
md-min-length="3"
|
||||
md-delay="300"
|
||||
md-no-cache="true"
|
||||
label:placeholder="Add a recipient">
|
||||
<md-item-template>
|
||||
<span class="md-contact-suggestion">
|
||||
<span class="md-contact-name"
|
||||
md-highlight-text="editor.autocomplete.to.searchText"
|
||||
md-highlight-flags="^i">{{user.$$fullname}}</span>
|
||||
<span class="md-contact-email"
|
||||
md-highlight-text="editor.autocomplete.to.searchText"
|
||||
md-highlight-flags="^i">{{user.$$email}}</span>
|
||||
</span>
|
||||
</md-item-template>
|
||||
</md-autocomplete>
|
||||
<md-chip-template>{{$chip}}</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
|
||||
<!-- cc -->
|
||||
<div class="pseudo-input-container" ng-hide="editor.hideCc">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Cc"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.cc"
|
||||
md-on-append="editor.addRecipient($chip)">
|
||||
<md-autocomplete
|
||||
class="sg-chips-autocomplete"
|
||||
md-search-text="editor.autocomplete.cc.searchText"
|
||||
md-selected-item="editor.autocomplete.cc.selected"
|
||||
md-items="user in editor.contactFilter(editor.autocomplete.cc.searchText)"
|
||||
label:placeholder="Add a recipient">
|
||||
<md-item-template>
|
||||
<span class="md-contact-suggestion">
|
||||
<span class="md-contact-name"
|
||||
md-highlight-text="editor.autocomplete.to.searchText"
|
||||
md-highlight-flags="^i">{{user.$$fullname}}</span>
|
||||
<span class="md-contact-email"
|
||||
md-highlight-text="editor.autocomplete.to.searchText"
|
||||
md-highlight-flags="^i">{{user.$$email}}</span>
|
||||
</span>
|
||||
</md-item-template>
|
||||
</md-autocomplete>
|
||||
<md-chip-template>{{$chip}}</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
|
||||
<!-- bcc -->
|
||||
<div class="pseudo-input-container" ng-hide="editor.hideBcc">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Bcc"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.bcc"
|
||||
md-on-append="editor.addRecipient($chip)">
|
||||
<md-autocomplete
|
||||
class="sg-chips-autocomplete"
|
||||
md-selected-item="editor.autocomplete.bcc.selected"
|
||||
md-search-text="editor.autocomplete.bcc.searchText"
|
||||
md-items="user in editor.contactFilter(editor.autocomplete.bcc.searchText)"
|
||||
label:placeholder="Add a recipient">
|
||||
<md-item-template>
|
||||
<span class="md-contact-suggestion">
|
||||
<span class="md-contact-name"
|
||||
md-highlight-text="editor.autocomplete.to.searchText"
|
||||
md-highlight-flags="^i">{{user.$$fullname}}</span>
|
||||
<span class="md-contact-email"
|
||||
md-highlight-text="editor.autocomplete.to.searchText"
|
||||
md-highlight-flags="^i">{{user.$$email}}</span>
|
||||
</span>
|
||||
</md-item-template>
|
||||
</md-autocomplete>
|
||||
<md-chip-template>{{$chip}}</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
|
||||
<!-- subject -->
|
||||
<md-input-container>
|
||||
<label>
|
||||
<var:string label:value="Subject"/>
|
||||
</label>
|
||||
<input type="text" name="subject" ng-model="editor.message.editable.subject"/>
|
||||
</md-input-container>
|
||||
<!-- to -->
|
||||
<div class="pseudo-input-container">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="To"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.to"
|
||||
md-on-append="editor.addRecipient($chip)">
|
||||
<md-autocomplete
|
||||
class="sg-chips-autocomplete"
|
||||
md-search-text="editor.autocomplete.to.searchText"
|
||||
md-selected-item="editor.autocomplete.to.selected"
|
||||
md-items="user in editor.contactFilter(editor.autocomplete.to.searchText)"
|
||||
md-min-length="3"
|
||||
md-delay="300"
|
||||
md-no-cache="true"
|
||||
label:placeholder="Add a recipient">
|
||||
<md-item-template>
|
||||
<span class="md-contact-suggestion">
|
||||
<span class="md-contact-name"
|
||||
md-highlight-text="editor.autocomplete.to.searchText"
|
||||
md-highlight-flags="^i">{{user.$$fullname}}</span>
|
||||
<span class="md-contact-email"
|
||||
md-highlight-text="editor.autocomplete.to.searchText"
|
||||
md-highlight-flags="^i">{{user.$$email}}</span>
|
||||
</span>
|
||||
</md-item-template>
|
||||
</md-autocomplete>
|
||||
<md-chip-template>{{$chip}}</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
|
||||
<!-- toolbar to show cc/bcc/attachment fields -->
|
||||
<div layout="column" layout-align="start end">
|
||||
<md-button class="sg-icon-button " ng-show="editor.hideCc" ng-click="editor.hideCc = false">Cc</md-button>
|
||||
<md-button class="sg-icon-button " ng-show="editor.hideBcc" ng-click="editor.hideBcc = false">Bcc</md-button>
|
||||
<md-menu>
|
||||
<md-button label:aria-label="More mail options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content width="4">
|
||||
<md-menu-item>
|
||||
<md-button ng-href="#">
|
||||
<md-checkbox ng-model="editor.message.editable.receipt">
|
||||
<var:string label:value="Return Receipt"/>
|
||||
</md-checkbox>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button class="md-primary" ng-disabled="true"><var:string label:value="Priority"/></md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="editor.message.editable.priority = 1">
|
||||
<md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 1}"><!-- highest --></md-icon>
|
||||
<var:string label:value="highest"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="editor.message.editable.priority = 2">
|
||||
<md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 2}"><!-- high --></md-icon>
|
||||
<var:string label:value="high"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="editor.message.editable.priority = 3">
|
||||
<md-icon ng-class="{ 'icon-check':
|
||||
!editor.message.editable.priority
|
||||
|| editor.message.editable.priority == 3}"><!-- normal --></md-icon>
|
||||
<var:string label:value="normal"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="editor.message.editable.priority = 4">
|
||||
<md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 4}"><!-- low --></md-icon>
|
||||
<var:string label:value="low"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="editor.message.editable.priority = 5">
|
||||
<md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 5}"><!-- lowest --></md-icon>
|
||||
<var:string label:value="lowest"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
|
||||
<!-- cc -->
|
||||
<div class="pseudo-input-container" ng-hide="editor.hideCc">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Cc"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.cc"
|
||||
md-on-append="editor.addRecipient($chip)">
|
||||
<md-autocomplete
|
||||
class="sg-chips-autocomplete"
|
||||
md-search-text="editor.autocomplete.cc.searchText"
|
||||
md-selected-item="editor.autocomplete.cc.selected"
|
||||
md-items="user in editor.contactFilter(editor.autocomplete.cc.searchText)"
|
||||
label:placeholder="Add a recipient">
|
||||
<md-item-template>
|
||||
<span class="md-contact-suggestion">
|
||||
<span class="md-contact-name"
|
||||
md-highlight-text="editor.autocomplete.to.searchText"
|
||||
md-highlight-flags="^i">{{user.$$fullname}}</span>
|
||||
<span class="md-contact-email"
|
||||
md-highlight-text="editor.autocomplete.to.searchText"
|
||||
md-highlight-flags="^i">{{user.$$email}}</span>
|
||||
</span>
|
||||
</md-item-template>
|
||||
</md-autocomplete>
|
||||
<md-chip-template>{{$chip}}</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- MESSAGE CONTENT -->
|
||||
<textarea name="content" var:class="editorClass"
|
||||
ck-locale="editor.localeCode"
|
||||
ng-model="editor.message.editable.text"/>
|
||||
<!-- bcc -->
|
||||
<div class="pseudo-input-container" ng-hide="editor.hideBcc">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Bcc"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.bcc"
|
||||
md-on-append="editor.addRecipient($chip)">
|
||||
<md-autocomplete
|
||||
class="sg-chips-autocomplete"
|
||||
md-selected-item="editor.autocomplete.bcc.selected"
|
||||
md-search-text="editor.autocomplete.bcc.searchText"
|
||||
md-items="user in editor.contactFilter(editor.autocomplete.bcc.searchText)"
|
||||
label:placeholder="Add a recipient">
|
||||
<md-item-template>
|
||||
<span class="md-contact-suggestion">
|
||||
<span class="md-contact-name"
|
||||
md-highlight-text="editor.autocomplete.to.searchText"
|
||||
md-highlight-flags="^i">{{user.$$fullname}}</span>
|
||||
<span class="md-contact-email"
|
||||
md-highlight-text="editor.autocomplete.to.searchText"
|
||||
md-highlight-flags="^i">{{user.$$email}}</span>
|
||||
</span>
|
||||
</md-item-template>
|
||||
</md-autocomplete>
|
||||
<md-chip-template>{{$chip}}</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
|
||||
<!-- subject -->
|
||||
<md-input-container>
|
||||
<label>
|
||||
<var:string label:value="Subject"/>
|
||||
</label>
|
||||
<input type="text" name="subject" ng-model="editor.message.editable.subject"/>
|
||||
</md-input-container>
|
||||
</div>
|
||||
|
||||
<!-- toolbar to show cc/bcc/attachment fields -->
|
||||
<div layout="column" layout-align="end end">
|
||||
<md-button class="sg-icon-button " ng-show="editor.hideCc" ng-click="editor.hideCc = false">Cc</md-button>
|
||||
<md-button class="sg-icon-button " ng-show="editor.hideBcc" ng-click="editor.hideBcc = false">Bcc</md-button>
|
||||
<md-menu>
|
||||
<md-button label:aria-label="More mail options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content width="4">
|
||||
<md-menu-item>
|
||||
<md-button ng-href="#">
|
||||
<md-checkbox ng-model="editor.message.editable.receipt">
|
||||
<var:string label:value="Return Receipt"/>
|
||||
</md-checkbox>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button class="md-primary" ng-disabled="true"><var:string label:value="Priority"/></md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="editor.message.editable.priority = 1">
|
||||
<md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 1}"><!-- highest --></md-icon>
|
||||
<var:string label:value="highest"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="editor.message.editable.priority = 2">
|
||||
<md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 2}"><!-- high --></md-icon>
|
||||
<var:string label:value="high"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="editor.message.editable.priority = 3">
|
||||
<md-icon ng-class="{ 'icon-check':
|
||||
!editor.message.editable.priority
|
||||
|| editor.message.editable.priority == 3}"><!-- normal --></md-icon>
|
||||
<var:string label:value="normal"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="editor.message.editable.priority = 4">
|
||||
<md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 4}"><!-- low --></md-icon>
|
||||
<var:string label:value="low"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="editor.message.editable.priority = 5">
|
||||
<md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 5}"><!-- lowest --></md-icon>
|
||||
<var:string label:value="lowest"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- MESSAGE CONTENT -->
|
||||
<textarea name="content" var:class="editorClass"
|
||||
ck-locale="editor.localeCode"
|
||||
ng-model="editor.message.editable.text"/>
|
||||
</md-dialog-content>
|
||||
|
||||
<!-- TOOLBAR BUTTONS -->
|
||||
@@ -212,32 +212,32 @@
|
||||
uploader="editor.uploader"
|
||||
ng-show="false"/>
|
||||
</div>
|
||||
<div>
|
||||
<!-- FILES ALREADY UPLOADED, FOR EXAMPLE WHEN WE FORWARD A
|
||||
MAIL WITH ATTACHMENTS -->
|
||||
<md-chips ng-model="editor.message.editable.attachmentAttrs"
|
||||
class="sg-readonly" readonly="true">
|
||||
<md-chip-template>
|
||||
<span>{{$chip.filename}}</span>
|
||||
<div>
|
||||
<!-- FILES ALREADY UPLOADED, FOR EXAMPLE WHEN WE FORWARD A
|
||||
MAIL WITH ATTACHMENTS -->
|
||||
<md-chips ng-model="editor.message.editable.attachmentAttrs"
|
||||
class="sg-readonly" readonly="true">
|
||||
<md-chip-template>
|
||||
<span>{{$chip.filename}}</span>
|
||||
<md-icon ng-click="editor.message.$deleteAttachment($chip.filename);">close</md-icon>
|
||||
</md-chip-template>
|
||||
</md-chips>
|
||||
<!-- FILE BEING ATTACHED TO A MAIL -->
|
||||
<md-chips ng-model="editor.uploader.queue"
|
||||
class="sg-readonly" readonly="true">
|
||||
<md-chip-template>
|
||||
<span>{{$chip.file.name}}</span>
|
||||
<md-icon ng-show="!$chip.isUploading"
|
||||
ng-click="editor.message.$deleteAttachment($chip.file.name);
|
||||
$chip.remove();">close</md-icon>
|
||||
<md-icon ng-show="$chip.isUploading"
|
||||
ng-click="editor.uploader.cancelItem($chip)"
|
||||
ng-style="{ 'color': '#F00' }">cancel</md-icon>
|
||||
<span ng-show="$chip.isUploading">{{$chip.progress}} %</span>
|
||||
</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
</md-chip-template>
|
||||
</md-chips>
|
||||
<!-- FILE BEING ATTACHED TO A MAIL -->
|
||||
<md-chips ng-model="editor.uploader.queue"
|
||||
class="sg-readonly" readonly="true">
|
||||
<md-chip-template>
|
||||
<span>{{$chip.file.name}}</span>
|
||||
<md-icon ng-show="!$chip.isUploading"
|
||||
ng-click="editor.message.$deleteAttachment($chip.file.name);
|
||||
$chip.remove();">close</md-icon>
|
||||
<md-icon ng-show="$chip.isUploading"
|
||||
ng-click="editor.uploader.cancelItem($chip)"
|
||||
ng-style="{ 'color': '#F00' }">cancel</md-icon>
|
||||
<span ng-show="$chip.isUploading">{{$chip.progress}} %</span>
|
||||
</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-dialog>
|
||||
</md-dialog>
|
||||
</container>
|
||||
|
||||
@@ -4,6 +4,147 @@
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
xmlns:label="OGo:label">
|
||||
<div class="view-list" layout="column">
|
||||
|
||||
<!-- single-selection toolbars -->
|
||||
<md-toolbar ng-show="mailbox.selectedFolder.$selectedCount() == 0">
|
||||
<!-- sort mode -->
|
||||
<div class="md-toolbar-tools" ng-hide="mailbox.mode.search">
|
||||
<md-button class="sg-icon-button" label:aria-label="Search"
|
||||
ng-click="mailbox.mode.search = true">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<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="mailbox.sort('subject')">
|
||||
<md-icon ng-class="{ 'icon-check': mailbox.sortedBy('subject') }">
|
||||
<!-- subject --></md-icon> <var:string label:value="Subject"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="mailbox.sort('from')">
|
||||
<md-icon ng-class="{ 'icon-check': mailbox.sortedBy('from') }">
|
||||
<!-- from --></md-icon> <var:string label:value="From"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="mailbox.sort('date')">
|
||||
<md-icon ng-class="{ 'icon-check': mailbox.sortedBy('date') }">
|
||||
<!-- date --></md-icon> <var:string label:value="Date"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="mailbox.sort('size')">
|
||||
<md-icon ng-class="{ 'icon-check': mailbox.sortedBy('size') }">
|
||||
<!-- size --></md-icon> <var:string label:value="Size"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-divider> <!-- divider --></md-menu-divider>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="mailbox.selectedFolder.$filter()">
|
||||
<md-checkbox
|
||||
ng-model="mailbox.service.$query.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" aria-label="Refresh" ng-click="mailbox.selectedFolder.$filter()" >
|
||||
<md-icon>refresh</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
<!-- search mode -->
|
||||
<div class="md-toolbar-tools sg-toolbar-secondary"
|
||||
ng-show="mailbox.mode.search"
|
||||
sg-search="mailbox.selectedFolder.$filter({ sort: 'date', asc: false }, [{ searchBy: searchField, searchInput: searchText }])">
|
||||
<md-button class="sg-icon-button"
|
||||
sg-search-cancel="mailbox.cancelSearch()"
|
||||
label:aria-label="Back">
|
||||
<md-icon>arrow_back</md-icon>
|
||||
</md-button>
|
||||
<md-input-container>
|
||||
<input name="folderSearch" type="search" />
|
||||
</md-input-container>
|
||||
<md-input-container>
|
||||
<md-select>
|
||||
<md-option value="subject" selected="selected"><var:string label:value="Subject"/></md-option>
|
||||
<md-option value="from"><var:string label:value="Sender"/></md-option>
|
||||
<md-option value="subject_or_from"><var:string label:value="Subject or Sender"/></md-option>
|
||||
<md-option value="to_or_cc"><var:string label:value="To or Cc"/></md-option>
|
||||
<md-option value="body"><var:string label:value="Entire Message"/></md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<!-- multiple-selection mode -->
|
||||
<md-toolbar class="md-hue-1 sg-toolbar-secondary" ng-show="mailbox.selectedFolder.$selectedCount() > 0">
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="sg-icon-button" ng-click="mailbox.unselectMessages()">
|
||||
<md-icon>arrow_back</md-icon>
|
||||
</md-button>
|
||||
<label>{{mailbox.selectedFolder.$selectedCount()}} <var:string label:value="selected"/></label>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button class="sg-icon-button" ng-click="mailbox.selectAll()">
|
||||
<md-tooltip md-direction="bottom"><var:string label:value="Select All"/></md-tooltip>
|
||||
<md-icon>select_all</md-icon>
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button" ng-click="mailbox.confirmDeleteSelectedMessages()">
|
||||
<md-icon>delete</md-icon>
|
||||
</md-button>
|
||||
<md-menu>
|
||||
<md-button class="sg-icon-button" label:aria-label="Copy messages" ng-click="$mdOpenMenu()">
|
||||
<md-tooltip md-direction="bottom"><var:string label:value="Copy To"/></md-tooltip>
|
||||
<md-icon>content_copy</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content width="4">
|
||||
<div ng-repeat="account in mailbox.accounts track by account.id">
|
||||
<md-menu-item>
|
||||
<md-button class="md-primary" ng-disabled="true">{{account.name}}</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-divider><!-- divider --></md-menu-divider>
|
||||
<md-menu-item ng-repeat="folder in
|
||||
account.$flattenMailboxes()
|
||||
track by folder.path"
|
||||
ng-hide="mailbox.id == folder.id">
|
||||
<md-button ng-click="mailbox.copySelectedMessages(folder.id)">
|
||||
<span ng-class="'sg-child-level-' + folder.level">{{folder.name}}</span>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</div>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
<md-menu>
|
||||
<md-button class="sg-icon-button" label:aria-label="More messages options" ng-click="$mdOpenMenu()">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content width="2">
|
||||
<md-menu-item>
|
||||
<md-button ng-click="mailbox.markSelectedMessagesAsFlagged()">
|
||||
<var:string label:value="Flag"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="mailbox.markSelectedMessagesAsUnread()">
|
||||
<var:string label:value="Mark as Unread"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="mailbox.saveSelectedMessages()">
|
||||
<var:string label:value="Save As..."/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-content id="messagesList" layout="column" class="md-flex">
|
||||
<header class="sg-md-subheader sg-md-subheader--fixed">
|
||||
<h2 class="md-default-theme sg-md-subhead-solo fg-sogoBlue-700">
|
||||
@@ -58,12 +199,15 @@
|
||||
</md-content>
|
||||
</div>
|
||||
|
||||
<md-content id="detailView" class="view-detail md-hue-1" layout="column" layout-align="center center"
|
||||
<div id="detailView" class="view-detail" layout="column" layout-align="start center"
|
||||
ng-class="{ 'sg-close': !mailbox.selectedFolder.selectedMessage }"
|
||||
ui-view="message">
|
||||
<md-input-container class="hide-sm md-hue-1" style="flex-grow: 0">
|
||||
<label class="sg-md-title"><var:string label:value="No message selected"/></label>
|
||||
</md-input-container>
|
||||
</md-content>
|
||||
<md-toolbar class="hide-sm"><!-- empty toolbar --></md-toolbar>
|
||||
<md-content class="hide-sm md-flex layout-fill md-hue-1" layout="column">
|
||||
<md-input-container layout-align="center center">
|
||||
<label class="sg-md-title"><var:string label:value="No message selected"/></label>
|
||||
</md-input-container>
|
||||
</md-content>
|
||||
</div>
|
||||
|
||||
</container>
|
||||
|
||||
@@ -8,11 +8,11 @@
|
||||
xmlns:label="OGo:label"
|
||||
className="UIxPageFrame"
|
||||
title="title"
|
||||
const:jsFiles="Common.js, Contacts.services.js, Mailer.services.js, Preferences.services.js, Mailer.js, Mailer.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js">
|
||||
const:jsFiles="Common.js, Contacts.services.js, Preferences.services.js, Mailer.js, Mailer.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js">
|
||||
<script type="text/javascript">
|
||||
var mailAccounts =<var:string value="mailAccounts" const:escapeHTML="NO" />;
|
||||
var userNames =<var:string value="userNames" const:escapeHTML="NO" />;
|
||||
var unseenCountFolders =<var:string value="unseenCountFolders" const:escapeHTML="NO" />;
|
||||
var mailAccounts = <var:string value="mailAccounts" const:escapeHTML="NO" />;
|
||||
var userNames = <var:string value="userNames" const:escapeHTML="NO" />;
|
||||
var unseenCountFolders = <var:string value="unseenCountFolders" const:escapeHTML="NO" />;
|
||||
</script>
|
||||
<style type="text/css">
|
||||
<var:foreach list="availableLabels" item="currentLabel">
|
||||
@@ -229,7 +229,7 @@
|
||||
<!-- Sidenav -->
|
||||
<md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1 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-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
|
||||
<section ng-repeat="account in app.accounts track by account.id">
|
||||
<md-subheader class="sg-md-subheader">
|
||||
<div layout="row" layout-align="space-between center">
|
||||
@@ -346,152 +346,10 @@
|
||||
</script>
|
||||
|
||||
<script type="text/ng-template" id="UIxMailFolderTemplate">
|
||||
<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>
|
||||
<div class="md-toolbar-tools" layout="row" layout-align="space-between center"
|
||||
ng-show="mailbox.selectedFolder.$selectedCount() == 0">
|
||||
<!-- sort mode -->
|
||||
<div class="view-list" layout="row" layout-align="space-between center"
|
||||
ng-hide="mailbox.mode.search">
|
||||
<div class="sg-toolbar-group">
|
||||
<md-button class="sg-icon-button" label:aria-label="Search"
|
||||
ng-click="mailbox.mode.search = true">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
<div class="sg-toolbar-group-last">
|
||||
<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="mailbox.sort('subject')">
|
||||
<md-icon ng-class="{ 'icon-check': mailbox.sortedBy('subject') }">
|
||||
<!-- subject --></md-icon> <var:string label:value="Subject"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="mailbox.sort('from')">
|
||||
<md-icon ng-class="{ 'icon-check': mailbox.sortedBy('from') }">
|
||||
<!-- from --></md-icon> <var:string label:value="From"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="mailbox.sort('date')">
|
||||
<md-icon ng-class="{ 'icon-check': mailbox.sortedBy('date') }">
|
||||
<!-- date --></md-icon> <var:string label:value="Date"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="mailbox.sort('size')">
|
||||
<md-icon ng-class="{ 'icon-check': mailbox.sortedBy('size') }">
|
||||
<!-- size --></md-icon> <var:string label:value="Size"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-divider> <!-- divider --></md-menu-divider>
|
||||
<md-menu-item>
|
||||
<md-button ng-href="#">
|
||||
<md-checkbox
|
||||
ng-change="mailbox.selectedFolder.$filter()"
|
||||
ng-model="mailbox.service.$query.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" aria-label="Refresh" ng-click="mailbox.selectedFolder.$filter()" >
|
||||
<md-icon>refresh</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- search mode -->
|
||||
<div class="view-list sg-padded--right sg-toolbar-search" layout="row" layout-align="space-between center"
|
||||
ng-show="mailbox.mode.search"
|
||||
sg-search="mailbox.selectedFolder.$filter({ sort: 'date', asc: false }, [{ searchBy: searchField, searchInput: searchText }])">
|
||||
<md-button class="sg-icon-button"
|
||||
sg-search-cancel="mailbox.cancelSearch()"
|
||||
label:aria-label="Back">
|
||||
<md-icon>arrow_back</md-icon>
|
||||
</md-button>
|
||||
<md-input-container>
|
||||
<input name="folderSearch" type="search" />
|
||||
</md-input-container>
|
||||
<md-input-container>
|
||||
<md-select>
|
||||
<md-option value="subject" selected="selected"><var:string label:value="Subject"/></md-option>
|
||||
<md-option value="from"><var:string label:value="Sender"/></md-option>
|
||||
<md-option value="subject_or_from"><var:string label:value="Subject or Sender"/></md-option>
|
||||
<md-option value="to_or_cc"><var:string label:value="To or Cc"/></md-option>
|
||||
<md-option value="body"><var:string label:value="Entire Message"/></md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div layout="row" layout-align="start center" ng-show="mailbox.selectedFolder.$selectedCount() > 0">
|
||||
<md-button class="sg-icon-button" ng-click="mailbox.unselectMessages()">
|
||||
<md-icon>arrow_back</md-icon>
|
||||
</md-button>
|
||||
<label>{{mailbox.selectedFolder.$selectedCount()}} selected</label>
|
||||
<md-button class="sg-icon-button" ng-click="mailbox.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="mailbox.confirmDeleteSelectedMessages()">
|
||||
<md-icon>delete</md-icon>
|
||||
</md-button>
|
||||
<md-menu>
|
||||
<md-button class="sg-icon-button" label:aria-label="Copy messages" ng-click="$mdOpenMenu()">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Copy To"/></md-tooltip>
|
||||
<md-icon>content_copy</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content width="4">
|
||||
<div ng-repeat="account in mailbox.accounts track by account.id">
|
||||
<md-menu-item>
|
||||
<md-button class="md-primary" ng-disabled="true">{{account.name}}</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-divider><!-- divider --></md-menu-divider>
|
||||
<md-menu-item ng-repeat="folder in
|
||||
account.$flattenMailboxes()
|
||||
track by folder.path"
|
||||
ng-hide="mailbox.id == folder.id">
|
||||
<md-button ng-click="mailbox.copySelectedMessages(folder.id)">
|
||||
<span ng-class="'sg-child-level-' + folder.level">{{folder.name}}</span>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</div>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
<md-menu>
|
||||
<md-button class="sg-icon-button" label:aria-label="More messages options" ng-click="$mdOpenMenu()">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content width="2">
|
||||
<md-menu-item>
|
||||
<md-button ng-click="mailbox.markSelectedMessagesAsFlagged()">
|
||||
<var:string label:value="Flag"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="mailbox.markSelectedMessagesAsUnread()">
|
||||
<var:string label:value="Mark as Unread"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button ng-click="mailbox.saveSelectedMessages()">
|
||||
<var:string label:value="Save As..."/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
<md-toolbar layout="row" layout-align="space-between center" class="toolbar-main" >
|
||||
<var:component className="UIxTopnavToolbarTemplate" />
|
||||
</md-toolbar>
|
||||
|
||||
<div layout="row" class="md-flex">
|
||||
<var:component className="UIxMailFolderTemplate" />
|
||||
</div>
|
||||
|
||||
@@ -1,105 +1,31 @@
|
||||
<?xml version='1.0' standalone='yes'?>
|
||||
<container
|
||||
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"
|
||||
xmlns:uix="OGo:uix">
|
||||
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"
|
||||
xmlns:uix="OGo:uix">
|
||||
|
||||
<md-content md-scroll-y="md-scroll-y" class="viewer md-padding md-flex bg-sogoPaper-50 md-whiteframe-z1">
|
||||
<header class="msg-header">
|
||||
<div class="msg-header-content">
|
||||
<div layout="row" layout-align="start center">
|
||||
<md-button class="sg-icon-button sg-msg-flag" label:aria-label="flagged" ng-click="viewer.message.toggleFlag()">
|
||||
<md-icon ng-class="{'flagged': viewer.message.isflagged}">star</md-icon>
|
||||
</md-button>
|
||||
<h3 class="sg-md-title-msg" ng-bind="viewer.message.subject"><!-- subject --></h3>
|
||||
</div>
|
||||
<div class="pseudo-input-container--compact">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="From"/>
|
||||
</label>
|
||||
<div layout="row" layout-align="start center">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
sg-email="viewer.message.from[0].email"
|
||||
size="48">
|
||||
<!-- contact avatar -->
|
||||
</sg-avatar-image>
|
||||
<div class="md-list-item-text">
|
||||
<span>{{ viewer.message.from[0].name }}</span><br/>
|
||||
<a class="md-caption" href="#"
|
||||
ng-bind="viewer.message.from[0].email"
|
||||
ng-click="viewer.newMessage($event, viewer.message.from[0])"><!-- from --></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pseudo-input-container--compact">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="To"/>
|
||||
</label>
|
||||
<div class="pseudo-input-field" ng-hide="viewer.message.$showDetailedRecipients">
|
||||
<a href="#" ng-click="viewer.message.showDetailedRecipients()">{{viewer.message.$shortRecipients()}}</a>
|
||||
</div>
|
||||
<div class="pseudo-input-field" ng-show="viewer.message.$showDetailedRecipients">
|
||||
<span ng-repeat="recipient in viewer.message.to">
|
||||
<a href="#" ng-bind="recipient.full"
|
||||
ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pseudo-input-container--compact" ng-show="viewer.message.$showDetailedRecipients">
|
||||
<label class="pseudo-input-label" ng-show="viewer.message.cc.length > 0">
|
||||
<var:string label:value="Cc"/>
|
||||
</label>
|
||||
<div class="pseudo-input-field">
|
||||
<span ng-repeat="recipient in viewer.message.cc">
|
||||
<a href="#" ng-bind="recipient.full"
|
||||
ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<md-chips class="sg-readonly" ng-model="viewer.message.flags" ng-change="viewer.changeFlags()">
|
||||
<md-chip-template>{{viewer.service.$tags[$chip][0]}}</md-chip-template>
|
||||
<md-autocomplete
|
||||
md-selected-item="viewer.tags.selected"
|
||||
md-selected-item-change="viewer.message.addTag(viewer.tags.selected)"
|
||||
md-search-text="viewer.tags.searchText"
|
||||
md-items="tag in viewer.service.filterTags(viewer.tags.searchText)"
|
||||
label:placeholder="Add a tag">
|
||||
<span md-highlight-text="viewer.tags.searchText">{{viewer.service.$tags[tag][0]}}</span>
|
||||
</md-autocomplete>
|
||||
</md-chips>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <p class="flags">
|
||||
<!– Todo: change the text for an icon (conditional ?) The read/unread flag doesn't make sense at his place–>
|
||||
<span class="pseudo-input-label" ng-repeat="flag in message.flags">{{flag}}</span>
|
||||
</p>
|
||||
-->
|
||||
|
||||
<div class="sg-icon-bar--vertical">
|
||||
<md-button class="sg-icon-button show-sm"
|
||||
label:aria-label="Close"
|
||||
ng-click="viewer.close()">
|
||||
<md-icon>close</md-icon>
|
||||
<div layout="column" class="layout-fill">
|
||||
<md-toolbar>
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="sg-icon-button" label:aria-label="flagged" ng-click="viewer.message.toggleFlag()">
|
||||
<md-icon ng-class="{'icon-star': viewer.message.isflagged,
|
||||
'icon-star-border': !viewer.message.isflagged}"><!-- flag --></md-icon>
|
||||
</md-button>
|
||||
<!-- todo: Replace md-tooltip values by localizable string variable -->
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button class="sg-icon-button"
|
||||
ng-hide="viewer.message.isDraft"
|
||||
ng-click="viewer.reply($event)"
|
||||
label:aria-label="reply">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Reply to Sender Only"/></md-tooltip>
|
||||
<md-tooltip md-direction="bottom"><var:string label:value="Reply to Sender Only"/></md-tooltip>
|
||||
<md-icon>reply</md-icon>
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button" label:aria-label="Forward"
|
||||
ng-hide="viewer.message.isDraft"
|
||||
ng-click="viewer.forward($event)">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Forward selected message"/></md-tooltip>
|
||||
<md-tooltip md-direction="bottom"><var:string label:value="Forward selected message"/></md-tooltip>
|
||||
<md-icon>forward</md-icon>
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button" label:aria-label="Edit"
|
||||
@@ -109,10 +35,9 @@
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button" label:aria-label="Delete"
|
||||
ng-click="viewer.doDelete()">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Delete selected message or folder"/></md-tooltip>
|
||||
<md-tooltip md-direction="bottom"><var:string label:value="Delete selected message or folder"/></md-tooltip>
|
||||
<md-icon>delete</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-menu>
|
||||
<md-button label:aria-label="More mail options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
|
||||
<md-icon>more_vert</md-icon>
|
||||
@@ -124,12 +49,6 @@
|
||||
<var:string label:value="Reply All"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item ng-show="viewer.message.$hasUnsafeContent">
|
||||
<md-button label:aria-label="Load Images"
|
||||
ng-click="viewer.message.loadUnsafeContent()">
|
||||
<var:string label:value="Load Images"/>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<md-button label:aria-label="Save As..."
|
||||
ng-click="viewer.saveMessage()">
|
||||
@@ -144,38 +63,117 @@
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
|
||||
<md-button class="sg-icon-button hide show-sm"
|
||||
label:aria-label="Close"
|
||||
ng-click="viewer.close()">
|
||||
<md-icon>close</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</header>
|
||||
<md-divider><!-- divider --></md-divider>
|
||||
</md-toolbar>
|
||||
<md-content class="md-flex md-static">
|
||||
<div class="viewer">
|
||||
<md-toolbar class="sg-padded">
|
||||
<h3 class="sg-md-title-msg">{{viewer.message.subject}}</h3>
|
||||
<time class="msg-date" datetime="viewer.message.date" ng-bind="viewer.message.date"><!-- date --></time>
|
||||
</md-toolbar>
|
||||
<md-toolbar class="sg-padded">
|
||||
|
||||
<div ng-show="viewer.message.shouldAskReceipt == 1"
|
||||
layout-padding="layout-padding">
|
||||
<md-whiteframe class="md-whiteframe-z2" layout="column"
|
||||
layout-align="center start">
|
||||
<md-icon>warning</md-icon>
|
||||
<span><var:string label:value="The sender of this message has asked to be notified when you read this message. Do you with to notify the sender?"/></span>
|
||||
<div class="md-actions" layout="row">
|
||||
<md-button label:aria-label="Yes"
|
||||
type="button" class="md-primary"
|
||||
ng-click="viewer.message.$sendMDN()"><var:string label:value="Yes"/></md-button>
|
||||
<md-button label:aria-label="No"
|
||||
type="button"
|
||||
ng-click="viewer.message.shouldAskReceipt = 0"><var:string label:value="No"/></md-button>
|
||||
</div>
|
||||
</md-whiteframe>
|
||||
</div>
|
||||
<div class="pseudo-input-container--compact">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="From"/>
|
||||
</label>
|
||||
<div layout="row" layout-align="start center">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
sg-email="viewer.message.from[0].email"
|
||||
size="48">
|
||||
<!-- contact avatar -->
|
||||
</sg-avatar-image>
|
||||
<div class="md-list-item-text">
|
||||
<span>{{ viewer.message.from[0].name }}</span><br/>
|
||||
<a class="md-caption" href="#"
|
||||
ng-bind="viewer.message.from[0].email"
|
||||
ng-click="viewer.newMessage($event, viewer.message.from[0])"><!-- from --></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pseudo-input-container--compact">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="To"/>
|
||||
</label>
|
||||
<div class="pseudo-input-field" ng-hide="viewer.message.$showDetailedRecipients">
|
||||
<a href="#" ng-click="viewer.message.showDetailedRecipients()">{{viewer.message.$shortRecipients()}}</a>
|
||||
</div>
|
||||
<div class="pseudo-input-field" ng-show="viewer.message.$showDetailedRecipients">
|
||||
<span ng-repeat="recipient in viewer.message.to">
|
||||
<a href="#" ng-bind="recipient.full"
|
||||
ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pseudo-input-container--compact" ng-show="viewer.message.$showDetailedRecipients">
|
||||
<label class="pseudo-input-label" ng-show="viewer.message.cc.length > 0">
|
||||
<var:string label:value="Cc"/>
|
||||
</label>
|
||||
<div class="pseudo-input-field">
|
||||
<span ng-repeat="recipient in viewer.message.cc">
|
||||
<a href="#" ng-bind="recipient.full"
|
||||
ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<md-chips class="sg-readonly" ng-model="viewer.message.flags" ng-change="viewer.changeFlags()">
|
||||
<md-chip-template>{{viewer.service.$tags[$chip][0]}}</md-chip-template>
|
||||
<md-autocomplete
|
||||
md-selected-item="viewer.tags.selected"
|
||||
md-selected-item-change="viewer.message.addTag(viewer.tags.selected)"
|
||||
md-search-text="viewer.tags.searchText"
|
||||
md-items="tag in viewer.service.filterTags(viewer.tags.searchText)"
|
||||
label:placeholder="Add a tag">
|
||||
<span md-highlight-text="viewer.tags.searchText">{{viewer.service.$tags[tag][0]}}</span>
|
||||
</md-autocomplete>
|
||||
</md-chips>
|
||||
</md-toolbar>
|
||||
<md-content md-scroll-x="md-scroll-x" class="md-padding md-whiteframe-z1">
|
||||
|
||||
<div class="msg-body">
|
||||
<div class="msg-date sg-md-body-multi">
|
||||
<time datetime="viewer.message.date" ng-bind="viewer.message.date"><!-- date --></time>
|
||||
<!-- Load external images -->
|
||||
<md-whiteframe class="md-whiteframe-z2" layout="row" layout-align="space-between center"
|
||||
ng-show="viewer.message.$hasUnsafeContent">
|
||||
<p class="sg-padded"><var:string label:value="This message contains external images."/></p>
|
||||
<md-button label:aria-label="Load Images"
|
||||
ng-click="viewer.message.loadUnsafeContent()">
|
||||
<var:string label:value="Load Images"/>
|
||||
</md-button>
|
||||
</md-whiteframe>
|
||||
|
||||
<!-- Send MDN -->
|
||||
<md-whiteframe class="md-whiteframe-z2" layout="column" layout-align="center start"
|
||||
ng-show="viewer.message.shouldAskReceipt == 1">
|
||||
<div layout="row" layout-align="start center">
|
||||
<div class="md-tile-left">
|
||||
<md-icon>message</md-icon>
|
||||
</div>
|
||||
<p class="sg-padded--right"><var:string label:value="The sender of this message has asked to be notified when you read this message. Do you with to notify the sender?"/></p>
|
||||
</div>
|
||||
<div class="layout-fill" layout="row" layout-align="end center">
|
||||
<md-button label:aria-label="No"
|
||||
type="button"
|
||||
ng-click="viewer.message.shouldAskReceipt = 0"><var:string label:value="No"/></md-button>
|
||||
<md-button label:aria-label="Yes"
|
||||
type="submit"
|
||||
ng-click="viewer.message.$sendMDN()"><var:string label:value="Yes"/></md-button>
|
||||
</div>
|
||||
</md-whiteframe>
|
||||
|
||||
<div class="msg-body">
|
||||
<div layout="row" layout-wrap="layout-wrap">
|
||||
<div ng-class="part.msgclass" layout="row" layout-wrap="layout-wrap" class="mailer_mailcontent" ng-repeat="part in viewer.message.$content()">
|
||||
<div ng-if="part.html" ng-bind-html="part.content | ensureTarget"><!-- msg --></div>
|
||||
<div ng-if="part.compile" sg-compile="part.content"><!-- msg --></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-content>
|
||||
</div>
|
||||
<div layout="row" layout-wrap="layout-wrap">
|
||||
<div ng-class="part.msgclass" layout="row" layout-wrap="layout-wrap" class="mailer_mailcontent" ng-repeat="part in viewer.message.$content()">
|
||||
<div ng-if="part.html" ng-bind-html="part.content | ensureTarget"><!-- msg --></div>
|
||||
<div ng-if="part.compile" sg-compile="part.content"><!-- msg --></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-content>
|
||||
</md-content>
|
||||
</div>
|
||||
</container>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:label="OGo:label">
|
||||
<md-dialog flex="40" flex-md="60" flex-sm="100">
|
||||
<md-toolbar class="md-padding" ng-class="editor.component.getClassName('bg')">
|
||||
<md-toolbar ng-class="editor.component.getClassName('bg')">
|
||||
<div class="md-toolbar-tools">
|
||||
<md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
|
||||
<div class="sg-md-title md-flex">
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<md-dialog flex="60" flex-sm="100">
|
||||
<form name="eventForm" ng-submit="editor.save(eventForm)">
|
||||
<md-toolbar ng-class="editor.component.getClassName('bg')">
|
||||
<div class="md-toolbar-tools sg-padded">
|
||||
<div class="md-toolbar-tools">
|
||||
<!-- summary -->
|
||||
<md-icon ng-if="editor.component.classification == 'confidential'">visibility_off</md-icon>
|
||||
<md-icon ng-if="editor.component.classification == 'private'">vpn_key</md-icon>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:label="OGo:label">
|
||||
<md-dialog flex="40" flex-md="60" flex-sm="100">
|
||||
<md-toolbar class="md-padding" ng-class="editor.component.getClassName('bg')">
|
||||
<md-toolbar ng-class="editor.component.getClassName('bg')">
|
||||
<div class="md-toolbar-tools">
|
||||
<md-icon class="material-icons sg-icon-toolbar-bg">assignment_turned_in</md-icon>
|
||||
<div class="sg-md-title md-flex">
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:label="OGo:label">
|
||||
<md-toolbar class="md-tall sg-padded">
|
||||
<md-toolbar class="md-tall sg-padded md-hue-2">
|
||||
<div layout="column" layout-align="center start">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
sg-email="activeUser.email"
|
||||
size="48"><!-- avatar --></sg-avatar-image>
|
||||
size="64"><!-- avatar --></sg-avatar-image>
|
||||
<p class="sg-md-title">{{activeUser.identification}}</p>
|
||||
<p class="md-caption">{{activeUser.email}}</p>
|
||||
<p class="md-caption">{{activeUser.email}}</p>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</container>
|
||||
|
||||
@@ -20,16 +20,16 @@
|
||||
</div>
|
||||
|
||||
<div class="sg-toolbar-group-last">
|
||||
<md-menu layout-fill="layout-fill">
|
||||
<md-menu>
|
||||
<md-button label:aria-label="Modules"
|
||||
class="sg-icon-button" ng-click="$mdOpenMenu($event)">
|
||||
<md-icon>apps</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content width="8">
|
||||
<div class="md-toolbar-tools sg-padded" layout="row"
|
||||
<div class="md-toolbar-tools" layout="row"
|
||||
layout-align="space-around start">
|
||||
<md-button class="sg-icon-button"
|
||||
ng-show="activeUser.path.calendar.length"
|
||||
ng-if="activeUser.path.calendar.length"
|
||||
ng-disabled="baseURL.endsWith('/Calendar')"
|
||||
ng-href="{{activeUser.path.calendar}}">
|
||||
<md-icon>event</md-icon>
|
||||
@@ -42,7 +42,7 @@
|
||||
<md-tooltip><var:string label:value="Address Book"/></md-tooltip>
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button"
|
||||
ng-show="activeUser.path.mail.length"
|
||||
ng-if="activeUser.path.mail.length"
|
||||
ng-disabled="baseURL.endsWith('/Mail')"
|
||||
ng-href="{{activeUser.path.mail}}">
|
||||
<md-icon>email</md-icon>
|
||||
@@ -54,11 +54,11 @@
|
||||
<md-icon>settings</md-icon>
|
||||
<md-tooltip><var:string label:value="Preferences"/></md-tooltip>
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button" ng-show="activeUser.isSuperUser" ng-href="{{activeUser.path.administration}}">
|
||||
<md-button class="sg-icon-button" ng-if="activeUser.isSuperUser" ng-href="{{activeUser.path.administration}}">
|
||||
<md-icon>settings_applications</md-icon>
|
||||
<md-tooltip><var:string label:value="Administration"/></md-tooltip>
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button" ng-show="activeUser.path.logoff.length" ng-href="{{activeUser.path.logoff}}">
|
||||
<md-button class="sg-icon-button" ng-if="activeUser.path.logoff.length" ng-href="{{activeUser.path.logoff}}">
|
||||
<md-icon>settings_power</md-icon>
|
||||
<md-tooltip><var:string label:value="Disconnect"/></md-tooltip>
|
||||
</md-button>
|
||||
|
||||
@@ -108,7 +108,7 @@ md-list md-list-item button.md-button.sg-icon-button {
|
||||
.sg-icon-bar--vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 ($mg * -1) 0 $mg;
|
||||
//margin: 0 ($mg * -1) 0 $mg;
|
||||
font-size: $sg-font-size-3;
|
||||
align-items: center;
|
||||
// Containers have padding, we compensate to align according to specs
|
||||
|
||||
@@ -123,11 +123,11 @@ md-icon {
|
||||
}
|
||||
|
||||
// Message flag
|
||||
.sg-msg-flag {
|
||||
md-icon {
|
||||
color: sg-color($sogoGreen, 50) !important;
|
||||
&.flagged {
|
||||
color: sg-color($sogoBlue, 600) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
//.sg-msg-flag {
|
||||
// md-icon {
|
||||
// color: sg-color($sogoGreen, 50) !important;
|
||||
// &.flagged {
|
||||
// color: sg-color($sogoBlue, 600) !important;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
@@ -45,8 +45,11 @@ md-list-item {
|
||||
padding: $layout-gutter-width;
|
||||
width: $sg-md-grid-pitch + $baseline-grid;
|
||||
height: $sg-md-grid-pitch + $baseline-grid;
|
||||
line-height: $sg-md-grid-pitch + $baseline-grid;
|
||||
//line-height: $sg-md-grid-pitch + $baseline-grid;
|
||||
background-clip: content-box;
|
||||
md-icon {
|
||||
font-size: $sg-md-grid-pitch + $baseline-grid - 2 * $layout-gutter-width;
|
||||
}
|
||||
}
|
||||
.md-tile-right {
|
||||
margin-right: -$layout-gutter-width;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/// toolbar.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
$toolbar-tools-height: 100%;
|
||||
//$toolbar-tools-height: 100%;
|
||||
$toolbar-height: $pitch;
|
||||
$toolbar-medium-tall-height: 88px !default;
|
||||
//$toolbar-medium-tall-height: 88px !default;
|
||||
$toolbar-tall-height: ($toolbar-height * 2);
|
||||
$toolbar-indent-margin: $pitch;
|
||||
$toolbar-padding: $mg;
|
||||
@@ -18,18 +18,34 @@ md-toolbar {
|
||||
font-size: 1em !important;
|
||||
background-image: url("../img/felt-transp.png");
|
||||
background-blend-mode: luminosity;
|
||||
box-shadow: $whiteframe-shadow-z1;
|
||||
//box-shadow: $whiteframe-shadow-z1;
|
||||
}
|
||||
|
||||
.md-toolbar-tools {
|
||||
padding: 0;
|
||||
//padding: 0;
|
||||
// dirty fix to override angular-material botchy typography
|
||||
font-size: 1em !important;
|
||||
}
|
||||
|
||||
md-toolbar,
|
||||
.md-toolbar-tools {
|
||||
// Animate the first icon button of a "secondary" toolbar
|
||||
&.sg-toolbar-secondary {
|
||||
> .md-toolbar-tools > .sg-icon-button:first-child,
|
||||
> .sg-icon-button:first-child {
|
||||
transition: $swift-ease-in;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
&.ng-hide > .md-toolbar-tools > .sg-icon-button:first-child,
|
||||
&.ng-hide > .sg-icon-button:first-child {
|
||||
transform: translateX(-$touch-zone-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// angular-material is overspecifying so we are
|
||||
.md-toolbar-tools[layout-align="start start"] {
|
||||
align-items: flex-start;
|
||||
//align-items: flex-start;
|
||||
}
|
||||
|
||||
.md-toolbar-tools.md-toolbar-tools-top {
|
||||
@@ -50,14 +66,14 @@ header {
|
||||
}
|
||||
hgroup {
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
//flex: 1 1 auto;
|
||||
&h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.toolbar-main .md-button {
|
||||
color: inherit;
|
||||
font-size: sg-size(headline);
|
||||
// color: inherit;
|
||||
// font-size: sg-size(headline);
|
||||
}
|
||||
|
||||
.sg-toolbar-group {
|
||||
@@ -65,6 +81,9 @@ hgroup {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// & > .sg-icon-button:first-child {
|
||||
// padding-left: 0;
|
||||
// }
|
||||
&-1 {
|
||||
order: 1;
|
||||
max-width: $listView-width;
|
||||
|
||||
@@ -39,8 +39,10 @@
|
||||
}
|
||||
|
||||
.msg-date {
|
||||
font-size: $sg-font-size-2;
|
||||
text-align: right;
|
||||
margin-bottom: 10px;
|
||||
// margin-bottom: 10px;
|
||||
// margin-bottom: ($mg/2);
|
||||
}
|
||||
|
||||
.msg-attachment-image {
|
||||
|
||||
@@ -38,7 +38,7 @@ $detailView-width: grid-step(8) !global;
|
||||
z-index: ($z-index-view - 1);
|
||||
min-width: ($listView-width - ($pitch * 2));
|
||||
@include at(md){
|
||||
@include flex-col(md, 7, 1, 1);
|
||||
@include flex-col(md, 6, 1, 1);
|
||||
min-width: ($pitch * 3);
|
||||
}
|
||||
@include from(lg) {
|
||||
@@ -52,26 +52,30 @@ $detailView-width: grid-step(8) !global;
|
||||
|
||||
.view-detail {
|
||||
z-index: $z-index-view;
|
||||
overflow-x: hidden;
|
||||
//overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
@include at(md) {
|
||||
@include flex-col(md, 9);
|
||||
@include flex-col(md, 10);
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
@include from(lg) {
|
||||
@include flex-col(lg, 10, 2, 1);
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
// No animation on medium to large screens
|
||||
@include from(md) {
|
||||
.md-static {
|
||||
position: static;
|
||||
}
|
||||
.viewer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: $toolbar-height;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
max-width: 100%;
|
||||
overflow-y: auto;
|
||||
// transform: translate3d(0, 0, 0);
|
||||
// transition: all 0.5s $swift-ease-in-out-timing-function;
|
||||
// &.ng-enter {
|
||||
@@ -109,10 +113,12 @@ $detailView-width: grid-step(8) !global;
|
||||
display: block;
|
||||
background-color: transparent !important;
|
||||
position: absolute;
|
||||
top: $toolbar-tall-height;
|
||||
//top: $toolbar-tall-height;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: ($z-index-toolbar + 1);
|
||||
transform: translateX(0);
|
||||
transition: $swift-ease-in-out;
|
||||
&.sg-close {
|
||||
@@ -133,6 +139,7 @@ $detailView-width: grid-step(8) !global;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user