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

N°3882 - Refactor display of field badges (meta enums / enums) in lists to match original mockups

Browse Source
This commit is contained in:
Molkobain
2021-09-22 15:17:40 +02:00
parent e2b73995e1
commit 1e73ee8ccd
4 changed files with 47 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
css/backoffice/blocks-integrations/_all.scss
View File

@@ -13,6 +13,7 @@
@import "object-details-with-tab-container";
@import "medallion-with-blocklist";
@import "input-within-datatable";
@import "field-badge-within-datatable";
@import "jquery-blockui-within-dialog";
@import "jquery-blockui-within-datatable";
@import "collapsible-section-within-caselog-list";

40
css/backoffice/blocks-integrations/_field-badge-within-datatable.scss Normal file
View File

@@ -0,0 +1,40 @@
/*!
* @copyright Copyright (C) 2010-2021 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-field-badge-within-datatable--ibo-field-badge--margin: 0 !default;
$ibo-field-badge-within-datatable--ibo-field-badge--padding: 0 !default;
$ibo-field-badge-within-datatable--ibo-field-badge--text-color: unset !default;
$ibo-field-badge-within-datatable--ibo-field-badge--background-color: unset !default;
$ibo-field-badge-within-datatable--ibo-field-badge-dot--size: 10px !default;
$ibo-field-badge-within-datatable--ibo-field-badge-dot--spacing-x: $ibo-field-badge--label--spacing-x !default;
$ibo-field-badge-within-datatable--ibo-field-badge-dot--background-color: $ibo-color-white-100 !default;
.ibo-datatable {
.ibo-field-badge {
margin: $ibo-field-badge-within-datatable--ibo-field-badge--margin;
padding: $ibo-field-badge-within-datatable--ibo-field-badge--padding;
color: $ibo-field-badge-within-datatable--ibo-field-badge--text-color;
background-color: $ibo-field-badge-within-datatable--ibo-field-badge--background-color;
&::before {
content: "";
display: inline-flex;
margin-right: $ibo-field-badge-within-datatable--ibo-field-badge-dot--spacing-x;
width: $ibo-field-badge-within-datatable--ibo-field-badge-dot--size;
height: $ibo-field-badge-within-datatable--ibo-field-badge-dot--size;
min-width: $ibo-field-badge-within-datatable--ibo-field-badge-dot--size;
min-height: $ibo-field-badge-within-datatable--ibo-field-badge-dot--size;
background-color: var(--ibo-main-color);
@extend %ibo-border-radius-full;
}
.ibo-field-badge--decoration {
display: none;
+ .ibo-field-badge--label {
margin-left: unset;
}
}
}
}

5
css/backoffice/components/_datatable.scss
View File

@@ -77,11 +77,6 @@ $ibo-fieldsorter--selected--background-color: $ibo-color-blue-200 !default;
overflow-y: auto;
}
.ibo-datatable .ibo-field-badge {
margin: 0;
padding: 0px 4px;
}
// Datatables configure this list dialog
// Could be in a separate component, but is only used in datatables as of now

7
css/backoffice/components/_field-badge.scss
View File

@@ -10,10 +10,15 @@ $ibo-field-badge--border-radius: $ibo-border-radius-300 !default;
$ibo-field-badge--label--spacing-x: 0.5rem !default;
.ibo-field-badge {
display: inline-flex;
align-items: baseline;
margin: $ibo-field-badge--margin;
padding: $ibo-field-badge--padding;
border-radius: $ibo-field-badge--border-radius;
display: inline;
/* Mind the use of these "generic" variables that allow to automatically use the right colors for a field and its value depending on which class will be append to it (see those defined in the DM) */
background-color: var(--ibo-main-color);
color: var(--ibo-complementary-color);
}
.ibo-field-badge--decoration + .ibo-field-badge--label {