Portal: BrowseBrick: Introducing new browse mode "grid". Also some UI improvements in other browse modes.

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

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

@@ -94,6 +94,11 @@
 
                 showLevel(upperlevelIdParts[0], upperlevelIdParts[1]);
             });
+
+            // Allows link in item's description to work. Otherwise, the predentDefault of the item takes over.
+            $('#brick_content_grid .grid-item-description a').off('click').on('click', function(oEvent){
+                oEvent.stopPropagation();
+			});
 		};
 		// Registers the filter listeners on the tree.
 		var registerFilterListeners = function()
@@ -251,19 +256,14 @@
 					// Preparing secondary actions container
 					var actionsElem = $('<div></div>').addClass('grid-group-item-actions');
 					itemElem.append(actionsElem);
-					// Checking if a menu is necessary
-					var bHasSeveralSecondaryActions = (Object.keys(actionsButtons).length > 1);
 					// Preparing secondary actions menu
-					if(bHasSeveralSecondaryActions)
-					{
-						var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
-						var actionsSSMenuElem = $('<div id="item-actions-menu-'+levelAltId+'" class="item-action-wrapper panel panel-default"></div>');
-						var actionsSSMenuContainerElem = $('<div class="panel-body"></div>');
-						actionsSSMenuElem.append(actionsSSMenuContainerElem);
-						actionsElem.append(actionsSSTogglerElem);
-						actionsElem.append(actionsSSMenuElem);
-					}
-					
+					var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
+					var actionsSSMenuElem = $('<div id="item-actions-menu-'+levelAltId+'" class="item-action-wrapper panel panel-default"></div>');
+					var actionsSSMenuContainerElem = $('<div class="panel-body"></div>');
+					actionsSSMenuElem.append(actionsSSMenuContainerElem);
+					actionsElem.append(actionsSSTogglerElem);
+					actionsElem.append(actionsSSMenuElem);
+
 					// Adding secondary actions
 					for(j in actionsButtons)
 					{
@@ -302,15 +302,8 @@
 							actionIconElem.addClass(action.icon_class);
 						}
 						
-						if(bHasSeveralSecondaryActions)
-						{
-							actionElem.append(action.title);
-							actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
-						}
-						else
-						{
-							actionsElem.append(actionElem);
-						}
+						actionElem.append(action.title);
+						actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
 					}
 				}
 				

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

@@ -118,18 +118,13 @@
 								// Preparing secondary actions container
 								var actionsElem = $('<div></div>').addClass('pull-right group-actions');
 								cellElem.append(actionsElem);
-								// Checking if a menu is necessary
-								var bHasSeveralSecondaryActions = (Object.keys(actionsButtons).length > 1);
-								// Preparing secondary actions for small screens
-								if(bHasSeveralSecondaryActions)
-								{
-									var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
-									var actionsSSMenuElem = $('<div id="item-actions-menu-'+levelAltId+'" class="item-action-wrapper panel panel-default"></div>');
-									var actionsSSMenuContainerElem = $('<div class="panel-body"></div>');
-									actionsSSMenuElem.append(actionsSSMenuContainerElem);
-									actionsElem.append(actionsSSTogglerElem);
-									actionsElem.append(actionsSSMenuElem);
-								}
+								// Preparing secondary actions
+								var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
+								var actionsSSMenuElem = $('<div id="item-actions-menu-'+levelAltId+'" class="item-action-wrapper panel panel-default"></div>');
+								var actionsSSMenuContainerElem = $('<div class="panel-body"></div>');
+								actionsSSMenuElem.append(actionsSSMenuContainerElem);
+								actionsElem.append(actionsSSTogglerElem);
+								actionsElem.append(actionsSSMenuElem);
 
 								// Adding secondary actions
 								for(j in actionsButtons)
@@ -169,15 +164,8 @@
 										actionIconElem.addClass(action.icon_class);
 									}
 						
-									if(bHasSeveralSecondaryActions)
-									{
-										actionElem.append(action.title);
-										actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
-									}
-									else
-									{
-										actionsElem.append(actionElem);
-									}
+									actionElem.append(action.title);
+									actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
 								}
 							}
 						}

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

@@ -108,6 +108,11 @@
 					loadChildNodes($(this).attr('data-level-alias'), $(this).attr('data-item-id'));
 				}
 			});
+
+            // Allows link in item's description to work. Otherwise, the predentDefault of the item takes over.
+            $('#brick_content_tree .list-group-item-description a').off('click').on('click', function(oEvent){
+                oEvent.stopPropagation();
+            });
 		};
 		// Registers the filter listeners on the tree.
 		var registerFilterListeners = function()
@@ -189,30 +194,33 @@
 				var levelActionsKeys = Object.keys(levelActions);
 				var levelPrimaryAction = levelActions[levelActionsKeys[0]];
 				var url = '';
-				
+
 				var liElem  = $('<li></li>').addClass('list-group-item');
