232 lines
13 KiB
HTML
232 lines
13 KiB
HTML
<div class="header__navigation-bar clearfix" role="navigation">
|
|
|
|
<div class="header__navigation-bar_item">
|
|
<a ui-sref="dashboard" class="header__link" tabindex="0">
|
|
<div class="header__logo"></div>
|
|
<div class="header__app-name">{{'login.productShortName' | i18n}}</div>
|
|
</a>
|
|
</div>
|
|
<div class="navigation-bar__items-container clearfix">
|
|
<div ng-repeat="navItem in navigationItems | limitTo:wrapIndex" emit-last-element class="pull-left">
|
|
|
|
<div ng-if="navItem.type === 'link' && navItem.state" class="navigation-bar__item" ng-class="{'navigation-bar__item_selected' : state.current.name === navItem.state}">
|
|
<a class="navigation-bar__item-label" tabindex="0" ui-sref="{{::navItem.state}}">{{::('header.navigation.' + navItem.i18nKey) | i18n}}</a>
|
|
</div>
|
|
<div ng-if="navItem.type === 'link' && !navItem.state" class="navigation-bar__item" ng-class="{'navigation-bar__item_selected' : state.current.name === navItem.state}">
|
|
<a class="navigation-bar__item-label" ng-click="navItem.handler()" tabindex="0">{{::'header.navigation.' + navItem.i18nKey | i18n}}</a>
|
|
</div>
|
|
<div ng-if="navItem.type === 'dropdown' && navItem.elements.length" class="navigation-bar__item dropdown">
|
|
<a class="dropdown-toggle full-screen navigation-bar__item-label" data-toggle="dropdown" href="#" tabindex="0">
|
|
{{::('header.navigation.' + navItem.i18nKey) | i18n}}
|
|
<i class="navigation-bar__item-icon icon-angle_down"></i>
|
|
</a>
|
|
<ul class="dropdown-menu navigation-bar__item-menu" ng-class="{'more-menu': navItem.i18nKey == 'customActions'}">
|
|
<li class="navigation-bar__item-menu-list" ng-repeat="item in navItem.elements | orderBy:'state'">
|
|
<a ng-if="!item.extended" ui-sref="{{::item.state}}" class="dropdown-item template-chooser-dropdown-item navigation-wrap__dropdown-item" role="menuitem" tabindex="0">
|
|
<span class="template-chooser-dropdown-item__icon-layout">
|
|
<i class="template-chooser-dropdown-item__icon icon-{{::item.icon}}"></i>
|
|
</span>
|
|
<span class="template-chooser-dropdown-item__title">{{::('header.navigation.' + item.i18nKey) | i18n}}</span>
|
|
</a>
|
|
|
|
<div ng-if="item.extended" class="dropdown-item template-chooser-dropdown-item navigation-wrap__dropdown-item" role="menuitem"
|
|
ng-click="launchURL(item)" ng-enter="launchURL(item)" tabindex="0">
|
|
{{::item.label}}
|
|
<i class="icon-pop_up" ng-if="item.target === 'new'"></i>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!--'More' wrapper element-->
|
|
<div ng-if="!navBarMeasured || wrapIndex < navigationItems.length" class="clearfix pull-left">
|
|
<div class="navigation-bar__item dropdown">
|
|
<a class="dropdown-toggle full-screen navigation-bar__item-label" data-toggle="dropdown" href="#" tabindex="0">
|
|
{{'header.navigation.more' | i18n}}
|
|
<i class="icon-angle_down navigation-bar__item-icon"></i>
|
|
</a>
|
|
<ul class="dropdown-menu navigation-wrap more-menu">
|
|
<li class="navigation-wrap_list" ng-repeat="navItem in navigationItems | limitTo:1000:wrapIndex">
|
|
|
|
<!--regular link element-->
|
|
<a ng-if="navItem.type === 'link' && navItem.state" ui-sref="{{::navItem.state}}" class="dropdown-item navigation-wrap_list-item" role="menuitem" tabindex="0">
|
|
<span>{{::('header.navigation.' + navItem.i18nKey) | i18n}}</span>
|
|
</a>
|
|
<!--link element with handler-->
|
|
<a ng-if="navItem.type === 'link' && !navItem.state" ng-click="navItem.handler()" class="dropdown-item navigation-wrap_list-item" role="menuitem" tabindex="0">
|
|
<span>{{::('header.navigation.' + navItem.i18nKey) | i18n}}</span>
|
|
</a>
|
|
<!--dropdown element-->
|
|
<div ng-if="navItem.type === 'dropdown' && navItem.elements.length" class="navigation-wrap__item"
|
|
role="menuitem" ng-click="expandNavItem($event, navItem)" ng-enter="expandNavItem($event, navItem)" tabindex="0" ng-hide="navItem.hideHeader">
|
|
<div class="navigation-wrap__item_text">{{::('header.navigation.' + navItem.i18nKey) | i18n}}</div>
|
|
<i class="navigation-bar__item-icon" ng-class="navItem.expanded ? 'icon-angle_up' : 'icon-angle_down'"></i>
|
|
</div>
|
|
<div ng-if="navItem.type === 'dropdown' && navItem.elements.length" collapse="!navItem.expanded && !navItem.hideHeader">
|
|
<div ng-repeat="item in ::navItem.elements" class="navigation-wrap_list" tabindex="-1">
|
|
|
|
<a ng-if="!item.extended" ui-sref="{{::item.state}}" role="menuitem" class="navigation-wrap__dropdown-item" tabindex="0">
|
|
<span class="template-chooser-dropdown-item__icon-layout">
|
|
<i class="template-chooser-dropdown-item__icon icon-{{::item.icon}}"></i>
|
|
</span>
|
|
<span class="template-chooser-dropdown-item__title">{{::('header.navigation.' + item.i18nKey) | i18n}}</span>
|
|
</a>
|
|
|
|
<div ng-if="item.extended" role="menuitem" ng-click="launchURL(item)" ng-enter="launchURL(item)" class="navigation-wrap__dropdown-item" tabindex="0">
|
|
{{::item.label}}
|
|
<i class="icon-pop_up" ng-if="item.target === 'new'"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ng-if="userModel.userFullData.id" class="header__user">
|
|
<a id="header-search_button" class="icon-search font-size-m navigation-bar__search" title="{{'headerMainBar.icon.title.search' | i18n}}"
|
|
ng-click="toggleSearchBar()" ng-enter="toggleSearchBar()" href="" tabindex="0"></a>
|
|
<div class="history-menu dropdown" ng-include="'views/common/history-menu.html'" ng-controller="HistoryController" ng-show="historyModel.historyList.length"></div>
|
|
<div class="chat-notifications dropdown" ng-class="{'chat-notifications_active': (chatModel.activeChatRooms.length > 0)}" ng-show="chatModel.connected">
|
|
<a class='icon-comments_o dropdown-toggle font-size-m' title="{{'headerMainBar.icon.title.chat' | i18n}}" data-toggle="dropdown" href="#" tabindex="0"><span class="font-size-m active-chats-rooms-amount" ng-hide='chatModel.activeChatRooms.length < 1'>{{chatModel.activeChatRooms.length}}</span></a>
|
|
<div class="dropdown-menu chat-list">
|
|
<div class="chat-list__menu" ng-class="{'chat-list__no-items': (chatModel.activeChatRooms.length > 0)}">
|
|
<div class="chat-list__header">
|
|
<span class="chat-list__amount">{{'chat.activeChatsAmount.label' | i18n:(chatModel.activeChatRooms.length || 0)}}</span>
|
|
<button type="button" class="chat-list__new-chat" ng-click="chatModel.createChatRoom()">{{'chat.startNewChat.label' | i18n}}</button>
|
|
<button type="button" class="chat-list__history-link" ui-sref="conversationsHistory">{{'chat.history.label' | i18n}}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-list__item_details" ng-if="chatModel.activeChatRooms.length < 1">
|
|
<div class="chat-list__item_chat-parent-summary"></div>
|
|
</div>
|
|
<div ng-include="'components/chat/chat-menu.html'"></div>
|
|
</div>
|
|
</div>
|
|
<div class="header__user-avatar chat-availability__holder"
|
|
ng-class=" 'availability__' + chatModel.currentUser.available.toLowerCase()">
|
|
<img alt="{{userModel.userFullData.fullName}}" thumbnail-img="{{userModel.userFullData.thumbnail}}" imgplaceholder="user" />
|
|
</div>
|
|
<div class="header__user-name dropdown">
|
|
<a class="dropdown-toggle header__user-menu-toggle navigation-bar__my-profile" data-toggle="dropdown" href="#" tabindex="0">
|
|
<span ng-if="userModel.isAccessibleUser">{{'headerMainBar.myProfile' | i18n}} </span>
|
|
<i class="icon-angle_down navigation-bar__item-icon"></i>
|
|
</a>
|
|
<ul class="dropdown-menu user-settings-menu">
|
|
<li class="user-settings-menu__divider">
|
|
<div class="user-settings__group_item" tabindex="0" role="menuitem">
|
|
<div class="user-settings__group_item-label">{{'user.view.profile' | i18n}}</div>
|
|
<div class="user-settings__group_item-name">{{userModel.userFullData.fullName}}</div>
|
|
</div>
|
|
</li>
|
|
<li ng-if='chatModel.connected'>
|
|
<div class="user-settings__group_item" tabindex="0" role="menuitemcheckbox"
|
|
ng-class="{'active-status': chatModel.currentUser.available == 'online'}"
|
|
aria-checked = "{{chatModel.currentUser.available == 'online'}}"
|
|
ng-click="chatModel.setUserAvailability('online')">
|
|
|
|
<span class="availability-icon user-availability__icon-online"></span>
|
|
<span class="user-settings__group_item-text">{{"user.settings.availability.online.label" | i18n }}</span>
|
|
</div>
|
|
</li>
|
|
<li class="user-settings-menu__divider" ng-if='chatModel.connected'>
|
|
<div class="user-settings__group_item" tabindex="0" role="menuitemcheckbox"
|
|
ng-class="{'active-status': chatModel.currentUser.available == 'away'}"
|
|
aria-checked = "{{chatModel.currentUser.available == 'away'}}"
|
|
ng-click="chatModel.setUserAvailability('away')">
|
|
|
|
<span class="user-availability__icon-away"></span>
|
|
<span class="user-settings__group_item-text">{{"user.settings.availability.away.label" | i18n }}</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="user-settings__group_item" ng-click="onAboutClick()" tabindex="0" role="menuitem">
|
|
<span class="icon-question_circle user-settings__group_item-icon"></span>
|
|
<span class="user-settings__group_item-text">{{'common.labels.about' | i18n}}</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="user-settings__group_item" tabindex="0" role="menuitemcheckbox"
|
|
ng-class="{'active-status': userModel.isAccessibleUser == true}"
|
|
aria-checked = "{{userModel.isAccessibleUser == true}}"
|
|
ng-click="enableAccessibility()">
|
|
|
|
<span class="icon-keyboard user-settings__group_item-icon"></span>
|
|
<span class="user-settings__group_item-text">{{"user.view.accessibility" | i18n }}</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<div class="user-settings__group_item" ui-sref="person({id: userModel.decodedUserId})" tabindex="0" role="menuitem">
|
|
<span class="icon-user user-settings__group_item-icon"></span>
|
|
<span class="user-settings__group_item-text">{{"user.settings.viewProfile.label" | i18n}}</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="user-settings__group_item" ng-click="onLogoutClick()" tabindex="0" role="menuitem">
|
|
<span class="icon-exit user-settings__group_item-icon"></span>
|
|
<span class="user-settings__group_item-text">{{"user.logout" | i18n}}</span>
|
|
</div>
|
|
</li>
|
|
<li ng-if='enableInAppSurvey'>
|
|
<div class="user-settings__group_item" ng-click="openSurvey()" tabindex="0" role="menuitem">
|
|
<span class="icon-heart_o user-settings__group_item-icon" style="color: #fff"></span>
|
|
<span class="user-settings__group_item-text">{{"user.survey" | i18n}}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="header_search" class="header-search clearfix" tabindex="0" ng-if="showSearchBar">
|
|
<div class="row" ng-controller="SearchBarController">
|
|
<div class="col-sm-2 global-search-criteria_wrapper">
|
|
<selection selection-items="searchMetadata.targetAreas"
|
|
selected-item="selectedTargetArea"
|
|
i18n-prefix="search"
|
|
item-header="{{'searchTargetAreas.itemHeader' | i18n}}"
|
|
ng-model="targetArea"
|
|
selection-callback="changeSearchCriteria(item)"
|
|
title-text="{{'create.change.wizard.basicDetails.impactedAreas.siteGroup' | i18n}}"
|
|
label="label"
|
|
value="name"
|
|
aria-required="true"
|
|
update-selected-item="true"
|
|
class="search-criteria-box"
|
|
inputId="global-search-criteria">
|
|
</selection>
|
|
</div>
|
|
<div class="col-sm-10 global-search-input_wrapper">
|
|
<form class="header-search__form" ng-submit="moveToSearchState()">
|
|
<label class="label_control-wrap">
|
|
<input type="text"
|
|
autocomplete="off"
|
|
id="globalSearchBox"
|
|
class="header-search__bar"
|
|
title="{{ 'search.placeholder' | i18n }}"
|
|
tooltip="{{ 'search.wildcardTooltip' | i18n }}"
|
|
tooltip-placement="bottom"
|
|
tooltip-trigger="keyup"
|
|
tooltip-enable="{{wildCardEntered}}"
|
|
ng-model="searchText"
|
|
ng-focus="activateSearchBar()"
|
|
ng-blur="deactivateSearchBar()"
|
|
ng-keyUp="wildCardValidation($event)"
|
|
role="combobox"
|
|
typeahead-min-length="3"
|
|
typeahead-wait-ms="500"
|
|
typeahead-on-select="selectSuggestedResult($item)"
|
|
typeahead-focus-first="false"
|
|
typeahead="suggestion as suggestion for suggestion in getSuggestedSearchResults($viewValue)"
|
|
placeholder="{{ 'search.placeholder.text' | i18n }}"
|
|
auto-focus>
|
|
<i class="search__close icon-cross" title="{{ 'search.cancel.text' | i18n }}" role="link" tabindex="0" aria-label="{{ 'search.cancel.text' | i18n }}"></i>
|
|
</label>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="header-search__fader" ng-if="isSearchBarActive && searchText.length"></div>
|
|
|
|
</div>
|
|
</div>
|