Portal: Renamed Grid browse mode to Mosaic

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

datamodels/2.x/itop-portal-base/cs.dict.itop-portal-base.php

@@ -90,7 +90,7 @@ Dict::Add('CS CZ', 'Czech', 'Čeština', array(
     'Brick:Portal:Browse:Name' => 'Procházet položky',
     'Brick:Portal:Browse:Mode:List' => 'Seznam',
     'Brick:Portal:Browse:Mode:Tree' => 'Strom',
-    'Brick:Portal:Browse:Mode:Grid' => 'Tiles~~',
+    'Brick:Portal:Browse:Mode:Mosaic' => 'Mosaic~~',
     'Brick:Portal:Browse:Action:Drilldown' => 'Rozpad',
     'Brick:Portal:Browse:Action:View' => 'Podrobnosti',
     'Brick:Portal:Browse:Action:Edit' => 'Upravit',

datamodels/2.x/itop-portal-base/de.dict.itop-portal-base.php

@@ -86,7 +86,7 @@ Dict::Add('DE DE', 'German', 'Deutsch', array(
 	'Brick:Portal:Browse:Name' => 'List durchgehen',
 	'Brick:Portal:Browse:Mode:List' => 'Liste',
 	'Brick:Portal:Browse:Mode:Tree' => 'Baum',
-    'Brick:Portal:Browse:Mode:Grid' => 'Tiles~~',
+    'Brick:Portal:Browse:Mode:Mosaic' => 'Mosaic~~',
 	'Brick:Portal:Browse:Action:Drilldown' => 'Drilldown',
 	'Brick:Portal:Browse:Action:View' => 'Details',
 	'Brick:Portal:Browse:Action:Edit' => 'Editieren',

datamodels/2.x/itop-portal-base/en.dict.itop-portal-base.php

@@ -86,7 +86,7 @@ Dict::Add('EN US', 'English', 'English', array(
 	'Brick:Portal:Browse:Name' => 'Browse throught items',
 	'Brick:Portal:Browse:Mode:List' => 'List',
 	'Brick:Portal:Browse:Mode:Tree' => 'Tree',
-    'Brick:Portal:Browse:Mode:Grid' => 'Tiles',
+    'Brick:Portal:Browse:Mode:Mosaic' => 'Mosaic',
 	'Brick:Portal:Browse:Action:Drilldown' => 'Drilldown',
 	'Brick:Portal:Browse:Action:View' => 'Details',
 	'Brick:Portal:Browse:Action:Edit' => 'Edit',

datamodels/2.x/itop-portal-base/es_cr.dict.itop-portal-base.php

@@ -86,7 +86,7 @@ Dict::Add('ES CR', 'Spanish', 'Español, Castellano', array(
 	'Brick:Portal:Browse:Name' => 'Buscar en todos los elementos',
 	'Brick:Portal:Browse:Mode:List' => 'Lista',
 	'Brick:Portal:Browse:Mode:Tree' => 'Árbol',
-    'Brick:Portal:Browse:Mode:Grid' => 'Tiles~~',
+    'Brick:Portal:Browse:Mode:Mosaic' => 'Mosaic~~',
 	'Brick:Portal:Browse:Action:Drilldown' => 'Desglose',
 	'Brick:Portal:Browse:Action:View' => 'Detalles',
 	'Brick:Portal:Browse:Action:Edit' => 'Editar',

datamodels/2.x/itop-portal-base/fr.dict.itop-portal-base.php

@@ -86,7 +86,7 @@ Dict::Add('FR FR', 'French', 'Français', array(
 	'Brick:Portal:Browse:Name' => 'Navigation dans les éléments',
 	'Brick:Portal:Browse:Mode:List' => 'Liste',
     'Brick:Portal:Browse:Mode:Tree' => 'Hiérarchie',
-    'Brick:Portal:Browse:Mode:Grid' => 'Tuiles',
+    'Brick:Portal:Browse:Mode:Mosaic' => 'Mosaïque',
 	'Brick:Portal:Browse:Action:Drilldown' => 'Parcourir',
 	'Brick:Portal:Browse:Action:View' => 'Détails',
 	'Brick:Portal:Browse:Action:Edit' => 'Modifier',

datamodels/2.x/itop-portal-base/portal/src/controllers/browsebrickcontroller.class.inc.php

@@ -80,7 +80,7 @@ class BrowseBrickController extends BrickController
 		// Building DBobjectSearch
 		$oQuery = null;
 		// ... In this case only we have to build a specific query for the current level only
-		if (in_array($sBrowseMode, array(BrowseBrick::ENUM_BROWSE_MODE_TREE, BrowseBrick::ENUM_BROWSE_MODE_GRID)) && ($sDataLoading === AbstractBrick::ENUM_DATA_LOADING_LAZY))
+		if (in_array($sBrowseMode, array(BrowseBrick::ENUM_BROWSE_MODE_TREE, BrowseBrick::ENUM_BROWSE_MODE_MOSAIC)) && ($sDataLoading === AbstractBrick::ENUM_DATA_LOADING_LAZY))
 		{
 			// Will be handled later in the pagination part
 		}
@@ -233,7 +233,7 @@ class BrowseBrickController extends BrickController
 
 					break;
 				case BrowseBrick::ENUM_BROWSE_MODE_TREE:
-                case BrowseBrick::ENUM_BROWSE_MODE_GRID:
+                case BrowseBrick::ENUM_BROWSE_MODE_MOSAIC:
 					// Retrieving parameters
 					$sLevelAlias = $oRequest->get('sLevelAlias');
 					$sNodeId = $oRequest->get('sNodeId');
@@ -333,7 +333,7 @@ class BrowseBrickController extends BrickController
 			switch ($sBrowseMode)
 			{
 				case BrowseBrick::ENUM_BROWSE_MODE_TREE:
-                case BrowseBrick::ENUM_BROWSE_MODE_GRID:
+                case BrowseBrick::ENUM_BROWSE_MODE_MOSAIC:
 					static::AddToTreeItems($aItems, $aCurrentRow, $aLevelsProperties);
 					break;
 

datamodels/2.x/itop-portal-base/portal/src/entities/browsebrick.class.inc.php

@@ -34,7 +34,7 @@ class BrowseBrick extends PortalBrick
 	const DEFAULT_NAVIGATION_MENU_ICON_CLASS = 'fa fa-map fa-2x';
 	const ENUM_BROWSE_MODE_LIST = 'list';
     const ENUM_BROWSE_MODE_TREE = 'tree';
-    const ENUM_BROWSE_MODE_GRID = 'grid';
+    const ENUM_BROWSE_MODE_MOSAIC = 'mosaic';
 	const ENUM_ACTION_VIEW = 'view';
 	const ENUM_ACTION_EDIT = 'edit';
 	const ENUM_ACTION_DRILLDOWN = 'drilldown';
@@ -52,7 +52,7 @@ class BrowseBrick extends PortalBrick
 	const DEFAULT_ACTION_OPENING_TARGET = self::ENUM_OPENING_TARGET_MODAL;
 	const DEFAULT_COUNT_PER_PAGE_LIST = 20;
 
-    static $aBrowseModes = array(self::ENUM_BROWSE_MODE_LIST, self::ENUM_BROWSE_MODE_TREE, self::ENUM_BROWSE_MODE_GRID);
+    static $aBrowseModes = array(self::ENUM_BROWSE_MODE_LIST, self::ENUM_BROWSE_MODE_TREE, self::ENUM_BROWSE_MODE_MOSAIC);
 
     static $sRouteName = 'p_browse_brick';
 

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

@@ -1,25 +1,25 @@
-{# itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig #}
-{# Browse brick grid mode layout #}
+{# itop-portal-base/portal/src/views/bricks/browse/mode_mosaic.html.twig #}
+{# Browse brick mosaic mode layout #}
 {% extends 'itop-portal-base/portal/src/views/bricks/browse/layout.html.twig' %}
 
 {% block bBrowseMainContent %}
-	<div id="brick_content_grid">
-		{% block bBrowseGridContent %}
-			<ol id="grid-breadcrumb" class="breadcrumb">
+	<div id="brick_content_mosaic">
+		{% block bBrowseMosaicContent %}
+			<ol id="mosaic-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 class="mosaic-group" data-level-id="L">
 			</div>
 		{% endblock %}
 	</div>
 
 	<div id="brick_content_empty" class="text-center">
-		{% block bBrowseGridEmpty %}
+		{% block bBrowseMosaicEmpty %}
 			{{ 'Brick:Portal:Browse:Filter:NoData'|dict_s }}
 		{% endblock %}
 	</div>
-	<div id="brick_grid_overlay">
-		{% block bBrowseGridOverlay %}
+	<div id="brick_mosaic_overlay">
+		{% block bBrowseMosaicOverlay %}
 			<div class="overlay_content">
 				{% include 'itop-portal-base/portal/src/views/helpers/loader.html.twig' %}
 			</div>
@@ -34,45 +34,45 @@
 		var sBrowseMode = '{{ sBrowseMode }}';
 		var oLevelsProperties = {{ aLevelsProperties|raw }};
 		var oRawDatas = {{ aItems|raw }};
-        var sGridEffectName = 'fade';
-        var oGridEffectOptions = {};
-        var iGridEffectDuration = 200;
+        var sMosaicEffectName = 'fade';
+        var oMosaicEffectOptions = {};
+        var iMosaicEffectDuration = 200;
 
-        // Show a loader over the grid
-		var showGridLoader = function()
+        // Show a loader over the mosaic
+		var showMosaicLoader = function()
 		{
-			$("#brick_content_grid").hide();
-			$('#brick_grid_overlay').show();
+			$("#brick_content_mosaic").hide();
+			$('#brick_mosaic_overlay').show();
 		};
 		// Hide the loader over the tree
-		var hideGridLoader = function()
+		var hideMosaicLoader = function()
 		{
-			$('#brick_grid_overlay').hide();
-			$("#brick_content_grid").show();
+			$('#brick_mosaic_overlay').hide();
+			$("#brick_content_mosaic").show();
 		}
 		// Show the requested level
 		var showLevel = function(sLevelAlias, sItemId)
 		{
 		    // Retrieving level to show
 		    var sLevelId = sLevelAlias + ((sItemId !== undefined) ? '::'+sItemId : '' );
-		    var oLevelElem = $('#brick_content_grid .grid-group[data-level-id="' + sLevelId + '"]');
+		    var oLevelElem = $('#brick_content_mosaic .mosaic-group[data-level-id="' + sLevelId + '"]');
 		    var bLevelLoaded = (oLevelElem.length > 0);
 
 		    // Hiding current level
-            $('#brick_content_grid .grid-group:visible').hide(
-                sGridEffectName,
-				oGridEffectOptions,
-				iGridEffectDuration,
+            $('#brick_content_mosaic .mosaic-group:visible').hide(
+                sMosaicEffectName,
+				oMosaicEffectOptions,
+				iMosaicEffectDuration,
 				function(){
                     // Showing level
 					if(!bLevelLoaded)
 					{
-                        showGridLoader();
+                        showMosaicLoader();
 					    loadChildNodes(sLevelAlias, sItemId);
 					}
 					else
 					{
-					    oLevelElem.show(sGridEffectName, oGridEffectOptions, iGridEffectDuration, function(){ buildBreadcrumb(); });
+					    oLevelElem.show(sMosaicEffectName, oMosaicEffectOptions, iMosaicEffectDuration, function(){ buildBreadcrumb(); });
 					}
 				}
 			);
@@ -80,13 +80,13 @@
 		// Registers the toggle listeners on the tree nodes. Used after every AJAX calls.
 		var registerToggleListeners = function()
 		{
-		    $('#brick_content_grid .grid-drilldown').off('click').on('click', function (oEvent) {
+		    $('#brick_content_mosaic .mosaic-drilldown').off('click').on('click', function (oEvent) {
 				oEvent.preventDefault();
 
                 showLevel($(this).attr('data-level-alias'), $(this).attr('data-item-id'));
 			});
 
-            $('#brick_content_grid .grid-rollup').off('click').on('click', function (oEvent) {
+            $('#brick_content_mosaic .mosaic-rollup').off('click').on('click', function (oEvent) {
                 oEvent.preventDefault();
 
                 var upperlevelId = $(this).attr('data-level-id');
@@ -96,14 +96,14 @@
             });
 
             // 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){
+            $('#brick_content_mosaic .mosaic-item-description a').off('click').on('click', function(oEvent){
                 oEvent.stopPropagation();
 			});
 		};
 		// Registers the filter listeners on the tree.
 		var registerFilterListeners = function()
 		{
-			/*$('#brick_search_field').treeListFilter('#brick_content_grid', iSearchDelay, filterResultsHandler);*/
+			/*$('#brick_search_field').treeListFilter('#brick_content_mosaic', iSearchDelay, filterResultsHandler);*/
 		};
 		// Load current node childnodes throught AJAX
 		var loadChildNodes = function(sLevelAlias, sNodeId)
@@ -119,10 +119,10 @@
 					var sublevel = data.data[index];
 					var sublevelData = {};
 					sublevelData[sublevel.level_alias+"::"+sublevel.id] = sublevel;
-					buildGrid(sublevelData, sLevelAlias+"::"+sNodeId, false);
+					buildMosaic(sublevelData, sLevelAlias+"::"+sNodeId, false);
 				}
 				// Showing sublevel
-                $('#brick_content_grid .grid-group[data-level-id="'+sLevelAlias+"::"+sNodeId+'"]').show(sGridEffectName, oGridEffectOptions, iGridEffectDuration, function(){ buildBreadcrumb(); });
+                $('#brick_content_mosaic .mosaic-group[data-level-id="'+sLevelAlias+"::"+sNodeId+'"]').show(sMosaicEffectName, oMosaicEffectOptions, iMosaicEffectDuration, function(){ buildBreadcrumb(); });
 
 				registerToggleListeners();
 			})
@@ -130,11 +130,11 @@
 				alert('{{ 'Error:XHR:Fail'|dict_s }}');
 			})
 			.always(function(){
-                hideGridLoader();
+                hideMosaicLoader();
 			});
 		};
-		// Build grid nodes from data under the nodeId
-		var buildGrid = function(data, nodeId, isRootLevel)
+		// Build mosaic nodes from data under the nodeId
+		var buildMosaic = function(data, nodeId, isRootLevel)
 		{
 		    if(nodeId === undefined)
 			{
@@ -149,19 +149,19 @@
 			// Building node if necessary
 			if($('div[data-level-id="'+nodeId+'"]').length === 0)
 			{
-                $('#brick_content_grid').append( $('<div></div>').addClass('grid-group').attr('data-level-id', nodeId) );
+                $('#brick_content_mosaic').append( $('<div></div>').addClass('mosaic-group').attr('data-level-id', nodeId) );
 			}
 
 			if(!isRootLevel)
 			{
 			    // Retrieving upper level id
                 var levelIdParts = nodeId.split('::');
-                var upperlevelId = $('.grid-item[data-level-alias="'+levelIdParts[0]+'"][data-item-id="'+levelIdParts[1]+'"]').closest('.grid-group').attr('data-level-id');
+                var upperlevelId = $('.mosaic-item[data-level-alias="'+levelIdParts[0]+'"][data-item-id="'+levelIdParts[1]+'"]').closest('.mosaic-group').attr('data-level-id');
 
                 // Building back button
-                if( $('div[data-level-id="'+nodeId+'"] .grid-group-back').length === 0 ) {
-                    var backElem = $('<div></div>').addClass('grid-group-item').addClass('grid-group-back');
-                    var aElem = $('<a></a>').addClass('grid-item').addClass('grid-rollup').attr('href', '#').attr('data-level-id', upperlevelId).html('<div class="grid-item-text"><span class="glyphicon glyphicon-arrow-left"></span></div>');
+                if( $('div[data-level-id="'+nodeId+'"] .mosaic-group-back').length === 0 ) {
+                    var backElem = $('<div></div>').addClass('mosaic-group-item').addClass('mosaic-group-back');
+                    var aElem = $('<a></a>').addClass('mosaic-item').addClass('mosaic-rollup').attr('href', '#').attr('data-level-id', upperlevelId).html('<div class="mosaic-item-text"><span class="glyphicon glyphicon-arrow-left"></span></div>');
 
                     backElem.append(aElem);
                     $('div[data-level-id="' + nodeId + '"]').append(backElem);
@@ -181,32 +181,32 @@
 				var url = '';
 
                 // Building node
-                var itemElem  = $('<div></div>').addClass('grid-group-item');
-				var aElem   = $('<a></a>').addClass('grid-item').attr('data-item-id', item.id).attr('href', '#').attr('data-level-alias', item.level_alias);
+                var itemElem  = $('<div></div>').addClass('mosaic-group-item');
+				var aElem   = $('<a></a>').addClass('mosaic-item').attr('data-item-id', item.id).attr('href', '#').attr('data-level-alias', item.level_alias);
 				var iItemFlags = 0;
                 // - Adding stub div
-				var textElem = $('<div></div>').addClass('grid-item-text');
+				var textElem = $('<div></div>').addClass('mosaic-item-text');
                 // - Adding image
                 if( (item.image !== undefined) && (item.image !== '') )
                 {
                     iItemFlags += 4;
-                    aElem.append( $('<div></div>').addClass('grid-item-image').append( $('<img />').attr('src', item.image) ) );
+                    aElem.append( $('<div></div>').addClass('mosaic-item-image').append( $('<img />').attr('src', item.image) ) );
                 }
                 // - Adding name
                 if( (item.name !== undefined) && (item.name !== '') )
                 {
                     iItemFlags += 1;
-                    textElem.append( $('<div></div>').addClass('grid-item-name').html(item.name) );
+                    textElem.append( $('<div></div>').addClass('mosaic-item-name').html(item.name) );
                 }
                 // - Adding description
                 if( (item.description !== undefined) && (item.description !== '') )
                 {
                     iItemFlags += 2;
-                    textElem.append( $('<div></div>').addClass('grid-item-description').html(item.description) );
+                    textElem.append( $('<div></div>').addClass('mosaic-item-description').html(item.description) );
 				}
                 aElem.append( textElem );
 				// - Adding CSS class to adjust the layout regarding which properties are available
-				aElem.addClass('grid-item-layout-'+iItemFlags);
+				aElem.addClass('mosaic-item-layout-'+iItemFlags);
                 // - Appending element
 				$('div[data-level-id="'+nodeId+'"]').append(itemElem);
 				itemElem.append(aElem);
@@ -221,7 +221,7 @@
 				switch(levelPrimaryAction.type)
 				{
 					case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_DRILLDOWN') }}':
-						aElem.addClass('grid-drilldown');
+						aElem.addClass('mosaic-drilldown');
 						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);
@@ -254,7 +254,7 @@
 					}
 					
 					// Preparing secondary actions container
-					var actionsElem = $('<div></div>').addClass('grid-group-item-actions');
+					var actionsElem = $('<div></div>').addClass('mosaic-group-item-actions');
 					itemElem.append(actionsElem);
 					// Preparing secondary actions menu
 					var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
@@ -317,10 +317,10 @@
 					}
 					else
 					{
-					    subitemsElem = $('<div></div>').addClass('grid-group').attr('data-level-id', levelId);
+					    subitemsElem = $('<div></div>').addClass('mosaic-group').attr('data-level-id', levelId);
                         $('div[data-level-id="'+nodeId+'"]').after(subitemsElem);
 					}
-					buildGrid(item.subitems, levelId, false);
+					buildMosaic(item.subitems, levelId, false);
 				}				
 			});
 			
@@ -342,14 +342,14 @@
 			    bLeafLevel = true;
 
                 // Retrieving current level id
-                var sCurrentLevelId = $('#brick_content_grid > .grid-group:visible').attr('data-level-id');
+                var sCurrentLevelId = $('#brick_content_mosaic > .mosaic-group:visible').attr('data-level-id');
                 aCurrentLevelParts = sCurrentLevelId.split('::');
 
                 // Emptying breadcrumb
-                $('#grid-breadcrumb > li:not(:first-of-type)').remove();
+                $('#mosaic-breadcrumb > li:not(:first-of-type)').remove();
 
 				// Finding current item
-                oCurrentElem = $('#brick_content_grid .grid-item[data-level-alias="'+aCurrentLevelParts[0]+'"][data-item-id="'+aCurrentLevelParts[1]+'"]');
+                oCurrentElem = $('#brick_content_mosaic .mosaic-item[data-level-alias="'+aCurrentLevelParts[0]+'"][data-item-id="'+aCurrentLevelParts[1]+'"]');
                 if(oCurrentElem.length === 0)
 				{
 				    return false;
@@ -363,15 +363,15 @@
             // Adding level as crumb
 			var oCrumb = $('<li></li>');
 			var oCrumbLink = (bLeafLevel) ? $('<span></span>') : $('<a></a>');
-			oCrumbLink.html( oCurrentElem.find('.grid-item-name').html() );
+			oCrumbLink.html( oCurrentElem.find('.mosaic-item-name').html() );
 			oCrumbLink.attr('data-level-id', aCurrentLevelParts.join('::')).attr('href', '#');
-			oCrumb.append(oCrumbLink).insertAfter('#grid-breadcrumb > li:first-of-type');
+			oCrumb.append(oCrumbLink).insertAfter('#mosaic-breadcrumb > li:first-of-type');
 			if(bLeafLevel)
 			{
                 oCrumb.addClass('active');
             }
 			// Adding listener
-			$('#grid-breadcrumb > li:not(:last-of-type) > a').off('click').on('click', function(oEvent){
+			$('#mosaic-breadcrumb > li:not(:last-of-type) > a').off('click').on('click', function(oEvent){
                 oEvent.preventDefault();
 
 				var levelId = $(this).attr('data-level-id');
@@ -381,12 +381,12 @@
             });
 
 			// Finding parent level
-			var oParentLevelElem = oCurrentElem.closest('.grid-group');
+			var oParentLevelElem = oCurrentElem.closest('.mosaic-group');
 			if(oParentLevelElem.length > 0)
 			{
 			    var sParentLevelId = oParentLevelElem.attr('data-level-id');
 			    var aParentLevelParts = sParentLevelId.split('::');
-			    var oParentElem = $('#brick_content_grid .grid-item[data-level-alias="'+aParentLevelParts[0]+'"][data-item-id="'+aParentLevelParts[1]+'"]');
+			    var oParentElem = $('#brick_content_mosaic .mosaic-item[data-level-alias="'+aParentLevelParts[0]+'"][data-item-id="'+aParentLevelParts[1]+'"]');
 
 			    if(oParentElem.length === 1)
 				{
@@ -398,13 +398,13 @@
 		$(document).ready(function(){
 			// Auto collapse item actions popup
 			$('body').click(function(){
-				$('#brick_content_grid .item-action-wrapper.collapse.in').collapse('hide');
+				$('#brick_content_mosaic .item-action-wrapper.collapse.in').collapse('hide');
 			});
 			
 			// Build the tree (collapsed)
-			showGridLoader();
-			buildGrid(oRawDatas);
-			hideGridLoader();
+			showMosaicLoader();
+			buildMosaic(oRawDatas);
+			hideMosaicLoader();
 			registerFilterListeners();
 		});
 	</script>

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

@@ -564,10 +564,10 @@ footer {
   top: 10px;
   right: 10px;
 }
-.list-group-item:hover > .list-group-item-actions, .grid-group-item:hover > .grid-group-item-actions {
+.list-group-item:hover > .list-group-item-actions, .mosaic-group-item:hover > .mosaic-group-item-actions {
   display: block;
 }
-.list-group-item .list-group-item-actions a:not(:first-child), .grid-group-item .grid-group-item-actions a:not(:first-child) {
+.list-group-item .list-group-item-actions a:not(:first-child), .mosaic-group-item .mosaic-group-item-actions a:not(:first-child) {
   margin-left: 10px;
 }
 .list-group-item .keep-spinning {
@@ -585,11 +585,11 @@ footer {
 table .group-actions {
   position: relative;
 }
-.list-group-item-actions a.glyphicon-menu-hamburger, .grid-group-item-actions a.glyphicon-menu-hamburger, table .group-actions a.glyphicon-menu-hamburger {
+.list-group-item-actions a.glyphicon-menu-hamburger, .mosaic-group-item-actions a.glyphicon-menu-hamburger, table .group-actions a.glyphicon-menu-hamburger {
   cursor: pointer;
   text-decoration: none;
 }
-.list-group-item-actions .item-action-wrapper, .grid-group-item-actions .item-action-wrapper, table .group-actions .item-action-wrapper {
+.list-group-item-actions .item-action-wrapper, .mosaic-group-item-actions .item-action-wrapper, table .group-actions .item-action-wrapper {
   display: none;
   position: absolute;
   z-index: 5;
@@ -599,17 +599,17 @@ table .group-actions {
   -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);
 }
-.list-group-item-actions .item-action-wrapper .glyphicon, .grid-group-item-actions .item-action-wrapper .glyphicon, table .group-actions .item-action-wrapper .glyphicon {
+.list-group-item-actions .item-action-wrapper .glyphicon, .mosaic-group-item-actions .item-action-wrapper .glyphicon, table .group-actions .item-action-wrapper .glyphicon {
   margin-right: 0.6em;
 }
-.list-group-item-actions .item-action-wrapper.collapse.in, .grid-group-item-actions .item-action-wrapper.collapse.in, table .group-actions .item-action-wrapper.collapse.in {
+.list-group-item-actions .item-action-wrapper.collapse.in, .mosaic-group-item-actions .item-action-wrapper.collapse.in, table .group-actions .item-action-wrapper.collapse.in {
   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 {
+.list-group-item-actions .item-action-wrapper .panel-body > p, .mosaic-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 {
+.list-group-item-actions .item-action-wrapper .panel-body > p:last-child, .mosaic-group-item-actions .item-action-wrapper .panel-body > p:last-child, table .group-actions .item-action-wrapper .panel-body > p:last-child {
   margin-bottom: 0px;
 }
 #brick_content_empty {
@@ -619,22 +619,22 @@ table .group-actions {
   font-style: italic;
 }
 /* Loader */
-#brick_tree_overlay, #brick_grid_overlay {
+#brick_tree_overlay, #brick_mosaic_overlay {
   display: none;
   padding: 8% 0px;
   border-radius: 0px 0px 4px 4px;
   font-size: 1em;
 }
 /****************/
-/* - Grid mode  */
+/* - Mosaic mode  */
 /* Note: Some of the CSS is factorised in the "Tree mode" part */
 /****************/
-#brick_content_grid {
+#brick_content_mosaic {
   position: relative;
   padding: 10px 10px 1px 10px;
 }
 /* Breadcrumb */
-#grid-breadcrumb {
+#mosaic-breadcrumb {
   margin-bottom: 5px;
   padding-left: 0px;
   font-size: 12px;
@@ -642,24 +642,24 @@ table .group-actions {
   overflow-x: hidden;
   text-overflow: ellipsis;
 }
-.grid-group {
+.mosaic-group {
   display: none;
 }
 /* Only the first level is showed by default */
-.grid-group:first-of-type {
+.mosaic-group:first-of-type {
   display: block;
 }
-.grid-group-back, .grid-group-item {
+.mosaic-group-back, .mosaic-group-item {
   position: relative;
   height: 55px;
   margin-bottom: 10px;
   text-align: center;
   color: #fff;
 }
-.grid-group-back {
+.mosaic-group-back {
   font-size: 25px;
 }
-.grid-item {
+.mosaic-item {
   display: table;
   width: 100%;
   height: 100%;
@@ -667,64 +667,64 @@ table .group-actions {
   background-color: #585653;
   transition: all linear 0.3s;
 }
-.grid-item, .grid-item:hover, .grid-item:active, .grid-item:focus, .grid-item:visited {
+.mosaic-item, .mosaic-item:hover, .mosaic-item:active, .mosaic-item:focus, .mosaic-item:visited {
   color: #fff;
   text-decoration: none;
 }
-.grid-item:active {
+.mosaic-item:active {
   background-color: #9e510f;
 }
-.grid-item-image, .grid-item-text {
+.mosaic-item-image, .mosaic-item-text {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
 }
-.grid-item-image > img {
+.mosaic-item-image > img {
   max-width: 85%;
 }
-.grid-group-item > .grid-group-item-actions {
+.mosaic-group-item > .mosaic-group-item-actions {
   position: absolute;
   top: 5px;
   right: 5px;
 }
-.grid-group-item-actions > a {
+.mosaic-group-item-actions > a {
   color: #fff;
   text-decoration: none;
 }
-.grid-group-item-actions > a:hover, .grid-group-item-actions > a:focus {
+.mosaic-group-item-actions > a:hover, .mosaic-group-item-actions > a:focus {
   color: #eee;
 }
 @media (max-width: 768px) {
   /* All layout */
   /* Layout 2 */
   /* Layout 5/7 */
-  .grid-group-item > .grid-group-item-actions {
+  .mosaic-group-item > .mosaic-group-item-actions {
     top: 12px;
     right: 6px;
   }
-  .grid-group-item > .grid-group-item-actions > .glyphicon {
+  .mosaic-group-item > .mosaic-group-item-actions > .glyphicon {
     margin-top: 5px;
   }
-  .grid-group-item-actions > a {
+  .mosaic-group-item-actions > a {
     font-size: 20px;
   }
-  .grid-item-image {
+  .mosaic-item-image {
     width: 55px;
     padding: 10px;
   }
-  .grid-item-image > img {
+  .mosaic-item-image > img {
     max-height: 30px;
   }
-  .grid-item-name {
+  .mosaic-item-name {
     font-size: 14px;
   }
-  .grid-item-description {
+  .mosaic-item-description {
     display: none;
   }
-  .grid-item-layout-2 .grid-item-description {
+  .mosaic-item-layout-2 .mosaic-item-description {
     display: block;
   }
-  .grid-item-layout-5 .grid-item-name, .grid-item-layout-7 .grid-item-name {
+  .mosaic-item-layout-5 .mosaic-item-name, .mosaic-item-layout-7 .mosaic-item-name {
     padding-right: 40px;
   }
 }
@@ -732,35 +732,35 @@ table .group-actions {
   /* All layout */
   /* Layout 1 */
   /* Layout 7 */
-  .grid-group-item {
+  .mosaic-group-item {
     display: inline-block;
     width: 32%;
     height: 120px;
     margin-right: 1.95%;
     /* We don't put 2% to keep a margin in case of a bad browser rendering */
   }
-  .grid-item {
+  .mosaic-item {
     padding: 10px;
   }
-  .grid-item:hover, .grid-item:focus {
+  .mosaic-item:hover, .mosaic-item:focus {
     background-color: #ea7d1e;
     box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20);
   }
-  .grid-item-name {
+  .mosaic-item-name {
     font-weight: 600;
     font-size: 12px;
   }
-  .grid-item-description {
+  .mosaic-item-description {
     overflow: hidden;
   }
-  .grid-item-layout-1 .grid-item-name {
+  .mosaic-item-layout-1 .mosaic-item-name {
     font-weight: inherit;
     font-size: 14px;
   }
-  .grid-item-layout-7 .grid-item-image {
+  .mosaic-item-layout-7 .mosaic-item-image {
     display: none;
   }
-  .grid-item-layout-3 .grid-item-description, .grid-item-layout-7 .grid-item-description {
+  .mosaic-item-layout-3 .mosaic-item-description, .mosaic-item-layout-7 .mosaic-item-description {
     margin-top: 10px;
     max-height: 40px;
     font-size: 10px;
@@ -768,27 +768,27 @@ table .group-actions {
 }
 @media (min-width: 992px) {
   /* Layout 7 */
-  .grid-item {
+  .mosaic-item {
     padding: 10px 15px;
   }
-  .grid-group-back {
+  .mosaic-group-back {
     font-size: 40px;
   }
-  .grid-item-layout-7 .grid-item-image {
+  .mosaic-item-layout-7 .mosaic-item-image {
     display: table-cell;
     width: 105px;
     padding-left: 5px;
     padding-right: 18px;
   }
-  .grid-item-layout-7 .grid-item-image > img {
+  .mosaic-item-layout-7 .mosaic-item-image > img {
     max-width: 100%;
   }
-  .grid-item-layout-7 .grid-item-name {
+  .mosaic-item-layout-7 .mosaic-item-name {
     font-size: 12px;
   }
 }
 @media (min-width: 1200px) {
-  .grid-group-item {
+  .mosaic-group-item {
     width: 24%;
     height: 140px;
     margin-right: 1.3%;
@@ -796,17 +796,17 @@ table .group-actions {
 }
 /* Helper classes to remove margin depending on the screen size */
 @media (min-width: 768px) and (max-width: 992px) {
-  .grid-group-item:nth-child(3n) {
+  .mosaic-group-item:nth-child(3n) {
     margin-right: 0px;
   }
 }
 @media (min-width: 992px) and (max-width: 1200px) {
-  .grid-group-item:nth-child(3n) {
+  .mosaic-group-item:nth-child(3n) {
     margin-right: 0px;
   }
 }
 @media (min-width: 1200px) {
-  .grid-group-item:nth-child(4n) {
+  .mosaic-group-item:nth-child(4n) {
     margin-right: 0px;
   }
 }

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

@@ -593,11 +593,11 @@ footer{
 	right: 10px;
 }
 .list-group-item:hover > .list-group-item-actions,
-.grid-group-item:hover > .grid-group-item-actions{
+.mosaic-group-item:hover > .mosaic-group-item-actions{
 	display: block;
 }
 .list-group-item .list-group-item-actions a:not(:first-child),
-.grid-group-item .grid-group-item-actions a:not(:first-child){
+.mosaic-group-item .mosaic-group-item-actions a:not(:first-child){
 	margin-left: 10px;
 }
 .list-group-item .keep-spinning{
@@ -617,13 +617,13 @@ table .group-actions{
 	position: relative;
 }
 .list-group-item-actions a.glyphicon-menu-hamburger,
-.grid-group-item-actions a.glyphicon-menu-hamburger,
+.mosaic-group-item-actions a.glyphicon-menu-hamburger,
 table .group-actions a.glyphicon-menu-hamburger{
 	cursor: pointer;
 	text-decoration: none;
 }
 .list-group-item-actions .item-action-wrapper,
-.grid-group-item-actions .item-action-wrapper,
+.mosaic-group-item-actions .item-action-wrapper,
 table .group-actions .item-action-wrapper
 {
 	display: none;
@@ -636,23 +636,23 @@ table .group-actions .item-action-wrapper
 	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
 }
 .list-group-item-actions .item-action-wrapper .glyphicon,
-.grid-group-item-actions .item-action-wrapper .glyphicon,
+.mosaic-group-item-actions .item-action-wrapper .glyphicon,
 table .group-actions .item-action-wrapper .glyphicon{
 	margin-right: 0.6em;
 }
 .list-group-item-actions .item-action-wrapper.collapse.in,
-.grid-group-item-actions .item-action-wrapper.collapse.in,
+.mosaic-group-item-actions .item-action-wrapper.collapse.in,
 table .group-actions .item-action-wrapper.collapse.in{
 	display: block;
 }
 .list-group-item-actions .item-action-wrapper .panel-body > p,
-.grid-group-item-actions .item-action-wrapper .panel-body > p,
+.mosaic-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,
+.mosaic-group-item-actions .item-action-wrapper .panel-body > p:last-child,
 table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	margin-bottom: 0px;
 }
@@ -666,7 +666,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 
 /* Loader */
 #brick_tree_overlay,
-#brick_grid_overlay{
+#brick_mosaic_overlay{
 	display: none;
 	padding: 8% 0px;
 	border-radius: 0px 0px 4px 4px;
@@ -674,15 +674,15 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 }
 
 /****************/
-/* - Grid mode  */
+/* - Mosaic mode  */
 /* Note: Some of the CSS is factorised in the "Tree mode" part */
 /****************/
-#brick_content_grid{
+#brick_content_mosaic{
   	position: relative;
 	padding: 10px 10px 1px 10px;
 }
 /* Breadcrumb */
-#grid-breadcrumb{
+#mosaic-breadcrumb{
 	margin-bottom: 5px;
 	padding-left: 0px;
 	font-size: 12px;
@@ -691,26 +691,26 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	text-overflow: ellipsis;
 }
 
-.grid-group{
+.mosaic-group{
 	display: none;
 }
 /* Only the first level is showed by default */
-.grid-group:first-of-type{
+.mosaic-group:first-of-type{
 	display: block;
 }
 
-.grid-group-back,
-.grid-group-item{
+.mosaic-group-back,
+.mosaic-group-item{
 	position: relative;
 	height: 55px;
 	margin-bottom: 10px;
 	text-align: center;
 	color: $white;
 }
-.grid-group-back{
+.mosaic-group-back{
 	font-size: 25px;
 }
-.grid-item{
+.mosaic-item{
 	display: table;
 	width: 100%;
 	height: 100%;
@@ -718,139 +718,139 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	background-color: $combodo-dark-gray;
 	transition: all linear 0.3s;
 }
-.grid-item,
-.grid-item:hover,
-.grid-item:active,
-.grid-item:focus,
-.grid-item:visited{
+.mosaic-item,
+.mosaic-item:hover,
+.mosaic-item:active,
+.mosaic-item:focus,
+.mosaic-item:visited{
 	color: $white;
 	text-decoration: none;
 }
-.grid-item:active{
+.mosaic-item:active{
 	background-color: $combodo-orange-darker;
 }
-.grid-item-image,
-.grid-item-text{
+.mosaic-item-image,
+.mosaic-item-text{
 	display: table-cell;
 	text-align: center;
 	vertical-align: middle;
 }
-.grid-item-image > img{
+.mosaic-item-image > img{
 	max-width: 85%;
 }
-.grid-group-item > .grid-group-item-actions{
+.mosaic-group-item > .mosaic-group-item-actions{
 	position: absolute;
 	top: 5px;
 	right: 5px;
 }
-.grid-group-item-actions > a{
+.mosaic-group-item-actions > a{
   color: $white;
   text-decoration: none;
 }
-.grid-group-item-actions > a:hover,
-.grid-group-item-actions > a:focus{
+.mosaic-group-item-actions > a:hover,
+.mosaic-group-item-actions > a:focus{
   color: #EEEEEE;
 }
 
 @media (max-width: 768px) {
-	.grid-group-item > .grid-group-item-actions{
+	.mosaic-group-item > .mosaic-group-item-actions{
 		top: 12px;
 		right: 6px;
 	}
-	.grid-group-item > .grid-group-item-actions > .glyphicon{
+	.mosaic-group-item > .mosaic-group-item-actions > .glyphicon{
 		margin-top: 5px;
 	}
-	.grid-group-item-actions > a{
+	.mosaic-group-item-actions > a{
 		font-size: 20px;
 	}
 	/* All layout */
-	.grid-item-image{
+	.mosaic-item-image{
 		width: 55px;
 		padding: 10px;
 	}
-	.grid-item-image > img{
+	.mosaic-item-image > img{
 		max-height: 30px;
 	}
-	.grid-item-name{
+	.mosaic-item-name{
 		font-size: 14px;
 	}
-	.grid-item-description{
+	.mosaic-item-description{
 		display: none;
 	}
 	/* Layout 2 */
-	.grid-item-layout-2 .grid-item-description{
+	.mosaic-item-layout-2 .mosaic-item-description{
 		display: block;
 	}
 	/* Layout 5/7 */
-	.grid-item-layout-5 .grid-item-name,
-	.grid-item-layout-7 .grid-item-name{
+	.mosaic-item-layout-5 .mosaic-item-name,
+	.mosaic-item-layout-7 .mosaic-item-name{
 		padding-right: 40px;
 	}
 }
 @media (min-width: 768px) {
-	.grid-group-item{
+	.mosaic-group-item{
 		display: inline-block;
 		width: 32%;
 		height:	120px;
 		margin-right: 1.95%; /* We don't put 2% to keep a margin in case of a bad browser rendering */
 	}
-	.grid-item{
+	.mosaic-item{
 		padding: 10px;
 	}
-	.grid-item:hover,
-	.grid-item:focus{
+	.mosaic-item:hover,
+	.mosaic-item:focus{
 		background-color: $combodo-orange;
 		box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20);
 	}
 
 	/* All layout */
-	.grid-item-name{
+	.mosaic-item-name{
 		font-weight: 600;
 		font-size: 12px;
 	}
-	.grid-item-description{
+	.mosaic-item-description{
 		overflow: hidden;
 	}
 	/* Layout 1 */
-	.grid-item-layout-1 .grid-item-name{
+	.mosaic-item-layout-1 .mosaic-item-name{
 		font-weight: inherit;
 		font-size: 14px;
 	}
 	/* Layout 7 */
-	.grid-item-layout-7 .grid-item-image{
+	.mosaic-item-layout-7 .mosaic-item-image{
 		display: none;
 	}
-	.grid-item-layout-3 .grid-item-description,
-	.grid-item-layout-7 .grid-item-description{
+	.mosaic-item-layout-3 .mosaic-item-description,
+	.mosaic-item-layout-7 .mosaic-item-description{
 		margin-top: 10px;
 		max-height: 40px;
 		font-size: 10px;
 	}
 }
 @media (min-width: 992px) {
-	.grid-item{
+	.mosaic-item{
 		padding: 10px 15px;
 	}
-	.grid-group-back{
+	.mosaic-group-back{
 		font-size: 40px;
 	}
 
 	/* Layout 7 */
-	.grid-item-layout-7 .grid-item-image{
+	.mosaic-item-layout-7 .mosaic-item-image{
 		display: table-cell;
 		width: 105px;
 		padding-left: 5px;
 		padding-right: 18px;
 	}
-	.grid-item-layout-7 .grid-item-image > img{
+	.mosaic-item-layout-7 .mosaic-item-image > img{
 		max-width: 100%;
 	}
-	.grid-item-layout-7 .grid-item-name{
+	.mosaic-item-layout-7 .mosaic-item-name{
 		font-size: 12px;
 	}
 }
 @media (min-width: 1200px) {
-	.grid-group-item{
+	.mosaic-group-item{
 		width: 24%;
 		height: 140px;
 		margin-right: 1.3%;
@@ -859,17 +859,17 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 
 /* Helper classes to remove margin depending on the screen size */
 @media (min-width: 768px) and (max-width: 992px) {
-	.grid-group-item:nth-child(3n){
+	.mosaic-group-item:nth-child(3n){
 		margin-right: 0px;
 	}
 }
 @media (min-width: 992px) and (max-width: 1200px) {
-	.grid-group-item:nth-child(3n){
+	.mosaic-group-item:nth-child(3n){
 		margin-right: 0px;
 	}
 }
 @media (min-width: 1200px) {
-	.grid-group-item:nth-child(4n){
+	.mosaic-group-item:nth-child(4n){
 		margin-right: 0px;
 	}
 }

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

@@ -356,7 +356,7 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
 
 //== Grid system
 //
-//## Define your custom responsive grid.
+//## Define your custom responsive mosaic.
 
 //** Number of columns in the grid.
 $grid-columns:              12 !default;

datamodels/2.x/itop-portal-base/ru.dict.itop-portal-base.php

@@ -68,7 +68,7 @@ Dict::Add('RU RU', 'Russian', 'Русский', array(
     'Brick:Portal:Browse:Name' => 'Просмотр элементов',
     'Brick:Portal:Browse:Mode:List' => 'Список',
     'Brick:Portal:Browse:Mode:Tree' => 'Дерево',
-    'Brick:Portal:Browse:Mode:Grid' => 'Tiles~~',
+    'Brick:Portal:Browse:Mode:Mosaic' => 'Mosaic~~',
     'Brick:Portal:Browse:Action:Drilldown' => 'Детализация',
     'Brick:Portal:Browse:Action:View' => 'Подробно',
     'Brick:Portal:Browse:Action:Edit' => 'Изменить',

datamodels/2.x/itop-tickets/datamodel.itop-tickets.xml

@@ -1119,7 +1119,7 @@
 						<availables>
 							<mode id="list"/>
 							<mode id="tree"/>
-							<mode id="grid"/>
+							<mode id="mosaic"/>
 						</availables>
 						<default>list</default>
 					</browse_modes>