composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 02:28:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°2847 - Work on the tab container

Browse Source 
- Fix CSS class names on vertical mode
- Add class constants
This commit is contained in:
Molkobain
2020-10-08 16:01:51 +02:00
parent f87002dce3
commit 44351784e6
4 changed files with 35 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
application/cmdbabstract.class.inc.php
View File

@@ -1014,27 +1014,27 @@ EOF
margin-left: -16px;
margin-right: -16px;
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.is-vertical{
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical{
display: flex;
flex-direction: row;
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.is-vertical > .ibo-tab-container--tabs-list{
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-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{
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-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{
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--tab-header > .ibo-tab-container--tab-toggler{
width: 100%;
justify-content: left;
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.is-vertical > .ibo-tab-container--tab-container {
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tab-container {
flex-grow: 1;
}
CSS

10
js/pages/backoffice.js
View File

@@ -45,15 +45,15 @@ function StripArchiveArgument(sUrl)
function SwitchTabMode()
{
let aTabContainer = $('[data-role="ibo-tab-container"]');
if (!aTabContainer.hasClass('is-vertical'))
if (!aTabContainer.hasClass('ibo-is-vertical'))
{
aTabContainer.removeClass('is-horizontal');
aTabContainer.addClass('is-vertical');
aTabContainer.removeClass('ibo-is-horizontal');
aTabContainer.addClass('ibo-is-vertical');
SetUserPreference('tab_layout', 'vertical', true);
} else
{
aTabContainer.removeClass('is-vertical');
aTabContainer.addClass('is-horizontal');
aTabContainer.removeClass('ibo-is-vertical');
aTabContainer.addClass('ibo-is-horizontal');
SetUserPreference('tab_layout', 'horizontal', true);
}
}

32
sources/application/UI/Layout/TabContainer/TabContainer.php
View File

@@ -43,19 +43,27 @@ class TabContainer extends UIContentBlock
public const JS_FILES_REL_PATH = [
'js/layouts/tab-container.js'
];
// Specific constants
/** @var string */
public const ENUM_LAYOUT_HORIZONTAL = 'horizontal';
/** @var string */
public const ENUM_LAYOUT_VERTICAL = 'vertical';
/** @var string */
public const DEFAULT_LAYOUT = self::ENUM_LAYOUT_HORIZONTAL;
/** @var string $sName */
private $sName;
/** @var string $sPrefix */
private $sPrefix;
/** @var string $sLayout */
/** @var string $sLayout Layout of the tabs (horizontal, vertical, ...), see static::ENUM_LAYOUT_XXX */
private $sLayout;
/**
* TabContainer constructor.
*
* @param $sName
* @param $sPrefix
* @param string $sName
* @param string $sPrefix
*
* @throws \CoreException
* @throws \CoreUnexpectedValue
@@ -67,7 +75,7 @@ class TabContainer extends UIContentBlock
$this->sName = $sName;
$this->sPrefix = $sPrefix;
$this->sLayout = appUserPreferences::GetPref('tab_layout', 'horizontal');
$this->sLayout = appUserPreferences::GetPref('tab_layout', static::DEFAULT_LAYOUT);
}
/**
@@ -101,7 +109,6 @@ class TabContainer extends UIContentBlock
return $oTab;
}
/**
* @param string $sTabCode
* @param string $sTitle
@@ -136,7 +143,6 @@ class TabContainer extends UIContentBlock
return parent::AddSubBlock($oSubBlock);
}
/**
* Return tab list
*
@@ -156,11 +162,21 @@ class TabContainer extends UIContentBlock
];
}
/**
* @param string $sLayout
*
* @return $this
*/
public function SetLayout($sLayout) {
$this->sLayout = $sLayout;
return $this;
}
/**
* @return string
*/
public function GetLayout(): string {
return $this->sLayout;
}
}

2
templates/layouts/tab-container/layout.html.twig
View File

@@ -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 is-{{ oUIBlock.GetLayout() }}" data-role="ibo-tab-container">
<div id="{{ oUIBlock.GetId() }}" class="ibo-tab-container ibo-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 %}