N°2847 - Work on the ActivityPanel and PopoverMenu features

- Deprecate cmdbAbstractObject::DisplayBareHistory() as history will be replace by ActivityPanel
- Rename illustrations to original filenames to find source more easily
- Remove unused "max_history_case_log_entry_length" config. parameter
- Activity panel: Introduce iCMDBChangeOp and iCMDBChangeOpSetAttribute interface for better dependency injection
- Activity panel: Add placeholder when no entry
- Activity panel: Fix tab toolbar icons color
- Activity panel: Add history entries (entries after the first 50 are not loaded yet)
- Popover menu: Fix no border-radius on first/last entries hover

css/backoffice/components/popover-menu/_popover-menu.scss

@@ -46,6 +46,7 @@ $ibo-popover-menu--section-border-radius: $ibo-popover-menu--border-radius !defa
   margin: 0px 0px;
   width: 100%;
   white-space: nowrap;
+  overflow: hidden; /* To avoid first/last entries of the menu to have no border-radius on hover */
   
   &:first-child{
     border-radius: $ibo-popover-menu--section-border-radius $ibo-popover-menu--section-border-radius 0 0;

css/backoffice/layout/_all.scss

@@ -21,4 +21,6 @@
 @import "content";
 @import "activity-panel/activity-panel";
 @import "activity-panel/activity-entry";
-@import "activity-panel/caselog-entry";
+@import "activity-panel/caselog-entry";
+@import "activity-panel/edits-entry";
+@import "activity-panel/transition-entry";

css/backoffice/layout/activity-panel/_activity-entry.scss

@@ -33,17 +33,25 @@ $ibo-activity-entry--medallion--has-no-image--border: 1px solid $ibo-color-grey-
 
 $ibo-activity-entry--information--margin-to-other-side: $ibo-activity-entry--medallion--diameter + $ibo-activity-entry--medallion--margin-with-information !default;
 
-$ibo-activity-entry--main-information--padding-x: 12px !default;
-$ibo-activity-entry--main-information--padding-y: $ibo-activity-entry--main-information--padding-x !default;
+$ibo-activity-entry--main-information--padding-x: 16px !default;
+$ibo-activity-entry--main-information--padding-y: 12px !default;
+$ibo-activity-entry--main-information--text-color: $ibo-color-grey-800 !default;
 $ibo-activity-entry--main-information--background-color: $ibo-color-grey-200 !default;
 $ibo-activity-entry--main-information--border-radius: $ibo-border-radius-500 !default;
 $ibo-activity-entry--main-information--border-radius--for-tip: 0 !default;
+$ibo-activity-entry--main-information--elements-spacing: $ibo-activity-entry--main-information--padding-x !default;
 $ibo-activity-entry--main-information-accent-strip--width: 2px !default;
+$ibo-activity-entry--main-information-hyperlink--text-color: $ibo-color-blue-700 !default;
+$ibo-activity-entry--main-information-hyperlink--on-hover--text-color: $ibo-color-blue-900 !default;
+$ibo-activity-entry--main-information-hyperlink--on-active--text-color: $ibo-activity-entry--main-information-hyperlink--on-hover--text-color !default;
 $ibo-activity-entry--main-information--is-current-user--background-color: $ibo-color-blue-100 !default;
 $ibo-activity-entry--main-information--is-closed--max-height: 48px !default;
 $ibo-activity-entry--main-information--is-closed--placeholder-top: 30px !default;
 $ibo-activity-entry--main-information--is-closed--placeholder-padding-left: $ibo-activity-entry--main-information--padding-x !default;
 
+$ibo-activity-entry--main-information-icon--text-color: $ibo-color-grey-700 !default;
+$ibo-activity-entry--main-information-icon--font-size: 16px !default;
+
 $ibo-activity-entry--sub-information--margin-top: 4px !default;
 $ibo-activity-entry--sub-information--margin-bottom: $ibo-activity-entry--sub-information--margin-top !default;
 $ibo-activity-entry--sub-information--text-color: $ibo-color-grey-700 !default;
@@ -162,7 +170,12 @@ $ibo-activity-entry--sub-information--text-color: $ibo-color-grey-700 !default;
 }
 .ibo-activity-entry--main-information{
 	position: relative;
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+
 	padding: $ibo-activity-entry--main-information--padding-y $ibo-activity-entry--main-information--padding-x;
+	color: $ibo-activity-entry--main-information--text-color;
 	background-color: $ibo-activity-entry--main-information--background-color;
 	border-radius: $ibo-activity-entry--main-information--border-radius;
 
@@ -170,6 +183,27 @@ $ibo-activity-entry--sub-information--text-color: $ibo-color-grey-700 !default;
 	pre{
 		white-space: pre-wrap;
 	}
+
+	/* Specific hyperlink color */
+	a{
+		color: $ibo-activity-entry--main-information-hyperlink--text-color;
+
+		&:hover{
+			color: $ibo-activity-entry--main-information-hyperlink--on-hover--text-color;
+		}
+		&:active,
+		&:focus{
+			color: $ibo-activity-entry--main-information-hyperlink--on-active--text-color;
+		}
+	}
+}
+.ibo-activity-entry--main-information-icon{
+	margin-right: $ibo-activity-entry--main-information--elements-spacing;
+	color: $ibo-activity-entry--main-information-icon--text-color;
+	font-size: $ibo-activity-entry--main-information-icon--font-size;
+}
+.ibo-activity-entry--main-information-content{
+
 }
 .ibo-activity-entry--sub-information{
 	margin-top: $ibo-activity-entry--sub-information--margin-top;

css/backoffice/layout/activity-panel/_activity-panel.scss

@@ -50,6 +50,7 @@ $ibo-activity-panel--tab-text--max-width: 100px !default;
 /* - Tab toolbar */
 $ibo-activity-panel--tab-toolbar--padding-x: $ibo-activity-panel--padding-x !default;
 $ibo-activity-panel--tab-toolbar--height: 32px !default;
+$ibo-activity-panel--tab-toolbar--text-color: $ibo-color-grey-800 !default;
 $ibo-activity-panel--tab-toolbar--background-color: $ibo-activity-panel--tab--is-active--background-color !default;
 
 $ibo-activity-panel--tab-for-caselog--elements-spacing: 16px !default;
@@ -64,6 +65,11 @@ $ibo-activity-panel--tab-for-activity---checkbox-margin-right: 8px !default;
 $ibo-activity-panel--body--padding-top: $ibo-activity-panel--tab-toolbar--height + 16px !default;
 $ibo-activity-panel--body--padding-x: $ibo-activity-panel--padding-x !default;
 
+$ibo-activity-panel--body--placeholder--margin-top: 16px !default;
+$ibo-activity-panel--body--placeholder-image--width: 250px !default;
+$ibo-activity-panel--body--placeholder-hint--margin-top: 16px !default;
+$ibo-activity-panel--body--placeholder-hint--color: $ibo-color-grey-800 !default;
+
 /* Whole layout */
 .ibo-activity-panel{
 	width: $ibo-activity-panel--width;
@@ -85,7 +91,7 @@ $ibo-activity-panel--body--padding-x: $ibo-activity-panel--padding-x !default;
 
 	/* Remove hyperlinks default color */
 	a{
-		color: inherit;
+		color: $ibo-activity-panel--tab-toolbar--text-color;
 	}
 }
 .ibo-activity-panel--tabs{
@@ -220,3 +226,21 @@ $ibo-activity-panel--body--padding-x: $ibo-activity-panel--padding-x !default;
 	padding-right: $ibo-activity-panel--body--padding-x;
 }
 
+.ibo-activity-panel--body--placeholder{
+	margin-top: $ibo-activity-panel--body--placeholder--margin-top;
+}
+.ibo-activity-panel--body--placeholder-image{
+	@extend %ibo-fully-centered-content;
+
+	> svg {
+		width: $ibo-activity-panel--body--placeholder-image--width;
+		height: inherit;
+	}
+}
+.ibo-activity-panel--body--placeholder-hint{
+	margin-top: $ibo-activity-panel--body--placeholder-hint--margin-top;
+	color: $ibo-activity-panel--body--placeholder-hint--color;
+
+	@extend %ibo-font-ral-ita-100;
+	@extend %ibo-fully-centered-content;
+}

css/backoffice/layout/activity-panel/_caselog-entry.scss

@@ -18,10 +18,19 @@
 
 /* SCSS variables */
 $ibo-caselog-entry--highlight-colors: $ibo-caselog-highlight-colors !default;
+$ibo-caselog-entry--main-information--padding-y: 12px !default;
 $ibo-caselog-entry--main-information--decoration--width: 3px !default;
 
 /* Main information */
 .ibo-caselog-entry{
+	.ibo-activity-entry--main-information{
+		padding-top: $ibo-caselog-entry--main-information--padding-y;
+		padding-bottom: $ibo-caselog-entry--main-information--padding-y;
+	}
+	.ibo-activity-entry--main-information-icon{
+		display: none;
+	}
+
 	/* Highlight color */
 	.ibo-activity-entry--main-information::before{
 		content: "";

css/backoffice/layout/activity-panel/_edits-entry.scss

@@ -0,0 +1,48 @@
+/*!
+ * 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-edits-entry--short-description--text-color: inherit !default;
+$ibo-edits-entry--long-description-toggler-icon--margin-left: 12px !default;
+$ibo-edits-entry--long-description--margin-top: 8px !default;
+
+/* CSS rules */
+/* - Long description */
+a.ibo-edits-entry--short-description {
+	color: $ibo-edits-entry--short-description--text-color;
+}
+.ibo-edits-entry--long-description-toggler-icon{
+	margin-left: $ibo-edits-entry--long-description-toggler-icon--margin-left;
+	transition: all 0.2s ease-in-out;
+}
+.ibo-edits-entry--long-description{
+	display: none;
+	margin-top: $ibo-edits-entry--long-description--margin-top;
+	list-style: inside;
+}
+/* - Long desc. opened */
+.ibo-edits-entry{
+	&.ibo-is-opened{
+		.ibo-edits-entry--long-description-toggler-icon{
+			transform: rotateX(180deg);
+		}
+		.ibo-edits-entry--long-description{
+			display: block;
+		}
+	}
+}

css/backoffice/layout/activity-panel/_transition-entry.scss

@@ -0,0 +1,27 @@
+/*!
+ * 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-transition-entry--original-state-label--text-color: $ibo-color-grey-800 !default;
+$ibo-transition-entry--original-state-label--text-decoration: line-through !default;
+
+/* Main information */
+.ibo-transition-entry--original-state-label{
+	color: $ibo-transition-entry--original-state-label--text-color;
+	text-decoration: $ibo-transition-entry--original-state-label--text-decoration;
+}

css/backoffice/utils/variables/_color.scss

@@ -62,6 +62,7 @@ $ibo-color-green-700: hsla(92, 47.9%, 42.2%, 1) !default;
 $ibo-color-green-800: hsla(95, 49.5%, 36.5%, 1) !default;
 $ibo-color-green-900: hsla(103, 55.6%, 26.5%, 1) !default;
 
+$ibo-color-blue-grey-50: hsla(210, 36%, 96%, 1) !default;
 $ibo-color-blue-grey-100: hsla(198, 15.7%, 83.7%, 1) !default;
 $ibo-color-blue-grey-200: hsla(200, 15.3%, 73.1%, 1) !default;
 $ibo-color-blue-grey-300: hsla(200, 15.6%, 62.4%, 1) !default;
@@ -148,6 +149,7 @@ $ibo-color-pink-900: hsla(318, 51%, 29%, 1) !default;
 	--ibo-color-green-800: #{$ibo-color-green-800};
 	--ibo-color-green-900: #{$ibo-color-green-900};
 
+	--ibo-color-blue-grey-50: #{$ibo-color-blue-grey-50};
 	--ibo-color-blue-grey-100: #{$ibo-color-blue-grey-100};
 	--ibo-color-blue-grey-200: #{$ibo-color-blue-grey-200};
 	--ibo-color-blue-grey-300: #{$ibo-color-blue-grey-300};