Skip to content

Commit

Permalink
fix(core/bootstrap5): tabs in edit revision (ems-project#734)
Browse files Browse the repository at this point in the history 
Co-authored-by: David mattei <[email protected]>
  • Loading branch information
@theus77 @Davidmattei
theus77 and Davidmattei authored Jan 30, 2024
1 parent faea0de commit 8fc9884
Show file tree
Hide file tree
Showing 9 changed files with 458 additions and 340 deletions.
3 changes: 3 additions & 0 deletions EMS/admin-ui-bundle/assets/css/admin-lte/_cards.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,9 @@ html.maximized-card {

@if $enable-rounded {
@include border-top-radius($border-radius);
&:first-child {
border-radius: inherit;
}
}

.collapsed-card & {
Expand Down
86 changes: 47 additions & 39 deletions EMS/admin-ui-bundle/src/Resources/views/bootstrap5/data/revisions-data.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
</div>
{% endif %}
</div>
<div class="row">
<div class="row mt-3">
<div class="col-12">
{{ block('revisionFooterTabs') }}
</div>
Expand Down Expand Up @@ -114,24 +114,28 @@
{% if revision.tasksEnabled %}
{% set tabs = tabs|merge([{ name: 'tab_tasks', label: 'task.tab_tasks'|trans }]) %}
{% endif %}
<div id="revision-tabs" class="nav-tabs-custom">
<ul class="nav nav-tabs">
{% for tab in tabs|reverse %}
<li {{ loop.first ? 'class="active"' }}>
<a href="#{{ tab.name }}" data-bs-toggle="tab" aria-expanded="{{ loop.first ? 'true' : 'false' }}">{{ tab.label }}</a>
</li>
{% endfor %}
</ul>
<div class="tab-content">
{% for tab in tabs|reverse %}
<div class="tab-pane {{ loop.first ? 'active' }}" id="{{ tab.name }}">
{% if tab.name == 'tab_about_revision' %}
{{ block('revisionTabAboutRevision') }}
{% elseif tab.name == 'tab_tasks' %}
{{ block('revisionTabTasks') }}
{% endif %}
</div>
{% endfor %}
<div id="revision-tabs" class="card card-{{ theme_color }}">
<div class="card-header p-0 border-bottom-0">
<ul class="nav nav-tabs" role="tablist">
{% for tab in tabs|reverse %}
<li class="nav-item{{ loop.first ? ' active' }}">
<a href="#{{ tab.name }}" data-bs-target="#{{ tab.name }}" data-bs-toggle="pill" class="nav-link{% if loop.first %} active{% endif %}" role="tab" aria-selected="{{ loop.first ? 'true' : 'false' }}">{{ tab.label }}</a>
</li>
{% endfor %}
</ul>
</div>
<div class="card-body">
<div class="tab-content">
{% for tab in tabs|reverse %}
<div class="tab-pane fade{{ loop.first ? ' active show' }}" id="{{ tab.name }}" role="tabpanel">
{% if tab.name == 'tab_about_revision' %}
{{ block('revisionTabAboutRevision') }}
{% elseif tab.name == 'tab_tasks' %}
{{ block('revisionTabTasks') }}
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}
Expand Down Expand Up @@ -268,27 +272,31 @@
{% endblock %}

{% block revisionFooterTabs %}
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab_referrers" data-bs-toggle="tab" aria-expanded="true">{{ 'views.data.revisions-data-html.linked-documents-in'|trans({'%environment%': revision.contentType.environment.label, '%length%': referrerResponse.documents|length, '%total%': referrerResponse.formattedTotal }) }}</a></li>
<li class=""><a href="#tab_revisions" data-bs-toggle="tab" aria-expanded="false">Revisions <small>{{ revisionsSummary|length }}/{{ counter }}</small></a></li>
{% if auditTable|default(false) %}
<li class=""><a href="#tab_audit" data-bs-toggle="tab" aria-expanded="false">Audit <small>({{ auditCount }})</small></a></li>
{% endif %}
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_referrers">
{{ block('tabReferrers') }}
</div>
<div class="tab-pane" id="tab_revisions">
{{ block('tabRevisions') }}
</div>
{% if auditTable|default(false) %}
<div class="tab-pane" id="tab_audit">
{% form_theme auditTable '@EMSAdminUI/bootstrap5/form/forms.html.twig' %}
{{ form(auditTable) }}
<div class="card card-{{ theme_color }}">
<div class="card-header p-0 border-bottom-0">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item active"><a href="#tab_referrers" data-bs-target="#tab_referrers" data-bs-toggle="pill" class="nav-link active" role="tab" aria-controls="true">{{ 'views.data.revisions-data-html.linked-documents-in'|trans({'%environment%': revision.contentType.environment.label, '%length%': referrerResponse.documents|length, '%total%': referrerResponse.formattedTotal }) }}</a></li>
<li class="nav-item"><a href="#tab_revisions" data-bs-target="#tab_revisions" data-bs-toggle="pill" class="nav-link" role="tab" aria-controls="false">Revisions <small>{{ revisionsSummary|length }}/{{ counter }}</small></a></li>
{% if auditTable|default(false) %}
<li class="nav-item"><a href="#tab_audit" data-bs-target="#tab_audit" data-bs-toggle="pill" class="nav-link" role="tab" aria-controls="false">Audit <small>({{ auditCount }})</small></a></li>
{% endif %}
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade active show" id="tab_referrers" role="tabpanel">
{{ block('tabReferrers') }}
</div>
{% endif %}
<div class="tab-pane fade" id="tab_revisions" role="tabpanel">
{{ block('tabRevisions') }}
</div>
{% if auditTable|default(false) %}
<div class="tab-pane fade" id="tab_audit" role="tabpanel">
{% form_theme auditTable '@EMSAdminUI/bootstrap5/form/forms.html.twig' %}
{{ form(auditTable) }}
</div>
{% endif %}
</div>
</div>
</div>
{% endblock %}
Expand Down
121 changes: 68 additions & 53 deletions EMS/admin-ui-bundle/src/Resources/views/bootstrap5/form/fields.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,37 +170,37 @@

{% if editSubfields is not defined or editSubfields %}
<div class="tab-content">
{% set active='active' %}
{% set active=' active show' %}
{% if form.displayOptions is defined %}
<div class="tab-pane {{ active }}" id="tab_display_{{ seed }}">
<div class="tab-pane fade{{ active }}" id="tab_display_{{ seed }}" role="tabpanel">
{{- form_widget(form.displayOptions) -}}
</div>
{% set active='' %}
{% endif %}
<!-- /.tab-pane -->
{% if form.mappingOptions is defined %}
<div class="tab-pane {{ active }}" id="tab_mapping_{{ seed }}">
<div class="tab-pane fade{{ active }}" id="tab_mapping_{{ seed }}" role="tabpanel">
{{- form_widget(form.mappingOptions) -}}
</div>
{% set active='' %}
{% endif %}
<!-- /.tab-pane -->
{% if form.restrictionOptions is defined %}
<div class="tab-pane {{ active }}" id="tab_restriction_{{ seed }}">
<div class="tab-pane fade{{ active }}" id="tab_restriction_{{ seed }}" role="tabpanel">
{{- form_widget(form.restrictionOptions) -}}
</div>
{% set active='' %}
{% endif %}
<!-- /.tab-pane -->
{% if form.migrationOptions is defined %}
<div class="tab-pane {{ active }}" id="tab_migration_{{ seed }}">
<div class="tab-pane fade{{ active }}" id="tab_migration_{{ seed }}" role="tabpanel">
{{- form_widget(form.migrationOptions) -}}
</div>
{% set active='' %}
{% endif %}
<!-- /.tab-pane -->
{% if form.extraOptions is defined %}
<div class="tab-pane {{ active }}" id="tab_extra_{{ seed }}">
<div class="tab-pane fade{{ active }}" id="tab_extra_{{ seed }}" role="tabpanel">
{{- form_widget(form.extraOptions) -}}
</div>
{% endif %}
Expand All @@ -213,8 +213,10 @@
<div class="col-md-4 match-height">
<div class="box box-default">
<div class="box-header with-border">
<i class="fa fa-eye"></i>
<h3 class="box-title">{{- form_label(form.displayOptions) -}}</h3>
<h3 class="box-title">
<i class="fas fa-eye fa-xs"></i>&nbsp;
{{- form_label(form.displayOptions) -}}
</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
Expand All @@ -229,8 +231,10 @@
<div class="col-md-4 match-height">
<div class="box box-default">
<div class="box-header with-border">
<i class="fa fa-sitemap"></i>
<h3 class="box-title">{{- form_label(form.mappingOptions) -}}</h3>
<h3 class="box-title">
<i class="fas fa-sitemap fa-xs"></i>&nbsp;
{{- form_label(form.mappingOptions) -}}
</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
Expand All @@ -245,8 +249,10 @@
<div class="col-md-4 match-height">
<div class="box box-default">
<div class="box-header with-border">
<i class="fa fa-shield"></i>
<h3 class="box-title">{{- form_label(form.restrictionOptions) -}}</h3>
<h3 class="box-title">
<i class="fas fa-shield fa-xs"></i>&nbsp;
{{- form_label(form.restrictionOptions) -}}
</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
Expand All @@ -261,8 +267,10 @@
<div class="col-md-4 match-height">
<div class="box box-default">
<div class="box-header with-border">
<i class="fa fa-recycle"></i>
<h3 class="box-title">{{- form_label(form.migrationOptions) -}}</h3>
<h3 class="box-title">
<i class="fas fa-recycle fa-xs"></i>&nbsp;
{{- form_label(form.migrationOptions) -}}
</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
Expand All @@ -277,8 +285,10 @@
<div class="col-md-4 match-height">
<div class="box box-default">
<div class="box-header with-border">
<i class="fa fa-plus"></i>
<h3 class="box-title">{{- form_label(form.extraOptions) -}}</h3>
<h3 class="box-title">
<i class="fas fa-plus fa-xs"></i>&nbsp;
{{- form_label(form.extraOptions) -}}
</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
Expand Down Expand Up @@ -499,15 +509,15 @@
{% endblock tabsfieldtype_row %}

{% block tabsfieldtype_widget_tab_label_per_item %}
<li id="{{ tab.vars.id}}__label" class="form-group{% if tab.vars.errors|length %} has-error{% endif %}{% if counter == 1%} active{% endif %}{% if tab.vars.class is defined and tab.vars.class != 'col-md-12' %} {{tab.vars.class}}{% endif %}">
<a href="#{{ tab.vars.id}}__tab" data-bs-toggle="tab" aria-expanded="{% if counter == 1%}true{%else%}false{% endif %}">
<li id="{{ tab.vars.id}}__label" class="nav-item{% if tab.vars.errors|length %} has-error{% endif %}{% if tab.vars.class is defined and tab.vars.class != 'col-md-12' %} {{tab.vars.class}}{% endif %}">
<a href="#{{ tab.vars.id}}__tab" data-bs-toggle="pill" class="nav-link{% if counter == 1%} active{% endif %}" id="{{ tab.vars.id}}-tab" data-bs-target="#{{ tab.vars.id}}__tab" role="tab" aria-controls="{{ tab.vars.id}}__tab" aria-selected="{% if counter == 1%}true{%else%}false{% endif %}">
{{- form_label(tab) -}}
</a>
</li>
{% endblock tabsfieldtype_widget_tab_label_per_item %}

{% block tabsfieldtype_widget_tab_panel_per_item %}
<div class="tab-pane{% if counter == 1%} active{% endif %}" id="{{ tab.vars.id}}__tab">
<div class="tab-pane fade{% if counter == 1%} active show{% endif %}" id="{{ tab.vars.id}}__tab" role="tabpanel" aria-labelledby="{{ tab.vars.id}}-tab">
<div class="form-group has-error" id="{{ tab.vars.id}}__error">
{{ form_errors(tab) }}
</div>
Expand All @@ -522,9 +532,9 @@
{% endblock tabsfieldtype_widget_tab_panel_per_item %}

{% block tabsfieldtype_widget -%}
{# <div class="{% if class %}{{ class }}{% else %}col-xs-12 {% endif %}">#}
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<div class="card card-{{ theme_color }}">
<div class="card-header p-0 border-bottom-0">
<ul class="nav nav-tabs" role="tablist">
{% set counter = 1 %}
{% for tab in form.iterator %}
{% if 'EMS\\CoreBundle\\Form\\DataField\\MultiplexedTabContainerFieldType' == tab.vars.data.fieldType.type and form.vars.data.fieldType.type == 'EMS\\CoreBundle\\Form\\DataField\\TabsFieldType' %}
Expand All @@ -550,7 +560,9 @@
{% endif %}
{% endfor %}
</ul>
<div class="tab-content panel panel-default">
</div>
<div class="card-body">
<div class="tab-content">
{% set counter = 1 %}
{% for tab in form.iterator %}
{% if 'EMS\\CoreBundle\\Form\\DataField\\MultiplexedTabContainerFieldType' == tab.vars.data.fieldType.type and form.vars.data.fieldType.type == 'EMS\\CoreBundle\\Form\\DataField\\TabsFieldType' %}
Expand All @@ -575,10 +587,9 @@
{% set counter = counter + 1 %}
{% endif %}
{% endfor %}
</div>
<!-- /.tab-content -->
</div>
{# </div>#}
</div>
</div>
</div>
{%- endblock tabsfieldtype_widget %}


Expand Down Expand Up @@ -1332,7 +1343,7 @@
{% if form.options is defined and form.vars.editSubfields %}
<!-- Modal windows field options -->
<div class="modal fade" id="{{ form.vars.id }}_modal_options" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
Expand All @@ -1341,31 +1352,35 @@
</h4>
</div>
<div class="modal-body">
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
{% set active='active' %}
{% if form.options.displayOptions is defined %}
<li class="{{ active }}"><a href="#tab_display_{{ form.vars.id }}" data-bs-toggle="tab" aria-expanded="true">Display</a></li>
{% set active='' %}
{% endif %}
{% if form.options.mappingOptions is defined %}
<li class="{{ active }}"><a href="#tab_mapping_{{ form.vars.id }}" data-bs-toggle="tab" aria-expanded="false">Mapping</a></li>
{% set active='' %}
{% endif %}
{% if form.options.restrictionOptions is defined %}
<li class="{{ active }}"><a href="#tab_restriction_{{ form.vars.id }}" data-bs-toggle="tab" aria-expanded="false">Restriction</a></li>
{% set active='' %}
{% endif %}
{% if form.options.migrationOptions is defined %}
<li class="{{ active }}"><a href="#tab_migration_{{ form.vars.id }}" data-bs-toggle="tab" aria-expanded="false">Migration</a></li>
{% set active='' %}
{% endif %}
{% if form.options.extraOptions is defined %}
<li class="{{ active }}"><a href="#tab_extra_{{ form.vars.id }}" data-bs-toggle="tab" aria-expanded="false">Extra</a></li>
{% set active='' %}
{% endif %}
</ul>
{{- form_widget(form.options, {'seed': form.vars.id} ) -}}
<div class="card card-{{ theme_color }}">
<div class="card-header p-0 border-bottom-0">
<ul class="nav nav-tabs" role="tablist">
{% set active=' active' %}
{% if form.options.displayOptions is defined %}
<li class="nav-item{{ active }}"><a href="#tab_display_{{ form.vars.id }}" data-bs-target="#tab_display_{{ form.vars.id }}" class="nav-link{% if active != ''%} active{% endif %}" data-bs-toggle="pill" aria-selected="{% if active != ''%}true{%else%}false{% endif %}">Display</a></li>
{% set active='' %}
{% endif %}
{% if form.options.mappingOptions is defined %}
<li class="nav-item{{ active }}"><a href="#tab_mapping_{{ form.vars.id }}" data-bs-target="#tab_mapping_{{ form.vars.id }}" class="nav-link{% if active != ''%} active{% endif %}" data-bs-toggle="pill" aria-selected="{% if active != ''%}true{%else%}false{% endif %}">Mapping</a></li>
{% set active='' %}
{% endif %}
{% if form.options.restrictionOptions is defined %}
<li class="nav-item{{ active }}"><a href="#tab_restriction_{{ form.vars.id }}" data-bs-target="#tab_restriction_{{ form.vars.id }}" class="nav-link{% if active != ''%} active{% endif %}" data-bs-toggle="pill" aria-selected="{% if active != ''%}true{%else%}false{% endif %}">Restriction</a></li>
{% set active='' %}
{% endif %}
{% if form.options.migrationOptions is defined %}
<li class="nav-item{{ active }}"><a href="#tab_migration_{{ form.vars.id }}" data-bs-target="#tab_migration_{{ form.vars.id }}" class="nav-link{% if active != ''%} active{% endif %}" data-bs-toggle="pill" aria-selected="{% if active != ''%}true{%else%}false{% endif %}">Migration</a></li>
{% set active='' %}
{% endif %}
{% if form.options.extraOptions is defined %}
<li class="nav-item{{ active }}"><a href="#tab_extra_{{ form.vars.id }}" data-bs-target="#tab_extra_{{ form.vars.id }}" class="nav-link{% if active != ''%} active{% endif %}" data-bs-toggle="pill" aria-selected="{% if active != ''%}true{%else%}false{% endif %}">Extra</a></li>
{% set active='' %}
{% endif %}
</ul>
</div>
<div class="card-body">
{{- form_widget(form.options, {'seed': form.vars.id} ) -}}
</div>
</div>
</div>
<div class="modal-footer">
Expand Down
Loading

0 comments on commit 8fc9884

Please sign in to comment.