N°2847 Allow user to minimize/close alerts

css/backoffice/components/_alert.scss

@@ -28,6 +28,13 @@ $ibo-alert--title--padding-bottom: 4px !default;
 $ibo-alert--title--highlight--width: 4px !default;
 $ibo-alert--title--highlight--height: 100% !default;
 
+$ibo-alert-minimized--padding-y: 8px !default;
+$ibo-alert-minimized--title--padding-bottom: 0px !default;
+
+$ibo-alert--action-button--top: 5px !default;
+$ibo-alert--maximize-minimize-button--right: 30px !default;
+$ibo-alert--close-button--right: 10px !default;
+
 $ibo-alert-colors: (
 		'primary': ($ibo-color-primary-200, $ibo-color-primary-700, $ibo-color-primary-900),
 		'secondary': ($ibo-color-secondary-200, $ibo-color-secondary-700, $ibo-color-secondary-900),
@@ -80,12 +87,38 @@ $ibo-alert-colors: (
 		width: $ibo-alert--title--highlight--width;
 		height: $ibo-alert--title--highlight--height;
 	}
-
+	
 	.ibo-alert--title {
 		padding-bottom: $ibo-alert--title--padding-bottom;
 
 		@extend %ibo-font-ral-bol-150;
 	}
+	
+	&.ibo-is-opened {
+		.ibo-alert--minimize-button {
+			display: block;
+		}
+		.ibo-alert--maximize-button {
+			display: none;
+		}
+	}
+	&:not(.ibo-is-opened){
+		padding: $ibo-alert-minimized--padding-y $ibo-alert--padding-x;
+		
+		.ibo-alert--title {
+			padding-bottom: $ibo-alert-minimized--title--padding-bottom;
+		}
+		.ibo-alert--minimize-button {
+			display: none;
+		}
+		.ibo-alert--maximize-button {
+			display: block;
+		}
+		.ibo-alert--body {
+			display: none;
+		}
+	}
+
 }
 
 /* Spacing between alert blocks */
@@ -96,3 +129,19 @@ $ibo-alert-colors: (
 .ibo-alert + :not(.ibo-alert) {
 	margin-top: $ibo-alert--spacing-top--with-other-blocks;
 }
+
+.ibo-alert--action-button{
+	position: absolute;
+	cursor: pointer;
+	top: $ibo-alert--action-button--top;
+	
+	&:hover i{
+		opacity: 0.8;
+	}
+	&.ibo-alert--maximize-button, &.ibo-alert--minimize-button{
+		right: $ibo-alert--maximize-minimize-button--right;
+	}
+	&.ibo-alert--close-button{
+		right: $ibo-alert--close-button--right;
+	}
+}

js/components/alert.js

@@ -0,0 +1,73 @@
+/*
+ * 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
+ */
+
+;
+$(function()
+{
+	// the widget definition, where 'itop' is the namespace,
+	// 'breadcrumbs' the widget name
+	$.widget( 'itop.alert',
+		{
+			// default options
+			options:
+				{},
+			css_classes:
+				{
+					opened: 'ibo-is-opened',
+				},
+			js_selectors:
+				{
+					close_button: '[data-role="ibo-alert--close-button"]',
+					minimize_button: '[data-role="ibo-alert--minimize-button"]',
+					maximize_button: '[data-role="ibo-alert--maximize-button"]',
+				},
+
+			// the constructor
+			_create: function () {
+				console.log('alo');
+				this._bindEvents();
+			},
+			// events bound via _bind are removed automatically
+			// revert other modifications here
+			_destroy: function () {
+			},
+			_bindEvents: function () {
+				const me = this;
+				const oBodyElem = $('body');
+
+				this.element.find(this.js_selectors.close_button).on('click', function (oEvent) {
+					me._onCloseButtonClick(oEvent);
+				});
+				this.element.find(this.js_selectors.minimize_button).on('click', function (oEvent) {
+					me._onMinimizeButtonClick(oEvent);
+				});
+				this.element.find(this.js_selectors.maximize_button).on('click', function (oEvent) {
+					me._onMaximizeButtonClick(oEvent);
+				});
+			},
+			_onCloseButtonClick: function (oEvent) {
+				this.element.hide();
+			},
+			_onMinimizeButtonClick: function (oEvent) {
+				this.element.removeClass(this.css_classes.opened);
+			},
+			_onMaximizeButtonClick: function (oEvent) {
+				this.element.addClass(this.css_classes.opened);
+			},
+		})
+});

sources/application/UI/Component/Alert/Alert.php

@@ -34,6 +34,10 @@ class Alert extends UIBlock
 	// Overloaded constants
 	public const BLOCK_CODE = 'ibo-alert';
 	public const HTML_TEMPLATE_REL_PATH = 'components/alert/layout';
+	public const JS_TEMPLATE_REL_PATH = 'components/alert/layout';
+	public const JS_FILES_REL_PATH = [
+		'js/components/alert.js',
+	];
 
 	// Specific constants
 	/** @var string ENUM_COLOR_PRIMARY */

templates/components/alert/layout.html.twig

@@ -1,4 +1,7 @@
-<div id="{{ oUIBlock.GetId() }}" class="ibo-alert ibo-is-{{ oUIBlock.GetColor() }}">
-    <div class="ibo-alert--title">{{ oUIBlock.GetTitle() }}</div>
+<div id="{{ oUIBlock.GetId() }}" class="ibo-alert ibo-is-{{ oUIBlock.GetColor() }} ibo-is-opened">
+	<div class="ibo-alert--action-button ibo-alert--maximize-button" data-role="ibo-alert--maximize-button"><i class="fas fa-caret-down"></i></div>
+	<div class="ibo-alert--action-button ibo-alert--minimize-button" data-role="ibo-alert--minimize-button"><i class="fas fa-caret-up"></i></div>
+	<div class="ibo-alert--action-button ibo-alert--close-button" data-role="ibo-alert--close-button"><i class="fas fa-times"></i></div>
+	<div class="ibo-alert--title">{{ oUIBlock.GetTitle() }}</div>
     <div class="ibo-alert--body">{{ oUIBlock.GetContent()|raw }}</div>
 </div>

templates/components/alert/layout.js.twig

@@ -0,0 +1 @@
+$('#{{ oUIBlock.GetId() }}').alert();