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

N°2847 - Dashboard: Improve grid alignments and design of the badge dashlet

Browse Source
This commit is contained in:
Molkobain
2020-10-09 18:42:53 +02:00
parent ecf678f39f
commit 64a96ac001
5 changed files with 41 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
application/dashboardlayout.class.inc.php
View File

@@ -116,18 +116,30 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout
$oPage->add('<table class="ibo-dashboard--grid"><tbody>');
$iCellIdx = 0;
$fColSize = 100 / $this->iNbCols;
$sStyle = $bEditMode ? 'border: 1px #ccc dashed; width:'.$fColSize.'%;' : 'width: '.$fColSize.'%;';
$sClass = $bEditMode ? 'layout_cell edit_mode' : 'dashboard';
$fColSize = ceil(100 / $this->iNbCols); // Note: ceil() is necessary otherwise the table will be too short since the new flex layout (N°2847)
$iNbRows = ceil(count($aCells) / $this->iNbCols);
$aStyleProperties = [];
// - Explicit full width when single column
if($this->iNbCols > 1)
{
$aStyleProperties[] = 'width: '.$fColSize.'%;';
}
// - Visible borders in editor
if($bEditMode)
{
$aStyleProperties[] = 'border: 1px #ccc dashed;';
}
$sClass = $bEditMode ? 'layout_cell edit_mode' : 'dashboard';
for($iRows = 0; $iRows < $iNbRows; $iRows++)
{
$oPage->add("<tr class=\"ibo-dashboard--grid-row\" data-dashboard-grid-row-index=\"$iRows\">");
for($iCols = 0; $iCols < $this->iNbCols; $iCols++)
{
$sCellClass = ($iRows == $iNbRows-1) ? $sClass.' layout_last_used_rank' : $sClass;
$oPage->add("<td class=\"ibo-dashboard--grid-column ibo-dashboard--grid-cell $sCellClass\" style=\"$sStyle\" data-dashboard-grid-column-index=\"$iCols\" data-dashboard-grid-cell-index=\"$iCellIdx\">");
$oPage->add("<td class=\"ibo-dashboard--grid-column ibo-dashboard--grid-cell $sCellClass\" style=\"".implode(' ', $aStyleProperties)."\" data-dashboard-grid-column-index=\"$iCols\" data-dashboard-grid-cell-index=\"$iCellIdx\">");
if (array_key_exists($iCellIdx, $aCells))
{
$aDashlets = $aCells[$iCellIdx];
@@ -158,11 +170,10 @@ 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-grid-cell-index="'.$iCellIdx.'"';
$oPage->add("<tr class=\"ibo-dashboard--grid-row\" data-dashboard-grid-row-index=\"$iRows\">");
for($iCols = 0; $iCols < $this->iNbCols; $iCols++)
{
$oPage->add("<td $sStyle data-dashboard-grid-column-index=\"$iCols\">");
$oPage->add("<td class=\"ibo-dashboard--grid-column ibo-dashboard--grid-cell layout_cell edit_mode layout_extension\" style=\"".implode(' ', $aStyleProperties)."\" data-dashboard-grid-column-index=\"$iCols\" data-dashboard-grid-cell-index=\"$iCellIdx\">");
$oPage->add('&nbsp;');
$oPage->add('</td>');
}

8
css/backoffice/components/dashlet/_dashlet-badge.scss
View File

@@ -22,7 +22,10 @@ $ibo-dashlet-badge--action-icon--margin-right: 6px !default;
/* Rules */
.ibo-dashlet-badge{
min-width: $ibo-dashlet-badge--min-width;
//min-width: $ibo-dashlet-badge--min-width;
flex-basis: $ibo-dashlet-badge--min-width;
flex-grow: 1;
flex-shrink: 1;
padding: $ibo-dashlet-badge--padding-y $ibo-dashlet-badge--padding-x;
background-color: $ibo-dashlet-badge--background-color;
border: $ibo-dashlet-badge--border;
@@ -38,6 +41,7 @@ $ibo-dashlet-badge--action-icon--margin-right: 6px !default;
}
.ibo-dashlet-badge--icon{
width: $ibo-dashlet-badge--icon--size;
min-width: $ibo-dashlet-badge--icon--size; /* To avoid image being shrinked when container is too small */
max-height: $ibo-dashlet-badge--icon--size;
}
@@ -69,4 +73,4 @@ $ibo-dashlet-badge--action-icon--margin-right: 6px !default;
}
.ibo-dashlet-badge--action-create-icon{
margin-right: $ibo-dashlet-badge--action-icon--margin-right;
}
}

8
css/backoffice/components/dashlet/_dashlet.scss
View File

@@ -6,15 +6,13 @@
/* SCSS variables */
$ibo-dashlet--width: 100% !default;
$ibo-dashlet--width--is-inline: auto !default;
$ibo-dashlet--margin-bottom--is-last: 16px !default;
$ibo-dashlet--elements-spacing-x: 24px !default;
$ibo-dashlet--elements-spacing-y: 24px !default;
/* Rules */
.ibo-dashlet{
width: $ibo-dashlet--width;
&:not(:last-of-type){
margin-bottom: $ibo-dashlet--margin-bottom--is-last;
}
margin: calc(#{$ibo-dashlet--elements-spacing-y} / 2) calc(#{$ibo-dashlet--elements-spacing-x} / 2);
}
.ibo-dashlet--is-inline{
width: $ibo-dashlet--width--is-inline;

22
css/backoffice/layout/dashboard/_dashboard.scss
View File

@@ -5,8 +5,8 @@
/* SCSS variables */
$ibo-dashboard--grid--width: 100% !default;
$ibo-dashboard--grid--elements-spacing: 16px !default;
$ibo-dashboard--grid-row--elements-spacing: 16px !default;
$ibo-dashboard--grid--elements-spacing-x: $ibo-dashlet--elements-spacing-x !default;
$ibo-dashboard--grid--elements-spacing-y: $ibo-dashlet--elements-spacing-y !default;
/* Rules */
.ibo-dashboard--content{
@@ -19,23 +19,29 @@ $ibo-dashboard--grid-row--elements-spacing: 16px !default;
.ibo-dashboard--grid-row{
display: flex;
flex-direction: row;
overflow: hidden; /* Because of the column negative margin (which is for the dashlets spacing) */
&:not(:first-child){
padding-top: calc(#{$ibo-dashboard--grid--elements-spacing} / 2);
}
/* Compensate negative margin on inner borders to simulate egal dashlets spacing between rows */
&:not(:last-child){
padding-bottom: calc(#{$ibo-dashboard--grid--elements-spacing} / 2);
padding-bottom: calc(#{$ibo-dashboard--grid--elements-spacing-y} / 2);
}
&:not(:first-child){
padding-top: calc(#{$ibo-dashboard--grid--elements-spacing-y} / 2);
}
}
.ibo-dashboard--grid-column{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
width: calc(100% + (2 * #{$ibo-dashboard--grid--elements-spacing-x}));
margin: calc(-1 * #{$ibo-dashboard--grid--elements-spacing-y} / 2) calc(-1 * #{$ibo-dashboard--grid--elements-spacing-x} / 2); /* Because of the margin all around the dashlets, we need to compensate it */
/* Compensate negative margin on inner borders to simulate egal dashlets spacing between columns */
&:not(:last-child) {
padding-right: calc(#{$ibo-dashboard--grid-row--elements-spacing} / 2);
margin-right: 0;
}
&:not(:first-child) {
padding-left: calc(#{$ibo-dashboard--grid-row--elements-spacing} / 2);
margin-left: 0;
}
}

2
css/light-grey.scss
View File

@@ -2895,7 +2895,7 @@
}
td.layout_cell {
height: 50px; /* min-height does not work */
min-height: 50px; /* min-height seems to work now since we dropped IE support */
vertical-align: top;
}