Menu: Add iconClass config

refs #4824
This commit is contained in:
Eric Lippmann 2013-10-14 13:00:27 +02:00
parent 3f67c62896
commit af7db257fe
5 changed files with 231 additions and 25 deletions

View File

@ -20,6 +20,7 @@ $item = $this->navigation->keys("menu");
$item = $this->navigation->menu->$itemName;
$active = false;
$url = "";
$iconClass = '';
if (is_string($item)) {
$active = !$activeSet && $this->baseUrl($item) == $currentKey;
@ -28,10 +29,13 @@ $item = $this->navigation->keys("menu");
$url = $this->baseUrl(isset($item->route) ? $item->route : "");
$itemName = isset($item->title) ? $item->title : $itemName;
$active = !$activeSet && (isset($item->key) ? $item->key : $url) === $currentKey;
if (isset($item->iconClass)) {
$iconClass = $item->iconClass;
}
}
$activeSet = $activeSet || $active;
?>
<li class="<?= $active ? "active" : "" ?>">
<li class="<?= $active ? "active" : "" ?> <?= $iconClass; ?>">
<a href="<?= $url ?>"><?= $itemName ?></a>
</li>
<?php

View File

@ -1,4 +1,9 @@
[menu]
Dashboard = "/dashboard/index"
Configuration = "/config/index"
Dashboard.title = "Dashboard"
Dashboard.route = "/dashboard/index"
Dashboard.iconClass = "nav-icon-dashboard"
Configuration.title = "Configuration"
Configuration.route = "/config/index"
Configuration.iconClass = "nav-icon-configuration"

View File

@ -9,8 +9,14 @@
;Changes.route = "/monitoring/list/services?sort=service_last_state_change"
;_1 = 1 ;Spacer after this section
Hosts = "/monitoring/list/hosts"
Services = "/monitoring/list/services"
Hosts.title = "Hosts"
Hosts.route = "/monitoring/list/hosts"
Hosts.iconClass = "nav-icon-hosts"
Services.title = "Services"
Services.route = "/monitoring/list/services"
Services.iconClass = "nav-icon-services"
Downtimes = "/monitoring/list/downtimes"
Notifications = "/monitoring/list/notifications"
Comments = "/monitoring/list/comments"

View File

@ -810,7 +810,7 @@ code...
<i class="dashboard-icons icon-comment"></i>
<i class="dashboard-icons icon-comment"></i>
</td>
<td><a href="#"><strong>Langerlangerlanger Servicename</strong></a> on <a href="#">Host_0815ganzganzganzganzganzlang blabla</a></td>
<td><a href="#"><strong>Service</strong></a> on <a href="#">Hosta</a></td>
</tr>
<tr>

View File

