N°3649 - Activity panel: Work on multiple caselogs edition at once

2026-04-23 10:38:45 +02:00 · 2021-02-02 10:59:48 +01:00
parent 5f00362805
commit 8026965915
12 changed files with 219 additions and 60 deletions
--- a/css/backoffice/layout/activity-panel/_activity-panel.scss
+++ b/css/backoffice/layout/activity-panel/_activity-panel.scss
@@ -48,6 +48,8 @@ $ibo-activity-panel--tab-title-decoration--height: $ibo-activity-panel--tab-titl
 $ibo-activity-panel--tab-title-decoration--margin-right: 8px !default;
 $ibo-activity-panel--tab-title-decoration--border-radius: $ibo-border-radius-300 !default;

+$ibo-activity-panel--tab-title-draft-indicator--margin-right: $ibo-activity-panel--tab-title-decoration--margin-right !default;
+
 $ibo-activity-panel--tab-title-text--max-width: 100px !default;

 /* - Tab toolbar */
@@ -64,7 +66,7 @@ $ibo-activity-panel--tab-toolbar-info-icon--margin-left: 8px !default;
 $ibo-activity-panel--tab-toolbar-filter--sibling-spacing: 18px !default;
 $ibo-activity-panel--tab-toolbar-filter--checkbox-margin-right: 8px !default;

-$ibo-activity-panel--filter-options-toggler--margin-left: 0.5rem !default;
+$ibo-activity-panel--filter-options-toggler--padding-left: 0.5rem !default;
 $ibo-activity-panel--filter-options--padding-x: 12px !default;
 $ibo-activity-panel--filter-options--padding-y: 8px !default;
 $ibo-activity-panel--filter-options--top: 24px !default;
@@ -156,6 +158,11 @@ $ibo-activity-panel--add-caselog-entry-button--icon--line-height: 33px !default;
 			background-color: $ibo-activity-panel--tab-title--is-active--background-color;
 		}
 	}
+  &.ibo-is-draft{
+    .ibo-activity-panel--tab-title-draft-indicator{
+      display: initial;
+    }
+  }
 }
 /* - Specific decoration regarding the case log rank */
@each $sColor in $ibo-activity-panel--tab-toggler--caselog-highlight-colors {
@@ -183,6 +190,11 @@ $ibo-activity-panel--add-caselog-entry-button--icon--line-height: 33px !default;
 	border-radius: $ibo-activity-panel--tab-title-decoration--border-radius;
 	@extend %ibo-depression-100;
 }
