public/templates/toolbar/layouts/vertical-navigation/toolbar.html/toolbar.html

   1 <div layout="row" layout-align="start center">
   2   <div layout="row" layout-align="start center" flex>
   3     <md-button
   4       id="navigation-toggle"
   5       class="md-icon-button"
   6       ng-click="vm.toggleSidenav('navigation')"
   7       ng-if="!vm.isAgent()"
   8       hide-gt-sm
   9       aria-label="Toggle navigation"
  10       translate
  11       translate-attr-aria-label="TOOLBAR.TOGGLE_NAVIGATION"
  12     >
  13       <md-icon md-font-icon="icon-menu" class="icon"></md-icon>
  14     </md-button>
  15
  16     <ms-shortcuts ng-if="!vm.isAgent()"></ms-shortcuts>
  17
  18     <div class="toolbar-separator"></div>
  19
  20     <div ng-if="vm.license.demo" class="blink md-padding">
  21       <span class="md-warn-fg" translate="TOOLBAR.TRIAL_VERSION"
  22         >Trial Version</span
  23       >
  24     </div>
  25
  26     <div
  27       ng-if="vm.isAgent()"
  28       class="logo"
  29       layout-padding-left-8
  30       layout="row"
  31       layout-align="start center"
  32     >
  33       <span class="logo-image"
  34         ><img ng-src="{{vm.baseUrl}}api/settings/1/logo" alt="logo"
  35       /></span>
  36       <span
  37         ng-show="vm.isAgent() && (vm.user.showWebBar != 2)"
  38         class="logo-text text-truncate"
  39         >{{ vm.getLogo() | uppercase }}</span
  40       >
  41     </div>
  42
  43     <!-- phonebar directive WebRtc type-->
  44     <ms-phonebar
  45       class="ms-phonebar"
  46       ng-if="vm.isAgent() && (vm.user.showWebBar == 2)"
  47       conf="vm.conf"
  48       flex
  49     >
  50     </ms-phonebar>
  51     <!-- phonebar directive -->
  52   </div>
  53
  54   <div layout="row" layout-align="start center">
  55     <md-progress-circular
  56       id="toolbar-progress"
  57       ng-if="$root.loadingProgress"
  58       class="md-accent"
  59       md-diameter="32"
  60     >
  61     </md-progress-circular>
  62
  63     <!-- Pause Management -->
  64     <div
  65       ng-if="vm.isAgent() && (vm.user.showWebBar != 0)"
  66       layout="row"
  67       layout-align="end center"
  68     >
  69       <div class="toolbar-separator"></div>
  70
  71       <div
  72         class="border brad-5"
  73         layout="row"
  74         layout-align="center center"
  75         layout-margin
  76       >
  77         <md-button
  78           ng-if="vm.user.voicePause"
  79           class="md-icon-button no-margin"
  80           ng-click="vm.unpause()"
  81         >
  82           <md-icon
  83             md-font-icon="icon-play-circle-outline"
  84             class="icon s24"
  85           ></md-icon>
  86           <md-tooltip md-direction="bottom"
  87             >{{'TOOLBAR.RESUME' | translate}}</md-tooltip
  88           >
  89         </md-button>
  90
  91         <md-button
  92           ng-disabled="vm.user.voicePause && 'DEFAULT PAUSE' === vm.user.pauseType"
  93           class="md-icon-button no-margin"
  94           ng-click="vm.pause()"
  95         >
  96           <md-icon
  97             md-font-icon="icon-pause-circle-outline"
  98             class="icon s24"
  99           ></md-icon>
 100           <md-tooltip md-direction="bottom"
 101             >{{'TOOLBAR.PAUSE' | translate}}</md-tooltip
 102           >
 103         </md-button>
 104
 105         <md-menu>
 106           <md-button
 107             aria-label="Pauses"
 108             class="md-icon-button no-margin"
 109             ng-click="$mdMenu.open($event)"
 110           >
 111             <md-icon md-menu-origin md-font-icon="icon-dots-vertical"></md-icon>
 112           </md-button>
 113           <md-menu-content width="4">
 114             <md-menu-item ng-if="!vm.pauses.length">
 115               <md-button disabled="disabled">
 116                 <md-icon
 117                   md-font-icon="icon-pause-octagon"
 118                   md-menu-align-target
 119                 ></md-icon>
 120                 {{'TOOLBAR.NO_PAUSES_AVAILABLE' | translate}}
 121               </md-button>
 122             </md-menu-item>
 123             <md-menu-item ng-repeat="pause in vm.pauses">
 124               <md-button
 125                 ng-disabled="vm.user.voicePause && pause.name === vm.user.pauseType"
 126                 ng-click="vm.pause(pause.name)"
 127               >
 128                 <md-icon
 129                   md-font-icon="icon-pause-circle"
 130                   md-menu-align-target
 131                 ></md-icon>
 132                 {{pause.name}}
 133               </md-button>
 134             </md-menu-item>
 135           </md-menu-content>
 136         </md-menu>
 137       </div>
 138     </div>
 139     <!-- Pause Management -->
 140
 141     <div
 142       class="h5 padding-10"
 143       ng-if="vm.isAgent() && (vm.user.showWebBar != 0)"
 144     >
 145       <div layout="row" layout-align="space-between center">
 146         <timer
 147           ng-if="vm.user.lastLoginAt"
 148           start-time="vm.user.lastLoginAt"
 149         ></timer>
 150         <md-tooltip>{{'TOOLBAR.LOGIN_TIME' | translate}}</md-tooltip>
 151         <md-icon md-font-icon="icon-timelapse" class="icon s16"></md-icon>
 152       </div>
 153       <div layout="row" layout-align="center center" ng-if="vm.user.voicePause">
 154         <timer start-time="vm.user.lastPauseAt"></timer>
 155         <md-tooltip>{{'TOOLBAR.PAUSE_TIME' | translate}}</md-tooltip>
 156         <md-icon md-font-icon="icon-coffee" class="icon s16"></md-icon>
 157       </div>
 158       <div ng-if="vm.user.voicePause">
 159         <span class="blink red-fg"
 160           >{{vm.user.pauseType || 'default' | uppercase}}</span
 161         >
 162       </div>
 163     </div>
 164
 165     <div
 166       class="toolbar-separator"
 167       ng-if="vm.isAgent() && (vm.user.showWebBar != 0)"
 168     ></div>
 169
 170     <md-menu-bar id="user-menu">
 171       <md-menu md-position-mode="left bottom">
 172         <md-button
 173           class="user-button"
 174           ng-click="$mdMenu.open()"
 175           aria-label="User settings"
 176           translate
 177           translate-attr-aria-label="TOOLBAR.USER_SETTINGS"
 178         >
 179           <div layout="row" layout-align="space-between center">
 180             <div class="avatar-wrapper">
 181               <img
 182                 md-menu-align-target
 183                 class="avatar"
 184                 src="assets/images/avatars/profile.png"
 185                 ng-if="!vm.user.userpic"
 186               />
 187               <img
 188                 md-menu-align-target
 189                 class="avatar"
 190                 ng-src="{{vm.baseUrl}}api/users/{{vm.user.id}}/avatar"
 191                 ng-if="vm.user.userpic"
 192               />
 193               <md-icon
 194                 md-font-icon
 195                 ng-class="vm.userStatus.icon"
 196                 ng-style="{'color': vm.userStatus.color }"
 197                 class="icon status s16"
 198               ></md-icon>
 199             </div>
 200             <div
 201               layout="column"
 202               layout-align="center center"
 203               class="padding-horizontal-5"
 204             >
 205               <span class="font-size-14 md-subhead">{{vm.user.fullname}}</span>
 206               <span class="font-size-12 md-subhead"
 207                 >{{vm.user.name}} &#60;{{vm.user.internal}}&#62;</span
 208               >
 209             </div>
 210
 211             <md-icon
 212               md-font-icon="icon-chevron-down"
 213               class="icon s16"
 214               hide-xs
 215             ></md-icon>
 216           </div>
 217         </md-button>
 218
 219         <md-menu-content width="3">
 220           <md-menu-item
 221             ng-if="vm.user.showWebBar == 2 && vm.user.phoneBarEnableSettings"
 222             class="md-indent"
 223           >
 224             <md-icon md-font-icon="icon-cog" class="icon"></md-icon>
 225             <md-button
 226               ng-click="vm.openSettings($event)"
 227               ng-disabled="!vm.license.webrtc"
 228               ><span translate="TOOLBAR.SETTINGS">SETTINGS</span></md-button
 229             >
 230           </md-menu-item>
 231
 232           <md-menu-item class="md-indent">
 233             <md-icon md-font-icon="icon-key-variant" class="icon"></md-icon>
 234             <md-button ng-click="vm.changePassword($event)"
 235               ><span translate="TOOLBAR.CHANGEPASSWORD"
 236                 >Change Password</span
 237               ></md-button
 238             >
 239           </md-menu-item>
 240
 241           <md-menu-divider></md-menu-divider>
 242
 243           <md-menu-item class="md-indent">
 244             <md-icon md-font-icon="icon-logout" class="icon"></md-icon>
 245             <md-button ng-click="vm.logout()">Logout</md-button>
 246           </md-menu-item>
 247         </md-menu-content>
 248       </md-menu>
 249     </md-menu-bar>
 250
 251     <div class="toolbar-separator"></div>
 252
 253     <md-button
 254       ng-if="vm.user.role === 'agent' && vm.license.dialer"
 255       class="preview-button no-margin"
 256       ng-disabled="vm.disable"
 257       ng-click="vm.preview($event)"
 258       aria-label="Language"
 259       md-menu-origin
 260       md-menu-align-target
 261     >
 262       <div ng-if="vm.contacts" class="md-accent-bg open-contact-count">
 263         {{vm.contacts > 99 ? '99+' : vm.contacts}}
 264       </div>
 265       <md-icon md-font-icon="icon-fire" class="icon red-900-fg"></md-icon>
 266       <md-tooltip><span translate="TOOLBAR.PREVIEW">Preview</span></md-tooltip>
 267     </md-button>
 268
 269     <ms-search-bar
 270       ng-if="vm.user.role !== 'agent'"
 271       on-search="vm.search()"
 272       query="vm.query"
 273       on-result-click="vm.searchResultClick(item)"
 274       debounce="300"
 275     ></ms-search-bar>
 276
 277     <md-menu
 278       id="language-menu"
 279       md-offset="0 72"
 280       md-position-mode="target-right target"
 281       layout="column"
 282       layout-align="center center"
 283     >
 284       <md-button
 285         class="md-icon-button no-margin"
 286         ng-click="$mdMenu.open()"
 287         aria-label="Language"
 288         md-menu-origin
 289         md-menu-align-target
 290       >
 291         <div layout="row" layout-align="center center">
 292           <img
 293             class="flag"
 294             ng-src="assets/images/flags/{{vm.selectedLanguage.flag}}.png"
 295           />
 296         </div>
 297       </md-button>
 298
 299       <md-menu-content width="3" id="language-menu-content">
 300         <md-menu-item ng-repeat="(iso, lang) in vm.languages">
 301           <md-button
 302             ng-click="vm.changeLanguage(lang)"
 303             aria-label="{{lang.title}}"
 304             translate
 305             translate-attr-aria-label="{{lang.title}}"
 306           >
 307             <span layout="row" layout-align="start center">
 308               <img
 309                 class="flag flag-24"
 310                 ng-src="assets/images/flags/{{lang.flag}}.png"
 311               />
 312               <span translate="{{lang.translation}}">{{lang.title}}</span>
 313             </span>
 314           </md-button>
 315         </md-menu-item>
 316       </md-menu-content>
 317     </md-menu>
 318
 319     <div class="toolbar-separator"></div>
 320
 321     <md-button
 322       ng-if="vm.license.gray && vm.user.role !== 'agent'"
 323       class="md-icon-button"
 324       ui-sref="app.settings.license"
 325       aria-label="Toggle quick panel"
 326     >
 327       <md-icon md-font-icon="icon-alert" class="icon md-warn blink"></md-icon>
 328     </md-button>
 329     <md-button
 330       ng-if="vm.license.gray && vm.user.role === 'agent'"
 331       class="md-icon-button"
 332       aria-label="Toggle quick panel"
 333     >
 334       <md-icon md-font-icon="icon-alert" class="icon md-warn blink"></md-icon>
 335     </md-button>
 336
 337     <div ng-if="vm.license.gray" class="toolbar-separator"></div>
 338
 339     <md-button
 340       id="quick-panel-toggle"
 341       class="md-icon-button"
 342       ng-click="vm.toggleSidenav('quick-panel')"
 343       aria-label="Toggle quick panel"
 344       translate
 345       translate-attr-aria-label="TOOLBAR.TOGGLE_QUICK_PANEL"
 346     >
 347       <div
 348         ng-if="(vm.unreadTotalMessages + vm.unreadTotalGroupMessages)"
 349         class="md-accent-bg unread-message-count"
 350       >
 351         {{vm.unreadTotalMessages + vm.unreadTotalGroupMessages}}
 352       </div>
 353       <md-icon md-font-icon="icon-format-list-bulleted" class="icon"></md-icon>
 354     </md-button>
 355   </div>
 356 </div>