N°2847 Add alert component

css/backoffice/components/_alert.scss

@@ -0,0 +1,59 @@
+$ibo-alert--padding-y: 18px !default;
+$ibo-alert--padding-x: 20px !default;
+$ibo-alert--border-radius: 2px !default;
+
+$ibo-alert--title--padding-bottom: 4px !default;
+
+$ibo-alert--title--highlight--width: 4px !default;
+$ibo-alert--title--highlight--height: 100% !default;
+
+$ibo-alert-colors: (
+        'grey' : ($ibo-color-grey-200, $ibo-color-grey-700, $ibo-color-grey-900),
+        'red': ($ibo-color-red-200, $ibo-color-red-700, $ibo-color-red-900),
+        'orange' : ($ibo-color-orange-200, $ibo-color-orange-700, $ibo-color-orange-900),
+        'green': ($ibo-color-green-200, $ibo-color-green-700, $ibo-color-green-900),
+        'blue-grey': ($ibo-color-blue-grey-200, $ibo-color-blue-grey-700, $ibo-color-blue-grey-900),
+        'blue': ($ibo-color-blue-200, $ibo-color-blue-700, $ibo-color-blue-900),
+        'cyan': ($ibo-color-cyan-100, $ibo-color-blue-700, $ibo-color-cyan-900),
+        'pink': ($ibo-color-pink-200, $ibo-color-pink-700, $ibo-color-pink-900),
+        '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),
+) !default;
+
+@each $sColor, $aColorValues in $ibo-alert-colors{
+  $bg-color: nth($aColorValues, 1);
+  $highlight-color: nth($aColorValues, 2);
+  $text-color: nth($aColorValues, 3);
+  .ibo-alert.ibo-is-#{$sColor}{
+    background-color: $bg-color;
+    color: $text-color;
+    &::before{
+      background-color: $highlight-color;
+    }
+  }
+}
+
+.ibo-alert{
+  position: relative;
+  padding: $ibo-alert--padding-y $ibo-alert--padding-x;
+  border-radius: $ibo-alert--border-radius;
+  
+  @extend %ibo-font-ral-med-150;
+  
+  .ibo-alert--title{
+    padding-bottom: $ibo-alert--title--padding-bottom;
+    
+    @extend %ibo-font-ral-bol-150;
+  }
+}
+.ibo-alert::before{
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: '';
+
+  border-radius: $ibo-alert--border-radius 0 0 $ibo-alert--border-radius;
+  width: $ibo-alert--title--highlight--width;
+  height: $ibo-alert--title--highlight--height;
+}

css/backoffice/components/_all.scss

@@ -16,6 +16,7 @@
  * You should have received a copy of the GNU Affero General Public License
  */
 
+@import "alert";
 @import "button";
 @import "breadcrumbs";
 @import "quick-create";

lib/composer/autoload_classmap.php

