Portal: Used BS breadcrumb in BrowseBrick instead of the previous which was home-made.

git-svn-id: http://svn.code.sf.net/p/itop/code/trunk@4591 a333f486-631f-4898-b8df-5754b55c2be0

datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig

@@ -5,9 +5,9 @@
 {% block bBrowseMainContent %}
 	<div id="brick_content_grid">
 		{% block bBrowseGridContent %}
-			<ul id="grid-breadcrumb">
-				<li class="grid-crumb grid-crumb-root" data-level-id="L"><span class="fa fa-home"></span></li>
-			</ul>
+			<ol id="grid-breadcrumb" class="breadcrumb">
+				<li><a href="#" data-level-id="L"><span class="fa fa-home"></span></a></li>
+			</ol>
 			<div class="grid-group" data-level-id="L">
 			</div>
 		{% endblock %}
@@ -338,10 +338,13 @@
 		var buildBreadcrumb = function(oCurrentElem)
 		{
             var aCurrentLevelParts = [];
+            var bLeafLevel = false;
 
 		    // If no current item, it's because we begin to build the breadcrumb, starting from the bottom
 			if(oCurrentElem === undefined)
 			{
+			    bLeafLevel = true;
+
                 // Retrieving current level id
                 var sCurrentLevelId = $('#brick_content_grid > .grid-group:visible').attr('data-level-id');
                 aCurrentLevelParts = sCurrentLevelId.split('::');
@@ -362,12 +365,17 @@
 			}
 
             // Adding level as crumb
-			var oCrumb = $('<li></li>').html( oCurrentElem.find('.grid-item-name').html() );
-			oCrumb.addClass('grid-crumb');
-			oCrumb.attr('data-level-id', aCurrentLevelParts.join('::'));
-			oCrumb.insertAfter('#grid-breadcrumb > li:first-of-type');
+			var oCrumb = $('<li></li>');
+			var oCrumbLink = (bLeafLevel) ? $('<span></span>') : $('<a></a>');
+			oCrumbLink.html( oCurrentElem.find('.grid-item-name').html() );
+			oCrumbLink.attr('data-level-id', aCurrentLevelParts.join('::')).attr('href', '#');
+			oCrumb.append(oCrumbLink).insertAfter('#grid-breadcrumb > li:first-of-type');
+			if(bLeafLevel)
+			{
+                oCrumb.addClass('active');
+            }
 			// Adding listener
-			$('#grid-breadcrumb > li:not(:last-of-type)').off('click').on('click', function(oEvent){
+			$('#grid-breadcrumb > li:not(:last-of-type) > a').off('click').on('click', function(oEvent){
                 oEvent.preventDefault();
 
 				var levelId = $(this).attr('data-level-id');

datamodels/2.x/itop-portal-base/portal/web/css/portal.css

@@ -624,33 +624,13 @@ table .group-actions {
 }
 /* Breadcrumb */
 #grid-breadcrumb {
+  margin-bottom: 5px;
   padding-left: 0px;
   font-size: 12px;
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
 }
-#grid-breadcrumb > li {
-  display: inline;
-  cursor: pointer;
-  color: #ea7d1e;
-}
-#grid-breadcrumb > li:hover {
-  color: #d56e14;
-}
-#grid-breadcrumb > li:last-of-type {
-  color: inherit;
-  cursor: inherit;
-}
-#grid-breadcrumb > li:after {
-  content: '/';
-  margin-left: 0.4em;
-  margin-right: 0.2em;
-  color: initial;
-}
-#grid-breadcrumb > li:last-of-type:after {
-  content: none;
-}
 .grid-group {
   display: none;
 }
@@ -674,7 +654,7 @@ table .group-actions {
   height: 100%;
   overflow: hidden;
   background-color: #585653;
-  transition: background-color linear 0.3s;
+  transition: all linear 0.3s;
 }
 .grid-item, .grid-item:hover, .grid-item:active, .grid-item:focus, .grid-item:visited {
   color: #fff;
@@ -753,6 +733,7 @@ table .group-actions {
   }
   .grid-item:hover, .grid-item:focus {
     background-color: #ea7d1e;
+    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20);
   }
   .grid-item-name {
     font-weight: 600;

datamodels/2.x/itop-portal-base/portal/web/css/portal.scss

@@ -671,33 +671,13 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 }
 /* Breadcrumb */
 #grid-breadcrumb{
+	margin-bottom: 5px;
 	padding-left: 0px;
 	font-size: 12px;
 	white-space: nowrap;
 	overflow-x: hidden;
 	text-overflow: ellipsis;
 }
-#grid-breadcrumb > li{
-	display: inline;
-	cursor: pointer;
-	color: $brand-primary;
-}
-#grid-breadcrumb > li:hover{
-	color: $brand-primary-dark;
-}
-#grid-breadcrumb > li:last-of-type{
-	color: inherit;
-	cursor: inherit;
-}
-#grid-breadcrumb > li:after{
-	content: '/';
-	margin-left: 0.4em;
-	margin-right: 0.2em;
-	color: initial;
-}
-#grid-breadcrumb > li:last-of-type:after{
-	content: none;
-}
 
 .grid-group{
 	display: none;
@@ -724,7 +704,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	height: 100%;
 	overflow: hidden;
 	background-color: $combodo-dark-gray;
-	transition: background-color linear 0.3s;
+	transition: all linear 0.3s;
 }
 .grid-item,
 .grid-item:hover,
@@ -808,6 +788,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	.grid-item:hover,
 	.grid-item:focus{
 		background-color: $combodo-orange;
+		box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20);
 	}
 
 	/* All layout */