sogo/UI/Templates/AdministrationUI/UIxAdministration.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:rsrc="OGo:url"
               xmlns:label="OGo:label"
               className="UIxPageFrame"
               title="title"
               const:jsFiles="Common.js, Administration.js,
                              Administration.services.js, Preferences.services.js,
                              Contacts.services.js, Scheduler.services.js">

  <main class="view layout-fill" ui-view="administration" layout="row" ng-controller="navController">
    <!-- administration -->
  </main>

  <script type="text/ng-template" id="administration.html">
    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
      <var:component className="UIxSidenavToolbarTemplate" />
      <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
        <md-list>
          <md-list-item ng-click="app.go('rights')"
                        ui-sref="administration.rights"
                        ui-sref-active="md-default-theme md-background md-bg md-hue-1">
            <md-icon>security</md-icon>
            <p class="sg-item-name"><var:string label:value="Rights"/></p>
          </md-list-item>
        </md-list>
      </md-content>
    </md-sidenav>

    <section layout="column" class="sg-app-content layout-fill" ui-view="module"><!-- admin module --></section>

  </script>

  <!--
      RIGHTS ADMINISTRATION PANEL
  -->
  <script type="text/ng-template" id="rights.html">
    <!-- TOP RIGHT TOOLBAR -->
    <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">
        <md-toolbar>
          <!-- search toolbar -->
          <div class="md-toolbar-tools sg-toolbar-secondary"
               sg-search="app.filter(searchText)">
            <md-icon>search</md-icon>
            <md-input-container md-no-float="md-no-float">
              <input name="folderSearch" type="search" ng-minlength="3"
                     label:placeholder="Search Users"/>
            </md-input-container>
          </div>
        </md-toolbar>

        <md-content id="usersList" layout="column" class="md-flex">
          <md-list class="sg-section-list">
            <div ng-repeat="user in app.users">
              <md-list-item ng-class="{ 'sg-collapsed': user.uid != app.selectedUser.uid,
                                      'sg-expanded': user.uid == app.selectedUser.uid }"
                            ng-click="app.selectUser($index)">
                <sg-avatar-image class="md-avatar"
                                 ng-if="::user.isGroup === 0"
                                 sg-email="::user.c_email"
                                 size="40">
                  <!-- contact avatar -->
                </sg-avatar-image>
                <div class="sg-list-avatar"
                     ng-show="::user.isGroup">
                  <!-- list avatar -->
                </div>
                <div class="sg-tile-content">
                  <div class="sg-md-subhead">
                    <div>{{::user.cn}}</div>
                  </div>
                  <div class="sg-md-body">
                    <div>{{::user.c_email}}</div>
                  </div>
                </div>
                <md-button class="md-icon-button"><md-icon ng-class="{'md-rotate-180': user.uid == app.selectedUser.uid}">expand_more</md-icon></md-button>
              </md-list-item>
              <div ng-show="user == app.selectedUser">
                <!-- folders list -->
                <md-list-item ng-show="user.$$folders.length == 0">
                  <md-icon>warning</md-icon>
                  <var:string label:value="No resource"/>
                </md-list-item>
                <md-list-item class="sg-folder" ng-repeat="folder in user.$$folders">
                  <md-button class=""
                             aria-label="{{::folder.displayName}}" title="{{::folder.displayName}}"
                             ng-click="app.selectFolder(folder)">
                    <md-icon ng-class="{ 'icon-contacts': folder.type == 'Contact',
                                         'icon-event': folder.type == 'Appointment' }"><!--icon--></md-icon>
                    {{::folder.displayName}}
                  </md-button>
                </md-list-item>
                <md-divider><!-- divider --></md-divider>
              </div>
            </div>
          </md-list>
        </md-content>
      </div>

      <div id="detailView" class="view-detail" layout="column" layout-align="start center" ui-view="acl">
        <md-toolbar class="md-whiteframe-z1 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 resource selected"/></label>
          </md-input-container>
        </md-content>
      </div>
    </div>
  </script>

</var:component>