N°2847 - Rework iTopWebPage layout (WIP Part VIII)

- Navigation menu: Change scrollbar color to something more visible - Navigation menu: Close drawer when filter focused and "Escape" key hit - Top bar: Fix element's ID in its standard delivery - Top bar: Fix drawers opening under the top bar but above the main content - iTopWebPage: Add AddUiBlock() method to easily add a layout/component in the page - iTopWebPage: Fix Header/Footer parts (formerly North/South Panels) and Banner part - WebPage: Handle duplicate stylesheets (like it was already doing for JS scripts)
2026-04-24 02:58:43 +02:00 · 2020-07-30 17:42:43 +02:00
parent f59de920c1
commit 61d611c136
10 changed files with 80 additions and 25 deletions
--- a/application/itopwebpage.class.inc.php
+++ b/application/itopwebpage.class.inc.php
@@ -22,9 +22,11 @@ require_once(APPROOT."/application/applicationcontext.class.inc.php");
 require_once(APPROOT."/application/user.preferences.class.inc.php");

 use Combodo\iTop\Application\TwigBase\Twig\TwigHelper;
+use Combodo\iTop\Application\UI\iUIBlock;
 use Combodo\iTop\Application\UI\Layout\NavigationMenu\NavigationMenuFactory;
 use Combodo\iTop\Application\UI\Layout\TopBar\TopBarFactory;
 use Combodo\iTop\Application\UI\UIBlock;
