N°3649 - Activity panel: Move case log entry form above toolbar's actions

This commit is contained in:
Molkobain
2021-02-07 18:16:49 +01:00
parent 6710ffa334
commit aa0fb2b8f7
8 changed files with 125 additions and 88 deletions

View File

@@ -32,4 +32,4 @@
@import "activity-panel/edits-entry";
@import "activity-panel/transition-entry";
@import "activity-panel/caselog-entry-form";
@import "blocks-integrations/panel-with-tab-container";
@import "blocks-integrations/all";

View File

@@ -57,6 +57,8 @@ $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--margin-y: 4px !default;
$ibo-activity-panel--tab-toolbar-actions--margin-x: 0 !default;
$ibo-activity-panel--tab-toolbar-actions--height: 32px !default;
$ibo-activity-panel--tab-toolbar-right-actions--elements-spacing: 16px !default;
@@ -87,7 +89,7 @@ $ibo-activity-panel--body--placeholder-hint--margin-top: 16px !default;
$ibo-activity-panel--body--placeholder-hint--color: $ibo-color-grey-800 !default;
$ibo-activity-panel--add-caselog-entry-button--right: 12px !default;
$ibo-activity-panel--add-caselog-entry-button--top: 66px + $ibo-activity-panel--add-caselog-entry-button--right !default;
$ibo-activity-panel--add-caselog-entry-button--top: 76px + $ibo-activity-panel--add-caselog-entry-button--right !default;
$ibo-activity-panel--add-caselog-entry-button--diameter: 36px !default;
$ibo-activity-panel--add-caselog-entry-button--background-color: $ibo-color-primary-600 !default;
$ibo-activity-panel--add-caselog-entry-button--color: $ibo-color-white-100 !default;
@@ -219,6 +221,7 @@ $ibo-activity-panel--entry-forms-confirmation-preference-input--spacing: 0.5rem
@extend %ibo-fully-centered-content;
justify-content: space-between;
flex-wrap: nowrap;
margin: $ibo-activity-panel--tab-toolbar-actions--margin-y $ibo-activity-panel--tab-toolbar-actions--margin-x;
height: $ibo-activity-panel--tab-toolbar-actions--height;
}
.ibo-activity-panel--tab-toolbar-left-actions,

View File

