bansho/app/components/topbar/topbar.html

80 lines
3.6 KiB
HTML

<nav id="topbar" class="topbar" role="navigation">
<ul class="topbar__list topbar__list--left">
<li class="topbar__item topbar__toggle-sidebar">
<button class="topbar__button"
type="button"
data-toggle="collapse"
data-target="#sidebarWrapper"
aria-expanded="false"
aria-controls="sidebarWrapper">
<span class="visuallyhidden">Ouvrir la barre de navigation latérale</span>
<i class="ico-menu"></i>
</button>
</li>
<li class="topbar__item topbar__notifications">
<button class="topbar__button topbar__button--hover"
id="notifications"
type="button"
data-toggle="collapse"
data-target="#notificationsPanel"
aria-expanded="true"
aria-controls="notificationsPanel">
<span class="visuallyhidden">Voir les notifications</span>
<i class="ico-bell-alt" data-notifications="{{nbServices + nbHosts}}"></i>
</button>
<div class="topbar__panel--fromleft collapse" id="notificationsPanel">
<div class="topbar__panel__content">
<bansho-components components="components"></bansho-components>
</div>
</div>
</ul>
<ul class="topbar__list topbar__list--right">
<li class="topbar__item topbar__settings">
<button class="topbar__button topbar__button--hover"
id="settings"
data-toggle="collapse"
data-target="#settingsPanel"
aria-expanded="false"
aria-controls="settingsPanel">
<span class="visuallyhidden">Afficher la liste des paramètres</span>
<i class="ico-sliders"></i>
</button>
<div class="topbar__panel--fromright collapse" id="settingsPanel">
<nav class="topbar__panel__content" role="navigation">
<ul class="topbar__settings__list">
<li class="topbar__settings__item">
<ul class="topbar__settings__sublist">
<li class="topbar__settings__subitem"><a href="#">Missing Plugins</a></li>
<li class="topbar__settings__subitem"><a href="#">Object History</a></li>
<li class="topbar__settings__subitem"><a href="#/view?view=config">Configure</a></li>
<li class="topbar__settings__subitem" ng-click="switchTheme()"><a>Change theme</a></li>
<li class="topbar__settings__subitem" >
<div class="set-size-big" ng-class="{active: themeClassSize=='size-scheme--big'}" ng-click="setSize('big')">A</div>
<div class="set-size-normal" ng-class="{active: themeClassSize=='size-scheme--normal'}" ng-click="setSize('normal')">A</div>
<div class="set-size-small" ng-class="{active: themeClassSize=='size-scheme--small'}" ng-click="setSize('small')">A</div>
<div class="set-size-clear"></div>
</li>
<li class="topbar__settings__subitem" ng-click="logout()"><a>Logout</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</li>
<li class="topbar__item topbar__search">
<form class="topbar-form topbar-left" role="search" id="search">
<button class="topbar__button" type="button">
<span class="visuallyhidden">Lancer une recherche</span>
<i class="ico-search"></i>
</button>
<label class="visuallyhidden" for="searchfield">Recherche</label>
<input id="searchfield" type="search" class="topbar__searchfield form-control" placeholder="Search hosts, services, ...">
</form>
</li>
</ul>
</nav>