N°3535 Migrate dashboard editor modal to new design

2026-02-12 23:14:18 +01:00 · 2021-01-29 17:02:05 +01:00
parent 7d1a2668a1
commit 9ebf0ce1e5
25 changed files with 336 additions and 69 deletions
--- a/application/dashboard.class.inc.php
+++ b/application/dashboard.class.inc.php
@@ -442,11 +442,11 @@ abstract class Dashboard
 	public function RenderProperties($oPage, $aExtraParams = array())
 	{
 		// menu to pick a layout and edit other properties of the dashboard
-		$oPage->add('<div class="ui-widget-content ui-corner-all"><div class="ui-widget-header ui-corner-all" style="text-align:center; padding: 2px;">'.Dict::S('UI:DashboardEdit:Properties').'</div>');
+		$oPage->add('<div class="ui-widget-content ui-corner-all ibo-dashboard--properties"><div class="ui-widget-header ui-corner-all ibo-dashboard--properties--title">'.Dict::S('UI:DashboardEdit:Properties').'</div>');
 		$sUrl = utils::GetAbsoluteUrlAppRoot();

-		$oPage->add('<div style="text-align:center">'.Dict::S('UI:DashboardEdit:Layout').'</div>');
-		$oPage->add('<div id="select_layout" style="text-align:center">');
+		$oPage->add('<div class="ibo-dashboard--properties--subtitle">'.Dict::S('UI:DashboardEdit:Layout').'</div>');
+		$oPage->add('<div id="select_layout" class="ibo-dashboard--properties--layout-list">');
 		foreach( get_declared_classes() as $sLayoutClass)
 		{
 			if (is_subclass_of($sLayoutClass, 'DashboardLayout'))
@@ -457,7 +457,7 @@ abstract class Dashboard
 					$aCallSpec = array($sLayoutClass, 'GetInfo');
 					$aInfo = call_user_func($aCallSpec);
 					$sChecked = ($this->sLayoutClass == $sLayoutClass) ? 'checked' : '';
-					$oPage->add('<input type="radio" name="layout_class" '.$sChecked.' value="'.$sLayoutClass.'" id="layout_'.$sLayoutClass.'"><label for="layout_'.$sLayoutClass.'"><img src="'.$sUrl.$aInfo['icon'].'" /></label>'); // title="" on either the img or the label does nothing !
+					$oPage->add('<input type="radio" name="layout_class" '.$sChecked.' value="'.$sLayoutClass.'" id="layout_'.$sLayoutClass.'"><label for="layout_'.$sLayoutClass.'"><img src="'.$sUrl.$aInfo['icon'].'" class="ibo-dashboard--properties--icon"/></label>'); // title="" on either the img or the label does nothing !
 				}
 			}
 		}
