N°2847 Add vertical tab options to object details

application/cmdbabstract.class.inc.php

@@ -1003,7 +1003,7 @@ EOF
 	z-index: 0;
 }
 .object-details .ibo-panel > .ibo-panel--body {
-	padding-top: 8px;
+	padding: 8px 16px 0px;
 }
 .object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container > .ibo-tab-container--tabs-list{
 	margin-left: -16px;
@@ -1014,6 +1014,26 @@ EOF
 	margin-left: -16px;
 	margin-right: -16px;
 }
+.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.is-vertical{
+	display: flex;
+	flex-direction: row;
+}
+.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.is-vertical > .ibo-tab-container--tabs-list{
+	padding-top: 50px;
+	flex-direction: column;
+	height: auto;
+	padding-left: unset;
+	margin-right: unset;
+}
+.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--tab-header{
+	height: 50px;
+	width: 100%;
+	justify-content: left;
+}
+.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--tab-header > .ibo-tab-container--tab-toggler{
+	width: 100%;
+	justify-content: left;
+}
 CSS
 		);
 

application/utils.inc.php

@@ -1234,6 +1234,7 @@ class utils
 				new JSPopupMenuItem('UI:Menu:ExportXLSX', Dict::S('ExcelExporter:ExportMenu'), "ExportListDlg('$sOQL', '', 'xlsx', ".json_encode(Dict::S('ExcelExporter:ExportMenu')).")"),
 				new SeparatorPopupMenuItem(),
 				new URLPopupMenuItem('UI:Menu:PrintableVersion', Dict::S('UI:Menu:PrintableVersion'), $sUrl.'&printable=1', '_blank'),
+				new JSPopupMenuItem('UI:Menu:SwitchTabMode', Dict::S('UI:Menu:SwitchTabMode'), "SwitchTabMode()"),
 			);
 			break;
 

dictionaries/ui/layouts/en.dictionary.itop.object-details.php

@@ -0,0 +1,9 @@
+<?php
+/**
+ * @copyright   Copyright (C) 2010-2020 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+Dict::Add('EN US', 'English', 'English', [
+	'UI:Menu:SwitchTabMode' => 'Switch tab mode',
+]);

js/pages/backoffice.js

@@ -42,7 +42,23 @@ function StripArchiveArgument(sUrl)
 	var res = sUrl.replace(/&with-archive=[01]/g, '');
 	return res;
 }
+//TODO 2.8.0 Is this the right place to put this method ?
+function SwitchTabMode()
+{
+	let aTabContainer = $('[data-role="ibo-tab-container"]');
+	if(!aTabContainer.hasClass('is-vertical')){
+		aTabContainer.removeClass('is-horizontal');
+		aTabContainer.addClass('is-vertical');
+		SetUserPreference('tab_layout', 'vertical', true);
+	}
+	else
+	{
+		aTabContainer.removeClass('is-vertical');
+		aTabContainer.addClass('is-horizontal');
+		SetUserPreference('tab_layout', 'horizontal', true);
+	}
 
+}
 // Processing
 $(document).ready(function(){
 	// Enable tooltips (abstraction layer between iTop markup and tooltip plugin to ease its replacement in the future)

sources/application/UI/Layout/TabContainer/TabContainer.php

@@ -20,6 +20,7 @@
 namespace Combodo\iTop\Application\UI\Layout\TabContainer;
 
 
+use appUserPreferences;
 use Combodo\iTop\Application\UI\iUIBlock;
 use Combodo\iTop\Application\UI\Layout\iUIContentBlock;
 use Combodo\iTop\Application\UI\Layout\TabContainer\Tab\AjaxTab;
@@ -42,15 +43,23 @@ class TabContainer extends UIContentBlock
 	public const JS_FILES_REL_PATH = [
 		'js/layouts/tab-container.js'
 	];
-
+	
+	/** @var string $sName */
 	private $sName;
+	/** @var string $sPrefix */
 	private $sPrefix;
+	/** @var string $sLayout */
+	private $sLayout;
 
 	/**
 	 * TabContainer constructor.
 	 *
 	 * @param $sName
 	 * @param $sPrefix
+	 *
+	 * @throws \CoreException
+	 * @throws \CoreUnexpectedValue
+	 * @throws \MySQLException
 	 */
 	public function __construct($sName, $sPrefix)
 	{
@@ -58,6 +67,7 @@ class TabContainer extends UIContentBlock
 
 		$this->sName = $sName;
 		$this->sPrefix = $sPrefix;
+		$this->sLayout = appUserPreferences::GetPref('tab_layout', 'horizontal');
 	}
 
 	/**
@@ -145,4 +155,12 @@ class TabContainer extends UIContentBlock
 			'aTabs' => $aTabs
 		];
 	}
+
+	/**
+	 * @return string
+	 */
+	public function GetLayout(): string {
+		return $this->sLayout;
+	}
+	
 }

templates/layouts/tab-container/layout.html.twig

@@ -1,6 +1,6 @@
 {# @copyright   Copyright (C) 2010-2020 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
-<div id="{{ oUIBlock.GetId() }}" class="ibo-tab-container" data-role="ibo-tab-container">
+<div id="{{ oUIBlock.GetId() }}" class="ibo-tab-container is-{{ oUIBlock.GetLayout() }}" data-role="ibo-tab-container">
     {% block iboTabContainer %}
         <ul class="ibo-tab-container--tabs-list" data-role="ibo-tab-container--tabs-list">
             {% block iboTabContainerTabsList %}