-				var aElem   = $('<a></a>').addClass('tree-item').attr('data-item-id', item.id).attr('href', '#').attr('data-level-alias', item.level_alias).text(item.name);
+				var aElem = $('<span></span>').addClass('tree-item-wrapper').attr('data-item-id', item.id).attr('data-level-alias', item.level_alias);
+				var nameElem   = $('<a></a>').addClass('tree-item').text(item.name);
 				// Building node
 				$('ul[data-level-id="'+nodeId+'"]').append(liElem);
+				aElem.append(nameElem);
 				liElem.append(aElem);
 				
 				// Building tooltip for the node
 				if( (item.tooltip !== undefined) && (item.tooltip !== '') )
 				{
-					aElem.attr('title', item.tooltip).attr('data-toggle', 'tooltip').tooltip({html: true, trigger: 'hover', placement: 'right'});
+					nameElem.attr('title', item.tooltip).attr('data-toggle', 'tooltip').tooltip({html: true, trigger: 'hover', placement: 'right'});
 				}
 				// Building description for the node
 				if( (item.description !== undefined) && (item.description !== '') )
 				{
-				    liElem.append( $('<span class="list-group-item-description">'+item.description+'</span>') );
+					aElem.append( $('<span class="list-group-item-description">'+item.description+'</span>') );
 				}
 				
 				// Building actions for that node
 				switch(levelPrimaryAction.type)
 				{
 					case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_DRILLDOWN') }}':
-						aElem.addClass('tree-toggle').html('<span class="glyphicon '+sNodeCollapsedClass+'" aria-hidden="true"></span><span class="list-group-item-text">'+aElem.text()+'</span>');
-						break;
+                        aElem.addClass('tree-toggle');
+                        nameElem.html('<span class="glyphicon '+sNodeCollapsedClass+'" aria-hidden="true"></span><span class="list-group-item-text">'+nameElem.text()+'</span>');
+                        break;
 					case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_VIEW') }}':
 						url = '{{ app.url_generator.generate('p_object_view', {'sObjectClass': '-objectClass-', 'sObjectId': '-objectId-'})|raw }}'.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
 						SetActionUrl(aElem, url);
@@ -247,18 +255,13 @@
 					var actionsElem = $('<div></div>').addClass('list-group-item-actions');
 					liElem.append(actionsElem);
 					// Checking if a menu is necessary
-					var bHasSeveralSecondaryActions = (Object.keys(actionsButtons).length > 1);
-					// Preparing secondary actions menu
-					if(bHasSeveralSecondaryActions)
-					{
-						var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
-						var actionsSSMenuElem = $('<div id="item-actions-menu-'+levelAltId+'" class="item-action-wrapper panel panel-default"></div>');
-						var actionsSSMenuContainerElem = $('<div class="panel-body"></div>');
-						actionsSSMenuElem.append(actionsSSMenuContainerElem);
-						actionsElem.append(actionsSSTogglerElem);
-						actionsElem.append(actionsSSMenuElem);
-					}
-					
+					var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
+					var actionsSSMenuElem = $('<div id="item-actions-menu-'+levelAltId+'" class="item-action-wrapper panel panel-default"></div>');
+					var actionsSSMenuContainerElem = $('<div class="panel-body"></div>');
+					actionsSSMenuElem.append(actionsSSMenuContainerElem);
+					actionsElem.append(actionsSSTogglerElem);
+					actionsElem.append(actionsSSMenuElem);
+
 					// Adding secondary actions
 					for(j in actionsButtons)
 					{
@@ -297,15 +300,8 @@
 							actionIconElem.addClass(action.icon_class);
 						}
 						
-						if(bHasSeveralSecondaryActions)
-						{
-							actionElem.append(action.title);
-							actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
-						}
-						else
-						{
-							actionsElem.append(actionElem);
-						}
+						actionElem.append(action.title);
+						actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
 					}
 				}
 				
@@ -324,14 +320,16 @@
 				registerToggleListeners();
 			}
 		};
