public/app/toolbar/layouts/vertical-navigation-fullwidth-toolbar-2/toolbar.html

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