Add icons on PopoverMenu items and allow to add them through PopupMenu API

application/applicationextension.inc.php

@@ -777,6 +777,10 @@ abstract class ApplicationPopupMenuItem
 	/** @ignore */
 	protected $sLabel;
 	/** @ignore */
+	protected $sTooltip;	
+	/** @ignore */
+	protected $sIconClass;
+	/** @ignore */
 	protected $aCssClasses;
 
 	/**
@@ -791,6 +795,8 @@ abstract class ApplicationPopupMenuItem
 	{
 		$this->sUID = $sUID;
 		$this->sLabel = $sLabel;
+		$this->sTooltip = '';
+		$this->sIconClass = '';
 		$this->aCssClasses = array();
 	}
 
@@ -845,6 +851,47 @@ abstract class ApplicationPopupMenuItem
 		$this->aCssClasses[] = $sCssClass;
 	}
 
+
+	/**
+	 * @param $sTooltip
+	 * 
+	 * @since 3.0.0
+	 */
+	public function SetTooltip($sTooltip)
+	{
+		$this->sTooltip = $sTooltip;
+	}
+
+	/**
+	 * @return string
+	 * 
+	 * @since 3.0.0
+	 */
+	public function GetTooltip()
+	{
+		return $this->sTooltip;
+	}
+	
+	/**
+	 * @param $sIconClass
+	 * 
+	 * @since 3.0.0
+	 */
+	public function SetIconClass($sIconClass)
+	{
+		$this->sIconClass = $sIconClass;
+	}	
+	
+	/**
+	 * @return string
+	 *
+	 * @since 3.0.0
+	 */
+	public function GetIconClass()
+	{
+		return $this->sIconClass;
+	}
+	
 	/**
 	 * Returns the components to create a popup menu item in HTML
 	 *
@@ -892,7 +939,13 @@ class URLPopupMenuItem extends ApplicationPopupMenuItem
 	/** @ignore */
 	public function GetMenuItem()
 	{
-		return array('label' => $this->GetLabel(), 'url' => $this->GetUrl(), 'target' => $this-> GetTarget(), 'css_classes' => $this->aCssClasses);
+		return array('label' => $this->GetLabel(),
+			'url' => $this->GetUrl(),
+			'target' => $this-> GetTarget(),
+			'css_classes' => $this->aCssClasses,
+			'icon_class' => $this->sIconClass,
+			'tooltip' => $this->sTooltip
+		);
 	}
 	
 	/** @ignore */
@@ -952,6 +1005,8 @@ class JSPopupMenuItem extends ApplicationPopupMenuItem
 			'onclick' => $this->GetJsCode().'; return false;',
 			'url' => $this->GetUrl(),
 			'css_classes' => $this->GetCssClasses(),
+			'icon_class' => $this->sIconClass,
+			'tooltip' => $this->sTooltip
 		);
 	}
 

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

@@ -28,6 +28,10 @@ $ibo-popover-menu--separator--padding: 0 !default;
 $ibo-popover-menu--separator--margin: 0 !default;
 $ibo-popover-menu--separator--background-color: $ibo-color-grey-200 !default;
 
+$ibo-popover-menu--item--icon--color: $ibo-color-grey-700 !default;
+$ibo-popover-menu--item--icon--font-size: $ibo-font-size-200 !default;
+$ibo-popover-menu--item--icon--padding-right: 5px !default;
+
 .ibo-popover-menu--item{
   padding: $ibo-popover-menu--item--padding-y $ibo-popover-menu--item--padding-right $ibo-popover-menu--item--padding-y $ibo-popover-menu--item--padding-left;
   color: $ibo-popover-menu--item--text-color;
@@ -47,3 +51,9 @@ $ibo-popover-menu--separator--background-color: $ibo-color-grey-200 !default;
     background-color: $ibo-popover-menu--separator--background-color
   }
 }
