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

N°930.2 Console UI: Better object details layout step 2.

Browse Source 
SVN:trunk[5095]
This commit is contained in:
Guillaume Lajarige
2017-10-26 17:03:32 +00:00
parent eca2b01307
commit 52595138cd
4 changed files with 1184 additions and 1072 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -625,17 +625,22 @@ EOF
{
$aDetails[$sTab] = array();
$aTableStyles[] = 'vertical-align:top';
$aTableClasses = array();
ksort($aCols);
$iColCount = count($aCols);
if($iColCount > 1)
{
$aTableStyles[] = 'width: 100%';
$aTableClasses[] = 'n-cols-details';
$aTableClasses[] = $iColCount.'-cols-details';
}
else
{
$aTableClasses[] = 'one-col-details';
}
// Else, will size regarding the largest field of the column
$oPage->SetCurrentTab(Dict::S($sTab));
$oPage->add('<table style="'.implode('; ', $aTableStyles).'" data-mode="'.$sEditMode.'"><tr>');
$oPage->add('<table style="'.implode('; ', $aTableStyles).'" class="'.implode(' ', $aTableClasses).'" data-mode="'.$sEditMode.'"><tr>');
foreach($aCols as $sColIndex => $aFieldsets)
{
$oPage->add('<td style="vertical-align:top">');
@@ -2328,7 +2333,7 @@ EOF
{
$sSelected = ' selected';
}
$sStatesSelection .= '<option value="'.$sStateCode.'"'.$sSelected.'>'.MetaModel::GetStateLabel($sClass, $sStateCode).'</option>';
$sStatesSelection .= '<option value="'.$sStateCode.'" '.$sSelected.'>'.MetaModel::GetStateLabel($sClass, $sStateCode).'</option>';
}
$sStatesSelection .= '</select>';
$oPage->add_ready_script("$('.state_select_{$this->m_iFormId}').change( function() { oWizardHelper$sPrefix.ReloadObjectCreationForm('form_{$this->m_iFormId}', $(this).val()); } );");

31
application/itopwebpage.class.inc.php
View File

@@ -331,31 +331,6 @@ EOF
// This selector will be reused when selecting actual tab widget A elements.
var tab_a_selector = 'ul.ui-tabs-nav a';
// This helper will be used to resize tab width
var resizeTab = function(oElem){
var iTableWidth = (oElem.children('table:first').length > 0) ? oElem.children('table:first').outerWidth() : 0;
var oLayoutContentElem = oElem.closest('.ui-layout-content');
var bEditMode = (oLayoutContentElem.find('.wizContainer').length > 0);
var oContainerElem = (bEditMode) ? oLayoutContentElem.find('.wizContainer:first') : oLayoutContentElem.find('.ui-tabs:first');
// Resizing wizard container
oContainerElem.css('min-width',
parseInt(iTableWidth) +
parseInt(oElem.css('margin-left'))*2 +
parseInt(oElem.css('padding-left'))*2 +
parseInt(tabs.css('margin-left'))*2 +
parseInt(tabs.css('padding-left'))*2
)
// Resizing header according to content container
var iLayoutContentWidth = parseInt(oContainerElem.width());
if(bEditMode)
{
iLayoutContentWidth += parseInt(oContainerElem.css('margin-left'))*2 + parseInt(oContainerElem.css('padding-left'))*2
}
oLayoutContentElem.find('.page_header').css('min-width', iLayoutContentWidth);
};
// Ugly patch for a change in the behavior of jQuery UI:
// Before jQuery UI 1.9, tabs were always considered as "local" (opposed to Ajax)
// when their href was beginning by #. Starting with 1.9, a <base> tag in the page
@@ -379,9 +354,6 @@ EOF
event: 'change', 'show': function(event, ui) {
$('.resizable', ui.panel).resizable(); // Make resizable everything that claims to be resizable !
},
create: function( event, ui ) {
resizeTab(ui.panel);
},
beforeLoad: function( event, ui ) {
if ( ui.tab.data('loaded') && (ui.tab.attr('data-cache') == 'true')) {
event.preventDefault();
@@ -391,9 +363,6 @@ EOF
ui.jqXHR.success(function() {
ui.tab.data( "loaded", true );
});
},
activate: function( event, ui ) {
resizeTab(ui.newPanel);
}
});

2176
css/light-grey.css
View File

File diff suppressed because it is too large Load Diff

36
css/light-grey.scss
View File

@@ -35,6 +35,14 @@ body.printable-version {
.ui-layout-content {
padding-left: 10px;
}
.ui-layout-content .ui-tabs-nav li {
/* Overriding jQuery UI theme to see active tab better */
margin-bottom: 2px;
&.ui-tabs-active{
padding-bottom: 3px;
}
}
.raw_output {
font-family: Courier-New, Courier, Arial, Helvetica;
@@ -1256,6 +1264,18 @@ span.form_validation {
margin-bottom: 0.25em;
}
/* Helper classes for object details display. */
.one-col-details {
min-width: 300px;
max-width: 600px;
}
.n-cols-details {
width: 100%;
> tbody > tr > td {
min-width: 240px;
}
}
.details {
border-collapse: collapse;
noborder-bottom: 2px #fff solid;
@@ -1280,18 +1300,24 @@ fieldset .details>.field_container {
margin-bottom: 0px;
}
&.field_large{
&.field_large {
display: inherit;
/* .field_label, .field_data */
> div {
display: inherit;
&.field_label{
&.field_label {
width: inherit;
margin-bottom: 5px;
}
&.field_data {
margin-top: 8px;
margin-bottom: 10px;
word-break: break-all;
}
/* .field_value, .field_comments, .field_infos */
> div {
}
@@ -1507,6 +1533,12 @@ fieldset .details>.field_container {
}
}
}
.one-col-details .details .field_container.field_small {
div.field_label {
/* On a single column, field labels can take more width but they are limited so it doesn't feel weird when all labels are short */
width: 145px;
}
}
/* This is extracted from the ".details > .field_container ..." because of the fullscreen option (element is moved at the end of the body */
.field_input_text{
border: none;