diff --git a/application/cmdbabstract.class.inc.php b/application/cmdbabstract.class.inc.php index 60c4a40472..2929773348 100644 --- a/application/cmdbabstract.class.inc.php +++ b/application/cmdbabstract.class.inc.php @@ -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(''); + $oPage->add('
'); foreach($aCols as $sColIndex => $aFieldsets) { $oPage->add('
'); @@ -2328,7 +2333,7 @@ EOF { $sSelected = ' selected'; } - $sStatesSelection .= ''; + $sStatesSelection .= ''; } $sStatesSelection .= ''; $oPage->add_ready_script("$('.state_select_{$this->m_iFormId}').change( function() { oWizardHelper$sPrefix.ReloadObjectCreationForm('form_{$this->m_iFormId}', $(this).val()); } );"); diff --git a/application/itopwebpage.class.inc.php b/application/itopwebpage.class.inc.php index f8fe811c41..e76217c936 100644 --- a/application/itopwebpage.class.inc.php +++ b/application/itopwebpage.class.inc.php @@ -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 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); } }); diff --git a/css/light-grey.css b/css/light-grey.css index 33c6822eda..fdd4afde31 100644 --- a/css/light-grey.css +++ b/css/light-grey.css @@ -20,6 +20,13 @@ 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-layout-content .ui-tabs-nav li.ui-tabs-active { + padding-bottom: 3px; +} .raw_output { font-family: Courier-New, Courier, Arial, Helvetica; font-size: 8pt; @@ -47,6 +54,9 @@ h3 { font-weight: normal; font-size: 10pt; } +label { + cursor: pointer; +} .hilite, .hilite a, .hilite a:visited { color: #e87c1e; text-decoration: none; @@ -295,13 +305,13 @@ td a.mailto, td a.mailto:visited { text-decoration: none; color: #000; padding-left: 20px; - background: url(../images/mail.png?v=v2.4.0-beta) no-repeat left; + background: url(../images/mail.png?v=v2.4.0) no-repeat left; } td a.mailto:hover { text-decoration: underline; color: #e87c1e; padding-left: 20px; - background: url(../images/mail.png?v=v2.4.0-beta) no-repeat left; + background: url(../images/mail.png?v=v2.4.0) no-repeat left; } a.small_action { font-family: Tahoma, Verdana, Arial, Helvetica; @@ -319,7 +329,7 @@ a.small_action { padding-left: 5px; padding-top: 2px; padding-bottom: 2px; - background: #e87c1e url(../images/actions_left.png?v=v2.4.0-beta) no-repeat left; + background: #e87c1e url(../images/actions_left.png?v=v2.4.0) no-repeat left; } .actions_details span { background: url(../images/actions_right.png?v=v2.4.0-beta) no-repeat right; @@ -496,7 +506,7 @@ div.actions_menu > ul { nowidth: 70px; padding-left: 5px; /* Nasty work-around for IE... en attendant mieux */ - background: #e87c1e url(../images/actions_left.png?v=v2.4.0-beta) no-repeat top left; + background: #e87c1e url(../images/actions_left.png?v=v2.4.0) no-repeat top left; cursor: pointer; margin: 0; } @@ -651,7 +661,7 @@ td a.dp-choose-date, a.dp-choose-date, td a.dp-choose-date:hover, a.dp-choose-da display: block; text-indent: -2000px; overflow: hidden; - background: url(../images/calendar.png?v=v2.4.0-beta) no-repeat; + background: url(../images/calendar.png?v=v2.4.0) no-repeat; } td a.dp-choose-date.dp-disabled, a.dp-choose-date.dp-disabled { background-position: 0 -20px; @@ -748,19 +758,19 @@ div.HRDrawer { } /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */ table.listResults tr.odd td.truncated, table.listResults tr td.truncated, .wizContainer table.listResults tr.odd td.truncated, .wizContainer table.listResults tr td.truncated { - background: url(../images/truncated.png?v=v2.4.0-beta) bottom repeat-x; + background: url(../images/truncated.png?v=v2.4.0) bottom repeat-x; } /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */ table.listResults tr.even td.truncated, .wizContainer table.listResults tr.even td.truncated { - background: #f9f9f1 url(../images/truncated.png?v=v2.4.0-beta) bottom repeat-x; + background: #f9f9f1 url(../images/truncated.png?v=v2.4.0) bottom repeat-x; } /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */ table.listResults tr.even td.hover.truncated, .wizContainer table.listResults tr.even td.hover.truncated { - background: #fdf5d0 url(../images/truncated.png?v=v2.4.0-beta) bottom repeat-x; + background: #fdf5d0 url(../images/truncated.png?v=v2.4.0) bottom repeat-x; } /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */ table.listResults tr.odd td.hover.truncated, table.listResults tr td.hover.truncated, .wizContainer table.listResults tr.odd td.hover.truncated, .wizContainer table.listResults tr td.hover.truncated { - background: #fdf5d0 url(../images/truncated.png?v=v2.4.0-beta) bottom repeat-x; + background: #fdf5d0 url(../images/truncated.png?v=v2.4.0) bottom repeat-x; } table.listResults.truncated { border-bottom: 0; @@ -868,7 +878,7 @@ div#logo { div#logo div { height: 88px; width: 244px; - background: url(../images/itop-logo-2.png?v=v2.4.0-beta) left no-repeat; + background: url(../images/itop-logo-2.png?v=v2.4.0) left no-repeat; } #left-pane .ui-layout-north { overflow: hidden; @@ -1155,6 +1165,17 @@ span.form_validation { margin-top: 0.25em; margin-bottom: 0.25em; } +/* Helper classes for object details display. */ +.one-col-details { + min-width: 300px; + max-width: 600px; +} +.n-cols-details { + width: 100%; +} +.n-cols-details > tbody > tr > td { + min-width: 240px; +} .details { border-collapse: collapse; noborder-bottom: 2px #fff solid; @@ -1190,6 +1211,11 @@ fieldset .details > .field_container { width: inherit; margin-bottom: 5px; } +.field_container.field_large > div.field_data { + margin-top: 8px; + margin-bottom: 10px; + word-break: break-all; +} .field_container * { box-sizing: border-box; } @@ -1350,6 +1376,12 @@ fieldset .details > .field_container { .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_input_btn > img { max-width: 20px; } +.one-col-details .details .field_container.field_small { + /* 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 */ +} +.one-col-details .details .field_container.field_small div.field_label { + 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; @@ -1464,7 +1496,7 @@ img.prev, img.first, img.next, img.last { } div.actions_button { float: right; - background: #e87c1e url("../images/actions_left.png?v=v2.4.0-beta") no-repeat scroll left top; + background: #e87c1e url("../images/actions_left.png?v=v2.4.0") no-repeat scroll left top; padding-left: 5px; margin-top: 0; margin-right: 10px; @@ -1472,7 +1504,7 @@ div.actions_button { vertical-align: middle; } div.actions_button a, .actions_button a:hover, .actions_button a:visited { - background: #e87c1e url(../images/actions_bkg.png?v=v2.4.0-beta) no-repeat scroll right top; + background: #e87c1e url(../images/actions_bkg.png?v=v2.4.0) no-repeat scroll right top; color: #fff; padding-right: 8px; cursor: pointer; @@ -1496,7 +1528,7 @@ select#org_id { cursor: not-allowed; } .dragHover { - background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.4.0-beta); + background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.4.0); } .edit_mode .dashlet { background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.4.0-beta); @@ -1531,7 +1563,7 @@ table.prop_table { top: 0; right: 0; z-index: 10; - background: transparent url(../images/delete.png?v=v2.4.0-beta) no-repeat center; + background: transparent url(../images/delete.png?v=v2.4.0) no-repeat center; } td.prop_value { text-align: left; @@ -1725,17 +1757,17 @@ a.summary, a.summary:hover { } .message_info { border: 1px solid #993; - background: url(../images/info-mini.png?v=v2.4.0-beta) 1em 1em no-repeat #ffc; + background: url(../images/info-mini.png?v=v2.4.0) 1em 1em no-repeat #ffc; padding-left: 3em; } .message_ok { border: 1px solid #393; - background: url(../images/ok.png?v=v2.4.0-beta) 1em 1em no-repeat #cfc; + background: url(../images/ok.png?v=v2.4.0) 1em 1em no-repeat #cfc; padding-left: 3em; } .message_error { border: 1px solid #933; - background: url(../images/error.png?v=v2.4.0-beta) 1em 1em no-repeat #fcc; + background: url(../images/error.png?v=v2.4.0) 1em 1em no-repeat #fcc; padding-left: 3em; } .fg-menu a img { @@ -1866,18 +1898,18 @@ div.explain-printable { } #hiddeable_chapters .ui-tabs .ui-tabs-nav li.hideable-chapter span { padding-left: 20px; - background: url(../images/eye-open-555.png?v=v2.4.0-beta) 2px center no-repeat; + background: url(../images/eye-open-555.png?v=v2.4.0) 2px center no-repeat; } #hiddeable_chapters .ui-tabs .ui-tabs-nav li.hideable-chapter.strikethrough span { text-decoration: line-through; - background: url(../images/eye-closed-555.png?v=v2.4.0-beta) 2px center no-repeat; + background: url(../images/eye-closed-555.png?v=v2.4.0) 2px center no-repeat; } .printable-version legend { padding-left: 26px; - background: #1c94c4 url(../images/eye-open-fff.png?v=v2.4.0-beta) 8px center no-repeat; + background: #1c94c4 url(../images/eye-open-fff.png?v=v2.4.0) 8px center no-repeat; } .printable-version .strikethrough legend { - background: #1c94c4 url(../images/eye-closed-fff.png?v=v2.4.0-beta) 8px center no-repeat; + background: #1c94c4 url(../images/eye-closed-fff.png?v=v2.4.0) 8px center no-repeat; } .printable-version fieldset.strikethrough span { display: none; @@ -1896,7 +1928,7 @@ span.refresh-button { width: 21px; height: 18px; cursor: pointer; - background: transparent url(../images/refresh-fff.png?v=v2.4.0-beta) left center no-repeat; + background: transparent url(../images/refresh-fff.png?v=v2.4.0) left center no-repeat; } .case-log-history-entry { display: block; @@ -2024,7 +2056,7 @@ span.refresh-button { #itop-breadcrumb .breadcrumb-item a::after { content: ''; position: absolute; - background-image: url(../images/breadcrumb-separator.png?v=v2.4.0-beta); + background-image: url(../images/breadcrumb-separator.png?v=v2.4.0); background-repeat: no-repeat; width: 8px; height: 16px; diff --git a/css/light-grey.scss b/css/light-grey.scss index 202061a974..ecc38aaeda 100644 --- a/css/light-grey.scss +++ b/css/light-grey.scss @@ -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; @@ -1251,6 +1259,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; @@ -1275,18 +1295,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 { } @@ -1502,6 +1528,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;