N°2847 - Activity panel: Add highlight color on case log entries

This commit is contained in:
Molkobain
2020-08-14 10:41:51 +02:00
parent 0c5c2eccad
commit b9d7967c0e
9 changed files with 190 additions and 28 deletions

View File

@@ -17,7 +17,6 @@
*/
/* SCSS variables */
/* - Entry group */
$ibo-activity-panel--entry-group--margin-bottom: 24px !default;

View File

@@ -16,14 +16,6 @@
* You should have received a copy of the GNU Affero General Public License
*/
/* Color palette for caselog visual identification */
$ibo-activity-panel--caselog-main-color-1: $ibo-color-green-700 !default;
$ibo-activity-panel--caselog-main-color-2: $ibo-color-pink-700 !default;
$ibo-activity-panel--caselog-main-color-3: $ibo-color-blue-600 !default;
$ibo-activity-panel--caselog-main-color-4: $ibo-color-orange-400 !default;
$ibo-activity-panel--caselog-main-color-5: $ibo-color-cyan-200 !default;
$ibo-activity-panel--caselog-main-colors: $ibo-activity-panel--caselog-main-color-1, $ibo-activity-panel--caselog-main-color-2, $ibo-activity-panel--caselog-main-color-3, $ibo-activity-panel--caselog-main-color-4, $ibo-activity-panel--caselog-main-color-5 !default;
/* SCSS variables */
$ibo-activity-panel--width: 460px !default;
/* TODO: This should be changed when responsive breakpoints are defined and used */
@@ -31,12 +23,6 @@ $ibo-activity-panel--is-expanded--width: 1200px !default;
$ibo-activity-panel--padding-x: 16px !default;
$ibo-activity-panel--padding-y: 0 !default;
@for $iIdx from 1 through 5 {
.ibo-activity-panel--tab-decoration-for-caselog-#{$iIdx} {
background-color: nth($ibo-activity-panel--caselog-main-colors, $iIdx);
}
}
/* - Header */
$ibo-activity-panel--header--padding-x: $ibo-activity-panel--padding-x * 3 !default; /* We need to increase this so the size toggler which will be set in abs. pos. can overlap it nicely */
$ibo-activity-panel--header--background-color: $ibo-color-grey-100 !default;
@@ -45,6 +31,7 @@ $ibo-activity-panel--size-toggler--color: $ibo-color-grey-600 !default;
$ibo-activity-panel--size-toggler--on-hover--color: $ibo-color-grey-800 !default;
/* - Tab */
$ibo-activity-panel--tab--caselog-highlight-colors: $ibo-caselog-highlight-colors !default;
$ibo-activity-panel--tab--is-active--background-color: $ibo-color-grey-200 !default;
/* - Tab title */
@@ -116,6 +103,14 @@ $ibo-activity-panel--body--padding-x: $ibo-activity-panel--padding-x !default;
}
}
}
/* - Specific decoration regarding the case log rank */
@for $iIdx from 1 through 5 {
.ibo-activity-panel--tab-for-caselog-#{$iIdx}{
.ibo-activity-panel--tab-decoration{
background-color: nth($ibo-activity-panel--tab--caselog-highlight-colors, $iIdx);
}
}
}
/* Tab title */
.ibo-activity-panel--tab-title{

View File

@@ -0,0 +1,61 @@
/*!
* Copyright (C) 2013-2020 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
/* SCSS variables */
$ibo-caselog-entry--highlight-colors: $ibo-caselog-highlight-colors !default;
$ibo-caselog-entry--main-information--decoration--width: 3px !default;
/* Main information */
.ibo-caselog-entry{
.ibo-activity-entry--main-information::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: $ibo-caselog-entry--main-information--decoration--width;
border-top-left-radius: $ibo-activity-entry--main-information--border-radius;
border-bottom-left-radius: $ibo-activity-entry--main-information--border-radius;
}
&:last-child{
.ibo-activity-entry--main-information::before{
border-bottom-left-radius: $ibo-activity-entry--main-information--border-radius--for-tip;
}
}
&.ibo-is-current-user{
.ibo-activity-entry--main-information::before{
left: initial;
right: 0;
border-radius: 0 $ibo-activity-entry--main-information--border-radius $ibo-activity-entry--main-information--border-radius 0;
}
&:last-child{
.ibo-activity-entry--main-information::before{
border-bottom-right-radius: $ibo-activity-entry--main-information--border-radius--for-tip;
}
}
}
}
/* - Specific decoration regarding the case log rank */
@for $iIdx from 1 through 5 {
.ibo-caselog-entry--entry-for-caselog-#{$iIdx}{
.ibo-activity-entry--main-information::before{
background-color: nth($ibo-caselog-entry--highlight-colors, $iIdx);
}
}
}