diff --git a/css/backoffice/layout/_all.scss b/css/backoffice/layout/_all.scss index eb4069c8f..879a86cc3 100644 --- a/css/backoffice/layout/_all.scss +++ b/css/backoffice/layout/_all.scss @@ -20,4 +20,5 @@ @import "top-bar"; @import "content"; @import "activity-panel/activity-panel"; -@import "activity-panel/activity-entry"; \ No newline at end of file +@import "activity-panel/activity-entry"; +@import "activity-panel/caselog-entry"; \ No newline at end of file diff --git a/css/backoffice/layout/activity-panel/_activity-entry.scss b/css/backoffice/layout/activity-panel/_activity-entry.scss index 579a19fa9..7f7cc71df 100644 --- a/css/backoffice/layout/activity-panel/_activity-entry.scss +++ b/css/backoffice/layout/activity-panel/_activity-entry.scss @@ -17,7 +17,6 @@ */ /* SCSS variables */ - /* - Entry group */ $ibo-activity-panel--entry-group--margin-bottom: 24px !default; diff --git a/css/backoffice/layout/activity-panel/_activity-panel.scss b/css/backoffice/layout/activity-panel/_activity-panel.scss index 1a4b4b0a3..4a727b55c 100644 --- a/css/backoffice/layout/activity-panel/_activity-panel.scss +++ b/css/backoffice/layout/activity-panel/_activity-panel.scss @@ -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{ diff --git a/css/backoffice/layout/activity-panel/_caselog-entry.scss b/css/backoffice/layout/activity-panel/_caselog-entry.scss new file mode 100644 index 000000000..0a67f9138 --- /dev/null +++ b/css/backoffice/layout/activity-panel/_caselog-entry.scss @@ -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); + } + } +} diff --git a/css/backoffice/utils/variables/_color.scss b/css/backoffice/utils/variables/_color.scss index 003b08f29..2a9c11849 100644 --- a/css/backoffice/utils/variables/_color.scss +++ b/css/backoffice/utils/variables/_color.scss @@ -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}; } \ No newline at end of file diff --git a/sources/application/UI/Layout/ActivityPanel/ActivityEntry/CaseLogEntry.php b/sources/application/UI/Layout/ActivityPanel/ActivityEntry/CaseLogEntry.php index 727a81698..a1c3825af 100644 --- a/sources/application/UI/Layout/ActivityPanel/ActivityEntry/CaseLogEntry.php +++ b/sources/application/UI/Layout/ActivityPanel/ActivityEntry/CaseLogEntry.php @@ -40,8 +40,13 @@ class CaseLogEntry extends ActivityEntry const BLOCK_CODE = 'ibo-caselog-entry'; const HTML_TEMPLATE_REL_PATH = 'layouts/activity-panel/activity-entry/caselog-entry'; + // Specific constants + public const DEFAULT_CASELOG_RANK = 0; + /** @var string $sAttCode Code of the corresponding case log attribute */ protected $sAttCode; + /** @var int $iCaseLogRank Rank of its case log in the host panel, can be used for highlight purposes for example */ + protected $iCaseLogRank; /** * CaseLogEntry constructor. @@ -59,6 +64,7 @@ class CaseLogEntry extends ActivityEntry parent::__construct($sContent, $oDateTime, $sAuthorLogin, $sId); $this->sAttCode = $sAttCode; + $this->SetCaseLogRank(static::DEFAULT_CASELOG_RANK); $this->SetOrigin('caselog:'.$this->sAttCode); } @@ -71,4 +77,27 @@ class CaseLogEntry extends ActivityEntry { return $this->sAttCode; } + + /** + * Set the rank of the case log in the host panel + * + * @param int $iCaseLogRank + * + * @return $this + */ + public function SetCaseLogRank($iCaseLogRank) + { + $this->iCaseLogRank = $iCaseLogRank; + return $this; + } + + /** + * Return the rank of the case log in the host panel + * + * @return int + */ + public function GetCaseLogRank() + { + return $this->iCaseLogRank; + } } \ No newline at end of file diff --git a/sources/application/UI/Layout/ActivityPanel/ActivityPanel.php b/sources/application/UI/Layout/ActivityPanel/ActivityPanel.php index a59592f70..e0df11408 100644 --- a/sources/application/UI/Layout/ActivityPanel/ActivityPanel.php +++ b/sources/application/UI/Layout/ActivityPanel/ActivityPanel.php @@ -238,6 +238,9 @@ class ActivityPanel extends UIBlock $this->AddCaseLogTab($sCaseLogAttCode); } + // Add case log rank to the entry + $oEntry->SetCaseLogRank($this->aCaseLogs[$sCaseLogAttCode]['rank']); + // Update metadata // - Message count $this->aCaseLogs[$sCaseLogAttCode]['total_messages_count']++; @@ -334,6 +337,7 @@ class ActivityPanel extends UIBlock if(!array_key_exists($sAttCode, $this->aCaseLogs)) { $this->aCaseLogs[$sAttCode] = [ + 'rank' => count($this->aCaseLogs) + 1, 'title' => MetaModel::GetLabel(get_class($this->oObject), $sAttCode), 'total_messages_count' => 0, 'authors' => [], diff --git a/templates/layouts/activity-panel/activity-entry/caselog-entry.html.twig b/templates/layouts/activity-panel/activity-entry/caselog-entry.html.twig index d25f7f4de..8d4bbe885 100644 --- a/templates/layouts/activity-panel/activity-entry/caselog-entry.html.twig +++ b/templates/layouts/activity-panel/activity-entry/caselog-entry.html.twig @@ -1,5 +1,5 @@ {% extends 'layouts/activity-panel/activity-entry/layout.html.twig' %} -{% block iboActivityEntryExtraClasses %}ibo-activity-entry--caselog{% endblock %} +{% block iboActivityEntryExtraClasses %}ibo-caselog-entry ibo-caselog-entry--entry-for-caselog-{{ oUIBlock.GetCaseLogRank() }}{% endblock %} {% block iboActivityEntryType %}caselog{% endblock %} {% block iboActivityEntryExtraDataAttributes %}data-entry-caselog-attribute-code="{{ oUIBlock.GetAttCode() }}"{% endblock %} \ No newline at end of file diff --git a/templates/layouts/activity-panel/layout.html.twig b/templates/layouts/activity-panel/layout.html.twig index f25395dad..03d599026 100644 --- a/templates/layouts/activity-panel/layout.html.twig +++ b/templates/layouts/activity-panel/layout.html.twig @@ -2,9 +2,9 @@
{% for sCaseLogAttCode, aCaseLogData in oUIBlock.GetCaseLogTabs() %} -
+
- + {{ aCaseLogData.title }}