N°3535 Migrate dashboard editor modal to new design

css/backoffice/components/_all.scss

@@ -17,6 +17,7 @@
 @import "modal";
 @import "dashlet/all";
 @import "input/all";
+@import "prop";
 
 @import "title";
 @import "datatable";

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;
+	}
+}

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";

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;
+}

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;
+		}
+	}
+}

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;
+}

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";

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";

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;
+}

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);
 }