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="vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, Common.js, Preferences.services.js, Contacts.services.js, Scheduler.services.js, Mailer.js, Mailer.services.js, vendor/angular-file-upload.min.js, vendor/FileSaver.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>

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

  <sg-draggable-helper>
    <md-icon>email</md-icon>
    <sg-draggable-helper-counter class="md-default-theme md-warn md-hue-1 md-bg"><!-- count --></sg-draggable-helper-counter>
  </sg-draggable-helper>

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

    <!-- Sidenav -->
    <md-sidenav class="md-sidenav-left md-whiteframe-z1" layout="column" layout-fill="layout-fill"
                md-component-id="left" md-is-locked-open="isGtMedium"
                ng-class="{ 'sg-close': leftIsClose }">
      <var:component className="UIxSidenavToolbarTemplate" />
      <md-content class="md-flex" layout="column" md-scroll-y="md-scroll-y"
                  md-colors="::{ backgroundColor: 'default-background-300' }">
        <section class="sg-account-section"
                 layout="column"
                 ng-repeat="account in ::app.accounts track by account.id"
                 ng-class="{ 'md-flex': account.$expanded }">
          <md-list>
            <md-list-item ng-click="app.toggleAccountState(account)">
              <div class="sg-no-wrap"
                   aria-label="{{ ::'Toggle visibility' | loc }}"
                   ng-bind="::account.name"><!-- account name --></div>
	      <md-menu class="md-secondary">
		<md-icon label:aria-label="Options"
			 ng-click="$mdMenu.open($event)"
			 md-menu-origin="md-menu-origin">more_vert</md-icon>
		<md-menu-content width="3">
                  <md-menu-item ng-show="::account.id == 0">
		    <md-button
			label:aria-label="Delegation..."
			ng-click="app.delegate(account)">
		      <var:string label:value="Delegation..."/>
		    </md-button>
                  </md-menu-item>
		  <md-menu-item ng-show="::app.showSubscribedOnly == 1">
		    <md-button
			label:aria-label="Subscribe..."
			ng-click="app.subscribe(account)">
		      <var:string label:value="Subscribe..."/>
		    </md-button>
		  </md-menu-item>
		  <md-menu-item>
		    <md-button
			label:aria-label="New Folder..."
			ng-click="app.newFolder(account)">
		      <var:string label:value="New Folder..."/>
		    </md-button>
		  </md-menu-item>
		  <md-menu-item ng-show="::account.id == 0">
		    <md-button
			label:aria-label="Search"
			ng-click="app.showAdvancedSearch()">
		      <var:string label:value="Search"/>
		    </md-button>
		  </md-menu-item>
		</md-menu-content>
	      </md-menu>
	    </md-list-item>
          </md-list>
          <div class="sg-quota ng-hide" ng-show="::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-show="account.$expanded"
                 ng-class="{ 'md-warn': account.$quota.percent > 70 }">{{account.$quota.description}}</div>
          </div>
          <md-virtual-repeat-container ng-class="{ 'md-flex': account.$expanded }">
            <md-list>
              <md-list-item
                  class="sg-mailbox-list-item md-clickable md-default-theme md-background md-hue-1"
                  ng-class="{'md-bg sg-selected': folder.id == app.service.selectedFolder.id}"
                  md-virtual-repeat="folder in account" md-item-size="48" md-on-demand="md-on-demand"
                  sg-mailbox="folder"
                  sg-droppable="app.isDroppableFolder(dragFolder, folder)"
                  sg-drop="app.dragSelectedMessages(dragFolder, folder, dragMode)">
                <!-- sgMailboxListItem directive -->
              </md-list-item>
            </md-list>
          </md-virtual-repeat-container>
          <md-divider><!-- divider --></md-divider>
        </section>
      </md-content>
    </md-sidenav>

    <section layout="column" layout-fill="layout-fill" ui-view="mailbox">
      <md-toolbar layout="row" layout-align="space-between center" class="toolbar-main">
        <var:component className="UIxTopnavToolbar"/>
      </md-toolbar>
      <md-content class="md-flex"
                  md-colors="::{backgroundColor: 'default-background-200'}"
                  layout="column" layout-align="center center">
        <div class="sg-md-title"
             md-colors="::{color: 'default-background-500'}">
          <var:string label:value="No mailbox selected"/>
        </div>
      </md-content>
    </section>
  </script>

  <script type="text/ng-template" id="UIxMailFolderTemplate">
    <md-toolbar layout="row" layout-align="space-between center" class="toolbar-main"
                ng-hide="mailbox.service.$virtualPath !== false">
      <var:component className="UIxTopnavToolbar"/>
    </md-toolbar>

    <!-- Advanced search toolbar -->
    <md-toolbar layout="column" class="toolbar-main md-hue-3"
                ng-show="mailbox.service.$virtualPath !== false">
      <div class="md-toolbar-tools">
        <div layout="column" class="md-flex">
          <div class="pseudo-input-container 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 sg-toolbar-auto">
        <md-chips class="md-flex"
                  ng-show="app.search.params.length != 0 || app.currentSearchParam"
                  ng-model="app.search.params"
                  md-transform-chip="app.newSearchParam($chip)"
                  md-add-on-blur="true">
          <input type="text" sg-focus-on="advancedSearch"
                 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" ng-bind="$chip.searchBy.capitalize() | loc"><!-- search by --></span>
            <span ng-bind="$chip.searchInput"><!-- search input --></span>
          </md-chip-template>
        </md-chips>
      </div>
    </md-toolbar>

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

  <!-- template of contextual menu for a mailbox -->
  <script type="text/ng-template" id="UIxMailFolderMenu">
    <div md-whiteframe="3">
      <md-menu-content width="3">
        <md-menu-item>
          <md-button type="button" md-menu-align-target="md-menu-align-target"
                     ng-click="$menuCtrl.markFolderRead()">
            <var:string label:value="Mark Folder Read"/>
          </md-button>
        </md-menu-item>
        <md-menu-item ng-hide="::$menuCtrl.folder.$isNoInferiors">
          <md-button type="button" ng-click="$menuCtrl.newFolder()">
            <var:string label:value="New Subfolder..."/>
          </md-button>
        </md-menu-item>
        <md-menu-item ng-show="::$menuCtrl.folder.$isEditable">
          <md-button type="button" ng-click="$menuCtrl.editFolder($event)">
            <var:string label:value="Rename"/>
          </md-button>
        </md-menu-item>
        <md-menu-item ng-show="::$menuCtrl.folder.$isEditable">
          <md-menu md-position-mode="cascade target">
            <md-button label:aria-label="Move To" ng-click="$mdMenu.open($event)">
              <var:string label:value="Move To"/>
            </md-button>
            <md-menu-content class="md-dense" width="3">
              <div ng-repeat="folder in
                              $menuCtrl.folder.$account.$flattenMailboxes({ all: true })
                              track by folder.path">
                <md-menu-item>
                  <md-button class="sg-no-wrap"
                             aria-label="{{folder.$displayName}}"
                             ng-disabled="$menuCtrl.isParentOf(folder.path)"
                             ng-click="$menuCtrl.moveFolder(folder.path)">
                    <span ng-class="::('sg-child-level-' + folder.level)"
                          ng-bind="folder.$displayName"><!-- mailbox name --></span>
                  </md-button>
                </md-menu-item>
              </div>
            </md-menu-content>
          </md-menu>
        </md-menu-item>
        <md-menu-item>
          <md-button type="button" ng-click="$menuCtrl.compactFolder()">
            <var:string label:value="Compact"/>
          </md-button>
        </md-menu-item>
        <md-menu-item ng-show="::$menuCtrl.folder.$isEditable">
          <md-button type="button" ng-click="$menuCtrl.confirmDelete()">
            <var:string label:value="Delete"/>
          </md-button>
        </md-menu-item>
        <md-menu-item ng-show="::($menuCtrl.folder.type == 'trash')">
          <md-button type="button" ng-click="$menuCtrl.emptyTrashFolder()">
            <var:string label:value="Empty Trash"/>
          </md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button type="button" ng-click="$menuCtrl.folder.exportFolder()">
            <var:string label:value="Export"/>
          </md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button type="button" ng-click="$menuCtrl.showAdvancedSearch()">
            <var:string label:value="Search"/>
          </md-button>
        </md-menu-item>
        <md-menu-divider ng-show="::$menuCtrl.folder.$canFolderAs()"><!-- divider --></md-menu-divider>
        <md-menu-item ng-show="::$menuCtrl.folder.$canFolderAs()">
          <md-button type="button" ng-click="$menuCtrl.setFolderAs('Drafts')">
            <var:string label:value="Set as Drafts"/>
          </md-button>
        </md-menu-item>
        <md-menu-item ng-show="::$menuCtrl.folder.$canFolderAs()">
          <md-button type="button" ng-click="$menuCtrl.setFolderAs('Sent')">
            <var:string label:value="Set as Sent"/>
          </md-button>
        </md-menu-item>
        <md-menu-item ng-show="::$menuCtrl.folder.$canFolderAs()">
          <md-button type="button" ng-click="$menuCtrl.setFolderAs('Trash')">
            <var:string label:value="Set as Trash"/>
          </md-button>
        </md-menu-item>
        <md-menu-item ng-show="::$menuCtrl.folder.$canFolderAs()">
          <md-button type="button" ng-click="$menuCtrl.setFolderAs('Junk')">
            <var:string label:value="Set as Junk"/>
          </md-button>
        </md-menu-item>
        <md-menu-divider ng-show="::($menuCtrl.folder.type != 'additional')"><!-- divider --></md-menu-divider>
        <md-menu-item ng-show="::($menuCtrl.folder.type != 'additional')">
          <md-button type="button" ng-click="$menuCtrl.share()">
            <var:string label:value="Sharing..."/>
          </md-button>
        </md-menu-item>
      </md-menu-content>
    </div>
  </script>

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

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

</var:component>