diff --git a/application/cmdbabstract.class.inc.php b/application/cmdbabstract.class.inc.php index 578973d84..87f4f2ac8 100644 --- a/application/cmdbabstract.class.inc.php +++ b/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 ); diff --git a/application/utils.inc.php b/application/utils.inc.php index 53d0abb11..e8792cf46 100644 --- a/application/utils.inc.php +++ b/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; diff --git a/dictionaries/ui/layouts/en.dictionary.itop.object-details.php b/dictionaries/ui/layouts/en.dictionary.itop.object-details.php new file mode 100644 index 000000000..55bf2bf35 --- /dev/null +++ b/dictionaries/ui/layouts/en.dictionary.itop.object-details.php @@ -0,0 +1,9 @@ + 'Switch tab mode', +]); diff --git a/js/pages/backoffice.js b/js/pages/backoffice.js index 4d19ff8c1..706ec7be0 100644 --- a/js/pages/backoffice.js +++ b/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) diff --git a/sources/application/UI/Layout/TabContainer/TabContainer.php b/sources/application/UI/Layout/TabContainer/TabContainer.php index 0343107e5..ce868db6b 100644 --- a/sources/application/UI/Layout/TabContainer/TabContainer.php +++ b/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; + } + } diff --git a/templates/layouts/tab-container/layout.html.twig b/templates/layouts/tab-container/layout.html.twig index bd3f5f1fa..852d0b0d3 100644 --- a/templates/layouts/tab-container/layout.html.twig +++ b/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 #} -