@@ -4,20 +4,20 @@
*/
$ibo-caselog-entry-form--width: 100% !default;
$ibo-caselog-entry-form--padding-bottom: 12px default;
$ibo-caselog-entry-form--background-color: $ibo-activity-panel--tab-toolbar--background-color !default;
$ibo-caselog-entry-form--actions--margin-top: 6px !default;
$ibo-caselog-entry-form--actions--margin-bottom: 8px !default;
$ibo-caselog-entry-form--actions--margin-top: 8px !default;
$ibo-caselog-entry-form--actions--margin-bottom: $ibo-caselog-entry-form--actions--margin-top !default;
.ibo-caselog-entry-form {
display: block;
width: 100%;
background-color: $ibo-caselog-entry-form--background-color;
.ibo-caselog-entry-form{
display: block;
width: 100%;
background-color: $ibo-caselog-entry-form--background-color;
&.ibo-is-closed{
display: none;
}
&.ibo-is-closed {
display: none;
}
}
.ibo-caselog-entry-form--actions{
display: flex;

View File

@@ -0,0 +1,7 @@
/*!
* @copyright Copyright (C) 2010-2021 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
@import "caselog-entry-form-within-activity-panel";
@import "panel-with-tab-container";

View File

@@ -0,0 +1,14 @@
/*!
* @copyright Copyright (C) 2010-2021 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-caselog-entry-form-within-activity-panel--padding-bottom: 14px !default;
$ibo-caselog-entry-form-within-activity-panel--border-bottom: 1px solid $ibo-color-grey-500 !default;
.ibo-activity-panel--tab-entry-form {
.ibo-caselog-entry-form {
padding-bottom: $ibo-caselog-entry-form-within-activity-panel--padding-bottom;
border-bottom: $ibo-caselog-entry-form-within-activity-panel--border-bottom;
}
}

View File

@@ -6,20 +6,21 @@
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">
{{ render_block(oUIBlock.GetTextInput(), {aPage: aPage}) }}
</div>
<div class="ibo-caselog-entry-form--actions">
<div class="ibo-caselog-entry-form--action-buttons--extra-actions" data-role="ibo-caselog-entry-form--action-buttons--extra-actions">
{% for TextInputActionButton in oUIBlock.GetExtraActionButtons() %}
{{ render_block(TextInputActionButton, {aPage: aPage}) }}
{% endfor %}
</div>
<div class="ibo-caselog-entry-form--action-buttons--main-actions" data-role="ibo-caselog-entry-form--action-buttons--main-actions">
{% for FormActionButton in oUIBlock.GetMainActionButtons() %}
{{ render_block(FormActionButton, {aPage: aPage}) }}
{% endfor %}
{{ render_block(oUIBlock.GetSendButtonPopoverMenu(), {aPage: aPage}) }}
</div>
</div>
<div class="ibo-caselog-entry-form--actions">
<div class="ibo-caselog-entry-form--action-buttons--extra-actions"
data-role="ibo-caselog-entry-form--action-buttons--extra-actions">
{% for TextInputActionButton in oUIBlock.GetExtraActionButtons() %}
{{ render_block(TextInputActionButton, {aPage: aPage}) }}
{% endfor %}
</div>
<div class="ibo-caselog-entry-form--action-buttons--main-actions" data-role="ibo-caselog-entry-form--action-buttons--main-actions">
{% for FormActionButton in oUIBlock.GetMainActionButtons() %}
{{ render_block(FormActionButton, {aPage: aPage}) }}
{% endfor %}
{{ render_block(oUIBlock.GetSendButtonPopoverMenu(), {aPage: aPage}) }}
</div>
</div>
<div class="ibo-caselog-entry-form--text-input" data-role="ibo-caselog-entry-form--text-input">
{{ render_block(oUIBlock.GetTextInput(), {aPage: aPage}) }}
</div>
</form>

View File

@@ -6,7 +6,7 @@
{% block bExtraDataAttributes %}data-caselog-attribute-code="{{ sCaseLogAttCode }}" data-caselog-rank="{{ loop.index }}"{% endblock %}
{% block bTabToolbarSecondRow %}
{% block bTabToolbarFirstRow %}
{% 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)) }}

View File

@@ -3,72 +3,84 @@
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: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:Toolbar:Action: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-role="ibo-activity-panel--tab-toolbar-action"
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: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>
</a>
<div class="ibo-activity-panel--filter-options" data-role="ibo-activity-panel--filter-options">
{% for sCaseLogAttCode, aCaseLogData in oUIBlock.GetCaseLogTabs() %}
<label class="ibo-activity-panel--filter-option" data-role="ibo-activity-panel--filter-option" title="{{ aCaseLogData['title'] }}">
<input type="checkbox" name="caselog" value="{{ sCaseLogAttCode }}"
{% endblock %}
{% block bTabToolbarSecondRow %}
<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: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:Toolbar:Action: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-role="ibo-activity-panel--tab-toolbar-action"
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: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>
</a>
<div class="ibo-activity-panel--filter-options" data-role="ibo-activity-panel--filter-options">
{% for sCaseLogAttCode, aCaseLogData in oUIBlock.GetCaseLogTabs() %}
<label class="ibo-activity-panel--filter-option" data-role="ibo-activity-panel--filter-option"
title="{{ aCaseLogData['title'] }}">
<input type="checkbox" name="caselog" value="{{ sCaseLogAttCode }}"
class="ibo-activity-panel--filter-option-input"
data-role="ibo-activity-panel--filter-option-input"
{% if (aFilteredCaseLogsAttCodes is not defined) or (sCaseLogAttCode in aFilteredCaseLogsAttCodes) %}checked{% endif %}>
{{ aCaseLogData['title'] }}
</label>
{% endfor %}
</div>
{% endif %}
</label>
{% endif %}
{% if oUIBlock.HasStates() %}
<label class="ibo-activity-panel--tab-toolbar-action"
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:Toolbar:Filter:Transitions:Title'|dict_s }}
</label>
{% endif %}
<label class="ibo-activity-panel--tab-toolbar-action"
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: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: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>
{{ aCaseLogData['title'] }}
</label>
{% endfor %}
</div>
{% endif %}
</label>
{% endif %}
{% if oUIBlock.HasStates() %}
<label class="ibo-activity-panel--tab-toolbar-action"
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:Toolbar:Filter:Transitions:Title'|dict_s }}
</label>
{% endif %}
<label class="ibo-activity-panel--tab-toolbar-action"
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: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: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: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"
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>
{% endif %}
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}
{% block bTabToolbarSecondRow %}
{% endblock %}
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}
</div>