+
+.ibo-popover-menu--item--icon{
+  padding-right: $ibo-popover-menu--item--icon--padding-right;
+  color: $ibo-popover-menu--item--icon--color;
+  font-size: $ibo-popover-menu--item--icon--font-size;
+}

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

@@ -236,6 +236,12 @@ class PopoverMenuFactory
 				if (!empty($aAction['css_classes'])) {
 					$oPopoverMenuItem->SetCssClasses($aAction['css_classes']);
 				}
+				if (!empty($aAction['icon_class'])) {
+					$oPopoverMenuItem->SetIconClass($aAction['icon_class']);
+				}
+				if (!empty($aAction['tooltip'])) {
+					$oPopoverMenuItem->SetTooltip($aAction['tooltip']);
+				}
 				$aItems[] = $oPopoverMenuItem;
 			}
 

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

@@ -105,4 +105,47 @@ class PopoverMenuItem extends UIBlock
 	{
 		return $this->oPopupMenuItem->GetCssClasses();
 	}
+	
+	/**
+	 * @return string
+	 * @uses oPopupMenuItem
+	 * @uses \ApplicationPopupMenuItem::GetIconClass()
+	 */
+	public function GetIconClass()
+	{
+		return $this->oPopupMenuItem->GetIconClass();
+	}
+
+	/**
+	 * @return $this
+	 * @uses oPopupMenuItem
+	 * @uses \ApplicationPopupMenuItem::SetIconClass()
+	 */
+	public function SetIconClass($sIconClas)
+	{
+		$this->oPopupMenuItem->SetIconClass($sIconClas);
+		return $this;
+	}
+
+	/**
+	 * @return string
+	 * @uses oPopupMenuItem
+	 * @uses \ApplicationPopupMenuItem::GetTooltip()
+	 */
+	public function GetTooltip()
+	{
+		return $this->oPopupMenuItem->GetTooltip();
+	}
+	
+	/**
+	 * @return $this
+	 * @uses oPopupMenuItem
+	 * @uses \ApplicationPopupMenuItem::SetTooltip()
+	 */
+	public function SetTooltip($sTooltip)
+	{
+		$this->oPopupMenuItem->SetTooltip($sTooltip);
+		return $this;
+	}
+
 }

sources/application/WebPage/WebPage.php

@@ -1392,6 +1392,8 @@ class WebPage implements Page
 				'target' => isset($aAction['target']) ? $aAction['target'] : '',
 				'url' => $aAction['url'],
 				'label' => $aAction['label'],
+				'icon_class' => isset($aAction['icon_class']) ? $aAction['icon_class'] : '',
+				'tooltip' => isset($aAction['tooltip']) ? $aAction['tooltip'] : '',
 			];
 		}
 

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

@@ -7,7 +7,13 @@
                     data-{{ sName }}="{{ sValue }}"
                 {% endfor %}
             {% endif %}
+            {% if oUIBlock.GetTooltip() is not empty %}
+                data-tooltip-content="{{ oUIBlock.GetTooltip() }}"
+            {% endif %}
     >
+        {% if oUIBlock.GetIconClass() is not empty %}
+            <i class="ibo-popover-menu--item--icon fa-fw {{ oUIBlock.GetIconClass() }}"></i>
+        {% endif %}
         {{ oUIBlock.GetLabel() }}
     </a>
 {% endblock %}

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

@@ -7,7 +7,13 @@
                     data-{{ sName }}="{{ sValue }}"
                 {% endfor %}
             {% endif %}
+            {% if oUIBlock.GetTooltip() is not empty %}
+                data-tooltip-content="{{ oUIBlock.GetTooltip() }}"
+            {% endif %}
     >
+        {% if oUIBlock.GetIconClass() is not empty %}
+            <i class="ibo-popover-menu--item--icon fa-fw {{ oUIBlock.GetIconClass() }}"></i>
+        {% endif %}
         {{ oUIBlock.GetLabel() }}
     </a>
 {% endblock %}