Skip to content

Commit

Permalink
IBX-2450: Object state group view design improvements (#351)
Browse files Browse the repository at this point in the history 
Co-authored-by: Bogdan Mazur <[email protected]>
  • Loading branch information
@tischsoic
tischsoic and Bogdan Mazur authored Mar 10, 2022
1 parent daef05e commit 0590020
Show file tree
Hide file tree
Showing 9 changed files with 235 additions and 206 deletions.
4 changes: 2 additions & 2 deletions features/standard/ObjectStates.feature
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ Feature: Object States management
And I click on the edit action bar button "Save"
Then notification that "Object state" "Test Object State edited2" is updated appears
And I should be on "Test Object State edited2" Object State page
And Object state has proper attributes
And Object State has proper attributes
| label | value |
| Object state name | Test Object State edited2 |
| Identifier | TestObjectStateIdentifier |
Expand All @@ -176,7 +176,7 @@ Feature: Object States management
| Identifier | TestObjectStateIdentifier2 |
And I click on the edit action bar button "Create"
Then I should be on "Test Object State 2" Object State page
And Object state has proper attributes
And Object State has proper attributes
| label | value |
| Object state name | Test Object State 2 |
| Identifier | TestObjectStateIdentifier2 |
Expand Down
5 changes: 5 additions & 0 deletions src/bundle/Resources/public/scss/_object-state-group-view.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.ibexa-object-state-group-view {
.ibexa-details {
margin-bottom: calculateRem(48px);
}
}
1 change: 1 addition & 0 deletions src/bundle/Resources/public/scss/ibexa.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,3 +109,4 @@
@import 'location-swap-form';
@import 'selection-table';
@import 'assign';
@import 'object-state-group-view';
10 changes: 5 additions & 5 deletions src/bundle/Resources/translations/object_state.en.xliff
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,11 @@
<target state="new">Object state group name</target>
<note>key: object_state_group.name</note>
</trans-unit>
<trans-unit id="c3af10bed843bcb54aa038942fa8d6c4bc20f736" resname="object_state_group.name.action.edit">
<source>Edit</source>
<target state="new">Edit</target>
<note>key: object_state_group.name.action.edit</note>
</trans-unit>
<trans-unit id="1cbfb4528f41be4d8de98fa4f81c26b41f8ffad9" resname="object_state_group.new">
<source>Create</source>
<target state="new">Create</target>
Expand Down Expand Up @@ -261,11 +266,6 @@
<target state="new">Object state groups</target>
<note>key: object_state_group.view.list.title</note>
</trans-unit>
<trans-unit id="f242d2aa82647529a4d5c7c314719fb4276a4e51" resname="object_state_group.view.title">
<source>Object state group: %name%</source>
<target state="new">Object state group: %name%</target>
<note>key: object_state_group.view.title</note>
</trans-unit>
</body>
</file>
</xliff>
218 changes: 108 additions & 110 deletions src/bundle/Resources/views/themes/admin/object_state/list.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,124 +3,122 @@
{% trans_default_domain 'object_state' %}

{% block content %}
<section class="container ibexa-container">
{% set body_rows = [] %}
{% for object_state in object_states %}
{% set body_row_cols = [] %}
{% set body_rows = [] %}
{% for object_state in object_states %}
{% set body_row_cols = [] %}

{% set col_raw %}
{% if can_administrate %}
{{ form_widget(form_states_delete.objectStates[object_state.id]) }}
{% else %}
{% do form_states_delete.objectStates.setRendered %}
{% endif %}
{% endset %}
{% set body_row_cols = body_row_cols|merge([{
has_checkbox: true,
content: col_raw,
raw: true,
}]) %}
{% set col_raw %}
{% if can_administrate %}
{{ form_widget(form_states_delete.objectStates[object_state.id]) }}
{% else %}
{% do form_states_delete.objectStates.setRendered %}
{% endif %}
{% endset %}
{% set body_row_cols = body_row_cols|merge([{
has_checkbox: true,
content: col_raw,
raw: true,
}]) %}

{% set col_raw %}
<a href="{{ path( 'ibexa.object_state.state.view', {'objectStateId': object_state.id} ) }}">
{{ object_state.name }}
</a>
{% endset %}
{% set body_row_cols = body_row_cols|merge([{
content: col_raw,
raw: true,
}]) %}
{% set col_raw %}
<a href="{{ path( 'ibexa.object_state.state.view', {'objectStateId': object_state.id} ) }}">
{{ object_state.name }}
</a>
{% endset %}
{% set body_row_cols = body_row_cols|merge([{
content: col_raw,
raw: true,
}]) %}

{% set body_row_cols = body_row_cols|merge([
{ content: object_state.identifier },
{ content: object_state.id },
]) %}
{% set body_row_cols = body_row_cols|merge([
{ content: object_state.identifier },
{ content: object_state.id },
]) %}

{% set col_raw %}
{% if can_administrate %}
<a
title="{{ 'object_state.view.list.action.edit'|trans|desc('Edit') }}"
href="{{ path('ibexa.object_state.state.update', {'objectStateId': object_state.id}) }}"
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text mx-2"
>
<svg class="ibexa-icon ibexa-icon--small ibexa-icon--edit">
<use xlink:href="{{ ibexa_icon_path('edit') }}"></use>
</svg>
</a>
{% endif %}
{% endset %}
{% set body_row_cols = body_row_cols|merge([{
has_action_btns: true,
content: col_raw,
raw: true,
}]) %}
{% set col_raw %}
{% if can_administrate %}
<a
title="{{ 'object_state.view.list.action.edit'|trans|desc('Edit') }}"
href="{{ path('ibexa.object_state.state.update', {'objectStateId': object_state.id}) }}"
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text"
>
<svg class="ibexa-icon ibexa-icon--small ibexa-icon--edit">
<use xlink:href="{{ ibexa_icon_path('edit') }}"></use>
</svg>
</a>
{% endif %}
{% endset %}
{% set body_row_cols = body_row_cols|merge([{
has_action_btns: true,
content: col_raw,
raw: true,
}]) %}

{% set body_rows = body_rows|merge([{ cols: body_row_cols }]) %}
{% endfor %}
{% set body_rows = body_rows|merge([{ cols: body_row_cols }]) %}
{% endfor %}

{% embed '@ibexadesign/ui/component/table/table.html.twig' with {
headline: 'object_state.view.list.title'|trans({'%count%': object_states|length})|desc('Object states (%count%)'),
head_cols: [
{ has_checkbox: true },
{ content: 'object_state.name'|trans|desc('Object state name') },
{ content: 'object_state.identifier'|trans|desc('Identifier') },
{ content: 'object_state.id'|trans|desc('ID') },
{ },
],
body_rows,
empty_table_info_text: 'object_state.list.empty'|trans|desc('There are no Object states yet. Object states you create will show up here.'),
} %}
{% block header %}
{% embed '@ibexadesign/ui/component/table/table_header.html.twig' %}
{% block actions %}
{% if can_administrate %}
<a
href="{{ path('ibexa.object_state.state.add', {'objectStateGroupId': object_state_group.id}) }}"
class="btn ibexa-btn ibexa-btn--tertiary ibexa-btn--small"
>
<svg class="ibexa-icon ibexa-icon--small ibexa-icon--create">
<use xlink:href="{{ ibexa_icon_path('create') }}"></use>
</svg>
<span class="ibexa-btn__label">
{{ 'object_state.new'|trans|desc('Add new') }}
</span>
</a>
{% embed '@ibexadesign/ui/component/table/table.html.twig' with {
headline: 'object_state.view.list.title'|trans({'%count%': object_states|length})|desc('Object states (%count%)'),
head_cols: [
{ has_checkbox: true },
{ content: 'object_state.name'|trans|desc('Object state name') },
{ content: 'object_state.identifier'|trans|desc('Identifier') },
{ content: 'object_state.id'|trans|desc('ID') },
{ },
],
body_rows,
empty_table_info_text: 'object_state.list.empty'|trans|desc('There are no Object states yet. Object states you create will show up here.'),
} %}
{% block header %}
{% embed '@ibexadesign/ui/component/table/table_header.html.twig' %}
{% block actions %}
{% if can_administrate %}
<a
href="{{ path('ibexa.object_state.state.add', {'objectStateGroupId': object_state_group.id}) }}"
class="btn ibexa-btn ibexa-btn--tertiary ibexa-btn--small"
>
<svg class="ibexa-icon ibexa-icon--small ibexa-icon--create">
<use xlink:href="{{ ibexa_icon_path('create') }}"></use>
</svg>
<span class="ibexa-btn__label">
{{ 'object_state.new'|trans|desc('Add new') }}
</span>
</a>

{% set modal_data_target = 'delete-object-state-modal' %}
<button
id="delete-object-state"
type="button"
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small"
disabled
data-bs-toggle="modal"
data-bs-target="#{{ modal_data_target }}"
>
<svg class="ibexa-icon ibexa-icon--small ibexa-icon--trash">
<use xlink:href="{{ ibexa_icon_path('trash') }}"></use>
</svg>
<span class="ibexa-btn__label">
{{ 'object_state.delete.bulk_delete.submit'|trans|desc('Delete') }}
</span>
</button>
{% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with {
'id': modal_data_target,
'message': 'object_state.modal.message'|trans|desc('Do you want to delete the Object state(s)?'),
'data_click': '#object_states_delete_delete',
}%}
{% endif %}
{% endblock %}
{% endembed %}
{% endblock %}
{% set modal_data_target = 'delete-object-state-modal' %}
<button
id="delete-object-state"
type="button"
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small"
disabled
data-bs-toggle="modal"
data-bs-target="#{{ modal_data_target }}"
>
<svg class="ibexa-icon ibexa-icon--small ibexa-icon--trash">
<use xlink:href="{{ ibexa_icon_path('trash') }}"></use>
</svg>
<span class="ibexa-btn__label">
{{ 'object_state.delete.bulk_delete.submit'|trans|desc('Delete') }}
</span>
</button>
{% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with {
'id': modal_data_target,
'message': 'object_state.modal.message'|trans|desc('Do you want to delete the Object state(s)?'),
'data_click': '#object_states_delete_delete',
}%}
{% endif %}
{% endblock %}
{% endembed %}
{% endblock %}

{% block between_header_and_table %}
{{ form_start(form_states_delete, {
'action': path('ibexa.object_state.state.bulk_delete', {'objectStateGroupId': object_state_group.id}),
'attr': { 'class': 'ibexa-toggle-btn-state', 'data-toggle-button-id': '#delete-object-state' }
}) }}
{% endblock %}
{% endembed %}
{{ form_end(form_states_delete) }}
</section>
{% block between_header_and_table %}
{{ form_start(form_states_delete, {
'action': path('ibexa.object_state.state.bulk_delete', {'objectStateGroupId': object_state_group.id}),
'attr': { 'class': 'ibexa-toggle-btn-state', 'data-toggle-button-id': '#delete-object-state' }
}) }}
{% endblock %}
{% endembed %}
{{ form_end(form_states_delete) }}
{% endblock %}

{% block javascripts %}
Expand Down
82 changes: 44 additions & 38 deletions src/bundle/Resources/views/themes/admin/object_state/object_state_group/view.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,57 +8,63 @@
{% include '@ibexadesign/ui/breadcrumbs.html.twig' with { items: [
{ value: 'breadcrumb.admin'|trans(domain='messages')|desc('Admin') },
{ url: path('ibexa.object_state.groups.list'), value: 'object_state_group.breadcrumb.list'|trans|desc('Object states') },
{ value: 'object_state_group.breadcrumb.view'|trans({ '%name%': object_state_group.name })|desc('Object state group: %name%') },
{ value: object_state_group.name },
]} %}
{% endblock %}

{% block title %}{{ 'object_state_group.view.title'|trans({ '%name%': object_state_group.name })|desc('Object state group: %name%') }}{% endblock %}
{% block title %}{{ object_state_group.name }}{% endblock %}

{% block header %}
{% include '@ibexadesign/ui/page_title.html.twig' with {
title: 'object_state_group.view.title'|trans({ '%name%': object_state_group.name })|desc('Object state group: %name%'),
title: object_state_group.name,
} %}
{% endblock %}

{% block content %}
<section class="container ibexa-container">
{% set body_row_cols = [] %}

{% set body_row_cols = body_row_cols|merge([
{ content: object_state_group.name },
{ content: object_state_group.identifier },
{ content: object_state_group.id },
]) %}

{% set col_raw %}
{% if can_administrate %}
{% block context_menu %}
{% set menu_items %}
{% if can_administrate %}
<li class="ibexa-context-menu__item ibexa-adaptive-items__item">
<a
title="{{ 'object_state_group.view.list.action.edit'|trans|desc('Edit') }}"
href="{{ path('ibexa.object_state.group.update', {'objectStateGroupId': object_state_group.id}) }}"
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text"
href="{{ path('ibexa.object_state.group.update', { objectStateGroupId: object_state_group.id }) }}"
class="btn ibexa-btn ibexa-btn--secondary"
>
<svg class="ibexa-icon ibexa-icon--small ibexa-icon--edit">
<use xlink:href="{{ ibexa_icon_path('edit') }}"></use>
</svg>
<span class="ibexa-btn__label">
{{ 'object_state_group.name.action.edit'|trans|desc('Edit') }}
</span>
</a>
{% endif %}
{% endset %}
{% set body_row_cols = body_row_cols|merge([{
has_action_btns: true,
content: col_raw,
raw: true,
}]) %}
</li>
{% endif %}
{% endset %}

{{ include('@ibexadesign/ui/component/context_menu/context_menu.html.twig', {
menu_items,
}) }}
{% endblock %}

{% include '@ibexadesign/ui/component/table/table.html.twig' with {
{% block content %}
<section class="container ibexa-container">
{% set details_items = [
{
label: 'object_state_group.name'|trans|desc('Object state group name'),
content: object_state_group.name,
},
{
label: 'object_state_group.identifier'|trans|desc('Identifier'),
content: object_state_group.identifier,
},
{
label: 'object_state_group.id'|trans|desc('ID'),
content: object_state_group.id,
},
] %}

{% include '@ibexadesign/ui/component/details/details.html.twig' with {
headline: 'object_state_group.view.information.title'|trans|desc('Object state group information'),
head_cols: [
{ content: 'object_state_group.name'|trans|desc('Object state group name') },
{ content: 'object_state_group.identifier'|trans|desc('Identifier') },
{ content: 'object_state_group.id'|trans|desc('ID') },
{ },
],
body_rows: [{ cols: body_row_cols }],
} %}
items: details_items,
} only %}

{{ render( controller('Ibexa\\Bundle\\AdminUi\\Controller\\ObjectStateController::listAction', {
objectStateGroupId: object_state_group.id,
})) }}
</section>
{{ render( controller( 'Ibexa\\Bundle\\AdminUi\\Controller\\ObjectStateController::listAction', { 'objectStateGroupId': object_state_group.id } ) ) }}
{% endblock %}
Loading

0 comments on commit 0590020

Please sign in to comment.