Add home breadcrumb

client/WEB-INF/classes/resources/messages.properties

@@ -14,6 +14,7 @@
 # KIND, either express or implied.  See the License for the
 # specific language governing permissions and limitations
 # under the License.
+label.home=Home
 label.use.default.language=Use default language
 label.delete.events=Delete events
 label.delete.alerts=Delete alerts

ui/dictionary.jsp

@@ -25,6 +25,7 @@ under the License.
 <% long now = System.currentTimeMillis(); %>
 <script language="javascript">
 dictionary = {
+'label.home': '<fmt:message key="label.home" />',
 'label.use.default.language': '<fmt:message key="label.use.default.language" />',
 'label.delete.events': '<fmt:message key="label.delete.events" />',
 'label.delete.alerts': '<fmt:message key="label.delete.alerts" />',

ui/scripts/ui/core.js

@@ -247,7 +247,7 @@
                     $('<div>').attr({
                         id: 'breadcrumbs'
                     })
-                    .append($('<div>').addClass('home'))
+                    .append($('<div>').addClass('home').html(_l('label.home')))
                     .append($('<div>').addClass('end'))
             )
 

ui/stylesheets/_browser.scss

@@ -39,4 +39,10 @@
 
 #breadcrumbs {
     @include csui-breadcrumbs;
+
+    .home {
+        @include csui-breadcrumb;
+        
+        margin-left: 20px;
+    }
 }

ui/stylesheets/csui/_breadcrumbs.scss

@@ -14,6 +14,31 @@
 // KIND, either express or implied.  See the License for the
 // specific language governing permissions and limitations
 // under the License.
+
+// Individual breadcrumb
+@mixin csui-breadcrumb {
+    color: #237AD7;
+    font-size: 12px;
+    list-style: none;
+    float: left;
+
+    &:after {
+        content: ">";
+        color: #ccc;
+        margin-right: 10px;
+        margin-left: 10px;
+    }
+
+    &.active {
+        color: darken(#ccc, 30%);
+
+        &:after {
+            content: "";
+        }
+    }
+}
+
+// Breadcrumb row
 @mixin csui-breadcrumbs {
     box-shadow: 0px 3px 5px #ccc;
     
@@ -24,25 +49,7 @@
         padding-bottom: 10px;
         
         li {
-            color: #237AD7;
-            font-size: 12px;
-            list-style: none;
-            float: left;
-
-            &:after {
-                content: ">";
-                color: #ccc;
-                margin-right: 10px;
-                margin-left: 10px;
-            }
-
-            &.active {
-                color: darken(#ccc, 30%);
-
-                &:after {
-                    content: "";
-                }
-            }
+            @include csui-breadcrumb;            
         }
     }
 }