1 <div layout="row" layout-align="start center">
2 <div layout="row" layout-align="start center" flex>
6 ng-click="vm.toggleSidenav('navigation')"
9 aria-label="Toggle navigation"
11 translate-attr-aria-label="TOOLBAR.TOGGLE_NAVIGATION"
13 <md-icon md-font-icon="icon-menu" class="icon"></md-icon>
16 <ms-shortcuts ng-if="!vm.isAgent()"></ms-shortcuts>
18 <div class="toolbar-separator"></div>
20 <div ng-if="vm.license.demo" class="blink md-padding">
21 <span class="md-warn-fg" translate="TOOLBAR.TRIAL_VERSION"
31 layout-align="start center"
33 <span class="logo-image"
34 ><img ng-src="{{vm.baseUrl}}api/settings/1/logo" alt="logo"
37 ng-show="vm.isAgent() && (vm.user.showWebBar != 2)"
38 class="logo-text text-truncate"
39 >{{ vm.getLogo() | uppercase }}</span
43 <!-- phonebar directive WebRtc type-->
46 ng-if="vm.isAgent() && (vm.user.showWebBar == 2)"
51 <!-- phonebar directive -->
54 <div layout="row" layout-align="start center">
57 ng-if="$root.loadingProgress"
61 </md-progress-circular>
63 <!-- Pause Management -->
65 ng-if="vm.isAgent() && (vm.user.showWebBar != 0)"
67 layout-align="end center"
69 <div class="toolbar-separator"></div>
74 layout-align="center center"
78 ng-if="vm.user.voicePause"
79 class="md-icon-button no-margin"
80 ng-click="vm.unpause()"
83 md-font-icon="icon-play-circle-outline"
86 <md-tooltip md-direction="bottom"
87 >{{'TOOLBAR.RESUME' | translate}}</md-tooltip
92 ng-disabled="vm.user.voicePause && 'DEFAULT PAUSE' === vm.user.pauseType"
93 class="md-icon-button no-margin"
97 md-font-icon="icon-pause-circle-outline"
100 <md-tooltip md-direction="bottom"
101 >{{'TOOLBAR.PAUSE' | translate}}</md-tooltip
108 class="md-icon-button no-margin"
109 ng-click="$mdMenu.open($event)"
111 <md-icon md-menu-origin md-font-icon="icon-dots-vertical"></md-icon>
113 <md-menu-content width="4">
114 <md-menu-item ng-if="!vm.pauses.length">
115 <md-button disabled="disabled">
117 md-font-icon="icon-pause-octagon"
120 {{'TOOLBAR.NO_PAUSES_AVAILABLE' | translate}}
123 <md-menu-item ng-repeat="pause in vm.pauses">
125 ng-disabled="vm.user.voicePause && pause.name === vm.user.pauseType"
126 ng-click="vm.pause(pause.name)"
129 md-font-icon="icon-pause-circle"
139 <!-- Pause Management -->
142 class="h5 padding-10"
143 ng-if="vm.isAgent() && (vm.user.showWebBar != 0)"
145 <div layout="row" layout-align="space-between center">
147 ng-if="vm.user.lastLoginAt"
148 start-time="vm.user.lastLoginAt"
150 <md-tooltip>{{'TOOLBAR.LOGIN_TIME' | translate}}</md-tooltip>
151 <md-icon md-font-icon="icon-timelapse" class="icon s16"></md-icon>
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>
158 <div ng-if="vm.user.voicePause">
159 <span class="blink red-fg"
160 >{{vm.user.pauseType || 'default' | uppercase}}</span
166 class="toolbar-separator"
167 ng-if="vm.isAgent() && (vm.user.showWebBar != 0)"
170 <md-menu-bar id="user-menu">
171 <md-menu md-position-mode="left bottom">
174 ng-click="$mdMenu.open()"
175 aria-label="User settings"
177 translate-attr-aria-label="TOOLBAR.USER_SETTINGS"
179 <div layout="row" layout-align="space-between center">
180 <div class="avatar-wrapper">
184 src="assets/images/avatars/profile.png"
185 ng-if="!vm.user.userpic"
190 ng-src="{{vm.baseUrl}}api/users/{{vm.user.id}}/avatar"
191 ng-if="vm.user.userpic"
195 ng-class="vm.userStatus.icon"
196 ng-style="{'color': vm.userStatus.color }"
197 class="icon status s16"
202 layout-align="center center"
203 class="padding-horizontal-5"
205 <span class="font-size-14 md-subhead">{{vm.user.fullname}}</span>
206 <span class="font-size-12 md-subhead"
207 >{{vm.user.name}} <{{vm.user.internal}}></span
212 md-font-icon="icon-chevron-down"
219 <md-menu-content width="3">
221 ng-if="vm.user.showWebBar == 2 && vm.user.phoneBarEnableSettings"
224 <md-icon md-font-icon="icon-cog" class="icon"></md-icon>
226 ng-click="vm.openSettings($event)"
227 ng-disabled="!vm.license.webrtc"
228 ><span translate="TOOLBAR.SETTINGS">SETTINGS</span></md-button
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
241 <md-menu-divider></md-menu-divider>
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>
251 <div class="toolbar-separator"></div>
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"
262 <div ng-if="vm.contacts" class="md-accent-bg open-contact-count">
263 {{vm.contacts > 99 ? '99+' : vm.contacts}}
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>
270 ng-if="vm.user.role !== 'agent'"
271 on-search="vm.search(query)"
272 on-result-click="vm.searchResultClick(item)"
274 collapse-on-blur="true"
280 md-position-mode="target-right target"
282 layout-align="center center"
285 class="md-icon-button no-margin"
286 ng-click="$mdMenu.open()"
287 aria-label="Language"
291 <div layout="row" layout-align="center center">
294 ng-src="assets/images/flags/{{vm.selectedLanguage.flag}}.png"
299 <md-menu-content width="3" id="language-menu-content">
300 <md-menu-item ng-repeat="(iso, lang) in vm.languages">
302 ng-click="vm.changeLanguage(lang)"
303 aria-label="{{lang.title}}"
305 translate-attr-aria-label="{{lang.title}}"
307 <span layout="row" layout-align="start center">
310 ng-src="assets/images/flags/{{lang.flag}}.png"
312 <span translate="{{lang.translation}}">{{lang.title}}</span>
319 <div class="toolbar-separator"></div>
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"
327 <md-icon md-font-icon="icon-alert" class="icon md-warn blink"></md-icon>
330 ng-if="vm.license.gray && vm.user.role === 'agent'"
331 class="md-icon-button"
332 aria-label="Toggle quick panel"
334 <md-icon md-font-icon="icon-alert" class="icon md-warn blink"></md-icon>
337 <div ng-if="vm.license.gray" class="toolbar-separator"></div>
340 id="quick-panel-toggle"
341 class="md-icon-button"
342 ng-click="vm.toggleSidenav('quick-panel')"
343 aria-label="Toggle quick panel"
345 translate-attr-aria-label="TOOLBAR.TOGGLE_QUICK_PANEL"
348 ng-if="(vm.unreadTotalMessages + vm.unreadTotalGroupMessages)"
349 class="md-accent-bg unread-message-count"
351 {{vm.unreadTotalMessages + vm.unreadTotalGroupMessages}}
353 <md-icon md-font-icon="icon-format-list-bulleted" class="icon"></md-icon>