+.ibo-activity-panel--tab-title-draft-indicator{
+  display: none;
+  margin-right: $ibo-activity-panel--tab-title-draft-indicator--margin-right;
+  @extend %ibo-font-ral-nor-50;
+}
 .ibo-activity-panel--tab-title-text{
 	max-width: $ibo-activity-panel--tab-title-text--max-width;
 	@extend %ibo-text-truncated-with-ellipsis;
@@ -251,7 +263,7 @@ $ibo-activity-panel--add-caselog-entry-button--icon--line-height: 33px !default;
  cursor: pointer;
 }
 .ibo-activity-panel--filter-options-toggler{
-  margin-left: $ibo-activity-panel--filter-options-toggler--margin-left;
+  padding-left: $ibo-activity-panel--filter-options-toggler--padding-left;

  &.ibo-is-closed{
    transform: rotateX(180deg);
--- a/dictionaries/ui/layouts/en.dictionary.itop.activity-panel.php
+++ b/dictionaries/ui/layouts/en.dictionary.itop.activity-panel.php
@@ -24,18 +24,17 @@ Dict::Add('EN US', 'English', 'English', array(

 	// Activity tab
 	'UI:Layout:ActivityPanel:Tab:Activity:Title' => 'Activity',
-	'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:CaselogsFilter:Title' => 'Case logs',
-	'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:CaselogsFilter:Tooltip' => 'Show / hide case log entries on this tab',
-	'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:TransitionsFilter:Title' => 'State changes',
-	'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:TransitionsFilter:Tooltip' => 'Show / hide state changes on this tab',
-	'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:EditsFilter:Title' => 'Edits',
-	'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:EditsFilter:Tooltip' => 'Show / hide fields edits on this tab',
-
-	// Case log tab
-	'UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:OpenAll:Tooltip' => 'Open all messages',
-	'UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:CloseAll:Tooltip' => 'Close all messages',
-	'UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:AuthorsCount:Tooltip' => 'Number of persons interacting in the visible entries',
-	'UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:MessagesCount:Tooltip' => 'Number of messages in the visible log(s)',
+	'UI:Layout:ActivityPanel:Tab:Caselog:DraftIndicator:Tooltip' => 'Draft entry',
+	'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Caselogs:Title' => 'Case logs',
+	'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Caselogs:Tooltip' => 'Show / hide case log entries on this tab',
+	'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Transitions:Title' => 'State changes',
+	'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Transitions:Tooltip' => 'Show / hide state changes on this tab',
+	'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Edits:Title' => 'Edits',
+	'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Edits:Tooltip' => 'Show / hide fields edits on this tab',
+	'UI:Layout:ActivityPanel:Tab:Toolbar:Action:OpenAll:Tooltip' => 'Open all messages',
+	'UI:Layout:ActivityPanel:Tab:Toolbar:Action:CloseAll:Tooltip' => 'Close all messages',
+	'UI:Layout:ActivityPanel:Tab:Toolbar:Info:AuthorsCount:Tooltip' => 'Number of persons interacting in the visible entries',
+	'UI:Layout:ActivityPanel:Tab:Toolbar:Info:MessagesCount:Tooltip' => 'Number of messages in the visible log(s)',

 	// Placeholder
 	'UI:Layout:ActivityPanel:NoEntry:Placeholder:Hint' => 'It\'s calm up here, no activity yet',
--- a/js/layouts/activity-panel/activity-panel.js
+++ b/js/layouts/activity-panel/activity-panel.js
@@ -35,6 +35,7 @@ $(function()
 				is_active: 'ibo-is-active',
 				is_visible: 'ibo-is-visible',
 				is_hidden: 'ibo-is-hidden',
+				is_draft: 'ibo-is-draft',
 			},
 			js_selectors:
 			{
@@ -133,11 +134,22 @@ $(function()
 				this.element.find(this.js_selectors.compose_button).on('click', function(oEvent){
 					me._onComposeButtonClick(oEvent);
 				});
-				// - Cancelled form
+				// - Draft value ongoing
+				this.element.on('draft.caselog_entry_form.itop', function(oEvent, oData){
+					me._onDraftEntryForm(oData.attribute_code);
+				});
+				// - Empty value
+				this.element.on('emptied.caselog_entry_form.itop', function(oEvent, oData){
+					me._onEmptyEntryForm(oData.attribute_code);
+				});
+				// - Entry form cancelled
 				this.element.on('cancelled_form.caselog_entry_form.itop', function(){
 					me._onCancelledEntryForm();
 				});
-				// - Submitted form
+				// - Entry form submission request
+				this.element.on('request_submission.caselog_entry_form.itop', function(){
+					me._onRequestSubmission();
+				});

 				// Entries
 				// - Click on a closed case log message
@@ -265,10 +277,46 @@ $(function()
 					// Else, open a popover menu to choose one
 				}
 			},
+			/**
+			 * @param sCaseLogAttCode {string} Attribute code of the case log entry form being draft
+			 * @private
+			 */
+			_onDraftEntryForm: function(sCaseLogAttCode)
+			{
+				this.element.find(this.js_selectors.tab_toggler + '[data-tab-type="' + this.enums.tab_types.caselog + '"][data-caselog-attribute-code="' + sCaseLogAttCode + '"]').addClass(this.css_classes.is_draft);
+			},
+			/**
+			 * @param sCaseLogAttCode {string} Attribute code of the case log entry form being emptied
+			 * @private
+			 */
+			_onEmptyEntryForm: function(sCaseLogAttCode)
+			{
+				this.element.find(this.js_selectors.tab_toggler + '[data-tab-type="' + this.enums.tab_types.caselog + '"][data-caselog-attribute-code="' + sCaseLogAttCode + '"]').removeClass(this.css_classes.is_draft);
+			},
 			_onCancelledEntryForm: function()
 			{
 				this._HideCaseLogsEntryForms();
 			},
+			_onRequestSubmission: function()
+			{
+				// TODO 3.0.0
+				// Retrieve current value from each entry form
+				let oEntries = {};
+				this.element.find(this.js_selectors.caselog_entry_form).each(function(){
+					const oEntryFormElem = $(this);
+					const sEntryFormValue = oEntryFormElem.triggerHandler('get_entry.caselog_entry_form.itop');
+
+					if('' !== sEntryFormValue) {
+						oEntries[oEntryFormElem.attr('data-attribute-code')] = sEntryFormValue;
+					}
+				});
+				console.log(oEntries);
+				// If several entry forms filled, show a confirmation message
+				// Push data to the server
+				// Put entries in the feed
+				// Renew transaction ID for inline images
+
+			},
 			_onCaseLogClosedMessageClick: function(oEntryElem)
 			{
 				this._OpenMessage(oEntryElem);
--- a/js/layouts/activity-panel/caselog-entry-form.js
+++ b/js/layouts/activity-panel/caselog-entry-form.js
@@ -23,6 +23,9 @@ $(function() {
 			// default options
 			options:
 			{
+				object_class: null,
+				object_id: null,
+				attribute_code: null,
 				submit_mode: 'autonomous',
 				text_input_id: '',
 			},
@@ -39,8 +42,8 @@ $(function() {
 				form: '[data-role="ibo-caselog-entry-form"]', // Any caselog entry form
 				main_actions: '[data-role="ibo-caselog-entry-form--action-buttons--main-actions"]',
 				cancel_button: '[data-role="ibo-caselog-entry-form--action-buttons--main-actions"] [data-role="ibo-button"][name="cancel"]',
-				send_button: '[data-role="ibo-caselog-entry-form--action-buttons--main-actions"] [data-role="ibo-button"][name="send"]',
-				send_choices_picker: '[data-role="ibo-caselog-entry-form--action-buttons--main-actions"] [data-role="ibo-button"][name="send"] + [data-role="ibo-popover-menu"]',
+				save_button: '[data-role="ibo-caselog-entry-form--action-buttons--main-actions"] [data-role="ibo-button"][name="save"]',
+				save_choices_picker: '[data-role="ibo-caselog-entry-form--action-buttons--main-actions"] [data-role="ibo-button"][name="save"] + [data-role="ibo-popover-menu"]',
 			},
 			enums:
 			{
@@ -50,12 +53,20 @@ $(function() {
 					bridged: 'bridged',
 				}
 			},
+			is_draft: false,
 			
 			// the constructor
 			_create: function () {
-				let me = this;
+				const aMandatoryOptions = ['object_class', 'object_id', 'attribute_code'];
+				for (let sOption of aMandatoryOptions) {
+					if (null === this.options[sOption]) {
+						CombodoGlobalToolbox.Trace('CaseLogEntryForm: Could not initialize widget, make sure that the following options' +
+							' are passed: ' + aMandatoryOptions.join(' / '), 'error');
+						return false;
+					}
+				}

-				this._UpdateSubmitButtonState();
+				this._UpdateState();
 				if(this._IsSubmitAutonomous())
 				{
 					this._HideEntryForm();
@@ -78,11 +89,18 @@ $(function() {
 					// Handle only the current CKEditor instance
 					if(oEvent.editor.name === me.options.text_input_id) {
 						CKEDITOR.instances[me.options.text_input_id].on('change', function(){
-							if(me._IsSubmitAutonomous()) {
-								me._UpdateSubmitButtonState();
-							}
-							else {
-								me._UpdateBridgeInput();
+							const bWasDraftBefore = me.is_draft;
+							const bIsDraftNow = !me._IsInputEmpty();
+
+							if(bWasDraftBefore !== bIsDraftNow) {
+								me.is_draft = bIsDraftNow;
+								me._UpdateEditingVisualHint();
+								if(me._IsSubmitAutonomous()) {
+									me._UpdateSubmitButtonState();
+								}
+								else {
+									me._UpdateBridgeInput();
+								}
 							}
 						});
 					}
@@ -92,13 +110,11 @@ $(function() {
 				this.element.find(this.js_selectors.cancel_button).on('click', function(oEvent){
 					me.element.trigger('cancelled_form.caselog_entry_form.itop');
 				});
-				this.element.find(this.js_selectors.send_button).on('click', function(oEvent){
-					// TODO 3.0.0: To be refactored next
-					// // Avoid form being submitted
-					// oEvent.preventDefault();
-					//
-					// let sCaselogAttCode = me.element.closest(me.js_selectors.activity_panel_toolbar).attr('data-caselog-attribute-code');
-					// me._SubmitEntryToCaselog(me._GetInputData(), sCaselogAttCode);
+				this.element.find(this.js_selectors.save_button).on('click', function(oEvent){
+					// Avoid form being submitted
+					oEvent.preventDefault();
+
+					me.element.trigger('request_submission.caselog_entry_form.itop');
 				});

 				// Form show/hide
@@ -109,7 +125,13 @@ $(function() {
 					me._HideEntryForm();
 				});

+				// Get the entry value
+				this.element.on('get_entry.caselog_entry_form.itop', function(){
+					return me._GetInputData();
+				});
+
 				// Caselog selection
+				// TODO 3.0.0: Remove this as it is no longer useful
 				this.element.on('add_to_caselog.caselog_entry_form.itop', function(oEvent, oData){
 					const sCaseLogAttCode = oData.caselog_att_code;
 					const sStimulusCode = oData.stimulus_code !== undefined ? oData.stimulus_code : null;
@@ -216,6 +238,13 @@ $(function() {
 			_EmptyInput: function() {
 				CKEDITOR.instances[this.options.text_input_id].setData('');
 			},
+			/**
+			 * @returns {boolean} True if the input has no text
+			 * @private
+			 */
+			_IsInputEmpty: function() {
+				return this._GetInputData() === '';
+			},
 			_GetInputData: function() {
 				return (CKEDITOR.instances[this.options.text_input_id] === undefined) ? '' : CKEDITOR.instances[this.options.text_input_id].getData();
 			},
@@ -226,10 +255,16 @@ $(function() {
 			_HideMainActions: function() {
 				this.element.find(this.js_selectors.main_actions).hide();
 			},
+			_UpdateState: function() {
+				this._UpdateEditingVisualHint();
+				this._UpdateSubmitButtonState();
+			},
 			_UpdateSubmitButtonState: function() {
-				const bIsInputEmpty = this._GetInputData() === '';
-
-				this.element.find(this.js_selectors.send_button).prop('disabled', bIsInputEmpty);
+				this.element.find(this.js_selectors.save_button).prop('disabled', this._IsInputEmpty());
+			},
+			_UpdateEditingVisualHint: function() {
+				const sEvent = this._IsInputEmpty() ? 'emptied' : 'draft';
+				this.element.trigger(sEvent + '.caselog_entry_form.itop', {attribute_code: this.options.attribute_code});
 			}
 		});
 });
--- a/sources/Renderer/Bootstrap/FieldRenderer/BsSimpleFieldRenderer.php
+++ b/sources/Renderer/Bootstrap/FieldRenderer/BsSimpleFieldRenderer.php
@@ -528,10 +528,10 @@ JS

 		if ($iNbEntries > 0) {
 			// Dict entries
-			$sOpenAllEntriesTooltip = utils::HtmlEntities(Dict::S('UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:OpenAll:Tooltip'));
-			$sCloseAllEntriesTooltip = utils::HtmlEntities(Dict::S('UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:CloseAll:Tooltip'));
-			$sUsersCountTooltip = utils::HtmlEntities(Dict::S('UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:AuthorsCount:Tooltip'));
-			$sEntriesCountTooltip = utils::HtmlEntities(Dict::S('UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:MessagesCount:Tooltip'));
+			$sOpenAllEntriesTooltip = utils::HtmlEntities(Dict::S('UI:Layout:ActivityPanel:Tab:Toolbar:Action:OpenAll:Tooltip'));
+			$sCloseAllEntriesTooltip = utils::HtmlEntities(Dict::S('UI:Layout:ActivityPanel:Tab:Toolbar:Action:CloseAll:Tooltip'));
+			$sUsersCountTooltip = utils::HtmlEntities(Dict::S('UI:Layout:ActivityPanel:Tab:Toolbar:Info:AuthorsCount:Tooltip'));
+			$sEntriesCountTooltip = utils::HtmlEntities(Dict::S('UI:Layout:ActivityPanel:Tab:Toolbar:Info:MessagesCount:Tooltip'));
 			$sCloseEntryTooltip = utils::HtmlEntities(Dict::S('Portal:Form:Caselog:Entry:Close:Tooltip'));

 			// First pass to retrieve number of users
--- a/sources/application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryForm.php
+++ b/sources/application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryForm.php
@@ -10,6 +10,7 @@ use Combodo\iTop\Application\UI\Base\Component\Input\RichText\RichText;
 use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
 use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
 use Combodo\iTop\Application\UI\Base\UIBlock;
+use DBObject;

 /**
 * Class CaseLogEntryForm
@@ -34,6 +35,10 @@ class CaseLogEntryForm extends UIContentBlock
 	/** @var string */
 	public const DEFAULT_SUBMIT_MODE = self::ENUM_SUBMIT_MODE_AUTONOMOUS;

+	/** @var DBObject Object hosting the case log attribute */
+	protected $oObject;
+	/** @var string Attribute code of the case log in $oObject */
+	protected $sAttCode;
 	/**
 	 * @var string Whether the form can send data on its own or if it's bridged with its host object form
 	 * @see static::ENUM_SUBMIT_MODE_XXX
@@ -51,15 +56,54 @@ class CaseLogEntryForm extends UIContentBlock
 	/**
 	 * CaseLogEntryForm constructor.
 	 *
-	 * @param null $sId
+	 * @param \DBObject $oObject
+	 * @param string|null $sId
 	 */
-	public function __construct($sId = null)
+	public function __construct(DBObject $oObject, string $sAttCode, string $sId = null)
 	{
 		parent::__construct($sId);
+		$this->oObject = $oObject;
+		$this->sAttCode = $sAttCode;
 		$this->sSubmitMode = static::DEFAULT_SUBMIT_MODE;
-		$this->SetTextInput(new RichText());
 		$this->aMainActionButtons = [];
 		$this->aExtraActionButtons = [];
+		$this->InitTextInput();
+	}
+
+	/**
+	 * @uses static::$oObject
+	 * @return \DBObject
+	 */
+	public function GetObject(): DBObject
+	{
+		return $this->oObject;
+	}
+
+	/**
+	 * @uses static::$oObject
+	 * @return string The class of $oObject
+	 */
+	public function GetObjectClass(): string
+	{
+		return get_class($this->oObject);
+	}
+
+	/**
+	 * @uses static::$oObject
+	 * @return string The ID of $oObject
+	 */
+	public function GetObjectId(): string
+	{
+		return $this->oObject->GetKey();
+	}
+
+	/**
+	 * @uses static::$sAttCode
+	 * @return string
+	 */
+	public function GetAttCode(): string
+	{
+		return $this->sAttCode;
 	}

 	/**
@@ -144,6 +188,16 @@ class CaseLogEntryForm extends UIContentBlock
 		return $this;
 	}

+	/**
+	 * @uses $oTextInput
+	 * @return $this
+	 */
+	protected function InitTextInput()
+	{
+		$this->oTextInput = new RichText();
+		return $this;
+	}
+
 	/**
 	 * @return \Combodo\iTop\Application\UI\Base\UIBlock[]
 	 */
--- a/sources/application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryFormFactory.php
+++ b/sources/application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryFormFactory.php
@@ -34,7 +34,7 @@ class CaseLogEntryFormFactory
 {
 	public static function MakeForCaselogTab(DBObject $oObject, string $sCaseLogAttCode, string $sObjectMode = cmdbAbstractObject::DEFAULT_OBJECT_MODE)
 	{
-		$oCaseLogEntryForm = new CaseLogEntryForm();
+		$oCaseLogEntryForm = new CaseLogEntryForm($oObject, $sCaseLogAttCode);
 		$oCaseLogEntryForm->SetSubmitModeFromHostObjectMode($sObjectMode)
 			->AddMainActionButtons(static::PrepareCancelButton())
 			->AddMainActionButtons(static::PrepareSaveButton())
--- a/templates/base/layouts/activity-panel/caselog-entry-form/layout.html.twig
+++ b/templates/base/layouts/activity-panel/caselog-entry-form/layout.html.twig
@@ -1,6 +1,9 @@
 <form id="{{ oUIBlock.GetId() }}"
      class="ibo-caselog-entry-form {% if oUIBlock.IsSubmitAutonomous %}ibo-is-closed{% endif %}"
      data-role="ibo-caselog-entry-form"
+      data-object-class="{{ oUIBlock.GetObjectClass() }}"
+      data-object-id="{{ oUIBlock.GetObjectId() }}"
+      data-attribute-code="{{ oUIBlock.GetAttCode() }}"
      data-submit-mode="{{ oUIBlock.GetSubmitMode() }}"
      method="post">
 	<div class="ibo-caselog-entry-form--text-input" data-role="ibo-caselog-entry-form--text-input">
--- a/templates/base/layouts/activity-panel/caselog-entry-form/layout.js.twig
+++ b/templates/base/layouts/activity-panel/caselog-entry-form/layout.js.twig
@@ -1,4 +1,7 @@
 $('#{{ oUIBlock.GetId() }}').caselog_entry_form({
+    object_class: '{{ oUIBlock.GetObjectClass() }}',
+    object_id: '{{ oUIBlock.GetObjectId() }}',
+    attribute_code: '{{ oUIBlock.GetAttCode() }}',
 	submit_mode: '{{ oUIBlock.GetSubmitMode() }}',
 	text_input_id: '{{ oUIBlock.GetTextInput().GetId()}}'
 });
--- a/templates/base/layouts/activity-panel/layout.html.twig
+++ b/templates/base/layouts/activity-panel/layout.html.twig
@@ -9,8 +9,13 @@
 				     data-caselog-attribute-code="{{ sCaseLogAttCode }}"
 				     data-caselog-rank="{{ loop.index }}">
 					<a href="#" class="ibo-activity-panel--tab-title" data-role="ibo-activity-panel--tab-title">
-						<span class="ibo-activity-panel--tab-title-decoration"></span>
-						<span class="ibo-activity-panel--tab-title-text" title="{{ aCaseLogData.title }}">{{ aCaseLogData.title }}</span>
+						<span class="ibo-activity-panel--tab-title-decoration" data-role="ibo-activity-panel--tab-title-decoration"></span>
+						<span class="ibo-activity-panel--tab-title-text" data-role="ibo-activity-panel--tab-title-text" title="{{ aCaseLogData.title }}">{{ aCaseLogData.title }}</span>
+                        <span class="ibo-activity-panel--tab-title-draft-indicator"
+                              data-role="ibo-activity-panel--tab-title-draft-indicator"
+                              data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Caselog:DraftIndicator:Tooltip'|dict_s }}">
+                            <span class="fas fa-pen"></span>
+                        </span>
 					</a>
 				</div>
 			{% endfor %}
--- a/templates/base/layouts/activity-panel/print.html.twig
+++ b/templates/base/layouts/activity-panel/print.html.twig
@@ -10,7 +10,7 @@
 						{% if oUIBlock.HasCaseLogTabs() %}
 							{% for sCaseLogAttCode, aCaseLogData in oUIBlock.GetCaseLogTabs() %}
 								<label class="ibo-activity-panel--tab-toolbar-action ibo-activity-panel--tab-toggler-for-caselog-{{ loop.index }} "
-								       data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:CaselogsFilter:Tooltip'|dict_s }}"
+								       data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Caselogs:Tooltip'|dict_s }}"
 								       data-role="ibo-activity-panel--filter"
 								       data-target-entry-types="caselog"
 								       data-entry-caselog-attribute-code="{{ sCaseLogAttCode }}" >
@@ -21,17 +21,17 @@
 						{% endif %}
 						{% if oUIBlock.HasStates() %}
 							<label class="ibo-activity-panel--tab-toolbar-action"
-							       data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:TransitionsFilter:Tooltip'|dict_s }}"
+							       data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Transitions:Tooltip'|dict_s }}"
 							       data-role="ibo-activity-panel--filter"
 							       data-target-entry-types="transition">
-								{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:TransitionsFilter:Title'|dict_s }}
+								{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Transitions:Title'|dict_s }}
 							</label>
 						{% endif %}
 						<label class="ibo-activity-panel--tab-toolbar-action"
-						       data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:EditsFilter:Tooltip'|dict_s }}"
+						       data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Edits:Tooltip'|dict_s }}"
 						       data-role="ibo-activity-panel--filter"
 						       data-target-entry-types="edits">
-							{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:EditsFilter:Title'|dict_s }}
+							{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Edits:Title'|dict_s }}
 						</label>
 					</div>
 				</div>
--- a/templates/base/layouts/activity-panel/tab-toolbar/layout.html.twig
+++ b/templates/base/layouts/activity-panel/tab-toolbar/layout.html.twig
@@ -7,10 +7,10 @@
 			{% block bTabToolbarActions %}
 				<div class="ibo-activity-panel--tab-toolbar-left-actions">
 					{% block bTabToolbarLeftActions %}
-						<a href="#" class="ibo-activity-panel--tab-toolbar-action ibo-activity-panel--tab-toolbar-action-open-all" data-role="ibo-activity-panel--caselog-open-all" data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:OpenAll:Tooltip'|dict_s }}">
+						<a href="#" class="ibo-activity-panel--tab-toolbar-action ibo-activity-panel--tab-toolbar-action-open-all" data-role="ibo-activity-panel--caselog-open-all" data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Action:OpenAll:Tooltip'|dict_s }}">
 							<span class="fas fa-book-open"></span>
 						</a>
-						<a href="#" class="ibo-activity-panel--tab-toolbar-action ibo-activity-panel--tab-toolbar-action-close-all" data-role="ibo-activity-panel--caselog-close-all" data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:CloseAll:Tooltip'|dict_s }}">
+						<a href="#" class="ibo-activity-panel--tab-toolbar-action ibo-activity-panel--tab-toolbar-action-close-all" data-role="ibo-activity-panel--caselog-close-all" data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Action:CloseAll:Tooltip'|dict_s }}">
 							<span class="fas fa-book"></span>
 						</a>
 					{% endblock %}
@@ -18,9 +18,9 @@
 				<div class="ibo-activity-panel--tab-toolbar-middle-actions">
 					{% if oUIBlock.HasCaseLogTabs() %}
 						<label class="ibo-activity-panel--tab-toolbar-action" data-role="ibo-activity-panel--tab-toolbar-action"
-						       data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:CaselogsFilter:Tooltip'|dict_s }}">
+						       data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Caselogs:Tooltip'|dict_s }}">
 							<input type="checkbox" name="caselogs" data-role="ibo-activity-panel--filter" data-target-entry-types="caselog" {% if (aFilteredCaseLogsAttCodes is not defined) or (aFilteredCaseLogsAttCodes is empty) %}checked{% endif %}>
-							{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:CaselogsFilter:Title'|dict_s }}
+							{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Caselogs:Title'|dict_s }}
 							{% if oUIBlock.GetCaseLogTabs()|length > 0 %}
 								<a class="ibo-activity-panel--filter-options-toggler ibo-is-closed" data-role="ibo-activity-panel--filter-options-toggler" href="#">
 									<span class="fas fa-caret-up"></span>
@@ -41,25 +41,25 @@
 					{% endif %}
 					{% if oUIBlock.HasStates() %}
 						<label class="ibo-activity-panel--tab-toolbar-action"
-						       data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:TransitionsFilter:Tooltip'|dict_s }}">
+						       data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Transitions:Tooltip'|dict_s }}">
 							<input type="checkbox" name="transitions" data-role="ibo-activity-panel--filter" data-target-entry-types="transition" checked>
-							{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:TransitionsFilter:Title'|dict_s }}
+							{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Transitions:Title'|dict_s }}
 						</label>
 					{% endif %}
 					<label class="ibo-activity-panel--tab-toolbar-action"
-					       data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:EditsFilter:Tooltip'|dict_s }}">
+					       data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Edits:Tooltip'|dict_s }}">
 						<input type="checkbox" name="edits" data-role="ibo-activity-panel--filter" data-target-entry-types="edits" checked>
-						{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:EditsFilter:Title'|dict_s }}
+						{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Filter:Edits:Title'|dict_s }}
 					</label>
 				</div>
 				<div class="ibo-activity-panel--tab-toolbar-right-actions">
 					{% block bTabToolbarRightActions %}
-						<span class="ibo-activity-panel--tab-toolbar-info" data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:AuthorsCount:Tooltip'|dict_s }}">
+						<span class="ibo-activity-panel--tab-toolbar-info" data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Info:AuthorsCount:Tooltip'|dict_s }}">
 							<span class="ibo-activity-panel--tab-toolbar-info-text ibo-activity-panel--tab-toolbar-info-authors-count" data-role="ibo-activity-panel--tab-toolbar-info-authors-count">-</span>
 							<span class="ibo-activity-panel--tab-toolbar-info-icon fas fa-users"></span>
 						</span>
                        {% if oUIBlock.HasCaseLogTabs() %}
-                            <span class="ibo-activity-panel--tab-toolbar-info" data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:MessagesCount:Tooltip'|dict_s }}">
+                            <span class="ibo-activity-panel--tab-toolbar-info" data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Toolbar:Info:MessagesCount:Tooltip'|dict_s }}">
                                <span class="ibo-activity-panel--tab-toolbar-info-text ibo-activity-panel--tab-toolbar-info-messages-count" data-role="ibo-activity-panel--tab-toolbar-info-messages-count">-</span>
                                <span class="ibo-activity-panel--tab-toolbar-info-icon fas fa-comment-alt"></span>
                            </span>