@ -1,6 +1,6 @@
@import url("icons.css");
body { padding-top: 70px; }
body { padding-top: 51px; }
.load-indicator .mask {
position: absolute;
@ -420,71 +420,71 @@ select.input-sm {
.icon-flapping {
background-image: url('images/flapping.png');
background-image: url('../img/icons/flapping.png');
background-repeat: no-repeat;
}
.icon-comment {
background-image: url('images/comment.png');
background-image: url('../img/icons/comment.png');
background-repeat: no-repeat;
}
.icon-unhandled {
background-image: url('images/unhandled.png');
background-image: url('../img/icons/unhandled.png');
background-repeat: no-repeat;
}
.icon-host {
background-image: url('images/host.png');
background-image: url('../img/icons/host.png');
background-repeat: no-repeat;
}
.icon-acknowledgement {
background-image: url('images/acknowledgement.png');
background-image: url('../img/icons/acknowledgement.png');
background-repeat: no-repeat;
}
.icon-remove {
background-image: url('images/remove.png');
background-image: url('../img/icons/remove.png');
background-repeat: no-repeat;
}
.icon-submit {
background-image: url('images/submit.png');
background-image: url('../img/icons/submit.png');
background-repeat: no-repeat;
}
.icon-create {
background-image: url('images/create.png');
background-image: url('../img/icons/create.png');
background-repeat: no-repeat;
}
.icon-dashboard {
background-image: url('images/dashboard.png');
background-image: url('../img/icons/dashboard.png');
background-repeat: no-repeat;
}
.icon-disable {
background-image: url('images/disable.png');
background-image: url('../img/icons/disable.png');
background-repeat: no-repeat;
}
.icon-edit {
background-image: url('images/edit.png');
background-image: url('../img/icons/edit.png');
background-repeat: no-repeat;
}
.icon-error {
background-image: url('images/error.png');
background-image: url('../img/icons/error.png');
background-repeat: no-repeat;
}
.icon-downtime {
background-image: url('images/in_downtime.png');
background-image: url('../img/icons/in_downtime.png');
background-repeat: no-repeat;
}
.icon-save {
background-image: url('images/save.png');
background-image: url('../img/icons/save.png');
background-repeat: no-repeat;
}
.icon-service {
background-image: url('images/service.png');
background-image: url('../img/icons/service.png');
background-repeat: no-repeat;
}
.icon-user {
background-image: url('images/user.png');
background-image: url('../img/icons/user.png');
background-repeat: no-repeat;
}
.icon-reschedule {
background-image: url('images/reschedule.png');
background-image: url('../img/icons/reschedule.png');
background-repeat: no-repeat;
}
@ -617,4 +617,195 @@ select.input-sm {
.btn-half-right {
float: right;
width: 48%;
}
}
.nav-stacked > li + li {
margin-left: 0;
margin-top: 0;
}
.nav-stacked {
#background-color: #f8f8f8;
}
.icinga-subnavigation {
list-style: none;
}
.nav-stacked > li {
padding-left: 8px;
padding-top: 1px;
padding-bottom: 1px;
border-bottom: 1px dotted #049baf;
#border-right: 1px dotted #049baf;
}
.nav-stacked > li:first-child {
#border-top: 1px dotted #049baf;
}
.icinga-subnavigation > li {
padding-top: 8px;
padding-bottom: 8px;
border-bottom: 1px dotted #049baf;
#border-right: 1px dotted #049baf;
}
ul.icinga-subnavigation {
border-bottom: 1px dotted #049baf;
margin-left: 0;
padding-left: 15px;
}
.icinga-subnavigation > li:last-child {
padding-top: 8px;
padding-bottom: 8px;
border-bottom: 0;
}
.nav-stacked > li > a,
.icinga-subnavigation > li > a {
padding-left: 40px;
padding-right: 3px;
border-left: 6px solid #049baf;
display: inline-block;
}
.nav-stacked > li > a.nav-notification,
.icinga-subnavigation > li > a.nav-notification {
border-left: 6px solid red !important;
}
.nav-stacked > li > a:hover,
.icinga-subnavigation > li > a:focus {
/* font-weight: bold;*/
background-color: transparent; !important;
display: inline-block;
}
.nav-stacked > li:hover,
.nav-stacked > li:focus,
.icinga-subnavigation > li:hover,
.icinga-subnavigation > li:focus {
background-color: #fff;
}
.nav-stacked > li.active,
.icinga-subnavigation > li.active {
background-color: #fff;
border-right: 0;
}
.nav-icon-hosts {
background-image: url('../img/icons/host_petrol.png');
background-repeat: no-repeat;
background-position: 19px 50%;
}
.nav-icon-services {
background-image: url('../img/icons/service_petrol.png');
background-repeat: no-repeat;
background-position: 19px 50%;
}
.nav-icon-downtimes {
background-image: url('../img/icons/in_downtime_petrol.png');
background-repeat: no-repeat;
background-position: 19px 50%;
}
.nav-icon-notifications {
background-image: url('../img/icons/notification_petrol.png');
background-repeat: no-repeat;
background-position: 19px 20px;
}
.nav-icon-comments {
background-image: url('../img/icons/comment_petrol.png');
background-repeat: no-repeat;
background-position: 19px 50%;
}
.nav-icon-dashboard {
background-image: url('../img/icons/dashboard_petrol.png');
background-repeat: no-repeat;
background-position: 19px 50%;
}
.nav-icon-configuration {
background-image: url('../img/icons/configuration_petrol.png');
background-repeat: no-repeat;
background-position: 19px 50%;
}
.subnav-icon-configuration {
background-image: url('../img/icons/configuration_petrol.png');
background-repeat: no-repeat;
background-position: 19px 50%;
}
.badge-container-nav {
display: inline-block;
overflow: hidden;
padding-top: 0;
margin-bottom: 5px;
}
.badge-nav {
background-color: #fff;
border-radius: 2px;
color: #ff3300;
display: inline-block;
font-size: 12px;
font-weight: bold;
line-height: 1;
min-width: 10px;
padding-bottom: 3px;
padding-left: 7px;
padding-right: 7px;
padding-top: 3px;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
border: 1px solid #ff3300;
}
.badge-container-subnav {
position: absolute;
overflow: hidden;
padding-top: 0;
padding-bottom;
margin-left: 2px;
margin-top: -8px;
}
.badge-subnav {
background-color: #fff;
border-radius: 2px;
color: #ff3300;
display: inline-block;
font-size: 10px;
font-weight: bold;
line-height: 1;
min-width: 10px;
padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
border: 1px solid #ff3300;
}