From 8e83baf72b40c23918bb6da5d4be26a1eb9be7c2 Mon Sep 17 00:00:00 2001
From: Guillaume Lajarige <guillaume.lajarige@combodo.com>
Date: Wed, 18 Oct 2017 14:29:53 +0000
Subject: [PATCH] =?UTF-8?q?N=C2=B01094.2=20Portal:=20Showing=20"icon"=20at?=
 =?UTF-8?q?tribute=20on=20ServiceFamily=20and=20Service=20levels=20in=20"m?=
 =?UTF-8?q?osaic"=20mode=20of=20"services"=20BrowseBrick.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SVN:trunk[5038]
---
 .../views/bricks/browse/mode_mosaic.html.twig   |  2 +-
 .../itop-portal-base/portal/web/css/portal.scss | 17 +++++++++++++----
 .../2.x/itop-tickets/datamodel.itop-tickets.xml |  6 ++++--
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_mosaic.html.twig b/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_mosaic.html.twig
index 27b8af774d..70e50a9090 100644
--- a/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_mosaic.html.twig
+++ b/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_mosaic.html.twig
@@ -187,7 +187,7 @@
                 // - Adding stub div
 				var textElem = $('<div></div>').addClass('mosaic-item-text');
                 // - Adding image
-                if( (item.image !== undefined) && (item.image !== '') )
+                if( (item.image !== undefined) && (item.image !== '') && (item.image !== null) )
                 {
                     iItemFlags += 4;
                     aElem.append( $('<div></div>').addClass('mosaic-item-image').append( $('<img />').attr('src', item.image) ) );
diff --git a/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss b/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss
index 8e8ef2c684..ec6e20cb3a 100644
--- a/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss
+++ b/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss
@@ -677,10 +677,19 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	font-size: 1em;
 }
 
-/****************/
-/* - Mosaic mode  */
-/* Note: Some of the CSS is factorised in the "Tree mode" part */
-/****************/
+/****************************************************************/
+/* - Mosaic mode                                                */
+/*                                                              */
+/* Note: Some of the CSS is factorised in the "Tree mode" part  */
+/*                                                              */
+/* Note: .mosaic-item-layout-x classes are for different        */
+/*   presentation modes. Like in binary, add the values to know */
+/*   which class to use.                                        */
+/*   - 1 is for name                                            */
+/*   - 2 is for description                                     */
+/*   - 4 is for image                                           */
+/*   eg. .mosaic-item-layout-5 when just name and image         */
+/****************************************************************/
 #brick_content_mosaic{
   	position: relative;
 	padding: 10px 10px 1px 10px;
diff --git a/datamodels/2.x/itop-tickets/datamodel.itop-tickets.xml b/datamodels/2.x/itop-tickets/datamodel.itop-tickets.xml
index 16441d587f..8cc2b01bb8 100755
--- a/datamodels/2.x/itop-tickets/datamodel.itop-tickets.xml
+++ b/datamodels/2.x/itop-tickets/datamodel.itop-tickets.xml
@@ -1067,6 +1067,7 @@
 					<levels>
 						<level id="1">
 							<class>ServiceFamily</class>
+							<image_att>icon</image_att>
 							<levels>
 								<!-- Level IDs must be numeric -->
 								<level id="1">
@@ -1080,10 +1081,10 @@
 									<tooltip_att>description</tooltip_att>
 									<!-- Attribute code of the above class [from the OQL] used to display a small text beside the object's name -->
 									<!-- Note: This is not used in "list" mode -->
-									<description_att/>
+									<description_att>description</description_att>
 									<!-- Attribute code of the above class [from the OQL] used to display a image beside the object's name -->
 									<!-- Note: This is used in "mosaic" mode only for now -->
-									<!--<image_att/>-->
+									<image_att>icon</image_att>
 									<!-- Title of the level, will be display in lists and others browse modes -->
 									<title>Class:Service</title>
 									<!-- Optional tag to add attributes to the table by their code, can be specified for each level -->
@@ -1100,6 +1101,7 @@
 											<parent_att>service_id</parent_att>
 											<name_att/>
 											<tooltip_att>description</tooltip_att>
+											<description_att>description</description_att>
 											<title>Class:ServiceSubcategory</title>
 											<actions>
 												<action id="create_from_this" xsi:type="create_from_this">