sogo/UI/Templates/ContactsUI/UIxContactFoldersView.wox

<?xml version='1.0' standalone='yes'?>
<!DOCTYPE var:component>
<var:component
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:var="http://www.skyrix.com/od/binding"
    xmlns:const="http://www.skyrix.com/od/constant"
    xmlns:label="OGo:label"
    const:userDefaultsKeys="SOGoContactsCategories"
    const:jsFiles="Contacts.app.js, Contacts.js, Common.js, Contacts.js"
    className="UIxPageFrame"
    title="name">
  <script type="text/javascript">
    var contactFolders = <var:string value="contactFolders" const:escapeHTML="NO" />;
  </script>

  <!--
  <div id="uploadDialog" style="display: none" class="dialog left">
    <div>
      <h3><var:string label:value="Import Cards"/></h3>
      <p class="prompt"><var:string label:value="Select a vCard or LDIF file."/></p>
      <form const:href="" name="uploadForm" id="uploadForm" method="post"
            enctype="multipart/form-data"
            onsubmit="return AIM.submit(this, {'onStart' : validateUploadForm,
                      'onComplete' : uploadCompleted})">
        <p class="prompt"><input type="file" name="contactsFile" id="contactsFile" class="textField" required="required" />
        <a href="#" class="button actionButton" id="uploadSubmit"
           onclick="if($('uploadForm').onsubmit()) $('uploadForm').submit()">
        <span><var:string label:value="Upload" /></span></a>
        <a href="#" class="button" const:id="uploadCancel">
        <span><var:string label:value="Cancel" /></span></a></p>
      </form>
      <hr/>
    </div>
  </div>

  <div id="uploadResults" dropdown-content="dropdown-content" class="f-dropdown">
    <div>
      <h3><var:string label:value="Import Cards"/></h3>
      <p id="uploadResultsContent">!- empty -</p>
      <p><a href="#" class="button" const:id="uploadOK">
      <span><var:string label:value="Done" /></span></a></p>
      <hr/>
    </div>
  </div>

  <ul class="f-dropdown" dropdown-content="dropdown-content" id="contactMenu">
    <li><var:string label:value="Properties" /></li>
    <li><var:string label:value="Categories" /></li>
    <li>!- separator -</li>
    <li><var:string label:value="Write" /></li>
    <li><var:string label:value="Instant Message" /></li>
    <li>!- separator -</li>
    <li><var:string label:value="Delete" /></li>
    <li>!- separator -</li>
    <li><var:string label:value="Move To" /></li>
    <li><var:string label:value="Copy To" /></li>
    <li><var:string label:value="Export" /></li>
    <li><var:string label:value="View Raw Source" /></li>
    </ul>
    -->
  <!--
    MAIN CONTENT ROW
    Content of the application view injected injected in the element bellow
    MUST be the first html element after body
    SHOULD  be a main tag (with role="main")

    Templates script tag wrappers goes next
  -->
  <main class="view md-layout-fill" ui-view="addressbooks" layout="row" ng-controller="navController"><!-- addressbooks list --></main>

  <!-- TEMPLATE SCRIPT WRAPPER -->
  <script type="text/ng-template" id="UIxContactFoldersView">

    <!-- dropdown menu for addressbook options button -->
    <div id="addressbookProperties" class="f-dropdown icons-dropdown" ng-hide="true">
      <ul class="button-group">
        <li label:tooltip="Links to this Address Book"
            tooltip-popup-delay="500">
          <span class="button"
              sg-dropdown-content-toggle="#addressbookLinks">
            <i class="icon-hyperlink"><!-- links --></i>
          </span>
        </li>
        <li label:tooltip="Rename"
            tooltip-popup-delay="500">
          <span class="button" ng-click="edit()">
            <i class="icon-pencil"><!-- rename --></i>
          </span>
        </li>
        <li label:tooltip="Import Cards"
            tooltip-popup-delay="500">
          <span class="button" ng-click="importCards()">
            <i class="icon-file"><!-- import --></i>
          </span>
        </li>
      </ul>
    </div>

    <!-- dropdown menu for new card split button
    <ul id="newListDrop" class="f-dropdown">
      <li><a class="tiny" ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'list'})"><var:string label:value="New List"/></a></li>
    </ul>
    -->

    <!-- dropdown menu for addressbook links
    <div id="addressbookLinks" class="sg-dropdown-content joyride-tip-guide">
      <span class="joyride-nub left">!- dropdown nub -</span>
      <div class="joyride-content-wrapper">
        <ul>
          <li class="title"><var:string label:value="Links to this Address Book"/></li>
          <li class="subtitle"><var:string label:value="CardDAV URL for Authenticated User Access"/></li>
          <li class="value">{{addressbook.cardDavURL}}</li>
          <var:if condition="isPublicAccessEnabled">
            <li class="subtitle"><var:string label:value="CardDAV URL for Public Access"/></li>
            <li class="value">{{addressbook.publicCardDavURL}}</li>
          </var:if>
        </ul>
      </div>
    </div>
    -->

    <!-- dropdown menu for subscriptions
    <div id="folderSubscribe" class="sg-dropdown-content"
         sg-subscribe="contact"
         sg-subscribe-on-select="subscribeToFolder">!- subscription dropdown -</div>
    -->
