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

N°2844 - Refactor Panel to include a configurable header

Browse Source 
- TitleForObjectDetails no longer exists, use the ObjectDetails's properties instead
This commit is contained in:
Molkobain
2021-03-04 16:51:45 +01:00
parent 4e22906180
commit 1d7bc7c8f7
21 changed files with 648 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
css/backoffice/components/_panel.scss
View File

@@ -19,16 +19,29 @@
/* SCSS variables */
$ibo-panel--spacing-top: 24px !default;
$ibo-panel--header--margin-bottom: 4px !default;
$ibo-panel--icon--size: 48px !default;
$ibo-panel--icon--spacing: 16px !default;
$ibo-panel--icon--size-as-medallion: 72px !default;
$ibo-panel--icon--spacing--as-medallion: 16px !default;
$ibo-panel--icon--bottom--as-medallion: -24px !default;
$ibo-panel--icon--background-color--as-medallion: $ibo-color-grey-100 !default;
$ibo-panel--icon--border--as-medallion: 2px solid $ibo-color-blue-grey-300 !default;
$ibo-panel--icon--border-radius--as-medallion: $ibo-border-radius-full !default;
$ibo-panel--icon-background--size--must-contain: contain !default;
$ibo-panel--icon-background--size--must-cover: cover !default;
$ibo-panel--icon-background--size--must-zoomout: 66.67% !default;
$ibo-panel--title--color: $ibo-color-grey-900 !default;
$ibo-panel--subtitle--color: $ibo-color-grey-800 !default;
$ibo-panel--highlight--width: 100% !default;
$ibo-panel--highlight--height: 8px !default;
$ibo-panel--highlight--border-radius: $ibo-border-radius-400 $ibo-border-radius-400 0 0 !default;
$ibo-panel--highlight--padding-bottom: $ibo-panel--highlight--height !default;
$ibo-panel--title-icon--max-height: 48px !default;
$ibo-panel--title-icon--margin-right: 5px !default;
$ibo-panel--title--color: $ibo-color-grey-900 !default;
$ibo-panel--subtitle--color: $ibo-color-grey-800 !default;
$ibo-panel--body--background-color: $ibo-color-white-100 !default;
$ibo-panel--body--padding-bottom: 24px !default;
$ibo-panel--body--padding-top: $ibo-panel--body--padding-bottom + $ibo-panel--highlight--height !default;
@@ -81,47 +94,114 @@ $ibo-panel-colors: (
margin-top: $ibo-panel--spacing-top;
}
.ibo-panel {
&.ibo-has-icon {
.ibo-panel--titles {
padding-left: $ibo-panel--icon--spacing;
}
&.ibo-has-medallion-icon {
.ibo-panel--header-left {
position: relative;
z-index: 1;
margin-left: $ibo-panel--icon--spacing--as-medallion;
}
.ibo-panel--icon {
position: absolute;
bottom: $ibo-panel--icon--bottom--as-medallion;
left: 0;
overflow: hidden;
width: $ibo-panel--icon--size-as-medallion;
height: $ibo-panel--icon--size-as-medallion;
min-width: $ibo-panel--icon--size-as-medallion;
min-height: $ibo-panel--icon--size-as-medallion;
background-color: $ibo-panel--icon--background-color--as-medallion;
border: $ibo-panel--icon--border--as-medallion;
border-radius: $ibo-panel--icon--border-radius--as-medallion;
}
.ibo-panel--titles {
padding-left: calc(#{$ibo-panel--icon--size-as-medallion} + #{$ibo-panel--icon--spacing--as-medallion});
}
}
}
}
.ibo-panel--header {
display: flex;
justify-content: space-between;
align-items: stretch;
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: $ibo-panel--header--margin-bottom;
}
.ibo-panel--header-left {
@extend %ibo-fully-centered-content;
justify-content: left;
}
.ibo-panel--icon {
@extend %ibo-fully-centered-content;
width: $ibo-panel--icon--size;
height: $ibo-panel--icon--size;
min-width: $ibo-panel--icon--size;
min-height: $ibo-panel--icon--size;
}
.ibo-panel--icon-background {
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: $ibo-panel--icon-background--size--must-contain;
}
.ibo-panel--icon-background--must-contain {
background-size: $ibo-panel--icon-background--size--must-contain;
}
.ibo-panel--icon-background--must-cover {
background-size: $ibo-panel--icon-background--size--must-cover;
}
.ibo-panel--icon-background--must-zoomout {
background-size: $ibo-panel--icon-background--size--must-zoomout;
}
.ibo-panel--title {
display: inline-block;
color: $ibo-panel--title--color;
@extend %ibo-font-ral-med-250;
flex-grow: 1;
@extend %ibo-font-ral-med-250;
flex-grow: 1;
.ibo-panel--title-icon {
display: inline-block;
> img{
max-height: $ibo-panel--title-icon--max-height;
margin-right: $ibo-panel--title-icon--margin-right;
// TODO 3.0.0: Refactor this as it used by the enhanced panel which should be removed
.ibo-panel--title-icon {
display: inline-block;
}
.ibo-panel--title-title {
display: inline-block;
@extend %ibo-font-ral-med-250;
.ibo-panel--title-title-title {
}
}
.ibo-panel--title-title {
display: inline-block;
@extend %ibo-font-ral-med-250;
.ibo-panel--title-title-subtitle {
@extend .ibo-panel--subtitle;
.ibo-panel--title-title-title {
}
.ibo-panel--title-title-subtitle {
@extend .ibo-panel--subtitle;
a.summary {
@extend %ibo-font-ral-nor-250;
color: $ibo-panel--subtitle--color;
}
}
}
a.summary {
@extend %ibo-font-ral-nor-250;
color: $ibo-panel--subtitle--color;
}
}
}
}
.ibo-panel--subtitle {
@extend %ibo-font-ral-nor-250;
color: $ibo-panel--subtitle--color;
display: flex;
@extend %ibo-font-ral-med-250;
color: $ibo-panel--subtitle--color;
}
.ibo-panel--body {

111
css/backoffice/components/_title.scss
View File

@@ -7,29 +7,12 @@ $ibo-title--text-color: $ibo-color-grey-900 !default;
$ibo-title--padding-y: 12px !default;
$ibo-title--padding-x: 0 !default;
$ibo-title--medallion--size: 90px !default;
$ibo-title--medallion--background-color: $ibo-color-grey-100 !default;
$ibo-title--medallion--border: 2px solid $ibo-color-blue-grey-300 !default;
$ibo-title--medallion--border-radius: $ibo-border-radius-full !default;
$ibo-title--icon--size: 90px !default;
$ibo-title--icon--size--must-contain: contain !default;
$ibo-title--icon--size--must-cover: cover !default;
$ibo-title--icon--size--must-zoomout: 66.67% !default;
$ibo-title--icon-background--size--must-contain: contain !default;
$ibo-title--icon-background--size--must-cover: cover !default;
$ibo-title--icon-background--size--must-zoomout: 66.67% !default;
$ibo-title--status-dot--size: 10px !default;
$ibo-title--status-dot--spacing: 8px !default;
$ibo-title--status-dot--border-radius: $ibo-border-radius-full !default;
$ibo-title--object-tags--margin-left: 12px !default;
$ibo-title--object-tags--color: $ibo-color-grey-900 !default;
$ibo-title--object-tags--icon--margin-right: 6px !default;
$ibo-title--object-tags--icon--color: $ibo-color-grey-700 !default;
$ibo-title--object-tags--separator-dot--background-color: $ibo-color-grey-800 !default;
$ibo-title--object-tags--separator-dot--diameter: 5px !default;
$ibo-title--object-tags--separator-dot--margin-right: 12px !default;
$ibo-title--object-tags--separator-dot--border-radius: $ibo-border-radius-full !default;
.ibo-title {
@extend %ibo-baseline-centered-content;
@@ -38,37 +21,33 @@ $ibo-title--object-tags--separator-dot--border-radius: $ibo-border-radius-full !
padding: $ibo-title--padding-y $ibo-title--padding-x;
}
.ibo-title--medallion {
.ibo-title--icon {
@extend %ibo-fully-centered-content;
width: $ibo-title--medallion--size;
height: $ibo-title--medallion--size;
min-width: $ibo-title--medallion--size;
min-height: $ibo-title--medallion--size;
width: $ibo-title--icon--size;
height: $ibo-title--icon--size;
min-width: $ibo-title--icon--size;
min-height: $ibo-title--icon--size;
overflow: hidden;
background-color: $ibo-title--medallion--background-color;
border: $ibo-title--medallion--border;
border-radius: $ibo-title--medallion--border-radius;
}
.ibo-title--icon {
.ibo-title--icon-background {
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: $ibo-title--icon--size--must-contain;
background-size: $ibo-title--icon-background--size--must-contain;
}
.ibo-title--icon--must-contain {
background-size: $ibo-title--icon--size--must-contain;
.ibo-title--icon-background--must-contain {
background-size: $ibo-title--icon-background--size--must-contain;
}
.ibo-title--icon--must-cover {
background-size: $ibo-title--icon--size--must-cover;
.ibo-title--icon-background--must-cover {
background-size: $ibo-title--icon-background--size--must-cover;
}
.ibo-title--icon--must-zoomout {
background-size: $ibo-title--icon--size--must-zoomout;
.ibo-title--icon-background--must-zoomout {
background-size: $ibo-title--icon-background--size--must-zoomout;
}
.ibo-title--for-object-details {
@@ -83,43 +62,6 @@ $ibo-title--object-tags--separator-dot--border-radius: $ibo-border-radius-full !
flex-wrap: wrap;
}
.ibo-title--status {
@extend %ibo-baseline-centered-content;
}
.ibo-title--status-dot {
@extend %ibo-fully-centered-content;
width: $ibo-title--status-dot--size;
height: $ibo-title--status-dot--size;
min-width: $ibo-title--status-dot--size;
min-height: $ibo-title--status-dot--size;
border-radius: $ibo-title--status-dot--border-radius;
}
.ibo-title--status-dot + .ibo-title--status-label {
margin-left: $ibo-title--status-dot--spacing;
}
.ibo-title--status + .ibo-title--object-class {
margin-left: 0.5rem;
&::before {
content: "(";
}
&::after {
content: ")";
}
}
@each $sType, $aColors in $ibo-lifecycle-states-colors {
.ibo-title--status-dot.ibo-is-state-#{$sType} {
color: map-get($aColors, 'secondary-color');
background-color: map-get($aColors, 'primary-color');
}
}
.ibo-title-for-dashlet {
@@ -145,22 +87,3 @@ $ibo-title--object-tags--separator-dot--border-radius: $ibo-border-radius-full !
margin:0;
padding:0;
}
.ibo-title--object-tags {
margin-left: $ibo-title--object-tags--margin-left;
color: $ibo-title--object-tags--color;
}
.ibo-title--object-tags > i {
margin-right: $ibo-title--object-tags--icon--margin-right;
color: $ibo-title--object-tags--icon--color;
}
.ibo-title--object-tags ~ .ibo-title--object-tags::before, .ibo-title--object-class ~ .ibo-title--object-tags::before{
content: " ";
display: inline-block;
vertical-align: middle;
margin-right: $ibo-title--object-tags--separator-dot--margin-right;
width: $ibo-title--object-tags--separator-dot--diameter;
height: $ibo-title--object-tags--separator-dot--diameter;
border-radius: $ibo-title--object-tags--separator-dot--border-radius;
background-color: $ibo-title--object-tags--separator-dot--background-color;
}

2
css/backoffice/layout/_all.scss
View File

@@ -25,7 +25,7 @@
@import "multi-column/column";
@import "dashboard/all";
@import "wizard-container/wizard-container";
@import "object-details";
@import "object/object-details";
@import "activity-panel/activity-panel";
@import "activity-panel/activity-entry";
@import "activity-panel/caselog-entry";

52
css/backoffice/layout/_object-details.scss
View File

@@ -1,52 +0,0 @@
/*!
* @copyright Copyright (C) 2010-2020 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
// TODO 3.0.0: This is temporary to make object forms work while it is being migrated to the blocks syste.
// When there is a real ObjectDetails block, rework this to match the block conventions.
.object-details .ibo-title {
z-index: 1;
align-items: start;
position: relative;
padding-left: 32px;
}
.object-details .ibo-title .ibo-title--medallion {
position: absolute;
margin-top: 16px;
}
.object-details .ibo-title.ibo-has-icon .ibo-title--content {
margin-left: calc(90px + 32px);
}
.object-details .ibo-panel {
z-index: 0;
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container > .ibo-tab-container--tabs-list{
padding-left: calc(32px + 90px + 32px - 24px);
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical{
display: flex;
flex-direction: row;
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list{
padding-top: 50px;
flex-direction: column;
height: auto;
padding-left: unset;
margin-right: unset;
min-width: calc(32px + 90px + 32px);
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--tab-header{
height: 50px;
width: 100%;
justify-content: left;
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--tab-header > .ibo-tab-container--tab-toggler{
width: 100%;
justify-content: left;
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tab-container {
flex-grow: 1;
margin-left: unset;
}

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

@@ -6,5 +6,6 @@
@import "caselog-entry-form-within-activity-panel";
@import "panel-with-tab-container";
@import "panel-with-datatable";
@import "object-details-with-tab-container";
@import "medallion-with-blocklist";
@import "add-to-dashboard";

16
css/backoffice/layout/blocks-integrations/_object-details-with-tab-container.scss Normal file
View File

@@ -0,0 +1,16 @@
/*!
* @copyright Copyright (C) 2010-2021 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
// Note: We use the child ">" selector to ensure this applies only the child tab container, not another one that would be nested
.ibo-object-details {
> .ibo-panel--body {
> .ibo-tab-container {
> .ibo-tab-container--tabs-list {
// Align tab toggler's title with the panel's title
padding-left: calc(#{$ibo-object-details--icon--spacing--as-medallion} + #{$ibo-object-details--icon--size} + #{$ibo-object-details--icon--spacing--as-medallion} - #{$ibo-tab-container--tab-toggler--padding-x});
}
}
}
}

6
css/backoffice/layout/object/_all.scss Normal file
View File

@@ -0,0 +1,6 @@
/*!
* @copyright Copyright (C) 2010-2021 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
@import "object-details";

121
css/backoffice/layout/object/_object-details.scss Normal file
View File

@@ -0,0 +1,121 @@
/*!
* @copyright Copyright (C) 2010-2021 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-object-details--icon--size: 96px !default;
$ibo-object-details--icon--spacing--as-medallion: 32px !default;
$ibo-object-details--icon--bottom--as-medallion: -12px !default;
$ibo-object-details--icon--background-color--as-medallion: $ibo-color-grey-100 !default;
$ibo-object-details--icon--border--as-medallion: 2px solid $ibo-color-blue-grey-300 !default;
$ibo-object-details--icon--border-radius--as-medallion: $ibo-border-radius-full !default;
$ibo-object-details--status-dot--size: 10px !default;
$ibo-object-details--status-dot--spacing: 8px !default;
$ibo-object-details--status-dot--border-radius: $ibo-border-radius-full !default;
$ibo-object-details--tag--sibling-spacing: 12px !default;
$ibo-object-details--tag--color: $ibo-panel--subtitle--color !default;
$ibo-object-details--tag-icon--margin-right: 6px !default;
$ibo-object-details--tag-icon--color: $ibo-color-grey-700 !default;
$ibo-object-details--tag--separator--background-color: $ibo-color-grey-800 !default;
$ibo-object-details--tag--separator--diameter: 5px !default;
$ibo-object-details--tag--separator--margin-right: 12px !default;
$ibo-object-details--tag--separator--border-radius: $ibo-border-radius-full !default;
/* Parent block overloads (!= than blocks integrations */
.ibo-object-details {
&.ibo-has-icon.ibo-has-medallion-icon {
.ibo-panel--header-left {
margin-left: $ibo-object-details--icon--spacing--as-medallion;
padding-left: $ibo-object-details--icon--size;
}
.ibo-panel--icon {
bottom: calc(-1 * #{$ibo-object-details--icon--size} / 2 + #{$ibo-object-details--icon--bottom--as-medallion});
width: $ibo-object-details--icon--size;
height: $ibo-object-details--icon--size;
min-width: $ibo-object-details--icon--size;
min-height: $ibo-object-details--icon--size;
}
.ibo-panel--titles {
padding-left: $ibo-object-details--icon--spacing--as-medallion;
}
}
.ibo-panel--title {
@extend %ibo-font-ral-med-350;
}
.ibo-panel--subtitle {
@extend %ibo-font-ral-med-150;
}
}
.ibo-object-details--status {
@extend %ibo-baseline-centered-content;
}
.ibo-object-details--status-dot {
@extend %ibo-fully-centered-content;
width: $ibo-object-details--status-dot--size;
height: $ibo-object-details--status-dot--size;
min-width: $ibo-object-details--status-dot--size;
min-height: $ibo-object-details--status-dot--size;
border-radius: $ibo-object-details--status-dot--border-radius;
}
.ibo-object-details--status-dot + .ibo-object-details--status-label {
margin-left: $ibo-object-details--status-dot--spacing;
}
.ibo-object-details--status + .ibo-object-details--object-class {
margin-left: 0.5rem;
&::before {
content: "(";
}
&::after {
content: ")";
}
}
@each $sType, $aColors in $ibo-lifecycle-states-colors {
.ibo-object-details--status-dot.ibo-is-state-#{$sType} {
color: map-get($aColors, 'secondary-color');
background-color: map-get($aColors, 'primary-color');
}
}
.ibo-object-details--tag {
color: $ibo-object-details--tag--color;
&:not(:first-child) {
margin-left: $ibo-object-details--tag--sibling-spacing;
}
}
.ibo-object-details--tag-icon {
margin-right: $ibo-object-details--tag-icon--margin-right;
color: $ibo-object-details--tag-icon--color;
}
.ibo-object-details--object-class,
.ibo-object-details--tag {
~ .ibo-object-details--tag::before {
content: " ";
display: inline-block;
vertical-align: middle;
margin-right: $ibo-object-details--tag--separator--margin-right;
width: $ibo-object-details--tag--separator--diameter;
height: $ibo-object-details--tag--separator--diameter;
border-radius: $ibo-object-details--tag--separator--border-radius;
background-color: $ibo-object-details--tag--separator--background-color;
}
}