mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-23 10:38:45 +02:00
N°2847 - Activity panel: Add highlight color on case log entries
This commit is contained in:
Molkobain
@@ -20,4 +20,5 @@
|
||||
@import "top-bar";
|
||||
@import "content";
|
||||
@import "activity-panel/activity-panel";
|
||||
@import "activity-panel/activity-entry";
|
||||
@import "activity-panel/activity-entry";
|
||||
@import "activity-panel/caselog-entry";
|
||||
@@ -17,7 +17,6 @@
|
||||
*/
|
||||
|
||||
/* SCSS variables */
|
||||
|
||||
/* - Entry group */
|
||||
$ibo-activity-panel--entry-group--margin-bottom: 24px !default;
|
||||
|
||||
|
||||
@@ -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{
|
||||
|
||||
61
css/backoffice/layout/activity-panel/_caselog-entry.scss
Normal file
61
css/backoffice/layout/activity-panel/_caselog-entry.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -190,15 +190,52 @@ $ibo-color-pink-900: hsla(318, 51%, 29%, 1) !default;
|
||||
}
|
||||
|
||||
/* Semantic palettes */
|
||||
$ibo-color-primary-100: hsla(40, 100%, 97.1%, 1) !default;
|
||||
$ibo-color-primary-200: hsla(39, 96.4%, 89%, 1) !default;
|
||||
$ibo-color-primary-300: hsla(38, 93.2%, 76.9%, 1) !default;
|
||||
$ibo-color-primary-400: hsla(33, 89.9%, 64.9%, 1) !default;
|
||||
$ibo-color-primary-500: hsla(28, 82.9%, 51.8%, 1) !default;
|
||||
$ibo-color-primary-600: hsla(24, 74.7%, 49.6%, 1) !default;
|
||||
$ibo-color-primary-700: hsla(20, 70.7%, 44.1%, 1) !default;
|
||||
$ibo-color-primary-800: hsla(16, 65.1%, 37.1%, 1) !default;
|
||||
$ibo-color-primary-900: hsla(14, 60.8%, 30%, 1) !default;
|
||||
$ibo-color-primary-100: $ibo-color-orange-100 !default;
|
||||
$ibo-color-primary-200: $ibo-color-orange-200 !default;
|
||||
$ibo-color-primary-300: $ibo-color-orange-300 !default;
|
||||
$ibo-color-primary-400: $ibo-color-orange-400 !default;
|
||||
$ibo-color-primary-500: $ibo-color-orange-500 !default;
|
||||
$ibo-color-primary-600: $ibo-color-orange-600 !default;
|
||||
$ibo-color-primary-700: $ibo-color-orange-700 !default;
|
||||
$ibo-color-primary-800: $ibo-color-orange-800 !default;
|
||||
$ibo-color-primary-900: $ibo-color-orange-900 !default;
|
||||
|
||||
$ibo-color-success-100: $ibo-color-green-100 !default;
|
||||
$ibo-color-success-200: $ibo-color-green-200 !default;
|
||||
$ibo-color-success-300: $ibo-color-green-300 !default;
|
||||
$ibo-color-success-400: $ibo-color-green-400 !default;
|
||||
$ibo-color-success-500: $ibo-color-green-500 !default;
|
||||
$ibo-color-success-600: $ibo-color-green-600 !default;
|
||||
$ibo-color-success-700: $ibo-color-green-700 !default;
|
||||
$ibo-color-success-800: $ibo-color-green-800 !default;
|
||||
$ibo-color-success-900: $ibo-color-green-900 !default;
|
||||
|
||||
$ibo-color-warning-100: $ibo-color-orange-100 !default;
|
||||
$ibo-color-warning-200: $ibo-color-orange-200 !default;
|
||||
$ibo-color-warning-300: $ibo-color-orange-300 !default;
|
||||
$ibo-color-warning-400: $ibo-color-orange-400 !default;
|
||||
$ibo-color-warning-500: $ibo-color-orange-500 !default;
|
||||
$ibo-color-warning-600: $ibo-color-orange-600 !default;
|
||||
$ibo-color-warning-700: $ibo-color-orange-700 !default;
|
||||
$ibo-color-warning-800: $ibo-color-orange-800 !default;
|
||||
$ibo-color-warning-900: $ibo-color-orange-900 !default;
|
||||
|
||||
$ibo-color-danger-100: $ibo-color-red-100 !default;
|
||||
$ibo-color-danger-200: $ibo-color-red-200 !default;
|
||||
$ibo-color-danger-300: $ibo-color-red-300 !default;
|
||||
$ibo-color-danger-400: $ibo-color-red-400 !default;
|
||||
$ibo-color-danger-500: $ibo-color-red-500 !default;
|
||||
$ibo-color-danger-600: $ibo-color-red-600 !default;
|
||||
$ibo-color-danger-700: $ibo-color-red-700 !default;
|
||||
$ibo-color-danger-800: $ibo-color-red-800 !default;
|
||||
$ibo-color-danger-900: $ibo-color-red-900 !default;
|
||||
|
||||
$ibo-caselog-highlight-color-1: $ibo-color-green-700!default;
|
||||
$ibo-caselog-highlight-color-2: $ibo-color-pink-700 !default;
|
||||
$ibo-caselog-highlight-color-3: $ibo-color-blue-600 !default;
|
||||
$ibo-caselog-highlight-color-4: $ibo-color-orange-400 !default;
|
||||
$ibo-caselog-highlight-color-5: $ibo-color-cyan-200 !default;
|
||||
$ibo-caselog-highlight-colors: $ibo-caselog-highlight-color-1, $ibo-caselog-highlight-color-2, $ibo-caselog-highlight-color-3, $ibo-caselog-highlight-color-4, $ibo-caselog-highlight-color-5 !default;
|
||||
|
||||
:root{
|
||||
--ibo-color-primary-100: #{$ibo-color-primary-100};
|
||||
@@ -210,4 +247,40 @@ $ibo-color-primary-900: hsla(14, 60.8%, 30%, 1) !default;
|
||||
--ibo-color-primary-700: #{$ibo-color-primary-700};
|
||||
--ibo-color-primary-800: #{$ibo-color-primary-800};
|
||||
--ibo-color-primary-900: #{$ibo-color-primary-900};
|
||||
|
||||
--ibo-color-success-100: #{$ibo-color-success-100};
|
||||
--ibo-color-success-200: #{$ibo-color-success-200};
|
||||
--ibo-color-success-300: #{$ibo-color-success-300};
|
||||
--ibo-color-success-400: #{$ibo-color-success-400};
|
||||
--ibo-color-success-500: #{$ibo-color-success-500};
|
||||
--ibo-color-success-600: #{$ibo-color-success-600};
|
||||
--ibo-color-success-700: #{$ibo-color-success-700};
|
||||
--ibo-color-success-800: #{$ibo-color-success-800};
|
||||
--ibo-color-success-900: #{$ibo-color-success-900};
|
||||
|
||||
--ibo-color-warning-100: #{$ibo-color-warning-100};
|
||||
--ibo-color-warning-200: #{$ibo-color-warning-200};
|
||||
--ibo-color-warning-300: #{$ibo-color-warning-300};
|
||||
--ibo-color-warning-400: #{$ibo-color-warning-400};
|
||||
--ibo-color-warning-500: #{$ibo-color-warning-500};
|
||||
--ibo-color-warning-600: #{$ibo-color-warning-600};
|
||||
--ibo-color-warning-700: #{$ibo-color-warning-700};
|
||||
--ibo-color-warning-800: #{$ibo-color-warning-800};
|
||||
--ibo-color-warning-900: #{$ibo-color-warning-900};
|
||||
|
||||
--ibo-color-danger-100: #{$ibo-color-danger-100};
|
||||
--ibo-color-danger-200: #{$ibo-color-danger-200};
|
||||
--ibo-color-danger-300: #{$ibo-color-danger-300};
|
||||
--ibo-color-danger-400: #{$ibo-color-danger-400};
|
||||
--ibo-color-danger-500: #{$ibo-color-danger-500};
|
||||
--ibo-color-danger-600: #{$ibo-color-danger-600};
|
||||
--ibo-color-danger-700: #{$ibo-color-danger-700};
|
||||
--ibo-color-danger-800: #{$ibo-color-danger-800};
|
||||
--ibo-color-danger-900: #{$ibo-color-danger-900};
|
||||
|
||||
--ibo-caselog-color-highlight-1: #{$ibo-caselog-highlight-color-1};
|
||||
--ibo-caselog-color-highlight-2: #{$ibo-caselog-highlight-color-2};
|
||||
--ibo-caselog-color-highlight-3: #{$ibo-caselog-highlight-color-3};
|
||||
--ibo-caselog-color-highlight-4: #{$ibo-caselog-highlight-color-4};
|
||||
--ibo-caselog-color-highlight-5: #{$ibo-caselog-highlight-color-5};
|
||||
}
|
||||
Reference in New Issue
Block a user