+use Combodo\iTop\Renderer\BlockRenderer;

 /**
 * Web page with some associated CSS and scripts (jquery) for a fancier display
@@ -983,6 +985,8 @@ EOF
 		{
 			$sFooterHtml .= $oExtensionInstance->GetSouthPaneHtml($this);
 		}
+
+		return $sFooterHtml;
 	}

 	/**
@@ -1425,19 +1429,19 @@ EOF;

 //			$GoHomeInitialStyle = $this->IsMenuPaneVisible() ? 'display: none;' : '';

-			$sHtml .= ' <table id="top-bar-table">';
-			$sHtml .= ' <tr>';
-			$sHtml .= ' <td id="open-left-pane"  class="menu-pane-exclusive" style="'.$GoHomeInitialStyle.'" onclick="$(\'body\').layout().open(\'west\');">';
-			$sHtml .= ' <i class="fas fa-bars"></i>';
-			$sHtml .= ' </td>';
-			$sHtml .= ' <td id="go-home" class="menu-pane-exclusive" style="'.$GoHomeInitialStyle.'">';
-			$sHtml .= ' <a href="'.utils::GetAbsoluteUrlAppRoot().'pages/UI.php"><i class="fas fa-home"></i></a>';
-			$sHtml .= ' </td>';
-			$sHtml .= ' <td class="top-bar-spacer menu-pane-exclusive" style="'.$GoHomeInitialStyle.'">';
-			$sHtml .= ' </td>';
-			$sHtml .= ' <td id="top-bar-table-breadcrumb">';
-			$sHtml .= ' <div id="itop-breadcrumb"></div>';
-			$sHtml .= ' </td>';
+//			$sHtml .= ' <table id="top-bar-table">';
+//			$sHtml .= ' <tr>';
+//			$sHtml .= ' <td id="open-left-pane"  class="menu-pane-exclusive" style="'.$GoHomeInitialStyle.'" onclick="$(\'body\').layout().open(\'west\');">';
+//			$sHtml .= ' <i class="fas fa-bars"></i>';
+//			$sHtml .= ' </td>';
+//			$sHtml .= ' <td id="go-home" class="menu-pane-exclusive" style="'.$GoHomeInitialStyle.'">';
+//			$sHtml .= ' <a href="'.utils::GetAbsoluteUrlAppRoot().'pages/UI.php"><i class="fas fa-home"></i></a>';
+//			$sHtml .= ' </td>';
+//			$sHtml .= ' <td class="top-bar-spacer menu-pane-exclusive" style="'.$GoHomeInitialStyle.'">';
+//			$sHtml .= ' </td>';
+//			$sHtml .= ' <td id="top-bar-table-breadcrumb">';
+//			$sHtml .= ' <div id="itop-breadcrumb"></div>';
+//			$sHtml .= ' </td>';
 			$sHtml .= ' <td id="top-bar-table-search">';
 			$sHtml .= '		<div id="global-search"><form action="'.utils::GetAbsoluteUrlAppRoot().'pages/UI.php">';
 			$sHtml .= '		<table id="top-left-buttons-area"><tr>';
@@ -1446,9 +1450,9 @@ EOF;
 			$sHtml .= '		<td id="top-left-newsroom-cell">'.$sNewsRoomInitialImage.'</td>';
 			$sHtml .= '     	<td id="top-left-logoff-cell">'.self::FilterXSS($sLogOffMenu).'</td>';
 			$sHtml .= '     </tr></table></form></div>';
-			$sHtml .= ' </td>';
-			$sHtml .= ' </tr>';
-			$sHtml .= ' </table>';
+//			$sHtml .= ' </td>';
+//			$sHtml .= ' </tr>';
+//			$sHtml .= ' </table>';

 //			$sHtml .= '		<div id="global-search"><form action="'.utils::GetAbsoluteUrlAppRoot().'pages/UI.php"><table><tr><td></td><td><div id="global-search-area"><input id="global-search-input" type="text" name="text" placeholder="'.$sText.'"></input><div '.$sOnClick.' id="global-search-image"></div></div></td>';
 //			$sHtml .= '<td><a id="help-link" href="'.$sOnlineHelpUrl.'" target="_blank"><img title="'.Dict::S('UI:Help').'" src="../images/help.png?t='.utils::GetCacheBusterTimestamp().'"/></td>';
@@ -1718,6 +1722,41 @@ EOF
 		);
 	}

+	/**
+	 * Add a UIBlock in the page by dispatching its parts in the right places (CSS, JS, HTML)
+	 *
+	 * @param \Combodo\iTop\Application\UI\iUIBlock $oBlock
+	 *
+	 * @return void
+	 * @throws \ReflectionException
+	 * @throws \Twig\Error\LoaderError
+	 * @throws \Twig\Error\RuntimeError
+	 * @throws \Twig\Error\SyntaxError
+	 * @throws \Exception
+	 * @since 2.8.0
+	 */
+	public function AddUiBlock(iUIBlock $oBlock)
+	{
+		$oBlockRenderer = new BlockRenderer($oBlock);
+
+		// Add HTML
+		$this->add($oBlockRenderer->RenderHtml());
+
+		// Add inline CSS and JS
+		$this->add_style($oBlockRenderer->RenderCssInline());
+		$this->add_ready_script($oBlockRenderer->RenderJsInline());
+
+		// Add external files
+		foreach($oBlockRenderer->GetCssFiles() as $sFile)
+		{
+			$this->add_linked_stylesheet($sFile);
+		}
+		foreach($oBlockRenderer->GetJsFiles() as $sFile)
+		{
+			$this->add_linked_script($sFile);
+		}
+	}
+
 	/**
 	 * Adds a script to be executed when the DOM is ready (typical JQuery use), right before add_ready_script
 	 *
--- a/application/webpage.class.inc.php
+++ b/application/webpage.class.inc.php
@@ -449,6 +449,7 @@ class WebPage implements Page

 	/**
 	 * Add a CSS stylesheet (as an include, i.e. link) to the header of the page
+	 * Handles duplicates since 2.8.0 : calling twig with the same stylesheet will add the stylesheet only once
 	 *
 	 * @param string $s_linked_stylesheet
 	 * @param string $s_condition
@@ -456,7 +457,7 @@ class WebPage implements Page
 	 */
 	public function add_linked_stylesheet($s_linked_stylesheet, $s_condition = "")
 	{
-		$this->a_linked_stylesheets[] = array('link' => $s_linked_stylesheet, 'condition' => $s_condition);
+		$this->a_linked_stylesheets[$s_linked_stylesheet] = array('link' => $s_linked_stylesheet, 'condition' => $s_condition);
 	}

 	/**
--- a/css/backoffice/layout/_navigation-menu.scss
+++ b/css/backoffice/layout/_navigation-menu.scss
@@ -36,7 +36,7 @@ $ibo-navigation-menu--middle-part--padding-x: $ibo-navigation-menu--body--paddin
 $ibo-navigation-menu--middle-part--elements-spacing: 20px !default;
 $ibo-navigation-menu--middle-part--scrollbar-width: 5px !default;
 $ibo-navigation-menu--middle-part--scrollbar-track-background-color: $ibo-color-transparent !default;
-$ibo-navigation-menu--middle-part--scrollbar-thumb-background-color: $ibo-color-grey-800 !default;
+$ibo-navigation-menu--middle-part--scrollbar-thumb-background-color: $ibo-color-grey-300 !default;
 $ibo-navigation-menu--middle-part--scrollbar-thumb-border: none !default;
 $ibo-navigation-menu--middle-part--scrollbar-thumb-border-radius: $ibo-border-radius-500 !default;

--- a/css/backoffice/pages/_base.scss
+++ b/css/backoffice/pages/_base.scss
@@ -57,7 +57,7 @@ body{
 		padding-left: $ibo-page-container--elements-padding-x;
 		padding-right: $ibo-page-container--elements-padding-x;
 	}
-	#ibo-top-bar{
+	#ibo-top-container{
 		z-index: 20;
 		position: sticky;
 		top: 0;
--- a/js/layouts/navigation-menu.js
+++ b/js/layouts/navigation-menu.js
@@ -143,11 +143,12 @@ $(function()
 				const oInputElem = this.element.find(this.js_selectors.menu_filter_input);
 				const sValue = oInputElem.val();

-				if((sValue === '') || (oEvent.key === 'Escape'))
+				if((sValue === '') && (oEvent.key === 'Escape'))
+				{
+					this._closeDrawer();
+				}
+				else if((sValue === '') || (oEvent.key === 'Escape'))
 				{
-					// Prevent other behaviors
-					oEvent.stopPropagation();
-
 					this._clearFiltering();
 				}
 				else
--- a/sources/application/UI/Layout/TopBar/TopBarFactory.php
+++ b/sources/application/UI/Layout/TopBar/TopBarFactory.php
@@ -47,7 +47,7 @@ class TopBarFactory
 	 */
 	public static function MakeStandard($aBreadcrumbsEntry = null)
 	{
-		$oTopBar =  new TopBar();
+		$oTopBar =  new TopBar(TopBar::BLOCK_CODE);

 		if(utils::GetConfig()->Get('quick_create.enabled') === true)
 		{
--- a/templates/pages/backoffice/extension-blocks/banner.html.twig
+++ b/templates/pages/backoffice/extension-blocks/banner.html.twig
@@ -0,0 +1,3 @@
+{% if aLayouts.sBanner is not empty %}
+	<div id="ibo-top-banner" data-role="ibo-top-banner">{{ aLayouts.sBanner|raw }}</div>
+{% endif %}
--- a/templates/pages/backoffice/extension-blocks/footer.html.twig
+++ b/templates/pages/backoffice/extension-blocks/footer.html.twig
@@ -0,0 +1,3 @@
+{% if aLayouts.sFooter is not empty %}
+	<div id="ibo-page-footer" data-role="ibo-page-footer">{{ aLayouts.sFooter|raw }}</div>
+{% endif %}
--- a/templates/pages/backoffice/extension-blocks/header.html.twig
+++ b/templates/pages/backoffice/extension-blocks/header.html.twig
@@ -0,0 +1,3 @@
+{% if aLayouts.sHeader is not empty %}
+	<div id="ibo-page-header" data-role="ibo-page-header">{{ aLayouts.sHeader|raw }}</div>
+{% endif %}
--- a/templates/pages/backoffice/layout.html.twig
+++ b/templates/pages/backoffice/layout.html.twig
@@ -35,7 +35,11 @@
 <body data-gui-type="backoffice">
 	{{ render_block(aLayouts.oNavigationMenu) }}
 	<div id="ibo-page-container">
-		{{ render_block(aLayouts.oTopBar) }}
+		<div id="ibo-top-container">
+			{{ include('pages/backoffice/extension-blocks/banner.html.twig') }}
+			{{ render_block(aLayouts.oTopBar) }}
+		</div>
+		{{ include('pages/backoffice/extension-blocks/header.html.twig') }}
 		<main id="ibo-page-content">
 			{{ aPage.sSanitizedContent|raw }}

@@ -45,6 +49,7 @@
 			<div style="display:none" title="dialog" id="ModalDlg"></div>
 			<div style="display:none" id="ajax_content"></div>
 		</main>
+		{{ include('pages/backoffice/extension-blocks/footer.html.twig') }}
 	</div>

 	{% block iboPageJsFiles %}