Customer portal : LinkedSet widget UX improvements part 2 (Collapsing widget)

SVN:trunk[4088]

datamodels/2.x/itop-portal-base/portal/src/views/bricks/object/mode_create.html.twig

@@ -94,6 +94,9 @@
 			}
 			oScrollTimeout = setTimeout(scrollHandler_{{ sFormIdSanitized }}, 50);
 		});
+		$({% if tIsModal == true %}'.modal.in'{% else %}window{% endif %}).off('shown.bs.collapse hidden.bs.collapse').on('shown.bs.collapse hidden.bs.collapse', function () {
+			scrollHandler_{{ sFormIdSanitized }}();
+		});
 		// - First time call
 		scrollHandler_{{ sFormIdSanitized }}();
 		

datamodels/2.x/itop-portal-base/portal/src/views/bricks/object/mode_search_regular.html.twig

@@ -44,11 +44,21 @@
 	var getColumnsDefinition = function()
 	{
 		var aColumnsDefinition = [];
-		var sFirstColumnId = Object.keys(oColumnProperties)[0];
+		
+		// Checkbox / Radio
+		aColumnsDefinition.push({
+				"width": "auto",
+				"searchable": false,
+				"sortable": false,
+				"title": "",
+				"type": "html",
+				"data": "",
+				"render": function(data, type, row){ return '<span class="row_input"><input type="{{ (bMultipleSelect) ? 'checkbox' : 'radio' }}" name="{{ sTargetAttCode }}" /></span>'; }
+		});
 
 		for(sKey in oColumnProperties)
 		{
-			// Level main column
+			// Object attribute
 			aColumnsDefinition.push({
 				"width": "auto",
 				"searchable": true,
@@ -72,11 +82,6 @@
 					}
 					cellElem.attr('data-object-id', row.id).html('<span>' + row.attributes[data].value + '</span>');
 					
-					if(data === sFirstColumnId)
-					{
-						cellElem.prepend('<span class="row_input"><input type="{{ (bMultipleSelect) ? 'checkbox' : 'radio' }}" name="{{ sTargetAttCode }}" /></span>');
-					}
-
 					return cellElem.prop('outerHTML');
 				},
 			});
@@ -113,6 +118,7 @@
 			},
 			"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "{{ 'Portal:Datatables:Language:DisplayLength:All'|dict_s }}"]],
 			"displayLength": {{ constant('Combodo\\iTop\\Portal\\Controller\\ObjectController::DEFAULT_COUNT_PER_PAGE_LIST') }},
+			"order": [[1, "asc"]],
 			"dom": '<"row"<"col-sm-6"l><"col-sm-6"<f><"visible-xs"p>>>t<"row"<"col-sm-6"i><"col-sm-6"p>>',
 			"columns": getColumnsDefinition(),
 			"select": {

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

@@ -598,6 +598,43 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	margin: 10px;
 	overflow-x: auto;
 }
+/* LinkedSet*/
+.form_linkedset_toggler,
+.form_linkedset_toggler:hover,
+.form_linkedset_toggler:focus{
+	margin-left: 0.4em;
+	text-decoration: none;
+	color: inherit;
+}
+.form_linkedset_toggler > .text:before{
+	content: "(";
+}
+.form_linkedset_toggler > .text:after{
+	content: ")";
+}
+.form_linkedset_toggler > .glyphicon{
+	margin-left: 0.5em;
+	font-size: 0.85em;
+	color: #d9230f; /* TODO : SASS this to primary color */
+}
+/* - DataTables : Loader */
+.form_linkedset_wrapper .datatables_overlay{
+	padding: 8px !important;
+}
+.form_linkedset_wrapper .overlay_content{
+	font-size: 0.6em;
+}
+.form_linkedset_wrapper .content_loader{
+	margin: 0px;
+}
+.form_linkedset_wrapper .content_loader .icon{
+	height: 23px;
+}
+/* - DataTables : Fit the table in the form */
+.form_linkedset_wrapper .dataTables_wrapper{
+	margin-bottom: 5px;
+	padding: 0px;
+}
 /* FileUpload */
 .fileupload_field_content{
 	padding: 8px 23px;
@@ -817,14 +854,10 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
     color: #c09853;
 }
 
-/* DataTables : Fit the table in the form */
-.form_linkedset_wrapper .dataTables_wrapper{
-	margin-bottom: 5px;
-	padding: 0px;
-}
 /* DataTables : Selection inputs */
+.dataTable.table th span.row_input,
 .dataTable.table td span.row_input{
 	display: inline-block;
-	margin-right: 5px;
-	vertical-align: middle;
+	width: 100%;
+	text-align: center;
 }

datamodels/2.x/itop-portal-base/portal/web/index.php

@@ -49,6 +49,9 @@ if (UserRights::GetContactId() == 0)
 	die(Dict::S('Portal:ErrorNoContactForThisUser'));
 }
 
+// Checking if debug param is on
+$bDebug = (isset($_REQUEST['debug']) && ($_REQUEST['debug'] === 'true') );
+
 // Initializing Silex framework
 $oApp = new Silex\Application();
 
@@ -65,7 +68,7 @@ $oApp->register(new Silex\Provider\TwigServiceProvider(), array(
 ));
 
 // Configuring Silex application
-$oApp['debug'] = true;
+$oApp['debug'] = $bDebug;
 $oApp['combodo.absolute_url'] = utils::GetAbsoluteUrlAppRoot();
 $oApp['combodo.portal.base.absolute_url'] = utils::GetAbsoluteUrlAppRoot() . 'env-' . utils::GetCurrentEnvironment() . '/itop-portal-base/portal/web/';
 $oApp['combodo.portal.instance.absolute_url'] = utils::GetAbsoluteUrlAppRoot() . 'env-' . utils::GetCurrentEnvironment() . '/' . PORTAL_MODULE_ID . '/';