diff --git a/application/cmdbabstract.class.inc.php b/application/cmdbabstract.class.inc.php index c6ce4d391..bd40cb537 100644 --- a/application/cmdbabstract.class.inc.php +++ b/application/cmdbabstract.class.inc.php @@ -500,7 +500,7 @@ EOF $bCanEdit = UserRights::IsAdministrator() || $oAttDef->IsUserEditable(); $sDivId = $oDashboard->GetId(); - $oPage->add('
'); + $oPage->add('
'); $aExtraParams = array( 'query_params' => $this->ToArgsForQuery(), 'dashboard_div_id' => $sDivId, diff --git a/application/dashboard.class.inc.php b/application/dashboard.class.inc.php index 1d277d472..2932cf79c 100644 --- a/application/dashboard.class.inc.php +++ b/application/dashboard.class.inc.php @@ -534,7 +534,13 @@ EOF $aExtraParams['dashboard_div_id'] = utils::Sanitize($this->GetId(), '', 'element_identifier'); } - $oPage->add('
'.htmlentities(Dict::S($this->sTitle), ENT_QUOTES, 'UTF-8', false).'
'); + $sTitleForHTML = utils::HtmlEntities(Dict::S($this->sTitle)); + $oPage->add(<< +
{$sTitleForHTML}
+
+HTML + ); /** @var \DashboardLayoutMultiCol $oLayout */ $oLayout = new $this->sLayoutClass(); @@ -944,14 +950,14 @@ class RuntimeDashboard extends Dashboard function ReloadDashboard$sDivId() { // Do not reload when a dialog box is active - if (!($('.ui-dialog:visible').length > 0) && $('.dashboard_contents#$sDivId').is(':visible')) + if (!($('.ui-dialog:visible').length > 0) && $('.ibo-dashboard#$sDivId').is(':visible')) { - $('.dashboard_contents#$sDivId').block(); + $('.ibo-dashboard#$sDivId').block(); $.post(GetAbsoluteUrlAppRoot()+'pages/ajax.render.php', { operation: 'reload_dashboard', dashboard_id: '$sId', file: '$sFile', extra_params: $sExtraParams, c: $sContext, reload_url: '$sReloadURL'}, function(data){ - $('.dashboard_contents#$sDivId').html(data); - $('.dashboard_contents#$sDivId').unblock(); + $('.ibo-dashboard#$sDivId').html(data); + $('.ibo-dashboard#$sDivId').unblock(); } ); } @@ -1016,12 +1022,12 @@ EOF <<TrimCellsArray($aCells); - $oPage->add(''); + $oPage->add('
'); $iCellIdx = 0; $fColSize = 100 / $this->iNbCols; $sStyle = $bEditMode ? 'border: 1px #ccc dashed; width:'.$fColSize.'%;' : 'width: '.$fColSize.'%;'; @@ -123,11 +123,11 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout for($iRows = 0; $iRows < $iNbRows; $iRows++) { - $oPage->add(""); + $oPage->add(""); for($iCols = 0; $iCols < $this->iNbCols; $iCols++) { $sCellClass = ($iRows == $iNbRows-1) ? $sClass.' layout_last_used_rank' : $sClass; - $oPage->add(""); + $sStyle = 'style="border: 1px #ccc dashed; width:'.$fColSize.'%;" class="layout_cell edit_mode layout_extension" data-dashboard-grid-cell-index="'.$iCellIdx.'"'; + $oPage->add(""); for($iCols = 0; $iCols < $this->iNbCols; $iCols++) { - $oPage->add("'); } diff --git a/application/dashlet.class.inc.php b/application/dashlet.class.inc.php index f43f232bb..6234611af 100644 --- a/application/dashlet.class.inc.php +++ b/application/dashlet.class.inc.php @@ -50,7 +50,7 @@ abstract class Dashlet $this->bRedrawNeeded = true; // By default: redraw each time a property changes $this->bFormRedrawNeeded = false; // By default: no need to redraw the form (independent fields) $this->aProperties = array(); // By default: there is no property - $this->aCSSClasses = array('dashlet'); + $this->aCSSClasses = array('ibo-dashlet'); $this->sDashletType = get_class($this); } @@ -2306,8 +2306,8 @@ class DashletBadge extends Dashlet { parent::__construct($oModelReflection, $sId); $this->aProperties['class'] = 'Contact'; - $this->aCSSClasses[] = 'dashlet-inline'; - $this->aCSSClasses[] = 'dashlet-badge'; + $this->aCSSClasses[] = 'ibo-dashlet--is-inline'; + $this->aCSSClasses[] = 'ibo-dashlet-badge'; } /** @@ -2348,8 +2348,6 @@ class DashletBadge extends Dashlet $oPage->add('

'); $oPage->add('

'); $oPage->add(' '.Dict::Format('UI:ClickToCreateNew', $sClassLabel).''); - $oPage->add('
'); - $oPage->add(' '.Dict::Format('UI:SearchFor_Class', $sClassLabel).''); $oPage->add('

'); $oPage->add(''); diff --git a/application/displayblock.class.inc.php b/application/displayblock.class.inc.php index 348d53131..e6aa33cca 100644 --- a/application/displayblock.class.inc.php +++ b/application/displayblock.class.inc.php @@ -729,19 +729,37 @@ class DisplayBlock $this->m_oSet->SetShowObsoleteData($this->m_bShowObsoleteData); } $iCount = $this->m_oSet->Count(); + $sClassLabel = MetaModel::GetName($sClass); + $sClassIconUrl = MetaModel::GetClassIcon($sClass, false); $sHyperlink = utils::GetAbsoluteUrlAppRoot().'pages/UI.php?operation=search&'.$oAppContext->GetForLink().'&filter='.rawurlencode($this->m_oFilter->serialize()); - $sHtml .= '

'; - // Note: border set to 0 due to various browser interpretations (IE9 adding a 2px border) - $sHtml .= MetaModel::GetClassIcon($sClass, true, 'float;left;margin-right:10px;border:0;'); - $sHtml .= MetaModel::GetName($sClass).': '.$iCount.'

'; - $sParams = $oAppContext->GetForLink(); - $sHtml .= '

'; + + $sCreateActionHtml = ''; if (UserRights::IsActionAllowed($sClass, UR_ACTION_MODIFY)) { - $sHtml .= "".Dict::Format('UI:ClickToCreateNew', MetaModel::GetName($sClass))."
\n"; + $sCreateActionUrl = utils::GetAbsoluteUrlAppRoot().'pages/UI.php?operation=new&class='.$sClass.'&'.$oAppContext->GetForLink(); + $sCreateActionLabel = Dict::Format('UI:Button:Create'); + $sCreateActionHtml .= << + + $sCreateActionLabel + +HTML; } - $sHtml .= "".Dict::Format('UI:SearchFor_Class', MetaModel::GetName($sClass))."\n"; - $sHtml .= '

'; + + $sHtml .= << +
+ +
+
+ + $iCount + $sClassLabel + + $sCreateActionHtml +
+ +HTML; break; case 'summary': diff --git a/application/menunode.class.inc.php b/application/menunode.class.inc.php index 7dbbf6914..655715c46 100644 --- a/application/menunode.class.inc.php +++ b/application/menunode.class.inc.php @@ -1312,7 +1312,7 @@ class DashboardMenuNode extends MenuNode if ($oDashboard != null) { $sDivId = utils::Sanitize($this->sMenuId, '', 'element_identifier'); - $oPage->add('
'); + $oPage->add('
'); $aExtraParams['dashboard_div_id'] = $sDivId; $oDashboard->SetReloadURL($this->GetHyperlink($aExtraParams)); $oDashboard->Render($oPage, false, $aExtraParams); diff --git a/css/backoffice/components/_all.scss b/css/backoffice/components/_all.scss index 36a9794a3..ee726cb5e 100644 --- a/css/backoffice/components/_all.scss +++ b/css/backoffice/components/_all.scss @@ -8,11 +8,12 @@ @import "breadcrumbs"; @import "quick-create"; @import "global-search"; -@import "panel"; @import "popover-menu/popover-menu"; @import "popover-menu/popover-menu-item"; @import "newsroom-menu"; +@import "panel"; @import "modal"; +@import "dashlet/all"; @import "title"; @import "form"; diff --git a/css/backoffice/components/dashlet/_all.scss b/css/backoffice/components/dashlet/_all.scss new file mode 100644 index 000000000..50bff6e6b --- /dev/null +++ b/css/backoffice/components/dashlet/_all.scss @@ -0,0 +1,7 @@ +/*! + * @copyright Copyright (C) 2010-2020 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ + +@import "dashlet"; +@import "dashlet-badge"; \ No newline at end of file diff --git a/css/backoffice/components/dashlet/_dashlet-badge.scss b/css/backoffice/components/dashlet/_dashlet-badge.scss new file mode 100644 index 000000000..970dafc64 --- /dev/null +++ b/css/backoffice/components/dashlet/_dashlet-badge.scss @@ -0,0 +1,72 @@ +/*! + * @copyright Copyright (C) 2010-2020 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ + +/* SCSS variables */ +$ibo-dashlet-badge--padding-x: 16px !default; +$ibo-dashlet-badge--padding-y: 16px !default; +$ibo-dashlet-badge--min-width: 200px !default; +$ibo-dashlet-badge--background-color: $ibo-color-white-100 !default; +$ibo-dashlet-badge--border: 1px solid $ibo-color-grey-400 !default; +$ibo-dashlet-badge--border-radius: $ibo-border-radius-500 !default; + +$ibo-dashlet-badge--action-list--text-color: inherit !default; +$ibo-dashlet-badge--action-list-count--margin-right: 8px !default; +$ibo-dashlet-badge--action-list-label--max-width: 150px !default; + +$ibo-dashlet-badge--icon-container--margin-right: 16px !default; +$ibo-dashlet-badge--icon--size: 48px !default; + +$ibo-dashlet-badge--action-icon--margin-right: 6px !default; + +/* Rules */ +.ibo-dashlet-badge{ + min-width: $ibo-dashlet-badge--min-width; + padding: $ibo-dashlet-badge--padding-y $ibo-dashlet-badge--padding-x; + background-color: $ibo-dashlet-badge--background-color; + border: $ibo-dashlet-badge--border; + border-radius: $ibo-dashlet-badge--border-radius; +} +.ibo-dashlet-badge--body{ + display: flex; + justify-items: left; + align-items: center; +} +.ibo-dashlet-badge--icon-container{ + margin-right: $ibo-dashlet-badge--icon-container--margin-right; +} +.ibo-dashlet-badge--icon{ + width: $ibo-dashlet-badge--icon--size; + max-height: $ibo-dashlet-badge--icon--size; +} + +.ibo-dashlet-badge--actions{ + +} +.ibo-dashlet-badge--action-list{ + @extend %ibo-vertically-centered-content; + color: $ibo-dashlet-badge--action-list--text-color; + @extend %ibo-font-ral-med-250; + + &:hover, + &:active{ + @extend %ibo-hyperlink-inherited-colors; + } +} +.ibo-dashlet-badge--action-list-count{ + margin-right: $ibo-dashlet-badge--action-list-count--margin-right; + @extend %ibo-font-ral-bol-450; +} +.ibo-dashlet-badge--action-list-label{ + display: inline-block; + max-width: $ibo-dashlet-badge--action-list-label--max-width; + @extend %ibo-text-truncated-with-ellipsis; +} +.ibo-dashlet-badge--action-create{ + @extend %ibo-baseline-centered-content; + @extend %ibo-font-ral-med-150; +} +.ibo-dashlet-badge--action-create-icon{ + margin-right: $ibo-dashlet-badge--action-icon--margin-right; +} \ No newline at end of file diff --git a/css/backoffice/components/dashlet/_dashlet.scss b/css/backoffice/components/dashlet/_dashlet.scss new file mode 100644 index 000000000..7bcdab614 --- /dev/null +++ b/css/backoffice/components/dashlet/_dashlet.scss @@ -0,0 +1,21 @@ +/*! + * @copyright Copyright (C) 2010-2020 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ + +/* SCSS variables */ +$ibo-dashlet--width: 100% !default; +$ibo-dashlet--width--is-inline: auto !default; +$ibo-dashlet--margin-bottom--is-last: 16px !default; + +/* Rules */ +.ibo-dashlet{ + width: $ibo-dashlet--width; + + &:not(:last-of-type){ + margin-bottom: $ibo-dashlet--margin-bottom--is-last; + } +} +.ibo-dashlet--is-inline{ + width: $ibo-dashlet--width--is-inline; +} \ No newline at end of file diff --git a/css/backoffice/layout/_all.scss b/css/backoffice/layout/_all.scss index 03fe2a1e4..d399e4419 100644 --- a/css/backoffice/layout/_all.scss +++ b/css/backoffice/layout/_all.scss @@ -23,6 +23,7 @@ @import "tab-container/tab"; @import "multi-column/multi-column"; @import "multi-column/column"; +@import "dashboard/dashboard"; @import "object-details"; @import "activity-panel/activity-panel"; @import "activity-panel/activity-entry"; diff --git a/css/backoffice/layout/dashboard/_dashboard.scss b/css/backoffice/layout/dashboard/_dashboard.scss new file mode 100644 index 000000000..0d64d2aa3 --- /dev/null +++ b/css/backoffice/layout/dashboard/_dashboard.scss @@ -0,0 +1,41 @@ +/*! + * @copyright Copyright (C) 2010-2020 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ + +/* SCSS variables */ +$ibo-dashboard--grid--width: 100% !default; +$ibo-dashboard--grid--elements-spacing: 16px !default; +$ibo-dashboard--grid-row--elements-spacing: 16px !default; + +/* Rules */ +.ibo-dashboard--content{ + display: flex; + flex-direction: column; +} +.ibo-dashboard--grid{ + width: $ibo-dashboard--grid--width; +} +.ibo-dashboard--grid-row{ + display: flex; + flex-direction: row; + + &:not(:first-child){ + padding-top: calc(#{$ibo-dashboard--grid--elements-spacing} / 2); + } + &:not(:last-child){ + padding-bottom: calc(#{$ibo-dashboard--grid--elements-spacing} / 2); + } +} +.ibo-dashboard--grid-column{ + display: flex; + flex-flow: row wrap; + justify-content: space-between; + + &:not(:last-child) { + padding-right: calc(#{$ibo-dashboard--grid-row--elements-spacing} / 2); + } + &:not(:first-child) { + padding-left: calc(#{$ibo-dashboard--grid-row--elements-spacing} / 2); + } +} \ No newline at end of file diff --git a/css/backoffice/utils/helpers/_misc.scss b/css/backoffice/utils/helpers/_misc.scss index 4676b1e16..a7e44bf18 100644 --- a/css/backoffice/utils/helpers/_misc.scss +++ b/css/backoffice/utils/helpers/_misc.scss @@ -32,7 +32,7 @@ /* Typically to align icons and text */ %ibo-baseline-centered-content{ display: flex; - align-items: center; + align-items: baseline; } /* Note: This might not be named correctly. The intention is to make an element occupy the full height of its parent and to be centered in it */ %ibo-full-height-content{ diff --git a/css/light-grey.scss b/css/light-grey.scss index 2f5fb5395..86185b93b 100644 --- a/css/light-grey.scss +++ b/css/light-grey.scss @@ -322,13 +322,13 @@ } } - td { - font-family: Tahoma, Verdana, Arial, Helvetica; - font-size: 12px; - color: #696969; - nobackground-color: #ffffff; - padding: 0px; - } + //td { + // font-family: Tahoma, Verdana, Arial, Helvetica; + // font-size: 12px; + // color: #696969; + // nobackground-color: #ffffff; + // padding: 0px; + //} tr.clicked td { font-family: Tahoma, Verdana, Arial, Helvetica; @@ -1911,12 +1911,12 @@ font-family: Verdana, Arial, Helvetica, Sans-Serif } - td.dashboard { - vertical-align: top; - border: 1px solid #ccc; - padding: 0.5em; - width: 50%; - } + //td.dashboard { + // vertical-align: top; + // border: 1px solid #ccc; + // padding: 0.5em; + // width: 50%; + //} .white { background-color: #fff; @@ -2943,13 +2943,13 @@ width: 20px; } - .dashlet { - text-align: left; - } + //.dashlet { + // text-align: left; + //} - .dashlet-inline { - display: inline-block; - } + //.dashlet-inline { + // display: inline-block; + //} .dashlet-badge a.actions { background: none repeat scroll 0 0 transparent; @@ -3046,10 +3046,10 @@ margin: 10px; } - .dashboard_contents { - width: 100%; - background-color: $white; - } + //.dashboard_contents { + // width: 100%; + // background-color: $white; + //} .dashboard-selector { diff --git a/js/utils.js b/js/utils.js index db021e581..32d03ed0a 100644 --- a/js/utils.js +++ b/js/utils.js @@ -211,7 +211,7 @@ function ReloadBlock(divId, sStyle, sSerializedFilter, sExtraParams) { } function SaveGroupBySortOrder(sTableId, aValues) { - var sDashboardId = $('#'+sTableId).closest('.dashboard_contents').attr('id'); + var sDashboardId = $('#'+sTableId).closest('.ibo-dashboard').attr('id'); var sPrefKey = 'GroupBy_'+sDashboardId+'_'+sTableId; if (aValues.length != 0) { $sValue = JSON.stringify(aValues); @@ -222,7 +222,7 @@ function SaveGroupBySortOrder(sTableId, aValues) { } function LoadGroupBySortOrder(sTableId) { - var sDashboardId = $('#'+sTableId).closest('.dashboard_contents').attr('id'); + var sDashboardId = $('#'+sTableId).closest('.ibo-dashboard').attr('id'); var sPrefKey = 'GroupBy_'+sDashboardId+'_'+sTableId; var sValues = GetUserPreference(sPrefKey, null); if (sValues != null) { diff --git a/pages/ajax.render.php b/pages/ajax.render.php index 9d3b6d29f..fb5f09827 100644 --- a/pages/ajax.render.php +++ b/pages/ajax.render.php @@ -1115,7 +1115,7 @@ try } $oDashboard->Render($oPage, false, $aExtraParams); } - $oPage->add_ready_script("$('.dashboard_contents table.listResults').tableHover(); $('.dashboard_contents table.listResults').tablesorter( { widgets: ['myZebra', 'truncatedList']} );"); + $oPage->add_ready_script("$('.ibo-dashboard table.listResults').tableHover(); $('.ibo-dashboard table.listResults').tablesorter( { widgets: ['myZebra', 'truncatedList']} );"); break; case 'reload_dashboard': @@ -1134,7 +1134,7 @@ try } $oDashboard->Render($oPage, false, $aExtraParams); } - $oPage->add_ready_script("$('.dashboard_contents table.listResults').tableHover(); $('.dashboard_contents table.listResults').tablesorter( { widgets: ['myZebra', 'truncatedList']} );"); + $oPage->add_ready_script("$('.ibo-dashboard table.listResults').tableHover(); $('.ibo-dashboard table.listResults').tablesorter( { widgets: ['myZebra', 'truncatedList']} );"); break; case 'save_dashboard': @@ -1156,12 +1156,12 @@ try // trigger a reload of the current page since the dashboard just changed $oPage->add_script( <<add_script( <<
"); + $oPage->add(""); if (array_key_exists($iCellIdx, $aCells)) { $aDashlets = $aCells[$iCellIdx]; @@ -158,11 +158,11 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout } if ($bEditMode) // Add one row for extensibility { - $sStyle = 'style="border: 1px #ccc dashed; width:'.$fColSize.'%;" class="layout_cell edit_mode layout_extension" data-dashboard-cell-index="'.$iCellIdx.'"'; - $oPage->add("
"); + $oPage->add(""); $oPage->add(' '); $oPage->add('