N°2847 - Object details: Preliminary work

- Add ObjectFactory for ObjectDetails, ObjectCard, ...
- Update SCSS files to integrate its components

Note: A big part of the CSS is hardcoded in cmdbAbstract for now as we still need to discuss / work on the migration of the cmdbAbstract APIs (DisplayBareHeader, DisplayBareProperties, ...)
This commit is contained in:
Molkobain
2020-10-02 11:13:25 +02:00
parent 79ad75a2c2
commit 5626da7a5e
9 changed files with 105 additions and 4 deletions

View File

@@ -29,6 +29,7 @@ use Combodo\iTop\Application\UI\Component\Toolbar\Toolbar;
use Combodo\iTop\Application\UI\Layout\MultiColumn\Column\Column;
use Combodo\iTop\Application\UI\Layout\MultiColumn\MultiColumn;
use Combodo\iTop\Application\UI\Layout\UIContentBlock;
use Combodo\iTop\Application\UI\Layout\Object\ObjectFactory;
define('OBJECT_PROPERTIES_TAB', 'ObjectProperties');
@@ -981,7 +982,49 @@ EOF
$sMode = static::ENUM_OBJECT_MODE_VIEW;
// Object's details
// template not found display the object using the *old style*
// TODO 2.8.0: Complete the factory
$oObjectDetails = ObjectFactory::MakeDetails($this);
// $oPage->AddUiBlock($oObjectDetails);
// TODO 2.8.0: Remove this when object details block completed, this is hardcoded for the demo
$oPage->add_style(<<<CSS
.object-details {
position: relative;
}
.object-details .ibo-title {
z-index: 1;
align-items: start;
position: absolute;
top: 0;
left: 32px;
}
.object-details .ibo-title .ibo-title--medallion {
position: absolute;
margin-top: 16px;
}
.object-details .ibo-title .ibo-title--content {
margin-left: calc(90px + 32px);
}
.object-details .ibo-panel {
z-index: 0;
margin-top: 48px;
}
.object-details .ibo-panel > .ibo-panel--body {
padding-top: 8px;
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container > .ibo-tab-container--tabs-list{
margin-left: -16px;
margin-right: -16px;
padding-left: calc(32px + 90px + 32px - 24px);
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container > .ibo-tab-container--tab-container{
margin-left: -16px;
margin-right: -16px;
}
CSS
);
$oPage->add(<<<HTML
<!-- Beginning of object-details -->
<div id="search-widget-results-outer" class="object-details" data-object-class="$sClass" data-object-id="$iKey" data-object-mode="$sMode">

View File

@@ -45,7 +45,7 @@ $ibo-panel-colors: (
'danger': $ibo-color-danger-600,
'grey' : $ibo-color-grey-600,
'blue-grey': $ibo-color-blue-grey-600,
'blue': $ibo-color-blue-600,
'blue': $ibo-color-blue-800,
'cyan': $ibo-color-cyan-600,
'green': $ibo-color-green-600,
'orange' : $ibo-color-orange-600,

View File

@@ -6,6 +6,8 @@
$ibo-object-details--body--padding-top: $ibo-panel--highlight--height !default;
$ibo-object-details--tabs-list--margin-x: -1 * $ibo-panel--body--padding-x !default;
$ibo-object-details--tab-container--margin-x: -1 * $ibo-panel--body--padding-x !default;
.ibo-object-details.ibo-panel {
> .ibo-panel--body {
padding-top: $ibo-object-details--body--padding-top;
@@ -15,6 +17,10 @@ $ibo-object-details--tabs-list--margin-x: -1 * $ibo-panel--body--padding-x !defa
margin-left: $ibo-object-details--tabs-list--margin-x;
margin-right: $ibo-object-details--tabs-list--margin-x;
}
> .ibo-tab-container--tab-container{
margin-left: $ibo-object-details--tab-container--margin-x;
margin-right: $ibo-object-details--tab-container--margin-x;
}
}
}
}

View File

@@ -206,6 +206,8 @@ return array(
'Combodo\\iTop\\Application\\UI\\Layout\\MultiColumn\\MultiColumn' => $baseDir . '/sources/application/UI/Layout/MultiColumn/MultiColumn.php',
'Combodo\\iTop\\Application\\UI\\Layout\\NavigationMenu\\NavigationMenu' => $baseDir . '/sources/application/UI/Layout/NavigationMenu/NavigationMenu.php',
'Combodo\\iTop\\Application\\UI\\Layout\\NavigationMenu\\NavigationMenuFactory' => $baseDir . '/sources/application/UI/Layout/NavigationMenu/NavigationMenuFactory.php',
'Combodo\\iTop\\Application\\UI\\Layout\\Object\\ObjectDetails' => $baseDir . '/sources/application/UI/Layout/Object/ObjectDetails.php',
'Combodo\\iTop\\Application\\UI\\Layout\\Object\\ObjectFactory' => $baseDir . '/sources/application/UI/Layout/Object/ObjectFactory.php',
'Combodo\\iTop\\Application\\UI\\Layout\\PageContent\\PageContent' => $baseDir . '/sources/application/UI/Layout/PageContent/PageContent.php',
'Combodo\\iTop\\Application\\UI\\Layout\\PageContent\\PageContentFactory' => $baseDir . '/sources/application/UI/Layout/PageContent/PageContentFactory.php',
'Combodo\\iTop\\Application\\UI\\Layout\\PageContent\\PageContentWithSideContent' => $baseDir . '/sources/application/UI/Layout/PageContent/PageContentWithSideContent.php',

View File

@@ -436,6 +436,8 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
'Combodo\\iTop\\Application\\UI\\Layout\\MultiColumn\\MultiColumn' => __DIR__ . '/../..' . '/sources/application/UI/Layout/MultiColumn/MultiColumn.php',
'Combodo\\iTop\\Application\\UI\\Layout\\NavigationMenu\\NavigationMenu' => __DIR__ . '/../..' . '/sources/application/UI/Layout/NavigationMenu/NavigationMenu.php',
'Combodo\\iTop\\Application\\UI\\Layout\\NavigationMenu\\NavigationMenuFactory' => __DIR__ . '/../..' . '/sources/application/UI/Layout/NavigationMenu/NavigationMenuFactory.php',
'Combodo\\iTop\\Application\\UI\\Layout\\Object\\ObjectDetails' => __DIR__ . '/../..' . '/sources/application/UI/Layout/Object/ObjectDetails.php',
'Combodo\\iTop\\Application\\UI\\Layout\\Object\\ObjectFactory' => __DIR__ . '/../..' . '/sources/application/UI/Layout/Object/ObjectFactory.php',
'Combodo\\iTop\\Application\\UI\\Layout\\PageContent\\PageContent' => __DIR__ . '/../..' . '/sources/application/UI/Layout/PageContent/PageContent.php',
'Combodo\\iTop\\Application\\UI\\Layout\\PageContent\\PageContentFactory' => __DIR__ . '/../..' . '/sources/application/UI/Layout/PageContent/PageContentFactory.php',
'Combodo\\iTop\\Application\\UI\\Layout\\PageContent\\PageContentWithSideContent' => __DIR__ . '/../..' . '/sources/application/UI/Layout/PageContent/PageContentWithSideContent.php',

View File

@@ -39,7 +39,8 @@ class PanelFactory
public static function MakeNeutral(string $sTitle)
{
$oPanel = new Panel($sTitle);
$oPanel->SetColor(Panel::ENUM_COLOR_NEUTRAL);
// TODO 2.8.0: Set this back to neutral when object details are done
$oPanel->SetColor(Panel::ENUM_COLOR_BLUE);
return $oPanel;
}
@@ -148,4 +149,21 @@ class PanelFactory
return $oPanel;
}
/**
* Make a Panel component with the specific $sClass color scheme
*
* @param string $sClass Class of the object the panel is for
* @param string $sTitle
*
* @return \Combodo\iTop\Application\UI\Component\Panel\Panel
*/
public static function MakeForClass(string $sClass, string $sTitle)
{
$oPanel = new Panel($sTitle);
// TODO 2.8.0: Change this to clas color when done
$oPanel->SetColor(Panel::ENUM_COLOR_BLUE);
return $oPanel;
}
}

View File

@@ -13,5 +13,5 @@ class ObjectDetails extends Panel
{
// Overloaded constants
public const BLOCK_CODE = 'ibo-object-details';
public const HTML_TEMPLATE_REL_PATH = 'components/object/object-details/layout';
public const HTML_TEMPLATE_REL_PATH = 'layouts/object/object-details/layout';
}

View File

@@ -0,0 +1,30 @@
<?php
/*
* @copyright Copyright (C) 2010-2020 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
namespace Combodo\iTop\Application\UI\Layout\Object;
use Combodo\iTop\Application\UI\Layout\Object\ObjectDetails;
use DBObject;
/**
* Class ObjectFactory
*
* @internal
* @author Guillaume Lajarige <guillaume.lajarige@combodo.com>
* @package Combodo\iTop\Application\UI\Layout\Object
* @since 2.8.0
*/
class ObjectFactory {
/**
* Make a standard object details layout.
*
* @return \Combodo\iTop\Application\UI\Layout\Object\ObjectDetails
*/
public static function MakeDetails(DBObject $oObject) {
return new ObjectDetails();
}
}