sogo/UI/Templates/ContactsUI/UIxContactViewTemplate.wox

<?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:label="OGo:label">

  <div class="sg-reversible" ng-class="{ 'sg-flip': editor.showRawSource }">
    <div class="sg-face" layout="column" layout-fill="layout-fill">
      <md-card>
        <md-card-actions flex-none="flex-none" layout="row" layout-align="end center">
          <md-button class="sg-icon-button hide-gt-xs"
                     label:aria-label="Close"
                     ng-click="editor.close()">
            <md-icon>close</md-icon>
          </md-button>
          <div class="md-flex"><!-- spacer --></div>
          <md-button type="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><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><var:string label:value="Delete"/></md-tooltip>
            <md-icon>delete</md-icon>
          </md-button>
          <md-menu ng-hide="editor.currentFolder.isRemote">
            <md-button label:aria-label="More options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
              <md-icon>more_vert</md-icon>
            </md-button>
            <md-menu-content>
              <md-menu-item>
                <md-button label:aria-label="Export"
                           ng-click="editor.card.export()">
                  <var:string label:value="Export"/>
                </md-button>
              </md-menu-item>
              <md-menu-item>
                <md-button label:aria-label="View Raw Source"
                           ng-click="editor.toggleRawSource($event)">
                  <var:string label:value="View Raw Source"/>
                </md-button>
              </md-menu-item>
            </md-menu-content>
          </md-menu>
        </md-card-actions>
        <md-card-content>
          <header class="msg-header">
            <div ng-show="editor.card.c_component == 'vcard'">
              <sg-avatar-image class="md-avatar md-tile-left"
                               sg-email="editor.card.$preferredEmail()"
                               sg-src="editor.card.photoURL"
                               size="40"><!-- avatar --></sg-avatar-image>
            </div>
            <div class="md-tile-left md-avatar sg-avatar-list" ng-show="editor.card.$isList()">
              <!--list avatar-->
            </div>
            <div class="msg-header-content">
              <h1 class="sg-md-display-2--thin" ng-bind-html="editor.card.$fullname({html: true})"><!-- fullname --></h1>
              <h6 class="sg-md-display-2-subheader--thin">{{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">

            <div class="pseudo-input-container" ng-show="editor.card.birthday">
              <div class="key">
                <label class="pseudo-input-label">
                  <var:string label:value="Birthday"/>
                </label>
              </div>
              <div class="pseudo-input-field">
                <span>{{editor.card.$birthday}}</span>
              </div>
            </div>

            <!-- 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-2-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.$preferredEmail()">
                      <a href="#" ng-bind="ref.$preferredEmail()"
                         ng-click="addressbook.newMessageWithRecipient($event, ref.$preferredEmail(), ref.$fullname())"><!-- contact 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="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.c_screenname">
              <div class="pseudo-input-container">
                <div class="key">
                  <label class="pseudo-input-label"><var:string label:value="Screen Name"/></label>
                </div>

                <div class="pseudo-input-field">{{editor.card.c_screenname}}</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>
                </div>

                <div class="pseudo-input-field">
                  <a href="#" target="_new" 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>
        </md-card-content>
      </md-card>
    </div>
    <div class="sg-back" layout="column" layout-fill="layout-fill">
      <md-card>
        <md-card-actions flex-none="flex-none" layout="row" layout-align="end center">
          <md-button class="md-icon-button"
                     label:aria-label="Close"
                     ng-click="editor.toggleRawSource()">
            <md-icon>arrow_forward</md-icon>
          </md-button>
        </md-card-actions>
        <md-card-content>
          <pre ng-bind-html="editor.rawSource"><!-- raw --></pre>
        </md-card-content>
      </md-card>
    </div>
  </div>
</container>