<!-- Sidenav -->
    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
      <var:component className="UIxSidenavToolbarTemplate" />
      <md-content md-scroll-y="md-scroll-y" class="md-flex">
        <!-- User's addressbooks -->
        <section>
          <md-subheader class="sg-md-subheader">
            <div layout="row" layout-align="space-between center">
              <span><var:string label:value="AddressBooks"/></span>
              <md-button class="iconButton"
                         label:aria-label="New Addressbook..."
                         ng-click="app.newAddressbook()">
                <i class="md-icon-add-circle-outline"><!-- add --></i>
              </md-button>
            </div>
          </md-subheader>
          <md-list>
            <md-list-item ng-repeat="folder in app.service.$addressbooks track by folder.id"
                          ng-click="app.select(folder)"
                          ng-dblclick="app.edit(folder)"
                          ui-sref="app.addressbook({addressbookId: folder.id})"
                          ui-sref-active="sg-active">
              <i ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
              <p class="sg-item-name"
                 ng-show="app.editMode!=folder.id"> {{folder.name}}</p>
              <md-input-container class="md-flex md-tile-content"
                                  ng-show="app.editMode==folder.id">
                <input class="folder-name" type="text"
                       label:aria-label="Name of the Address Book"
                       ng-model="folder.name"
                       ng-cloak="ng-cloak"
                       ng-blur="app.save(folder)"
                       sg-focus-on="addressBookName_{{folder.id}}"
                       sg-enter="app.save(folder)"
                       sg-escape="app.revertEditing(folder)"/>
              </md-input-container>

              <md-menu class="md-secondary">
                <md-button class="iconButton"
                           label:aria-label="Options"
                           ng-click="$mdOpenMenu()">
                  <i class="md-icon-more-vert" md-menu-origin="md-menu-origin"><!-- options --></i>
                </md-button>

                <md-menu-content width="2">
                  <md-menu-item>
                    <md-button type="button" ng-click="app.confirmDelete()">
                      <var:string label:value="Delete"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item>
                    <md-button type="button" ng-click="app.exportCards()">
                      <var:string label:value="Export"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-divider><!-- divider --></md-menu-divider>
                  <md-menu-item>
                    <md-button type="button" ng-click="app.showLinks(folder)">
                      <var:string label:value="Links to this Address Book"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item>
                    <md-button type="button" ng-click="app.share(folder)"
                               ng-show="app.service.selectedFolder.id==folder.id">
                      <var:string label:value="Sharing..."/>
                    </md-button>
                  </md-menu-item>
                </md-menu-content>

              </md-menu>

            </md-list-item>
          </md-list>
        </section>
        <!-- Subscriptions -->
        <section>
          <md-subheader class="sg-md-subheader">
            <div layout="row" layout-align="space-between center">
              <span><var:string label:value="Subscriptions"/></span>
              <md-button class="iconButton"
                         label:aria-label="Subscribe to an Addressbook..."
                         sg-subscribe="contact"
                         sg-subscribe-on-select="app.subscribeToFolder(folderData)">
                <i class="md-icon-add-circle-outline"><!-- add --></i>
              </md-button>
            </div>
          </md-subheader>
          <md-list>
            <md-list-item ng-repeat="folder in app.service.$subscriptions track by folder.id"
                          ng-click="app.select(folder)"
                          ng-dblclick="app.edit(folder)"
                          ui-sref="app.addressbook({addressbookId: folder.id})"
                          ui-sref-active="sg-active">
              <i ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
              <p class="sg-item-name"
                 ng-show="editMode!=folder.id">{{folder.name}}</p>
              <md-input-container class="md-flex md-tile-content"
                                  ng-show="app.editMode==folder.id">
                <input class="folder-name" type="text"
                       label:aria-label="Name of the Address Book"
                       ng-model="folder.name"
                       ng-cloak="ng-cloak"
                       ng-blur="app.save(folder)"
                       sg-focus-on="addressBookName_{{folder.id}}"
                       sg-enter="app.save(folder)"
                       sg-escape="app.revertEditing(folder)"/>
              </md-input-container>
              <md-button class="iconButton md-secondary" label:aria-label="Options"
                         ng-show="app.service.selectedFolder.id==folder.id"
                         ng-click="app.confirmDelete(folder)">
                <i class="md-icon-more-vert"><!-- options --></i>
              </md-button>
            </md-list-item>
          </md-list>
        </section>
        <!-- Remote/domain addressbooks -->
        <section>
          <md-subheader class="sg-md-subheader md-padding">
            <var:string label:value="Global Addressbooks"/>
          </md-subheader>
          <md-list>
            <md-list-item ng-repeat="folder in app.service.$remotes track by folder.id"
                          ng-click="app.select(folder)"
                          ui-sref="app.addressbook({addressbookId: folder.id})"
                          ui-sref-active="sg-active">
              <i ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
              <p class="sg-item-name">{{folder.name}}</p>
            </md-list-item>
          </md-list>
        </section>
      </md-content>
    </md-sidenav>

    <section layout="column" class="sg-app-content md-layout-fill" ui-view="addressbook"><!-- contacts list --></section>
  </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 sg-padded" layout="row" layout-align="space-between start">
        <var:component className="UIxTopnavToolbarTemplate" />
      </div>
      <div class="md-toolbar-tools md-toolbar-tools-bottom"
           layout="row" layout-align="space-between center"
           ng-show="addressbook.selectedFolder.$selectedCount() == 0">
        <div class="view-list sg-padded" layout="row" layout-align="space-between center"
             sg-search="addressbook.selectedFolder.$filter(searchText, { search: searchField })">
          <md-input-container class="sg-search-field-container">
            <label style="color: white"><i class="md-icon-search"><!--icon--></i><var:string label:value="Search"/></label>
            <input name="folderSearch" type="search" style="color: white"/>
          </md-input-container>

          <div class="sg-toolbar-group">
            <md-select class="sg-toolbar-sort md-contrast-light">
              <md-option value="name_or_address"><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>
          </div>
        </div>
      </div>
      <div layout="row" layout-align="start center" ng-show="addressbook.selectedFolder.$selectedCount() > 0">
        <md-button ng-click="addressbook.unselectCards()">
          <i class="md-icon-arrow-back"><!-- unselect all --></i>
        </md-button>
        <label>{{addressbook.selectedFolder.$selectedCount()}} selected</label>
        <md-button ng-click="addressbook.confirmDeleteSelectedCards()">
          <i class="md-icon-delete"><!-- delete --></i>
        </md-button>
        <md-button>
          <i class="md-icon-email"><!-- email contacts --></i>
        </md-button>
      </div>
    </md-toolbar>
    <div layout="row" class="md-flex" layout-align="space-between">
      <div class="view-list" layout="column" flex="true" style="position: relative;">
      <md-content id="contactsList">
        <header class="sg-md-subheader sg-md-subheader--fixed">
          <h2 class="sg-md-subhead-solo fg-sogoBlue-700">Contacts</h2>
        </header>
        <!-- Search field & special results
             <input type="text" placeholder="Search" ng-model="search.filter" ng-keyup="doSearch($event)" />
             <div ng-switch="search.status">
             <div ng-switch-when="min-char" class="alert-bg">
             <i class="icon-warning"></i><var:string label:value="Please enter at least three characters"/>
             </div>
             <div ng-switch-when="no-result" class="alert-bg">
             <i class="icon-ion-search"></i><var:string label:value="No matching card"/>
             </div>
             <div ng-switch-when="remote-addressbook" ng-show="addressbook.cards.length == 0" class="alert-bg">
             <i class="icon-ion-search"></i><var:string label:value="Initiate a search"/>
             </div>
             </div>
        -->
        <md-list vs-repeat="72" vs-scroll-parent="#contactsList">
          <md-list-item
              ng-repeat="currentCard in addressbook.selectedFolder.cards track by currentCard.id"
              ng-click="addressbook.selectCard(currentCard)"
              ui-sref-active="sg-active"
              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-gravatar-image class="md-tile-left"
                               ng-show="addressbook.notSelectedComponent(currentCard,'vcard')"
                               ng-click="currentCard.selected = !currentCard.selected"
                               email="{{currentCard.$preferredEmail(addressbook.selectedFolder.$query)}}"
                               size="48">
              <!-- contact avatar -->
            </sg-gravatar-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.$query)}}</div>
            </div>
          </md-list-item>
        </md-list>
      </md-content>
      
      <md-button class="iconButton md-fab md-fab-bottom-right md-accent"
                 label:aria-label="New Contact"
                 ng-click="addressbook.newComponent($event)">
        <i class="md-icon-add"><!-- icon --></i>
      </md-button>

      </div>

      <!-- This extra container is used to animate views transitions
           double quotes in ng-animate is not a typo                         -->
      <div id="detailView" class="view-detail ng-cloak" layout="column">
        <md-card class="viewer" ui-view="card"><!-- card view --></md-card>
      </div>

    </div>
  </script>

  <!-- modal for addressbook sharing options -->
  <script type="text/ng-template" id="UIxUserRightsEditor">
    <var:component className="UIxContactsUserRightsEditor" />
  </script>

  <script type="text/ng-template" id="UIxContactViewTemplate">
    <var:component className="UIxContactViewTemplate" />
  </script>

</var:component>