Add Popover menu and subitems such as URL and JS items.

application/applicationextension.inc.php

@@ -869,7 +869,7 @@ abstract class ApplicationPopupMenuItem
 class URLPopupMenuItem extends ApplicationPopupMenuItem
 {
 	/** @ignore */
-	protected $sURL;
+	protected $sUrl;
 	/** @ignore */
 	protected $sTarget;
 
@@ -878,20 +878,32 @@ class URLPopupMenuItem extends ApplicationPopupMenuItem
 	 *
 	 * @param string $sUID The unique identifier of this menu in iTop... make sure you pass something unique enough
 	 * @param string $sLabel The display label of the menu (must be localized)
-	 * @param string $sURL If the menu is an hyperlink, provide the absolute hyperlink here
+	 * @param string $sUrl If the menu is an hyperlink, provide the absolute hyperlink here
 	 * @param string $sTarget In case the menu is an hyperlink and a specific target is needed (_blank for example), pass it here
 	 */
-	public function __construct($sUID, $sLabel, $sURL, $sTarget = '_top')
+	public function __construct($sUID, $sLabel, $sUrl, $sTarget = '_top')
 	{
 		parent::__construct($sUID, $sLabel);
-		$this->sURL = $sURL;
+		$this->sUrl = $sUrl;
 		$this->sTarget = $sTarget;
 	}
 
 	/** @ignore */
 	public function GetMenuItem()
 	{
-		return array('label' => $this->GetLabel(), 'url' => $this->sURL, 'target' => $this->sTarget, 'css_classes' => $this->aCssClasses);
+		return array('label' => $this->GetLabel(), 'url' => $this->GetUrl(), 'target' => $this-> GetTarget(), 'css_classes' => $this->aCssClasses);
+	}
+	
+	/** @ignore */
+	public function GetUrl()
+	{
+		return $this->sUrl;
+	}
+
+	/** @ignore */
+	public function GetTarget()
+	{
+		return $this->sTarget;
 	}
 }
 
@@ -905,7 +917,9 @@ class URLPopupMenuItem extends ApplicationPopupMenuItem
 class JSPopupMenuItem extends ApplicationPopupMenuItem
 {
 	/** @ignore */
-	protected $sJSCode;
+	protected $sJsCode;
+	/** @ignore */
+	protected $sUrl;
 	/** @ignore */
 	protected $aIncludeJSFiles;
 
@@ -923,7 +937,8 @@ class JSPopupMenuItem extends ApplicationPopupMenuItem
 	public function __construct($sUID, $sLabel, $sJSCode, $aIncludeJSFiles = array())
 	{
 		parent::__construct($sUID, $sLabel);
-		$this->sJSCode = $sJSCode;
+		$this->sJsCode = $sJSCode;
+		$this->sUrl = '#';
 		$this->aIncludeJSFiles = $aIncludeJSFiles;
 	}
 
@@ -933,9 +948,9 @@ class JSPopupMenuItem extends ApplicationPopupMenuItem
 		// Note: the semicolumn is a must here!
 		return array(
 			'label' => $this->GetLabel(),
-			'onclick' => $this->sJSCode.'; return false;',
-			'url' => '#',
-			'css_classes' => $this->aCssClasses,
+			'onclick' => $this->GetJsCode().'; return false;',
+			'url' => $this->GetUrl(),
+			'css_classes' => $this->GetCssClasses(),
 		);
 	}
 
@@ -944,6 +959,18 @@ class JSPopupMenuItem extends ApplicationPopupMenuItem
 	{
 		return $this->aIncludeJSFiles;
 	}
