public/app/toolbar/layouts/content-with-toolbar/toolbar.html

   1 <div layout="row" layout-align="space-between center">
   2
   3     <div layout="row" layout-align="start center">
   4         <div class="logo" layout="row" layout-align="start center">
   5             <span class="logo-image">F</span>
   6             <span class="logo-text">MOTION</span>
   7         </div>
   8
   9         <div class="toolbar-separator"></div>
  10
  11         <ms-shortcuts></ms-shortcuts>
  12
  13         <div class="toolbar-separator"></div>
  14     </div>
  15
  16     <div layout="row" layout-align="start center">
  17
  18         <md-progress-circular id="toolbar-progress" ng-if="$root.loadingProgress" class="md-accent" md-mode="indeterminate" md-diameter="32">
  19         </md-progress-circular>
  20
  21         <div class="toolbar-separator"></div>
  22
  23         <md-menu-bar id="user-menu">
  24             <md-menu md-position-mode="left bottom">
  25                 <md-button class="user-button" ng-click="$mdOpenMenu()" aria-label="User settings" translate translate-attr-aria-label="TOOLBAR.USER_SETTINGS">
  26                     <div layout="row" layout-align="space-between center">
  27                         <div class="avatar-wrapper">
  28                             <img md-menu-align-target class="avatar" src="assets/images/avatars/profile.jpg">
  29                             <md-icon md-font-icon ng-class="vm.userStatus.icon" ng-style="{'color': vm.userStatus.color }" class="icon status s16">
  30                             </md-icon>
  31                         </div>
  32                         <span class="username" hide-sm>John Doe</span>
  33                         <md-icon md-font-icon="icon-chevron-down" class="icon s16" hide-sm></md-icon>
  34                     </div>
  35                 </md-button>
  36
  37                 <md-menu-content width="3">
  38                     <md-menu-item class="md-indent" ui-sref="app.pages_profile">
  39                         <md-icon md-font-icon="icon-account" class="icon"></md-icon>
  40                         <md-button>My Profile</md-button>
  41                     </md-menu-item>
  42
  43                     <md-menu-item class="md-indent" ui-sref="app.mail">
  44                         <md-icon md-font-icon="icon-email" class="icon"></md-icon>
  45                         <md-button>Inbox</md-button>
  46                     </md-menu-item>
  47
  48                     <md-menu-item class="md-indent">
  49                         <md-icon md-font-icon ng-class="vm.userStatus.icon" ng-style="{'color': vm.userStatus.color }" class="icon"></md-icon>
  50                         <md-menu id="user-status-menu">
  51                             <md-button ng-click="$mdOpenMenu()" class="status" ng-class="vm.userStatus.class">
  52                                 {{vm.userStatus.title}}
  53                             </md-button>
  54                             <md-menu-content width="2">
  55                                 <md-menu-item class="status md-indent" ng-class="{'selected': status === vm.userStatus}" ng-repeat="status in vm.userStatusOptions">
  56                                     <md-icon md-font-icon="{{status.icon}}" ng-style="{'color': status.color }" class="icon"></md-icon>
  57                                     <md-button ng-click="vm.setUserStatus(status)">
  58                                         {{status.title}}
  59                                     </md-button>
  60                                 </md-menu-item>
  61                             </md-menu-content>
  62                         </md-menu>
  63                     </md-menu-item>
  64
  65                     <md-menu-divider></md-menu-divider>
  66
  67                     <md-menu-item class="md-indent">
  68                         <md-icon md-font-icon="icon-logout" class="icon"></md-icon>
  69                         <md-button ng-click="vm.logout()">Logout</md-button>
  70                     </md-menu-item>
  71                 </md-menu-content>
  72             </md-menu>
  73         </md-menu-bar>
  74
  75         <div class="toolbar-separator"></div>
  76
  77         <ms-search-bar on-search="vm.search(query)" on-result-click="vm.searchResultClick(item)" debounce="300" collapse-on-blur="true"></ms-search-bar>
  78
  79         <div class="toolbar-separator"></div>
  80
  81         <md-menu id="language-menu" md-offset="0 72" md-position-mode="target-right target">
  82             <md-button class="language-button" ng-click="$mdOpenMenu()" aria-label="Language" md-menu-origin md-menu-align-target>
  83                 <div layout="row" layout-align="center center">
  84                     <img class="flag" ng-src="assets/images/flags/{{vm.selectedLanguage.flag}}.png">
  85                     <span class="iso">{{vm.selectedLanguage.code}}</span>
  86                 </div>
  87             </md-button>
  88
  89             <md-menu-content width="3" id="language-menu-content">
  90                 <md-menu-item ng-repeat="(iso, lang) in vm.languages">
  91                     <md-button ng-click="vm.changeLanguage(lang)" aria-label="{{lang.title}}" translate translate-attr-aria-label="{{lang.title}}">
  92                         <span layout="row" layout-align="start center">
  93                             <img class="flag" ng-src="assets/images/flags/{{lang.flag}}.png">
  94                             <span translate="{{lang.translation}}">{{lang.title}}</span>
  95                         </span>
  96                     </md-button>
  97                 </md-menu-item>
  98             </md-menu-content>
  99         </md-menu>
 100
 101         <div class="toolbar-separator"></div>
 102
 103         <md-button id="quick-panel-toggle" class="md-icon-button" ng-click="vm.toggleSidenav('quick-panel')" aria-label="Toggle quick panel" translate translate-attr-aria-label="TOOLBAR.TOGGLE_QUICK_PANEL">
 104             <md-icon md-font-icon="icon-format-list-bulleted" class="icon"></md-icon>
 105         </md-button>
 106     </div>
 107 </div>