sogo/UI/Templates/MailerUI/UIxMailMainFrame.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, Preferences.services.js, Contacts.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" />;
  </script>
  <style type="text/css">
    <var:foreach list="availableLabels" item="currentLabel">
      #label-menu LI.<var:string value="currentLabel.name.asCSSIdentifier" />,
      TABLE.messageList TR[labels~=
      <var:string const:value = '"' const:escapeHTML="NO"
          />
      <var:string value="currentLabel.name" />
      <var:string const:value = '"' const:escapeHTML="NO" />] TD
      { color:<var:string value="currentLabel.color" />; }
      TABLE.messageList TR[labels~=
      <var:string const:value = '"' const:escapeHTML="NO"
          />
      <var:string value="currentLabel.name" />
      <var:string const:value = '"' const:escapeHTML="NO" />]._selected TD
      { color: #fff;
      background-color:
      <var:string value="currentLabel.color" />
      !important; }
    </var:foreach>
  </style>

  <!--
      MAIN CONTENT ROW
      Content of the application view injected injected in the element below
      MUST be the first html element after body
      SHOULD be a main tag
      Templates script tag wrappers go next
  -->
  <main class="view layout-fill" ui-view="mailboxes" layout="row" ng-controller="navController"><!-- mailboxes list --></main>

  <script type="text/ng-template" id="UIxMailMainFrame">

    <!-- Sidenav -->
    <md-sidenav class="md-sidenav-left md-whiteframe-z1 layout-fill" layout="column"
                md-component-id="left" md-is-locked-open="isGtMedium"
                ng-class="{ 'sg-closed': leftIsClose }">
      <var:component className="UIxSidenavToolbarTemplate" />
      <md-content class="md-flex md-hue-2" layout="column" md-scroll-y="md-scroll-y">
        <section class="md-flex" layout="column"
                 ng-repeat="account in app.accounts track by account.id">
          <md-subheader class="md-hue-2">
            <div layout="row" layout-align="start center">
              <md-button class="md-icon-button"
                         ng-show="account.id == 0"
                         label:aria-label="Delegation..."
                         ng-click="app.delegate(account)">
                <md-tooltip md-delay="300"><var:string label:value="Delegation..."/></md-tooltip>
                <md-icon>people</md-icon>
              </md-button>
              <div class="sg-no-wrap">{{account.name}}</div>
              <div class="md-flex"><!-- spacer --></div>
              <md-button class="sg-icon-button"
                         label:aria-label="New Folder..."
                         ng-click="app.newFolder(account)">
                <md-tooltip md-delay="300"><var:string label:value="New Folder..."/></md-tooltip>
                <md-icon>add_circle_outline</md-icon>
              </md-button>
            </div>
          </md-subheader>
          <div class="sg-quota" ng-if="account.$quota">
            <md-progress-linear md-mode="determinate"
                                ng-class="{ 'md-warn': account.$quota.percent > 70 }"
                                value="{{account.$quota.percent}}"><!-- quota --></md-progress-linear>
            <div class="sg-md-caption md-default-theme md-fg md-primary"
                 ng-class="{ 'md-warn': account.$quota.percent > 70 }">{{account.$quota.description}}</div>
          </div>
          <md-virtual-repeat-container class="md-flex">
            <md-list>
              <md-list-item md-virtual-repeat="folder in account.$flattenMailboxes()" md-item-size="48"
                            class="md-default-theme md-background md-hue-1"
                            ng-class="{'md-bg': folder.id == app.service.selectedFolder.id}"
                            ng-dblclick="app.editFolder(folder)">
                <div ng-class="'sg-child-level-' + folder.level">
                  <md-icon ng-hide="folder.children.length">{{app.metadataForFolder(folder).icon}}</md-icon>
                  <md-checkbox class="sg-folder"
                               label:aria-label="Expanded"
                               ng-show="folder.children.length"
                               ng-model="folder.$expanded"
                               ng-change="account.$flattenMailboxes({ reload: true, saveState: true })"><!-- expanded --></md-checkbox>
                </div>
                <p class="sg-item-name"
                   ng-click="app.selectFolder($event, account, folder)"
                   ng-show="app.editMode != folder.path">
                  {{app.metadataForFolder(folder).name}}
                  <span class="sg-counter-badge" ng-show="folder.unseenCount">{{folder.unseenCount}}</span>
                </p>
                <md-input-container class="md-flex"
                                    ng-show="app.editMode == folder.path">
                  <input class="sg-item-name" type="text"
                         label:aria-label="Enter the new name of your folder"
                         ng-model="folder.name"
                         ng-blur="app.saveFolder(folder)"
                         sg-focus-on="mailboxName_{{folder.path}}"
                         sg-enter="app.saveFolder(folder)"
                         sg-escape="app.revertEditing(folder)"/>
                </md-input-container>
                <md-menu ng-show="app.service.selectedFolder.path == folder.path">
                  <md-icon label:aria-label="Options"
                           ng-click="$mdOpenMenu($event)"
                           md-menu-origin="md-menu-origin">more_vert</md-icon>
                  <md-menu-content width="3">
                    <md-menu-item>
                      <md-button type="button" md-menu-align-target="md-menu-align-target" ng-click="app.markFolderRead(folder)">
                        <var:string label:value="Mark Folder Read"/>
                      </md-button>
                    </md-menu-item>
                    <md-menu-item>
                      <md-button type="button" ng-click="app.newFolder(folder)">
                        <var:string label:value="New Subfolder..."/>
                      </md-button>
                    </md-menu-item>
                    <md-menu-item ng-show="folder.$isEditable">
                      <md-button type="button" ng-click="app.editFolder(folder)">
                        <var:string label:value="Rename"/>
                      </md-button>
                    </md-menu-item>
                    <md-menu-item>
                      <md-button type="button" ng-click="app.compactFolder(folder)">
                        <var:string label:value="Compact"/>
                      </md-button>
                    </md-menu-item>
                    <md-menu-item ng-show="folder.$isEditable">
                      <md-button type="button" ng-click="app.confirmDelete(folder)">
                        <var:string label:value="Delete"/>
                      </md-button>
                    </md-menu-item>
                    <md-menu-item ng-show="folder.type == 'trash'">
                      <md-button type="button" ng-click="app.emptyTrashFolder(folder)">
                        <var:string label:value="Empty Trash"/>
                      </md-button>
                    </md-menu-item>
                    <md-menu-item>
                      <md-button type="button" ng-click="app.exportMails(folder)">
                        <var:string label:value="Export"/>
                      </md-button>
                    </md-menu-item>
                    <md-menu-item>
                      <md-button type="button"
                                 ng-click="app.showAdvancedSearch(folder.path)">
                        <var:string label:value="Search"/>
                      </md-button>
                    </md-menu-item>
                    <md-menu-divider ng-show="folder.type == 'folder'"><!-- divider --></md-menu-divider>
                    <md-menu-item ng-show="folder.type == 'folder'">
                      <md-button type="button" ng-click="app.setFolderAs(folder, 'Drafts')">
                        <var:string label:value="Set as Drafts"/>
                      </md-button>
                    </md-menu-item>
                    <md-menu-item ng-show="folder.type == 'folder'">
                      <md-button type="button" ng-click="app.setFolderAs(folder, 'Sent')">
                        <var:string label:value="Set as Sent"/>
                      </md-button>
                    </md-menu-item>
                    <md-menu-item ng-show="folder.type == 'folder'">
                      <md-button type="button" ng-click="app.setFolderAs(folder, 'Trash')">
                        <var:string label:value="Set as Trash"/>
                      </md-button>
                    </md-menu-item>
                    <md-menu-divider ng-show="folder.type != 'additional'"><!-- divider --></md-menu-divider>
                    <md-menu-item ng-show="folder.type != 'additional'">
                      <md-button type="button" ng-click="app.share(folder)">
                        <var:string label:value="Sharing..."/>
                      </md-button>
                    </md-menu-item>
                  </md-menu-content>
                </md-menu>
              </md-list-item>
            </md-list>
          </md-virtual-repeat-container>
          <md-divider><!-- divider --></md-divider>
        </section>
      </md-content>
    </md-sidenav>

    <section layout="column" class="layout-fill" ui-view="mailbox"><!-- messages list --></section>
  </script>

  <script type="text/ng-template" id="UIxMailFolderTemplate">
    <md-toolbar layout="row" layout-align="space-between center" class="toolbar-main"
                ng-hide="app.showingAdvancedSearch">
      <var:component className="UIxTopnavToolbarTemplate"/>
    </md-toolbar>

    <!-- Advanced search toolbar -->
    <md-toolbar layout="column" class="md-tall toolbar-main"
                ng-show="app.showingAdvancedSearch">
      <div class="md-toolbar-tools">
        <div layout="column" class="md-flex">
          <div class="pseudo-input-container--compact">
            <label class="pseudo-input-label"><var:string label:value="Add a Criteria"/></label>
          </div>
          <div layout="row">
            <span class="md-button sg-outline-button" ng-click="app.addSearchParam('subject')">
              <var:string label:value="Subject"/>
            </span>
            <span class="md-button sg-outline-button" ng-click="app.addSearchParam('from')">
              <var:string label:value="From"/>
            </span>
            <span class="md-button sg-outline-button" ng-click="app.addSearchParam('to')">
              <var:string label:value="To"/>
            </span>
            <span class="md-button sg-outline-button" ng-click="app.addSearchParam('cc')">
              <var:string label:value="Cc"/>
            </span>
            <span class="md-button sg-outline-button" ng-click="app.addSearchParam('body')">
              <var:string label:value="Body"/>
            </span>
          </div>
        </div>
        <md-button type="button" class="sg-icon-button" ng-click="app.hideAdvancedSearch()">
          <md-icon>close</md-icon>
        </md-button>
      </div>
      <div class="md-toolbar-tools">
        <md-chips class="md-flex"
                  ng-model="app.search.params"
                  md-transform-chip="app.newSearchParam($chip)">
          <input sg-focus-on="advancedSearch" type="text"
                 ng-disabled="app.currentSearchParam.length == 0"
                 sg-placeholder="app.search.options[app.currentSearchParam]"/>
          <md-chip-template>
            <span class="md-caption" ng-show="$chip.negative == 0">(<var:string label:value="match"/></span>
            <span class="md-caption" ng-show="$chip.negative == 1">(<var:string label:value="does not match"/></span>
            <span class="md-caption">{{$chip.searchBy}})</span>
            <span>{{$chip.searchInput}}</span>
          </md-chip-template>
        </md-chips>
      </div>
    </md-toolbar>

    <div layout="row" class="md-flex">
      <var:component className="UIxMailFolderTemplate" />
    </div>
  </script>

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

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

</var:component>