composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-12 23:14:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°7939 - Improve activity panel tab togglers when there's more than 2 log attributes (#766)

Browse Source
This commit is contained in:
Stephen Abello
2025-10-30 16:38:38 +01:00
committed by GitHub
parent 5df936c587
commit adfa800063
3 changed files with 39 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
css/backoffice/layout/activity-panel/_activity-panel.scss
View File

@@ -15,9 +15,10 @@ $ibo-activity-panel--padding-y: $ibo-spacing-0 !default;
/* - Header */
$ibo-activity-panel--header--background-color: $ibo-color-grey-100 !default;
$ibo-activity-panel--togglers--color: $ibo-color-grey-600 !default;
$ibo-activity-panel--togglers--on-hover--color: $ibo-color-grey-800 !default;
$ibo-activity-panel--togglers--elements-spacing: 0.75rem !default;
$ibo-activity-panel--actions--color: $ibo-color-grey-600 !default;
$ibo-activity-panel--actions--on-hover--color: $ibo-color-grey-800 !default;
$ibo-activity-panel--actions--elements-spacing: 0.75rem !default;
$ibo-activity-panel--actions-padding-right: $ibo-activity-panel--padding-x !default;
/* - Tabs togglers*/
$ibo-activity-panel--tabs-togglers--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 */
@@ -151,35 +152,45 @@ $ibo-activity-panel--open-icon--margin-left: 0.75rem !default;
background-color: $ibo-activity-panel--header--background-color;
/* Remove hyperlinks default color */
> .ibo-activity-panel--tabs-togglers a{
.ibo-activity-panel--togglers a{
color: $ibo-activity-panel--tab-toolbar--text-color;
}
}
/* Size/display togglers */
/* All toggles container */
.ibo-activity-panel--togglers {
position: absolute;
right: $ibo-activity-panel--padding-x;
top: 0;
bottom: 0;
@extend %ibo-fully-centered-content;
color: $ibo-activity-panel--togglers--color;
display: flex;
align-items: center;
}
/* Size/display togglers */
.ibo-activity-panel--actions {
display: flex;
align-items: center;
flex-grow: 0;
position: sticky;
padding-right: $ibo-activity-panel--actions-padding-right;
background-color: $ibo-activity-panel--header--background-color;
color: $ibo-activity-panel--actions--color;
&:hover {
color: $ibo-activity-panel--togglers--on-hover--color;
color: $ibo-activity-panel--actions--on-hover--color;
}
> *:not(:first-child) {
margin-left: $ibo-activity-panel--togglers--elements-spacing;
margin-left: $ibo-activity-panel--actions--elements-spacing;
}
}
/* Tabs togglers */
.ibo-activity-panel--tabs-togglers{
position: relative; /* For size toggler */
display: flex;
align-items: center;
justify-content: safe center;
flex-grow: 1;
padding-left: $ibo-activity-panel--tabs-togglers--padding-x;
padding-right: $ibo-activity-panel--tabs-togglers--padding-x;
@extend %ibo-fully-centered-content;
overflow-x: auto;
}
.ibo-activity-panel--tab-toggler{
&.ibo-is-active{

10
js/layouts/activity-panel/activity-panel.js
View File

@@ -618,11 +618,17 @@ $(function()
_InitializeCurrentTab : function(){
const sTabId = $.bbq.getState(this.element.attr('id'), true);
if(sTabId !== undefined){
let oTabTogglerElem = null;
if(sTabId.startsWith("caselog-")){
this._GetTabTogglerFromCaseLogAttCode(sTabId.replace("caselog-", "")).find(this.js_selectors.tab_title).trigger('click')
oTabTogglerElem = this._GetTabTogglerFromCaseLogAttCode(sTabId.replace("caselog-", "")).find(this.js_selectors.tab_title).trigger('click')
}
else if(sTabId === "activity"){
this.element.find(this.js_selectors.tab_toggler + '[data-tab-type="activity"]').find(this.js_selectors.tab_title).trigger('click')
oTabTogglerElem = this.element.find(this.js_selectors.tab_toggler + '[data-tab-type="activity"]').find(this.js_selectors.tab_title).trigger('click')
}
// Scroll to the tab toggler if found
if(oTabTogglerElem !== null){
oTabTogglerElem[0].scrollIntoView();
}
}
},

6
templates/base/layouts/activity-panel/layout.html.twig
View File

@@ -5,7 +5,8 @@
data-object-id="{{ oUIBlock.GetObjectId() }}"
data-object-mode="{{ oUIBlock.GetObjectMode() }}">
<div class="ibo-activity-panel--header" data-role="ibo-activity-panel--header">
<div class="ibo-activity-panel--tabs-togglers" data-role="ibo-activity-panel--tabs-togglers">
<div class="ibo-activity-panel--togglers" data-role="ibo-activity-panel--togglers">
<div class="ibo-activity-panel--tabs-togglers" data-role="ibo-activity-panel--tabs-togglers">
{% for sCaseLogAttCode, aCaseLogData in oUIBlock.GetCaseLogTabs() %}
{% set sExtraCSSClass = (loop.index == 1) ? 'ibo-is-active' : '' %}
<div class="ibo-activity-panel--tab-toggler ibo-activity-panel--tab-toggler-for-caselog ibo-activity-panel--tab-toggler-for-caselog-{{ loop.index }} {{ sExtraCSSClass }}"
@@ -34,7 +35,8 @@
<span class="ibo-activity-panel--tab-title-text" title="{{ 'UI:Layout:ActivityPanel:Tab:Activity:Title'|dict_s }}">{{ 'UI:Layout:ActivityPanel:Tab:Activity:Title'|dict_s }}</span>
</a>
</div>
<div class="ibo-activity-panel--togglers" data-role="ibo-activity-panel--togglers">
</div>
<div class="ibo-activity-panel--actions" data-role="ibo-activity-panel--actions">
<a href="#" class="ibo-activity-panel--expand-icon"
data-role="ibo-activity-panel--expand-icon"
data-tooltip-content="{{ 'UI:Layout:ActivityPanel:SizeToggler:Expand:Tooltip'|dict_s }}"