Menu: Add iconClass config

refs #4824

application/layouts/scripts/parts/navigation.phtml

@@ -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

config/menu.ini

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

config/modules/monitoring/menu.ini

@@ -9,8 +9,14 @@
 ;Changes.route       = "/monitoring/list/services?sort=service_last_state_change"
 ;_1                  = 1                                                             ;Spacer after this section
 
-Hosts           = "/monitoring/list/hosts"
+Hosts.title     = "Hosts"
-Services        = "/monitoring/list/services"
+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"

doc/Icinga-Design/documentation.html

@@ -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>

public/css/main.css

@@ -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;
+}
+