+	
+	/** @ignore */
+	public function GetJsCode()
+	{
+		return $this->sJsCode;
+	}
+	
+	/** @ignore */
+	public function GetUrl()
+	{
+		return $this->sUrl;
+	}
 }
 
 /**

css/backoffice/components/_all.scss

@@ -19,3 +19,5 @@
 @import "breadcrumbs";
 @import "quick-create";
 @import "global-search";
+@import "popover-menu";
+@import "popover-menu-item";

css/backoffice/components/_popover-menu-item.scss

@@ -0,0 +1,34 @@
+/*!
+ * 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
+ */
+
+/* SCSS variables */
+$ibo-popover-menu--item--text-color: $ibo-color-grey-900 !default;
+$ibo-popover-menu--item--hyperlink-color: $ibo-popover-menu--item--text-color !default;
+
+.ibo-popover-menu--item{
+  padding: 12px 24px 12px 16px;
+  color: $ibo-popover-menu--item--text-color;
+  @extend %ibo-font-ral-nor-200;
+  a {
+    color: $ibo-popover-menu--item--text-color;
+  }
+  &:hover{
+    background-color: var(--ibo-color-grey-200);
+    color: inherit;
+  }
+}

css/backoffice/components/_popover-menu.scss

@@ -0,0 +1,47 @@
+/*!
+ * 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
+ */
+
+/* SCSS variables */
+$ibo-popover-menu--background-color: $ibo-color-white-100 !default;
+$ibo-popover-menu--border-radius: 3px !default;
+$ibo-popover-menu--padding: 0 !default;
+
+.ibo-popover-menu{
+  display: none;
+  flex-direction: column;
+  padding: $ibo-popover-menu--padding;
+  background-color: $ibo-popover-menu--background-color;
+  @extend %ibo-elevation-300;
+  border-radius: $ibo-popover-menu--border-radius;
+  flex-wrap: wrap;
+  position: absolute;
+  
+  &.ibo-is-opened{
+    display: flex;
+  }
+}
+
+
+.ibo-popover-menu--section{
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  margin: 0px 0px;
+  width: 100%;
+  @extend %ibo-text-truncated-with-ellipsis;
+}

css/backoffice/layout/_navigation-menu.scss

@@ -438,4 +438,8 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
 	margin-bottom: $ibo-navigation-menu--menu-nodes-title--margin-bottom;
 	@extend %ibo-font-ral-nor-350;
 	@extend %ibo-text-truncated-with-ellipsis;
+}
+.ibo-navigation-menu--user-menu-container{
+	position: absolute;
+	bottom: 10px;
 }

js/components/popover-menu.js