@@ -488,7 +488,8 @@ abstract class Dashboard
 		$oPage->add_ready_script(
 <<<EOF
 	// Note: the title gets deleted by the validation mechanism
-	$("#attr_auto_reload_sec").tooltip({items: 'input', content: '$sRateTitle'});
+	$("#attr_auto_reload_sec").attr('data-tooltip-content', '$sRateTitle');
+	CombodoGlobalToolbox.InitTooltipFromMarkup($("#attr_auto_reload_sec"));
 	$("#attr_auto_reload_sec").prop('disabled', !$('#attr_auto_reload').is(':checked'));
 	
 	$('#attr_auto_reload').change( function(ev) {
@@ -578,19 +579,19 @@ JS
 	public function RenderDashletsSelection(WebPage $oPage)
 	{
 		// Toolbox/palette to drag and drop dashlets
-		$oPage->add('<div class="ui-widget-content ui-corner-all"><div class="ui-widget-header ui-corner-all" style="text-align:center; padding: 2px;">'.Dict::S('UI:DashboardEdit:Dashlets').'</div>');
+		$oPage->add('<div class="ui-widget-content ui-corner-all ibo-dashboard--available-dashlets"><div class="ui-widget-header ui-corner-all ibo-dashboard--available-dashlet--title">'.Dict::S('UI:DashboardEdit:Dashlets').'</div>');
 		$sUrl = utils::GetAbsoluteUrlAppRoot();

-		$oPage->add('<div id="select_dashlet" style="text-align:center; max-height:120px; overflow-y:auto;">');
+		$oPage->add('<div id="select_dashlet" class="ibo-dashboard--available-dashlets--list">');
 		$aAvailableDashlets = $this->GetAvailableDashlets();
 		foreach($aAvailableDashlets as $sDashletClass => $aInfo)
 		{
-			$oPage->add('<span dashlet_class="'.$sDashletClass.'" class="dashlet_icon ui-widget-content ui-corner-all" id="dashlet_'.$sDashletClass.'" title="'.$aInfo['label'].'" style="width:34px; height:34px; display:inline-block; margin:2px;"><img src="'.$sUrl.$aInfo['icon'].'" /></span>');
+			$oPage->add('<span dashlet_class="'.$sDashletClass.'" class="ibo-dashlet--icon dashlet_icon ui-widget-content ui-corner-all" id="dashlet_'.$sDashletClass.'" title="'.$aInfo['label'].'"><img src="'.$sUrl.$aInfo['icon'].'" /></span>');
 		}
 		$oPage->add('</div>');

 		$oPage->add('</div>');
-		$oPage->add_ready_script("$('.dashlet_icon').draggable({helper: 'clone', appendTo: 'body', zIndex: 10000, revert:'invalid'});");
+		$oPage->add_ready_script("$('.dashlet_icon').draggable({cursor: 'move', helper: 'clone', appendTo: 'body', zIndex: 10000, revert:'invalid'});");
 	}

 	/**
@@ -600,12 +601,12 @@ JS
 	public function RenderDashletsProperties(WebPage $oPage, $aExtraParams = array())
 	{
 		// Toolbox/palette to edit the properties of each dashlet
-		$oPage->add('<div class="ui-widget-content ui-corner-all"><div class="ui-widget-header ui-corner-all" style="text-align:center; padding: 2px;">'.Dict::S('UI:DashboardEdit:DashletProperties').'</div>');
+		$oPage->add('<div class="ui-widget-content ui-corner-all ibo-dashlet--properties"><div class="ui-widget-header ui-corner-all ibo-dashlet--properties--title">'.Dict::S('UI:DashboardEdit:DashletProperties').'</div>');

 		/** @var \DashboardLayoutMultiCol $oLayout */
 		$oLayout = new $this->sLayoutClass();

-		$oPage->add('<div id="dashlet_properties" style="text-align:center">');
+		$oPage->add('<div id="dashlet_properties">');
 		foreach($this->aCells as $iCellIdx => $aCell)
 		{
 			/** @var \Dashlet $oDashlet */
@@ -1221,12 +1222,12 @@ EOF
 		}
 		$aRenderParams['dashboard_div_id'] = $aExtraParams['dashboard_div_id'];
 		$sJSExtraParams = json_encode($aExtraParams);
-		$oPage->add('<div id="dashboard_editor">');
+		$oPage->add('<div id="dashboard_editor" class="ibo-dashboard-editor">');
 		$oPage->add('<div class="ui-layout-center">');
 		$this->SetCustomFlag(true);
 		$this->Render($oPage, true, $aRenderParams);
 		$oPage->add('</div>');
-		$oPage->add('<div class="ui-layout-east">');
+		$oPage->add('<div class="ui-layout-east ibo-dashboard-editor--pane">');
 		$this->RenderProperties($oPage, $aExtraParams);
 		$this->RenderDashletsSelection($oPage);
 		$this->RenderDashletsProperties($oPage, $aExtraParams);
@@ -1261,7 +1262,24 @@ $('#dashboard_editor').dialog({
 	modal: true,
 	title: '$sDialogTitle',
 	buttons: [
-	{ text: "$sOkButtonLabel", click: function() {
+	{ text: "$sCancelButtonLabel",
+	 class: "ibo-is-alternative",
+	 click: function() {
+		var oDashboard = $('.itop-dashboard').data('itopRuntimedashboard');
+		if (oDashboard.is_modified())
+		{
+			if (!confirm('$sCancelConfirmationMessage'))
+			{
+				return;
+			}
+		}
+		window.bLeavingOnUserAction = true;
+		$(this).dialog( "close" );
+		$(this).remove();
+	} },
+	{ text: "$sOkButtonLabel",
+	 class: "ibo-is-primary",
+	 click: function() {
 		var oDashboard = $('.itop-dashboard').data('itopRuntimedashboard');
 		if (oDashboard.is_dirty())
 		{
@@ -1277,19 +1295,6 @@ $('#dashboard_editor').dialog({
 		window.bLeavingOnUserAction = true;
 		oDashboard.save($(this));
 	} },
-	{ text: "$sCancelButtonLabel", click: function() {
-		var oDashboard = $('.itop-dashboard').data('itopRuntimedashboard');
-		if (oDashboard.is_modified())
-		{
-			if (!confirm('$sCancelConfirmationMessage'))
-			{
-				return;
-			}
-		}
-		window.bLeavingOnUserAction = true;
-		$(this).dialog( "close" );
-		$(this).remove();
-	} },
 	],
 	close: function() { $(this).remove(); }
 });
@@ -1307,20 +1312,16 @@ $('#dashboard_editor .ui-layout-center').runtimedashboard({
 	new_dashlet_parameters: {operation: 'new_dashlet'}
 });

-dashboard_prop_size = GetUserPreference('dashboard_prop_size', 350);
-$('#dashboard_editor').layout({
-	east: {
-		minSize: 200,
-		size: dashboard_prop_size,
-		togglerLength_open: 0,
-		togglerLength_closed: 0, 
-		onresize_end: function(name, elt, state, options, layout)
-		{
-			if (state.isSliding == false)
-			{
-				SetUserPreference('dashboard_prop_size', state.size, true);
-			}
-		},
+var dashboard_prop_size = GetUserPreference('dashboard_prop_size', 400);
+$('#dashboard_editor > .itop-dashboard').width($('#dashboard_editor').width() - dashboard_prop_size);
+
+// We check when we finish click on the pane with the resize slider
+// if the pane size changed (% 5px), if it's the case we save the value in userpref
+$('#dashboard_editor > .itop-dashboard').on('mouseup',function (){
+	var iWidthDiff = $(this).width() - ($('#dashboard_editor').width()  - dashboard_prop_size);
+	if( Math.abs(iWidthDiff) > 5){
+		dashboard_prop_size = iWidthDiff;
+		SetUserPreference('dashboard_prop_size', $('#dashboard_editor').width() - $(this).width(), true);
 	}
 });

--- a/application/dashlet.class.inc.php
+++ b/application/dashlet.class.inc.php
@@ -872,7 +872,7 @@ class DashletPlainText extends Dashlet
 	{
 		return array(
 			'label' => Dict::S('UI:DashletPlainText:Label'),
-			'icon' => 'images/dashlet-text.png',
+			'icon' => 'images/dashlets/icons8-text-box-48.png',
 			'description' => Dict::S('UI:DashletPlainText:Description'),
 		);
 	}
@@ -981,7 +981,7 @@ class DashletObjectList extends Dashlet
 	{
 		return array(
 			'label' => Dict::S('UI:DashletObjectList:Label'),
-			'icon' => 'images/dashlet-list.png',
+			'icon' => 'images/dashlets/icons8-list-48.png',
 			'description' => Dict::S('UI:DashletObjectList:Description'),
 		);
 	}
@@ -1581,7 +1581,7 @@ abstract class DashletGroupBy extends Dashlet
 		// Note: no need to translate, should never be visible to the end-user!
 		return array(
 			'label' => 'Objects grouped by...',
-			'icon' => 'images/dashlet-object-grouped.png',
+			'icon' => 'images/dashlets/icons8-transaction-list-48.png',
 			'description' => 'Grouped objects dashlet (abstract)',
 		);
 	}
@@ -1645,7 +1645,7 @@ class DashletGroupByPie extends DashletGroupBy
 	{
 		return array(
 			'label' => Dict::S('UI:DashletGroupByPie:Label'),
-			'icon' => 'images/dashlet-pie-chart.png',
+			'icon' => 'images/dashlets/icons8-pie-chart-48.png',
 			'description' => Dict::S('UI:DashletGroupByPie:Description'),
 		);
 	}
@@ -1720,7 +1720,7 @@ class DashletGroupByBars extends DashletGroupBy
 	{
 		return array(
 			'label' => Dict::S('UI:DashletGroupByBars:Label'),
-			'icon' => 'images/dashlet-bar-chart.png',
+			'icon' => 'images/dashlets/icons8-bar-chart-48.png',
 			'description' => Dict::S('UI:DashletGroupByBars:Description'),
 		);
 	}
@@ -1821,7 +1821,7 @@ class DashletGroupByTable extends DashletGroupBy
 		return array(
 			'label' => Dict::S('UI:DashletGroupByTable:Label'),
 			'description' => Dict::S('UI:DashletGroupByTable:Description'),
-			'icon' => 'images/dashlet-groupby-table.png',
+			'icon' => 'images/dashlets/icons8-transaction-list-48.png',
 		);
 	}

@@ -1950,7 +1950,7 @@ class DashletHeaderStatic extends Dashlet
 	{
 		return array(
 			'label' => Dict::S('UI:DashletHeaderStatic:Label'),
-			'icon' => 'images/dashlet-header.png',
+			'icon' => 'images/dashlets/icons8-header-48.png',
 			'description' => Dict::S('UI:DashletHeaderStatic:Description'),
 		);
 	}
@@ -2256,7 +2256,7 @@ class DashletHeaderDynamic extends Dashlet
 	{
 		return array(
 			'label' => Dict::S('UI:DashletHeaderDynamic:Label'),
-			'icon' => 'images/dashlet-header-stats.png',
+			'icon' => 'images/dashlets/icons8-header-altered-48.png',
 			'description' => Dict::S('UI:DashletHeaderDynamic:Description'),
 		);
 	}
@@ -2368,7 +2368,7 @@ class DashletBadge extends Dashlet
 	{
 		return array(
 			'label' => Dict::S('UI:DashletBadge:Label'),
-			'icon' => 'images/dashlet-badge.png',
+			'icon' => 'images/dashlets/icons8-badge-48.png',
 			'description' => Dict::S('UI:DashletBadge:Description'),
 		);
 	}
--- a/application/forms.class.inc.php
+++ b/application/forms.class.inc.php
@@ -107,7 +107,7 @@ class DesignerForm
 				$aRow = $oField->Render($oP, $sFormId);
 				if ($oField->IsVisible())
 				{
-					$sValidation = '&nbsp;<span class="prop_apply">'.$this->GetValidationArea($oField->GetFieldId()).'</span>';
+					$sValidation = '<span class="prop_apply ibo-prop--apply">'.$this->GetValidationArea($oField->GetFieldId()).'</span>';
 					$sField = $aRow['value'].$sValidation;
 					$aDetails[] = array('label' => $aRow['label'], 'value' => $sField);
 				}
@@ -230,18 +230,18 @@ class DesignerForm
 				if ($oField->IsVisible())
 				{
 					$sFieldId = $this->GetFieldId($oField->GetCode());
-					$sValidation = $this->GetValidationArea($sFieldId, '<span title="Apply" class="ui-icon ui-icon-circle-check"/>');
-					$sValidationFields = '</td><td class="prop_icon prop_apply">'.$sValidation.'</td><td  class="prop_icon prop_cancel"><span title="Revert" class="ui-icon ui-icon-circle-close"/></td>'.$this->EndRow();
+					$sValidation = $this->GetValidationArea($sFieldId, '<span data-tooltip-content="Apply"><i class="fas fa-check"></i></span>');
+					$sValidationFields = '</td><td class="prop_icon prop_apply ibo-prop--apply">'.$sValidation.'</td><td  class="prop_icon prop_cancel ibo-prop--cancel"><span data-tooltip-content="Revert"><i class="fas fa-times"></i></span></td>'.$this->EndRow();
 					
 					$sPath = $this->GetHierarchyPath().'/'.$oField->GetCode();
 					
 					if (is_null($aRow['label']))
 					{
-						$sReturn .= $this->StartRow($sFieldId).'<td class="prop_value" colspan="2">'.$aRow['value'];
+						$sReturn .= $this->StartRow($sFieldId).'<td class="prop_value ibo-field--value" colspan="2">'.$aRow['value'];
 					}
 					else
 					{
-						$sReturn .= $this->StartRow($sFieldId).'<td class="prop_label">'.$aRow['label'].'</td><td class="prop_value">'.$aRow['value'];
+						$sReturn .= $this->StartRow($sFieldId).'<td class="prop_label ibo-field--label">'.$aRow['label'].'</td><td class="prop_value ibo-field--value">'.$aRow['value'];
 					}
 					if (!($oField instanceof DesignerFormSelectorField) && !($oField instanceof DesignerMultipleSubFormField))
 					{
@@ -266,6 +266,7 @@ class DesignerForm
 					$this->AddReadyScript(
 <<<EOF
 $('#row_$sFieldId').$sWidgetClass({parent_selector: $sNotifyParentSelectorJS, field_id: '$sFieldId', equals: $sHandlerEquals, get_field_value: $sHandlerGetValue, auto_apply: $sAutoApply, value: '', submit_to: '$sActionUrl', submit_parameters: $sJSSubmitParams $sJSExtraParams });
+CombodoGlobalToolbox.InitTooltipFromMarkup($('#$sFormId [data-tooltip-content]'));
 EOF
 					);
 				}
@@ -548,7 +549,7 @@ EOF
 	
 	public function GetValidationArea($sId, $sContent = '')
 	{
-		return "<span style=\"display:inline-block;width:20px;\" id=\"v_{$sId}\"><span class=\"ui-icon ui-icon-alert\"></span>$sContent</span>";
+		return "<span id=\"v_{$sId}\">$sContent</span>";
 	}
 	public function GetAsyncActionClass()
 	{
@@ -716,7 +717,7 @@ class DesignerFormField
 		$this->bMandatory = false;
 		$this->bReadOnly = false;
 		$this->bAutoApply = false;
-		$this->aCSSClasses = array();
+		$this->aCSSClasses = array('ibo-input');
 		$this->bDisplayed = true;
 		$this->aWidgetExtraParams = array();
 	}
@@ -1055,6 +1056,12 @@ EOF

 class DesignerLongTextField extends DesignerTextField
 {
+	public function __construct($sCode, $sLabel = '', $defaultValue = '')
+	{
+		parent::__construct($sCode, $sLabel, $defaultValue);
+		$this->aCSSClasses[] = 'ibo-input-text-area';
+	}
+
 	public function Render(WebPage $oP, $sFormId, $sRenderMode='dialog')
 	{
 		$sId = $this->oForm->GetFieldId($this->sCode);
@@ -1178,6 +1185,7 @@ class DesignerComboField extends DesignerFormField
 		$this->bMultipleSelection = false;
 		$this->bOtherChoices = false;
 		$this->sNullLabel = Dict::S('UI:SelectOne');
+		$this->aCSSClasses[] = 'ibo-input-select';

 		$this->bAutoApply = true;
 		$this->bSorted = true; // Sorted by default
@@ -1315,6 +1323,7 @@ class DesignerBooleanField extends DesignerFormField
 	{
 		parent::__construct($sCode, $sLabel, $defaultValue);
 		$this->bAutoApply = true;
+		$this->aCSSClasses[] = 'ibo-input-checkbox';
 	}
 	
 	public function Render(WebPage $oP, $sFormId, $sRenderMode='dialog')
@@ -1597,6 +1606,7 @@ class DesignerFormSelectorField extends DesignerFormField
 		$this->defaultRealValue = $defaultValue;
 		$this->aSubForms = array();
 		$this->bSorted = true;
+		$this->aCSSClasses[] = 'ibo-input-select';
 	}

 	public function IsSorted()
--- a/css/backoffice/components/_all.scss
+++ b/css/backoffice/components/_all.scss
@@ -17,6 +17,7 @@
@import "modal";
@import "dashlet/all";
@import "input/all";
+@import "prop";

@import "title";
@import "datatable";
--- a/css/backoffice/components/_prop.scss
+++ b/css/backoffice/components/_prop.scss
@@ -0,0 +1,28 @@
+$ibo-prop--apply--padding-left: 12px !default;
+$ibo-prop--cancel--padding-left: 7px !default;
+
+$ibo-prop--apply-cancel--span--height: 28px !default;
+$ibo-prop--apply-cancel--span--width: 32px !default;
+
+.ibo-prop--apply{
+	padding-left: $ibo-prop--apply--padding-left;
+	> span{
+		@extend .ibo-is-green;
+	}
+}
+.ibo-prop--cancel{
+	padding-left: $ibo-prop--cancel--padding-left;
+	> span{
+		@extend .ibo-is-red;
+	}
+}
+.ibo-prop--apply, .ibo-prop--cancel{
+	> span{
+		display: block;
+		height: $ibo-prop--apply-cancel--span--height;
+		width: $ibo-prop--apply-cancel--span--width;
+		text-align: center;
+		@extend .ibo-button;
+		@extend .ibo-is-alternative;
+	}
+}
--- a/css/backoffice/components/input/_all.scss
+++ b/css/backoffice/components/input/_all.scss
@@ -5,8 +5,11 @@

@import "input";
@import "input-select";
+@import "input-checkbox";
@import "input-date";
@import "input-datetime";
@import "input-duration";
+@import "input-select-icon";
@import "input-string";
@import "input-tagset";
+@import "input-textarea";
--- a/css/backoffice/components/input/_input-checkbox.scss
+++ b/css/backoffice/components/input/_input-checkbox.scss
@@ -0,0 +1,7 @@
+$ibo-input-checkbox--height: 16px !default;
+$ibo-input-checkbox--width: auto !default;
+
+.ibo-input-checkbox{
+	height: $ibo-input-checkbox--height;
+	width: $ibo-input-checkbox--width;
+}
--- a/css/backoffice/components/input/_input-select-icon.scss
+++ b/css/backoffice/components/input/_input-select-icon.scss
@@ -0,0 +1,44 @@
+$ibo-input-select-icon--icon--padding-right: 4px !default;
+
+$ibo-input-select-icon--menu--z-index: 21 !default;
+$ibo-input-select-icon--menu--max-height: 300px !default;
+
+$ibo-input-select-icon--menu--icon--max-height: 80px !default;
+$ibo-input-select-icon--menu--icon--max-width: 45px !default;
+$ibo-input-select-icon--menu--icon--margin-right: 10px !default;
+
+.ibo-input-select-icon{	
+	>img{
+		max-height: 100%;
+		max-width: 100%;
+		padding-right: $ibo-input-select-icon--icon--padding-right;
+	}
+}
+
+.ibo-input-select-icon--menu {
+	position: absolute;
+	z-index: $ibo-input-select-icon--menu--z-index;
+	max-height: $ibo-input-select-icon--menu--max-height;
+	overflow-x: hidden;
+	overflow-y: auto;
+	@extend .ibo-popover-menu;
+	@extend .ibo-is-opened;
+	flex-wrap: nowrap;
+}
+
+.ibo-input-select-icon--menu--item {
+	@extend .ibo-popover-menu--item;
+
+	> * {
+		width: 100%;
+		white-space: nowrap;
+		overflow-x: hidden;
+		text-overflow: ellipsis;
+
+		> .ibo-input-select-icon--menu--icon {
+			max-width: $ibo-input-select-icon--menu--icon--max-height;
+			max-height: $ibo-input-select-icon--menu--icon--max-width;
+			margin-right: $ibo-input-select-icon--menu--icon--margin-right;
+		}
+	}
+}
--- a/css/backoffice/components/input/_input-textarea.scss
+++ b/css/backoffice/components/input/_input-textarea.scss
@@ -0,0 +1,5 @@
+$ibo-input-text-area--min-height: 4rem !default;
+
+.ibo-input-text-area{
+	min-height: $ibo-input-text-area--min-height;
+}
--- a/css/backoffice/layout/_all.scss
+++ b/css/backoffice/layout/_all.scss
@@ -23,7 +23,7 @@
@import "tab-container/tab";
@import "multi-column/multi-column";
@import "multi-column/column";
-@import "dashboard/dashboard";
+@import "dashboard/all";
@import "wizard-container/wizard-container";
@import "object-details";
@import "activity-panel/activity-panel";
--- a/css/backoffice/layout/dashboard/_all.scss
+++ b/css/backoffice/layout/dashboard/_all.scss
@@ -0,0 +1,20 @@
+/*!
+ * Copyright (C) 2013-2020 Combodo SARL
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+@import "dashboard";
+@import "dashboard-editor";
--- a/css/backoffice/layout/dashboard/_dashboard-editor.scss
+++ b/css/backoffice/layout/dashboard/_dashboard-editor.scss
@@ -0,0 +1,104 @@
+$ibo-dashboard-editor--pane-padding: 16px 30px 16px 15px !default;
+
+$ibo-dashlet--icon--height: 34px !default;
+$ibo-dashlet--icon--width: $ibo-dashlet--icon--height !default;
+$ibo-dashlet--icon--margin: 2px 5px !default;
+
+$ibo-dashboard--properties--title--padding-bottom: 2rem !default;
+
+$ibo-dashboard--properties--layout-list--padding-bottom: 12px !default;
+
+$ibo-dashboard--properties--layout-list--button--margin: 0 15px 0 5px !default;
+
+$ibo-dashboard-editor--padding: 0 !default;
+
+$ibo-dashboard-editor--dashboard--border-right: solid 1px $ibo-color-grey-200 !default;
+$ibo-dashboard-editor--dashboard--padding: 16px 15px 16px 30px !default;
+
+$ibo-dashlet--delete--top: 7px !default;
+$ibo-dashlet--delete--right: 9px !default;
+$ibo-dashlet--delete--padding: 2px 6px !default;
+$ibo-dashlet--delete--z-index: 21 !default;
+
+
+.ibo-dashboard-editor--pane{
+	flex-grow: 1;
+	padding: $ibo-dashboard-editor--pane-padding;
+	overflow: auto;
+}
+
+.ibo-dashlet--icon{
+	display: inline-block; 
+	height: $ibo-dashlet--icon--height; 
+	width: $ibo-dashlet--icon--width; 
+	margin: $ibo-dashlet--icon--margin;
+	cursor: grab;
+	&:active{
+		cursor: move;
+	}
+}
+.ibo-dashboard--properties,
+.ibo-dashboard--available-dashlets,
+.ibo-dashlet--properties{
+	display: flex;
+	flex-direction: column;
+	padding-bottom: 20px;
+	table{
+		width: 100%;
+		text-align: left;
+		td{
+			margin-bottom: 14px;
+			.ibo-field{
+				@extend %ibo-font-ral-med-100;				
+			}
+		}
+	}
+}
+.ibo-dashboard--properties--title{
+	padding-bottom: $ibo-dashboard--properties--title--padding-bottom;
+	@extend %ibo-font-ral-med-250;
+}
+.ibo-dashboard--properties--subtitle,
+.ibo-dashboard--available-dashlet--title,
+.ibo-dashlet--properties--title{
+	@extend .ibo-fieldset-legend;
+	@extend %ibo-font-ral-med-150;
+}
+
+.ibo-dashboard--properties--layout-list {
+	display: flex;
+	justify-content: center;
+	padding-bottom: $ibo-dashboard--properties--layout-list--padding-bottom;
+	> .ui-button {
+		display: inline-block;
+		height: auto;
+		margin: $ibo-dashboard--properties--layout-list--button--margin;
+	}
+}
+.ibo-dashboard--available-dashlets--list{
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+}
+
+#dashboard_editor{
+	display: flex;
+	flex-direction: row;
+	padding: $ibo-dashboard-editor--padding;
+	> .itop-dashboard{
+		resize: horizontal;
+		overflow: scroll;
+		border-right: $ibo-dashboard-editor--dashboard--border-right;
+		padding: $ibo-dashboard-editor--dashboard--padding;
+	}
+}
+.ibo-dashlet--delete{
+	position: absolute;
+	top: $ibo-dashlet--delete--top;
+	right: $ibo-dashlet--delete--right;
+	padding: $ibo-dashlet--delete--padding;
+	z-index: $ibo-dashlet--delete--z-index;
+	@extend .ibo-button;
+	@extend .ibo-is-alternative;
+	@extend .ibo-is-danger;
+}
--- a/css/backoffice/vendors/_jqueryui.scss
+++ b/css/backoffice/vendors/_jqueryui.scss
@@ -54,7 +54,7 @@ $ibo-input-date--ui-datepicker-header--border-radius: 4px !default;
 		float: left;
 		margin: .1em 0;
 		white-space: nowrap;
-		width: 90%;
+		width: 100%;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
@@ -252,6 +252,12 @@ $ibo-input-date--ui-datepicker-header--border-radius: 4px !default;
 	top: -5px;
 }

+// Layout
+
+.ui-layout-pane {
+	overflow: auto;
+}
+
 // Date picker

 .ui-datepicker{
@@ -471,4 +477,42 @@ $ibo-input-date--ui-datepicker-header--border-radius: 4px !default;
 			border-left-width: 1px;
 		}
 	}
+}
+
+// Helper
+
+.ui-helper-hidden {
+	display: none;
+}
+.ui-helper-reset {
+	margin: 0;
+	padding: 0;
+	// border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;
+}
+.ui-helper-clearfix {
+	&:before {
+		content: "";
+		display: table;
+		border-collapse: collapse;
+	}
+	&:after {
+		content: "";
+		display: table;
+		border-collapse: collapse;
+		clear: both;
+	}
+}
+.ui-helper-zfix {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	opacity: 0;
+	filter: Alpha(Opacity=0);
 }
--- a/images/dashlets/icons8-badge-48.png
+++ b/images/dashlets/icons8-badge-48.png
--- a/images/dashlets/icons8-bar-chart-48.png
+++ b/images/dashlets/icons8-bar-chart-48.png
--- a/images/dashlets/icons8-header-1-48.png
+++ b/images/dashlets/icons8-header-1-48.png
--- a/images/dashlets/icons8-header-48.png
+++ b/images/dashlets/icons8-header-48.png
--- a/images/dashlets/icons8-header-altered-48.png
+++ b/images/dashlets/icons8-header-altered-48.png
--- a/images/dashlets/icons8-list-48.png
+++ b/images/dashlets/icons8-list-48.png
--- a/images/dashlets/icons8-pie-chart-48.png
+++ b/images/dashlets/icons8-pie-chart-48.png
--- a/images/dashlets/icons8-text-box-48.png
+++ b/images/dashlets/icons8-text-box-48.png
--- a/images/dashlets/icons8-transaction-list-48.png
+++ b/images/dashlets/icons8-transaction-list-48.png
--- a/js/dashlet.js
+++ b/js/dashlet.js
@@ -30,7 +30,7 @@ $(function()
 		{
 			var me = this; 

-			this.closeBox = $('<div class="close-box"/>');
+			this.closeBox = $('<div class="ibo-dashlet--delete close-box"/>').append('<i class="fas fa-trash ibo-button--icon"></i>');
 			this.closeBox
 				.click(function() { me._remove_dashlet(); })
 				.prependTo(this.element);
--- a/js/icon_select.js
+++ b/js/icon_select.js
@@ -44,7 +44,7 @@ $(function()
 			}
 			this.oImg = $('<img src="'+sIcon+'" style="vertical-align: middle;" foo="bar">');								
 			this.oLabel = $('<span>'+sLabel+'</span>');
-			this.oButton = $('<button type="button" class="icon-select icon-select-dropdown"><div style="display: inline-block;vertical-align: middle;"><span class="ui-icon ui-icon-triangle-1-s"/></div></button>');
+			this.oButton = $('<button type="button" class="icon-select icon-select-dropdown ibo-input ibo-input-select-icon"><div style="display: inline-block;vertical-align: middle;"><span class="ui-icon ui-icon-triangle-1-s"/></div></button>');
 			this.oButton.prepend(this.oLabel).prepend(this.oImg);
 			this.oButton.click(function(event, ui) {
 				//me._cleanAllMenus();
@@ -105,10 +105,10 @@ $(function()
 				me._cleanAllMenus();
 			});
 			var oMenu =
-				$('<ul class="menu-icon-select">');
+				$('<ul class="menu-icon-select ibo-input-select-icon--menu">');
 			for(var i in this.options.items)
 			{
-				var oItem = $('<li><div value="'+i+'"><img src="'+this.options.items[i].icon+'" style="vertical-align: middle;"/>'+this.options.items[i].label+'<div></li>');
+				var oItem = $('<li class="ibo-input-select-icon--menu--item"><div value="'+i+'"><img class="ibo-input-select-icon--menu--icon" src="'+this.options.items[i].icon+'" style="vertical-align: middle;"/>'+this.options.items[i].label+'<div></li>');
 				oItem.on('click',function(data) {me._on_icon_selection(data);} );
 				oMenu.append(oItem);
 			}
--- a/js/property_field.js
+++ b/js/property_field.js
@@ -26,7 +26,7 @@ $(function()
 			var me = this;

 			this.element
-				.addClass( "itop-property-field" )
+				.addClass( "itop-property-field ibo-field" )
 				.bind('apply_changes.itop-property-field', function(){me._do_apply();} );
 				
 			this.bModified = false;
@@ -52,19 +52,19 @@ $(function()
 				this.element.addClass("itop-property-field-modified");
 				if (this.options.can_apply)
 				{
-					this.element.find(".prop_icon span.ui-icon-circle-check").css({visibility: ''});					
+					this.element.find(".prop_icon.ibo-prop--apply").css({visibility: ''});					
 				}
 				else
 				{
-					this.element.find(".prop_icon span.ui-icon-circle-check").css({visibility: 'hidden'});
+					this.element.find(".prop_icon.ibo-prop--apply").css({visibility: 'hidden'});
 				}
-				this.element.find(".prop_icon span.ui-icon-circle-close").css({visibility: ''});
+				this.element.find(".prop_icon.ibo-prop--cancel").css({visibility: ''});
 			}
 			else
 			{
 				this.element.removeClass("itop-property-field-modified");
-				this.element.find(".prop_icon span.ui-icon-circle-check").css({visibility: 'hidden'});
-				this.element.find(".prop_icon span.ui-icon-circle-close").css({visibility: 'hidden'});
+				this.element.find(".prop_icon.ibo-prop--apply").css({visibility: 'hidden'});
+				this.element.find(".prop_icon.ibo-prop--cancel").css({visibility: 'hidden'});
 			}
 		},