-		
+
 		$(document).ready(function(){
 			// Init expand/collapse all buttons
 			$('#btn-collapse-all').on('click', function (oEvent) {
+			    oEvent.preventDefault();
 				collapseAll();
 			});
 			$('#btn-expand-all').on('click', function (oEvent) {
-				if(!bIsFullyLoaded)
+                oEvent.preventDefault();
+                if(!bIsFullyLoaded)
 				{
 					// Show a loader while fetching results
 					showTreeLoader();

datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.css

@@ -1215,6 +1215,9 @@ fieldset {
   border-radius: 0px;
   min-width: 0;
 }
+form fieldset {
+  background-color: #f9f9f9;
+}
 legend {
   display: block;
   width: inherit;
@@ -4118,15 +4121,19 @@ button.close {
 }
 .modal-header {
   padding: 15px;
+  background-color: #585653;
   border-bottom: 1px solid #e5e5e5;
   min-height: 16.42857px;
 }
 .modal-header .close {
   margin-top: -2px;
+  color: #fff;
+  opacity: 0.6;
 }
 .modal-title {
   margin: 0;
   line-height: 1.42857;
+  color: #fff;
 }
 .modal-body {
   position: relative;

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

@@ -1543,6 +1543,9 @@ fieldset {
 	border-radius: $border-radius-base;
     min-width: 0;
 }
+form fieldset {
+    background-color: #f9f9f9;
+}
 legend {
     display: block;
     width: inherit;
@@ -5109,15 +5112,19 @@ button.close {
 }
 .modal-header {
     padding: 15px;
-    border-bottom: 1px solid #e5e5e5;
+    background-color: $modal-header-bg;
+    border-bottom: 1px solid $modal-header-border-color;
     min-height: 16.42857143px
 }
 .modal-header .close {
-    margin-top: -2px
+    margin-top: -2px;
+    color: $modal-close-color;
+    opacity: 0.6;
 }
 .modal-title {
     margin: 0;
-    line-height: $line-height-base
+    line-height: $line-height-base;
+    color: $modal-title-color
 }
 .modal-body {
     position: relative;

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

@@ -548,11 +548,21 @@ footer {
   position: relative;
   margin-top: 0px;
 }
+#brick_content_tree .list-group-item {
+  padding-top: 0px;
+}
+#brick_content_tree .list-group-item > .tree-item-wrapper {
+  display: block;
+  padding-top: 10px;
+  color: inherit;
+  text-decoration: inherit;
+  cursor: pointer;
+}
 .list-group-item > .list-group-item-actions {
   /*display: none; Displaying actions only when hovering was not unanimous in the team */
   position: absolute;
   top: 10px;
-  right: 15px;
+  right: 10px;
 }
 .list-group-item:hover > .list-group-item-actions, .grid-group-item:hover > .grid-group-item-actions {
   display: block;
@@ -583,8 +593,8 @@ table .group-actions {
   display: none;
   position: absolute;
   z-index: 5;
-  bottom: 5px;
-  right: 0px;
+  bottom: -7px;
+  right: 15px;
   -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
   -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
@@ -596,6 +606,7 @@ table .group-actions {
   display: block;
 }
 .list-group-item-actions .item-action-wrapper .panel-body > p, .grid-group-item-actions .item-action-wrapper .panel-body > p, table .group-actions .item-action-wrapper .panel-body > p {
+  text-align: left;
   white-space: nowrap;
 }
 .list-group-item-actions .item-action-wrapper .panel-body > p:last-child, .grid-group-item-actions .item-action-wrapper .panel-body > p:last-child, table .group-actions .item-action-wrapper .panel-body > p:last-child {
@@ -669,7 +680,7 @@ table .group-actions {
   vertical-align: middle;
 }
 .grid-item-image > img {
-  max-width: 100%;
+  max-width: 85%;
 }
 .grid-group-item > .grid-group-item-actions {
   position: absolute;

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

@@ -575,11 +575,22 @@ footer{
 	margin-top: 0px;
 }
 
+#brick_content_tree .list-group-item{
+	padding-top: 0px;
+}
+#brick_content_tree .list-group-item > .tree-item-wrapper{
+	display: block;
+	padding-top: 10px;
+	color: inherit;
+	text-decoration: inherit;
+	cursor: pointer;
+}
+
 .list-group-item > .list-group-item-actions{
 	/*display: none; Displaying actions only when hovering was not unanimous in the team */
 	position: absolute;
 	top: 10px;
-	right: 15px;
+	right: 10px;
 }
 .list-group-item:hover > .list-group-item-actions,
 .grid-group-item:hover > .grid-group-item-actions{
@@ -618,8 +629,8 @@ table .group-actions .item-action-wrapper
 	display: none;
 	position: absolute;
 	z-index: 5;
-	bottom: 5px;
-	right: 0px;
+	bottom: -7px;
+	right: 15px;
 	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
 	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
 	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
@@ -637,6 +648,7 @@ table .group-actions .item-action-wrapper.collapse.in{
 .list-group-item-actions .item-action-wrapper .panel-body > p,
 .grid-group-item-actions .item-action-wrapper .panel-body > p,
 table .group-actions .item-action-wrapper .panel-body > p{
+	text-align: left;
 	white-space: nowrap;
 }
 .list-group-item-actions .item-action-wrapper .panel-body > p:last-child,
@@ -724,7 +736,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	vertical-align: middle;
 }
 .grid-item-image > img{
-	max-width: 100%;
+	max-width: 85%;
 }
 .grid-group-item > .grid-group-item-actions{
 	position: absolute;

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

@@ -645,6 +645,12 @@ $modal-backdrop-bg:           #000 !default;
 $modal-backdrop-opacity:      .5 !default;
 //** Modal header border color
 $modal-header-border-color:   #e5e5e5 !default;
+//** Modal header background color
+$modal-header-bg:             $combodo-dark-gray;
+//** Modal title color
+$modal-title-color:           $white;
+//** Modal close button color
+$modal-close-color:           $white;
 //** Modal footer border color
 $modal-footer-border-color:   $modal-header-border-color !default;