@@ -0,0 +1,77 @@
+/*
+ * 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.popover-menu',
+		{
+			// default options
+			options:
+				{
+
+				},
+			css_classes:
+				{
+					opened: 'ibo-is-opened',
+				},
+			js_selectors:
+				{
+					menu: '[data-role="ibo-popover-menu"]',
+					section: '[data-role="ibo-popover-menu--section"]',
+					item: '[data-role="ibo-popover-menu--item"]',
+				},
+
+			// the constructor
+			_create: function()
+			{
+				this._bindEvents();
+			},
+			// events bound via _bind are removed automatically
+			// revert other modifications here
+			_destroy: function()
+			{
+				this.element.removeClass('ibo-quick-create');
+			},
+			_bindEvents: function()
+			{
+				const me = this;
+				const oBodyElem = $('body');
+
+				this.element.find(this.js_selectors.item).on('click', function(oEvent){
+					me._closePopup();
+				});
+			},
+
+			// Methods
+			_isDrawerPopup: function()
+			{
+				return this.element.hasClass(this.css_classes.opened);
+			},
+			_openPopup: function()
+			{
+				this.element.addClass(this.css_classes.opened);
+			},
+			_closePopup: function()
+			{
+				this.element.removeClass(this.css_classes.opened);
+			},
+		});
+});

lib/composer/autoload_classmap.php

@@ -156,7 +156,7 @@ return array(
     'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\PopoverMenuFactory' => $baseDir . '/sources/application/UI/Component/PopoverMenu/PopoverMenuFactory.php',
     'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\PopoverMenuItem\\JsPopoverMenuItem' => $baseDir . '/sources/application/UI/Component/PopoverMenu/PopoverMenuItem/JsPopoverMenuItem.php',
     'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\PopoverMenuItem\\PopoverMenuItem' => $baseDir . '/sources/application/UI/Component/PopoverMenu/PopoverMenuItem/PopoverMenuItem.php',
-    'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\PopoverMenuItem\\PopupMenuItemFactory' => $baseDir . '/sources/application/UI/Component/PopoverMenu/PopoverMenuItem/PopupMenuItemFactory.php',
+    'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\PopoverMenuItem\\PopoverMenuItemFactory' => $baseDir . '/sources/application/UI/Component/PopoverMenu/PopoverMenuItem/PopoverMenuItemFactory.php',
     'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\PopoverMenuItem\\UrlPopoverMenuItem' => $baseDir . '/sources/application/UI/Component/PopoverMenu/PopoverMenuItem/UrlPopoverMenuItem.php',
     'Combodo\\iTop\\Application\\UI\\Component\\QuickCreate\\QuickCreate' => $baseDir . '/sources/application/UI/Component/QuickCreate/QuickCreate.php',
     'Combodo\\iTop\\Application\\UI\\Component\\QuickCreate\\QuickCreateFactory' => $baseDir . '/sources/application/UI/Component/QuickCreate/QuickCreateFactory.php',

lib/composer/autoload_real.php

@@ -13,6 +13,9 @@ class ComposerAutoloaderInit0018331147de7601e7552f7da8e3bb8b
         }
     }
 
+    /**
+     * @return \Composer\Autoload\ClassLoader
+     */
     public static function getLoader()
     {
         if (null !== self::$loader) {

lib/composer/autoload_static.php

@@ -386,7 +386,7 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
         'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\PopoverMenuFactory' => __DIR__ . '/../..' . '/sources/application/UI/Component/PopoverMenu/PopoverMenuFactory.php',
         'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\PopoverMenuItem\\JsPopoverMenuItem' => __DIR__ . '/../..' . '/sources/application/UI/Component/PopoverMenu/PopoverMenuItem/JsPopoverMenuItem.php',
         'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\PopoverMenuItem\\PopoverMenuItem' => __DIR__ . '/../..' . '/sources/application/UI/Component/PopoverMenu/PopoverMenuItem/PopoverMenuItem.php',
-        'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\PopoverMenuItem\\PopupMenuItemFactory' => __DIR__ . '/../..' . '/sources/application/UI/Component/PopoverMenu/PopoverMenuItem/PopupMenuItemFactory.php',
+        'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\PopoverMenuItem\\PopoverMenuItemFactory' => __DIR__ . '/../..' . '/sources/application/UI/Component/PopoverMenu/PopoverMenuItem/PopoverMenuItemFactory.php',
         'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\PopoverMenuItem\\UrlPopoverMenuItem' => __DIR__ . '/../..' . '/sources/application/UI/Component/PopoverMenu/PopoverMenuItem/UrlPopoverMenuItem.php',
         'Combodo\\iTop\\Application\\UI\\Component\\QuickCreate\\QuickCreate' => __DIR__ . '/../..' . '/sources/application/UI/Component/QuickCreate/QuickCreate.php',
         'Combodo\\iTop\\Application\\UI\\Component\\QuickCreate\\QuickCreateFactory' => __DIR__ . '/../..' . '/sources/application/UI/Component/QuickCreate/QuickCreateFactory.php',

sources/application/UI/Component/PopoverMenu/PopoverMenuFactory.php

@@ -21,7 +21,7 @@ namespace Combodo\iTop\Application\UI\Component\PopoverMenu;
 
 
 
-use Combodo\iTop\Application\UI\Component\PopoverMenu\PopoverMenuItem\PopupMenuItemFactory;
+use Combodo\iTop\Application\UI\Component\PopoverMenu\PopoverMenuItem\PopoverMenuItemFactory;
 use Dict;
 use JSPopupMenuItem;
 use MetaModel;
@@ -87,7 +87,7 @@ class PopoverMenuFactory
 					$aAllowedPortal['url'],
 					'_blank'
 				);
-				$aItems[] = PopupMenuItemFactory::MakeFromApplicationPopupMenuItem($oPopupMenuItem);
+				$aItems[] = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem($oPopupMenuItem);
 			}
 		}
 
@@ -106,7 +106,7 @@ class PopoverMenuFactory
 		$aItems = [];
 
 		// Preferences
