composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-05-16 22:08:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°3649 - Activity panel: Continue improvement following the alpha feedbacks

Browse Source 
- Fix compose button visible when no editable caselog
- Fix "states" filter visible on object with no state attribute
- All tabs now have all the actions / filters
- Initial active tab is now the first one (caselog or activity)
This commit is contained in:
Molkobain
2021-01-22 18:30:47 +01:00
parent 0c7925cdfb
commit 7f55fd4bf6
7 changed files with 146 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,19 +50,18 @@ $ibo-activity-panel--tab-title-decoration--border-radius: $ibo-border-radius-300
$ibo-activity-panel--tab-title-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--padding-x: 10px !default;
$ibo-activity-panel--tab-toolbar--text-color: $ibo-color-grey-800 !default;
$ibo-activity-panel--tab-toolbar--background-color: $ibo-activity-panel--tab-toggler--is-active--background-color !default;
$ibo-activity-panel--tab-toolbar-actions--height: 32px !default;
$ibo-activity-panel--tab-toolbar-right-actions--elements-spacing: 16px !default;
$ibo-activity-panel--tab-toolbar-for-caselog--elements-spacing: 16px !default;
$ibo-activity-panel--tab-toolbar-for-caselog--icon-margin-left: 8px !default;
$ibo-activity-panel--tab-toolbar-for-caselog--icons-separator-content: "-" !default;
$ibo-activity-panel--tab-toolbar-for-caselog--icons-separator-margin-x: 8px !default;
$ibo-activity-panel--tab-toolbar-for-activity--elements-spacing: 36px !default;
$ibo-activity-panel--tab-toolbar-for-activity--checkbox-margin-right: 8px !default;
$ibo-activity-panel--tab-toolbar-action--elements-separator-content: "-" !default;
$ibo-activity-panel--tab-toolbar-action--elements-separator-margin-x: 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--tab-toolbar-info-icon--margin-left: 8px !default;
/* - Body */
$ibo-activity-panel--body--padding-top: $ibo-activity-panel--padding-x !default;
@@ -175,6 +174,7 @@ $ibo-activity-panel--body--placeholder-hint--color: $ibo-color-grey-800 !default
}
.ibo-activity-panel--tab-toolbar-actions{
@extend %ibo-fully-centered-content;
justify-content: space-between;
flex-wrap: wrap;
height: $ibo-activity-panel--tab-toolbar-actions--height;
}
@@ -183,47 +183,41 @@ $ibo-activity-panel--body--placeholder-hint--color: $ibo-color-grey-800 !default
.ibo-activity-panel--tab-toolbar-right-actions{
@extend %ibo-vertically-centered-content;
}
.ibo-activity-panel--tab-toolbar-left-actions{
.ibo-activity-panel--tab-toolbar-action{
&:not(:first-child){
&::before{
content: $ibo-activity-panel--tab-toolbar-action--elements-separator-content;
margin: 0 $ibo-activity-panel--tab-toolbar-action--elements-separator-margin-x;
}
}
}
}
.ibo-activity-panel--tab-toolbar-middle-actions {
.ibo-activity-panel--tab-toolbar-action{
> input{
margin-right: $ibo-activity-panel--tab-toolbar-filter--checkbox-margin-right;
}
&:not(:first-child){
margin-left: $ibo-activity-panel--tab-toolbar-filter--sibling-spacing;
}
}
}
.ibo-activity-panel--tab-toolbar-right-actions {
.ibo-activity-panel--tab-toolbar-info {
> .ibo-activity-panel--tab-toolbar-info-icon {
margin-left: $ibo-activity-panel--tab-toolbar-info-icon--margin-left;
}
&:not(:first-child) {
margin-left: $ibo-activity-panel--tab-toolbar-right-actions--elements-spacing;
}
}
}
.ibo-activity-panel--tab-toolbar-action{
@extend %ibo-fully-centered-content;
}
.ibo-activity-panel--tab-toolbar-for-caselog{
.ibo-activity-panel--tab-toolbar-actions{
justify-content: space-between;
.ibo-activity-panel--tab-toolbar-action{
&:not(:first-child){
&::before{
content: $ibo-activity-panel--tab-toolbar-for-caselog--icons-separator-content;
margin: 0 $ibo-activity-panel--tab-toolbar-for-caselog--icons-separator-margin-x;
}
}
}
.ibo-activity-panel--tab-toolbar-info{
> .ibo-activity-panel--tab-toolbar-info-icon{
margin-left: $ibo-activity-panel--tab-toolbar-for-caselog--icon-margin-left;
}
&:not(:first-child){
margin-left: $ibo-activity-panel--tab-toolbar-for-caselog--elements-spacing;
}
}
}
}
.ibo-activity-panel--tab-toolbar-for-activity{
.ibo-activity-panel--tab-toolbar-actions{
justify-content: center;
.ibo-activity-panel--tab-toolbar-action{
> input{
margin-right: $ibo-activity-panel--tab-toolbar-for-activity--checkbox-margin-right;
}
&:not(:first-child){
margin-left: $ibo-activity-panel--tab-toolbar-for-activity--elements-spacing;
}
}
}
}
/* Body */
.ibo-activity-panel--body{

33
sources/application/UI/Base/Layout/ActivityPanel/ActivityPanel.php
View File

@@ -61,8 +61,11 @@ class ActivityPanel extends UIBlock
protected $aEntries;
/** @var bool $bAreEntriesSorted True if the entries have been sorted by date */
protected $bAreEntriesSorted;
/** @var bool $bHasLifecycle True if the host object has a lifecycle */
protected $bHasLifecycle;
/**
* @var bool True if the host object has states (but not necessary a lifecycle)
* @see MetaModel::HasStateAttributeCode()
*/
protected $bHasStates;
/** @var \Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\CaseLogEntryForm\CaseLogEntryForm[] $aCaseLogTabsEntryForms */
protected $aCaseLogTabsEntryForms;
@@ -103,7 +106,7 @@ class ActivityPanel extends UIBlock
$sObjectClass = get_class($this->oObject);
// Check if object has a lifecycle
$this->bHasLifecycle = !empty(MetaModel::GetStateAttributeCode($sObjectClass));
$this->bHasStates = MetaModel::HasStateAttributeCode($sObjectClass);
// Initialize the case log tabs
$this->InitializeCaseLogTabs();
@@ -469,6 +472,23 @@ class ActivityPanel extends UIBlock
return !empty($this->aCaseLogs);
}
/**
* @return bool true if there is at least 1 editable case log
*/
public function HasAnEditableCaseLogTab(): bool
{
$bHasEditable = false;
foreach ($this->GetCaseLogTabs() as $aCaseLogTabData) {
if (false === $aCaseLogTabData['is_read_only']) {
$bHasEditable = true;
break;
}
}
return $bHasEditable;
}
/**
* Empty the caselogs entry forms
*
@@ -556,13 +576,12 @@ class ActivityPanel extends UIBlock
}
/**
* Return true if the host object has a lifecycle
*
* @uses $bHasStates
* @return bool
*/
public function HasLifecycle()
public function HasStates(): bool
{
return $this->bHasLifecycle;
return $this->bHasStates;
}
/**

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

@@ -37,62 +37,12 @@
</div>
<div class="ibo-activity-panel--tabs-toolbars">
{% for sCaseLogAttCode, aCaseLogData in oUIBlock.GetCaseLogTabs() %}
<div class="ibo-activity-panel--tab-toolbar ibo-activity-panel--tab-toolbar-for-caselog ibo-activity-panel--tab-toolbar-for-caselog-{{ loop.index }}" data-role="ibo-activity-panel--tab-toolbar" data-tab-type="caselog" data-caselog-attribute-code="{{ sCaseLogAttCode }}" data-caselog-rank="{{ loop.index }}">
<div class="ibo-activity-panel--tab-toolbar-actions">
<div class="ibo-activity-panel--tab-toolbar-left-actions">
<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 }}">
<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 }}">
<span class="fas fa-book"></span>
</a>
</div>
<div class="ibo-activity-panel--tab-toolbar-right-actions">
<span class="ibo-activity-panel--tab-toolbar-info ibo-activity-panel--tab-toolbar-info-authors-count" data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:AuthorsCount:Tooltip'|dict_s }}">
<span class="ibo-activity-panel--tab-toolbar-info-text">{{ aCaseLogData.authors|length }}</span>
<span class="ibo-activity-panel--tab-toolbar-info-icon fas fa-users"></span>
</span>
<span class="ibo-activity-panel--tab-toolbar-info ibo-activity-panel--tab-toolbar-info-messages-count" data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:MessagesCount:Tooltip'|dict_s }}">
<span class="ibo-activity-panel--tab-toolbar-info-text">{{ aCaseLogData.total_messages_count }}</span>
<span class="ibo-activity-panel--tab-toolbar-info-icon fas fa-comment-alt"></span>
</span>
</div>
</div>
{% if oUIBlock.HasCaseLogTabEntryForm(sCaseLogAttCode) %}
<div class="ibo-activity-panel--tab-toggler-entry-form" data-role="ibo-activity-panel--tab-toggler-entry-form">
{{ render_block(oUIBlock.GetCaseLogTabEntryForm(sCaseLogAttCode)) }}
</div>
{% endif %}
</div>
{{ include('base/layouts/activity-panel/tab-toolbar/caselog.html.twig', {oUIBlock: oUIBlock, iRank: loop.index, bIsActive: (loop.index == 1)}) }}
{% endfor %}
<div class="ibo-activity-panel--tab-toolbar ibo-activity-panel--tab-toolbar-for-activity ibo-is-active" data-role="ibo-activity-panel--tab-toolbar" data-tab-type="activity">
<div class="ibo-activity-panel--tab-toolbar-actions">
<div class="ibo-activity-panel--tab-toolbar-middle-actions">
{% if oUIBlock.HasCaseLogTabs() %}
<label class="ibo-activity-panel--tab-toolbar-action"
data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:CaselogsFilter:Tooltip'|dict_s }}">
<input type="checkbox" name="caselogs" data-role="ibo-activity-panel--activity-filter" data-target-entry-types="caselog" checked>
{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:CaselogsFilter:Title'|dict_s }}
</label>
{% endif %}
{% if oUIBlock.HasLifecycle() %}
<label class="ibo-activity-panel--tab-toolbar-action"
data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:TransitionsFilter:Tooltip'|dict_s }}">
<input type="checkbox" name="transitions" data-role="ibo-activity-panel--activity-filter" data-target-entry-types="transition" checked>
{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:TransitionsFilter: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 }}">
<input type="checkbox" name="edits" data-role="ibo-activity-panel--activity-filter" data-target-entry-types="edits" checked>
{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:EditsFilter:Title'|dict_s }}
</label>
</div>
</div>
</div>
{{ include('base/layouts/activity-panel/tab-toolbar/activity.html.twig', {oUIBlock: oUIBlock, bIsActive: (oUIBlock.GetCaseLogTabs()|length == 0)}) }}
</div>
</div>
{% if oUIBlock.IsCaseLogsSubmitAutonomous() %}
{% if oUIBlock.HasAnEditableCaseLogTab() and oUIBlock.IsCaseLogsSubmitAutonomous() %}
<a href="#" class="ibo-activity-panel--body--add-caselog-entry--toggler" data-role="ibo-activity-panel--body--add-caselog-entry--toggler"><i class="fas fa-feather"></i></a>
{% endif %}
<div class="ibo-activity-panel--body">

2
templates/base/layouts/activity-panel/print.html.twig
View File

@@ -19,7 +19,7 @@
</label>
{% endfor %}
{% endif %}
{% if oUIBlock.HasLifecycle() %}
{% 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-role="ibo-activity-panel--activity-filter"

5
templates/base/layouts/activity-panel/tab-toolbar/activity.html.twig Normal file
View File

@@ -0,0 +1,5 @@
{% extends 'base/layouts/activity-panel/tab-toolbar/layout.html.twig' %}
{% block bExtraCSSClasses %}ibo-activity-panel--tab-toolbar-for-activity{% endblock %}
{% block bDataTabType %}activity{% endblock %}

15
templates/base/layouts/activity-panel/tab-toolbar/caselog.html.twig Normal file
View File

@@ -0,0 +1,15 @@
{% extends 'base/layouts/activity-panel/tab-toolbar/layout.html.twig' %}
{% block bExtraCSSClasses %}ibo-activity-panel--tab-toolbar-for-caselog ibo-activity-panel--tab-toolbar-for-caselog-{{ iRank }}{% endblock %}
{% block bDataTabType %}caselog{% endblock %}
{% block bExtraDataAttributes %}data-caselog-attribute-code="{{ sCaseLogAttCode }}" data-caselog-rank="{{ loop.index }}"{% endblock %}
{% block bTabToolbarSecondRow %}
{% if oUIBlock.HasCaseLogTabEntryForm(sCaseLogAttCode) %}
<div class="ibo-activity-panel--tab-entry-form" data-role="ibo-activity-panel--tab-entry-form">
{{ render_block(oUIBlock.GetCaseLogTabEntryForm(sCaseLogAttCode)) }}
</div>
{% endif %}
{% endblock %}

56
templates/base/layouts/activity-panel/tab-toolbar/layout.html.twig Normal file
View File

@@ -0,0 +1,56 @@
<div class="ibo-activity-panel--tab-toolbar {% if bIsActive == true %}ibo-is-active{% endif %} {% block bExtraCSSClasses %}{% endblock %}"
data-role="ibo-activity-panel--tab-toolbar"
data-tab-type="{% block bDataTabType %}{% endblock %}"
{% block bExtraDataAttributes %}{% endblock %}>
{% block btabToolbarFirstRow %}
<div class="ibo-activity-panel--tab-toolbar-actions">
{% 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 }}">
<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 }}">
<span class="fas fa-book"></span>
</a>
{% endblock %}
</div>
<div class="ibo-activity-panel--tab-toolbar-middle-actions">
{% if oUIBlock.HasCaseLogTabs() %}
<label class="ibo-activity-panel--tab-toolbar-action"
data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:CaselogsFilter:Tooltip'|dict_s }}">
<input type="checkbox" name="caselogs" data-role="ibo-activity-panel--activity-filter" data-target-entry-types="caselog" checked>
{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:CaselogsFilter:Title'|dict_s }}
</label>
{% 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 }}">
<input type="checkbox" name="transitions" data-role="ibo-activity-panel--activity-filter" data-target-entry-types="transition" checked>
{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:TransitionsFilter: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 }}">
<input type="checkbox" name="edits" data-role="ibo-activity-panel--activity-filter" data-target-entry-types="edits" checked>
{{ 'UI:Layout:ActivityPanel:Tab:Activity:Toolbar:EditsFilter:Title'|dict_s }}
</label>
</div>
<div class="ibo-activity-panel--tab-toolbar-right-actions">
{% block bTabToolbarRightActions %}
<span class="ibo-activity-panel--tab-toolbar-info ibo-activity-panel--tab-toolbar-info-authors-count" data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:AuthorsCount:Tooltip'|dict_s }}">
<span class="ibo-activity-panel--tab-toolbar-info-text">-</span>
<span class="ibo-activity-panel--tab-toolbar-info-icon fas fa-users"></span>
</span>
<span class="ibo-activity-panel--tab-toolbar-info ibo-activity-panel--tab-toolbar-info-messages-count" data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Caselog:Toolbar:MessagesCount:Tooltip'|dict_s }}">
<span class="ibo-activity-panel--tab-toolbar-info-text">-</span>
<span class="ibo-activity-panel--tab-toolbar-info-icon fas fa-comment-alt"></span>
</span>
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}
{% block bTabToolbarSecondRow %}
{% endblock %}
</div>