mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-10-12 23:37:15 +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 committed
1 parent
3647f066da
commit
d72188e2da
18 files changed
+812
-784
No files matched your search
@@ -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>
|
||||
Reference in new issue
Block a user