-		$aItems[] = PopupMenuItemFactory::MakeFromApplicationPopupMenuItem(
+		$aItems[] = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(
 			new URLPopupMenuItem(
 				'UI:Preferences',
 				Dict::S('UI:Preferences'),
@@ -117,7 +117,7 @@ class PopoverMenuFactory
 		// Archive mode
 		if(true === utils::IsArchiveMode())
 		{
-			$aItems[] = PopupMenuItemFactory::MakeFromApplicationPopupMenuItem(
+			$aItems[] = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(
 				new JSPopupMenuItem(
 					'UI:ArchiveModeOff',
 					Dict::S('UI:ArchiveModeOff'),
@@ -127,7 +127,7 @@ class PopoverMenuFactory
 		}
 		elseif(UserRights::CanBrowseArchive())
 		{
-			$aItems[] = PopupMenuItemFactory::MakeFromApplicationPopupMenuItem(
+			$aItems[] = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(
 				new JSPopupMenuItem(
 					'UI:ArchiveModeOn',
 					Dict::S('UI:ArchiveModeOn'),
@@ -139,7 +139,7 @@ class PopoverMenuFactory
 		// Logoff
 		if(utils::CanLogOff())
 		{
-			$aItems[] = PopupMenuItemFactory::MakeFromApplicationPopupMenuItem(
+			$aItems[] = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(
 				new URLPopupMenuItem(
 					'UI:LogOffMenu',
 					Dict::S('UI:LogOffMenu'),
@@ -151,7 +151,7 @@ class PopoverMenuFactory
 		// Change password
 		if (UserRights::CanChangePassword())
 		{
-			$aItems[] = PopupMenuItemFactory::MakeFromApplicationPopupMenuItem(
+			$aItems[] = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(
 				new URLPopupMenuItem(
 					'UI:ChangePwdMenu',
 					Dict::S('UI:ChangePwdMenu'),
@@ -175,7 +175,7 @@ class PopoverMenuFactory
 		$aItems = [];
 
 		// Online documentation
-		$aItems[] = PopupMenuItemFactory::MakeFromApplicationPopupMenuItem(
+		$aItems[] = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(
 			new URLPopupMenuItem(
 				'UI:Help',
 				Dict::S('UI:Help'),
@@ -185,7 +185,7 @@ class PopoverMenuFactory
 		);
 
 		// About box
-		$aItems[] = PopupMenuItemFactory::MakeFromApplicationPopupMenuItem(
+		$aItems[] = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(
 			new JSPopupMenuItem(
 				'UI:AboutBox',
 				Dict::S('UI:AboutBox'),

sources/application/UI/Component/PopoverMenu/PopoverMenuItem/JsPopoverMenuItem.php

@@ -20,14 +20,38 @@
 namespace Combodo\iTop\Application\UI\Component\PopoverMenu\PopoverMenuItem;
 
 
+use JSPopupMenuItem;
+
 /**
  * Class JsPopoverMenuItem
  *
  * @author Guillaume Lajarige <guillaume.lajarige@combodo.com>
  * @package Combodo\iTop\Application\UI\Component\PopoverMenu\PopoverMenuItem
+ * @property \JSPopupMenuItem $oPopupMenuItem 
  * @since 2.8.0
  */
 class JsPopoverMenuItem extends PopoverMenuItem
 {
 	const HTML_TEMPLATE_REL_PATH = 'components/popover-menu/item/mode_js';
+
+	public function GetJsCode()
+	{
+		return $this->oPopupMenuItem->GetJSCode();
+	}
+
+	/** @ignore */
+	public function GetUrl()
+	{
+		return $this->oPopupMenuItem->GetUrl();
+	}
+	
+	/**
+	 * @inheritDoc
+	 * @throws \Exception
+	 */
+	public function GetJsFilesUrlRecursively($bAbsoluteUrl = false)
+	{
+		$aJsFiles = array_merge(parent::GetJsFilesUrlRecursively($bAbsoluteUrl), $this->oPopupMenuItem->GetLinkedScripts());
+		return $aJsFiles;
+	}
 }

sources/application/UI/Component/PopoverMenu/PopoverMenuItem/PopoverMenuItemFactory.php

@@ -33,7 +33,7 @@ use URLPopupMenuItem;
  * @internal
  * @since 2.8.0
  */
-class PopupMenuItemFactory
+class PopoverMenuItemFactory
 {
 	/**
 	 * Make a standard NavigationMenu layout for backoffice pages

sources/application/UI/Component/PopoverMenu/PopoverMenuItem/UrlPopoverMenuItem.php

@@ -25,9 +25,22 @@ namespace Combodo\iTop\Application\UI\Component\PopoverMenu\PopoverMenuItem;
  *
  * @author Guillaume Lajarige <guillaume.lajarige@combodo.com>
  * @package Combodo\iTop\Application\UI\Component\PopoverMenu\PopoverMenuItem
+ * @property \URLPopupMenuItem $oPopupMenuItem
  * @since 2.8.0
  */
 class UrlPopoverMenuItem extends PopoverMenuItem
 {
 	const HTML_TEMPLATE_REL_PATH = 'components/popover-menu/item/mode_url';
+
+	/** @ignore */
+	public function GetUrl()
+	{
+		return $this->oPopupMenuItem->GetUrl();
+	}
+	
+	/** @ignore */
+	public function GetTarget()
+	{
+		return $this->oPopupMenuItem->GetTarget();
+	}
 }

templates/components/popover-menu/item/layout.html.twig

@@ -1 +1,2 @@
-<div>Item: {{ oPopoverMenuItem.Id }}</div>
+{% block iboPopoverMenuItem %}
+{% endblock %}

templates/components/popover-menu/item/mode_js.html.twig

@@ -0,0 +1,7 @@
+{% extends 'components/popover-menu/item/layout.html.twig' %}
+
+{% block iboPopoverMenuItem %}
+    <a class="ibo-popover-menu--item" data-role="ibo-popover-menu--item" href="{{ oJsPopoverMenuItem.Url }}" onclick="{{ oJsPopoverMenuItem.JsCode }}">
+        {{ oJsPopoverMenuItem.Label }}
+    </a>
+{% endblock %}

templates/components/popover-menu/item/mode_url.html.twig

@@ -0,0 +1,8 @@
+{% extends 'components/popover-menu/item/layout.html.twig' %}
+
+{% block iboPopoverMenuItem %}
+    <a class="ibo-popover-menu--item" data-role="ibo-popover-menu--item" href="{{ oUrlPopoverMenuItem.Url }}" target="{{ oUrlPopoverMenuItem.Target }}">
+        {{ oUrlPopoverMenuItem.Label }}
+    </a>
+{% endblock %}
+

templates/components/popover-menu/layout.html.twig

@@ -1,13 +1,11 @@
 <div {% if oPopoverMenu.Id is defined %}id="{{ oPopoverMenu.Id }}"{% endif %} class="ibo-popover-menu" data-role="ibo-popover-menu">
-	<div class="ibo-popover-menu--menu">
-		{% for aSection in oPopoverMenu.Sections %}
-			{% if aSection.aItems|length > 0 %}
-				<div class="ibo-popover-menu--section">
-					{% for oPopoverMenuItem in aSection.aItems %}
-						{{ render_block(oPopoverMenuItem) }}
-					{% endfor %}
-				</div>
-			{% endif %}
-		{% endfor %}
-	</div>
+	{% for aSection in oPopoverMenu.Sections %}
+		{% if aSection.aItems|length > 0 %}
+			<div class="ibo-popover-menu--section" data-role="ibo-popover-menu--section">
+				{% for oPopoverMenuItem in aSection.aItems %}
+					{{ render_block(oPopoverMenuItem) }}
+				{% endfor %}
+			</div>
+		{% endif %}
+	{% endfor %}
 </div>

templates/layouts/navigation-menu/layout.html.twig

@@ -26,7 +26,7 @@
 				<div class="ibo-navigation-menu--user-picture"></div>
 				<div class="ibo-navigation-menu--user-welcome-message"></div>
 				<div class="ibo-navigation-menu--user-organization"></div>
-				<div class="ibo-navigation-menu--user-menu">
+				<div class="ibo-navigation-menu--user-menu-container">
 					{{ render_block(oNavigationMenu.UserMenu) }}
 				</div>
 			</div>