@@ -148,6 +148,7 @@ return array(
     'Combodo\\iTop\\Application\\TwigBase\\Controller\\PageNotFoundException' => $baseDir . '/sources/application/TwigBase/Controller/Controller.php',
     'Combodo\\iTop\\Application\\TwigBase\\Twig\\Extension' => $baseDir . '/sources/application/TwigBase/Twig/Extension.php',
     'Combodo\\iTop\\Application\\TwigBase\\Twig\\TwigHelper' => $baseDir . '/sources/application/TwigBase/Twig/TwigHelper.php',
+    'Combodo\\iTop\\Application\\UI\\Component\\Alert\\Alert\\Alert' => $baseDir . '/sources/application/UI/Component/Alert/Alert.php',
     'Combodo\\iTop\\Application\\UI\\Component\\Breadcrumbs\\Breadcrumbs' => $baseDir . '/sources/application/UI/Component/Breadcrumbs/Breadcrumbs.php',
     'Combodo\\iTop\\Application\\UI\\Component\\Button\\Button\\Button' => $baseDir . '/sources/application/UI/Component/Button/Button.php',
     'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearch' => $baseDir . '/sources/application/UI/Component/GlobalSearch/GlobalSearch.php',

lib/composer/autoload_static.php

@@ -378,6 +378,7 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
         'Combodo\\iTop\\Application\\TwigBase\\Controller\\PageNotFoundException' => __DIR__ . '/../..' . '/sources/application/TwigBase/Controller/Controller.php',
         'Combodo\\iTop\\Application\\TwigBase\\Twig\\Extension' => __DIR__ . '/../..' . '/sources/application/TwigBase/Twig/Extension.php',
         'Combodo\\iTop\\Application\\TwigBase\\Twig\\TwigHelper' => __DIR__ . '/../..' . '/sources/application/TwigBase/Twig/TwigHelper.php',
+        'Combodo\\iTop\\Application\\UI\\Component\\Alert\\Alert\\Alert' => __DIR__ . '/../..' . '/sources/application/UI/Component/Alert/Alert.php',
         'Combodo\\iTop\\Application\\UI\\Component\\Breadcrumbs\\Breadcrumbs' => __DIR__ . '/../..' . '/sources/application/UI/Component/Breadcrumbs/Breadcrumbs.php',
         'Combodo\\iTop\\Application\\UI\\Component\\Button\\Button\\Button' => __DIR__ . '/../..' . '/sources/application/UI/Component/Button/Button.php',
         'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearch' => __DIR__ . '/../..' . '/sources/application/UI/Component/GlobalSearch/GlobalSearch.php',

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

@@ -0,0 +1,119 @@
+<?php
+/**
+ * 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
+ */
+
+namespace Combodo\iTop\Application\UI\Component\Alert\Alert;
+
+
+
+use Combodo\iTop\Application\UI\UIBlock;
+
+/**
+ * Class Alert
+ *
+ * @author Stephen Abello <stephen.abello@combodo.com>
+ * @package Combodo\iTop\Application\UI\Component\Alert\Alert
+ * @since 2.8.0
+ */
+class Alert extends UIBlock
+{
+	// Overloaded constants
+	const BLOCK_CODE = 'ibo-alert';
+	const HTML_TEMPLATE_REL_PATH = 'components/alert/layout';
+	const JS_TEMPLATE_REL_PATH = 'components/alert/layout';
+
+	/** @var string $sTitle */
+	protected $sTitle;
+	/** @var array $sMainText */
+	protected $sMainText;
+	/** @var string $sColor */
+	protected $sColor;
+
+	/**
+	 * Alert constructor.
+	 *
+	 * @param string $sId
+	 * @param string $sTitle
+	 * @param string $sMainText
+	 * @param string $sColor
+	 */
+	public function __construct($sId, $sTitle = '', $sMainText = '', $sColor = 'secondary')
+	{
+		$this->sTitle = $sTitle;
+		$this->sMainText = $sMainText;
+		$this->sColor = $sColor;
+		parent::__construct($sId);
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetTitle()
+	{
+		return $this->sTitle;
+	}
+
+	/**
+	 * @param string $sTitle
+	 * @return $this
+	 */
+	public function SetTitle($sTitle)
+	{
+		$this->sTitle = $sTitle;
+		return $this;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetMainText()
+	{
+		return $this->sMainText;
+	}
+
+	/**
+	 * @param string $aMainText
+	 * @return $this
+	 */
+	public function SetMainText($aMainText)
+	{
+		$this->sMainText = $aMainText;
+		return $this;
+	}
+	
+	
+
+	/**
+	 * @return string
+	 */
+	public function GetColor()
+	{
+		return $this->sColor;
+	}
+
+	/**
+	 * @param string $sColor
+	 * @return $this
+	 */
+	public function SetColor($sColor)
+	{
+		$this->sColor = $sColor;
+		return $this;
+	}
+
+}

templates/components/alert/layout.html.twig

@@ -0,0 +1,4 @@
+<div id="{{ oUIBlock.GetId() }}" class="ibo-alert ibo-is-{{ oUIBlock.GetColor() }}">
+    <div class="ibo-alert--title">{{ oUIBlock.GetTitle() }}</div>
+    <div class="ibo-alert--body">{{ oUIBlock.GetMainText() }}</div>
+</div>