Skip to content

Commit

Permalink
IBX-3471: Updated trash view (#536)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucasOsti
lucasOsti authored Aug 10, 2022
1 parent c415c2a commit a2a312f
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 59 deletions.
18 changes: 11 additions & 7 deletions src/bundle/Resources/public/scss/_trash-search-form.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
.ibexa-trash-search-form {
margin: calculateRem(16px) 0;

&__inputs-group {
display: flex;
justify-content: space-between;
Expand All @@ -17,6 +15,7 @@

&--creator {
position: relative;
width: 100%;

.ibexa-trash-search-form {
&__input-wrapper {
Expand Down Expand Up @@ -87,21 +86,26 @@
display: none;
position: absolute;
right: 0;
bottom: calculateRem(1px);
bottom: 0;

&:hover {
border-color: transparent;
}
}

&__range-wrapper {
height: 0;
width: 0;
opacity: 0;
margin-top: calculateRem(8px);
background: $ibexa-color-white;
border: calculateRem(1px) solid $ibexa-color-white;
border-radius: calculateRem(4px);
transition: all 0.2s ease-in;
transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
pointer-events: none;
overflow: hidden;

&--visible {
height: calculateRem(40px);
width: auto;
margin-left: calculateRem(16px);
opacity: 1;
pointer-events: auto;
}
Expand Down
110 changes: 60 additions & 50 deletions src/bundle/Resources/views/themes/admin/trash/list.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,57 +22,68 @@
{% endblock %}

{% block content %}
{% set trashSearchParams = app.request.get('trash_search') %}

<div class="align-items-stretch ibexa-main-row">
<section class="container ibexa-container">
{{ form_start(form_search, { attr: { class: 'ibexa-trash-search-form' } }) }}
<div class="ibexa-trash-search-form__inputs-group">
{% set trash_search_params = app.request.get('trash_search') %}

<div class="ibexa-container">
{% set collapsible_items = [
form_row(form_search.content_type, {
'attr': {'class': 'ibexa-trash-search-form__item ibexa-trash-search-form__item--auto-send'}
}),
form_row(form_search.trashed, {
'attr': {'data-target-selector': '.ibexa-trash-search-form__range-wrapper--select-trashed-range'}
}),
] %}

{% if can_view_section %}
{% set collapsible_items = collapsible_items|merge([
form_row(form_search.section, {
'attr': {'class': 'ibexa-trash-search-form__item ibexa-trash-search-form__item--auto-send'}
})
]) %}
{% endif %}

{% embed '@ibexadesign/ui/component/adaptive_filters/adaptive_filters.html.twig' with {
form: form_search,
is_inside_container: true,
collapsible_items: collapsible_items,
attr: {
class: 'ibexa-trash-search-form'
}
} %}
{% trans_default_domain 'trash' %}

{% block static_left_input %}
<div class="ibexa-trash-search-form__item ibexa-trash-search-form__item--creator">
{% set creator = form_search.vars.data ? form_search.vars.data.creator : '' %}

{{ form_widget(form_search.content_type, {
'attr': {'class': 'ibexa-trash-search-form__item ibexa-trash-search-form__item--auto-send'}
}) }}
{% if can_view_section %}
{{ form_widget(form_search.section, {
'attr': {'class': 'ibexa-trash-search-form__item ibexa-trash-search-form__item--auto-send'}
}) }}
{% endif %}

<div class='ibexa-trash-search-form__item ibexa-trash-search-form__item--trashed'>
{{ form_widget(form_search.trashed, {
'attr': {'data-target-selector': '.ibexa-trash-search-form__range-wrapper--select-trashed-range'}
}) }}
</div>
<div class="ibexa-trash-search-form__item ibexa-trash-search-form__item--creator">
{% set creator = form_search.vars.data ? form_search.vars.data.creator : '' %}
{% set creatorExists = creator is not empty ? true : false %}
<div class="ibexa-trash-search-form__input-wrapper">
<input
type="text"
class="form-control ibexa-input ibexa-input--text ibexa-trash-search-form__input"
data-content-type-identifiers="{{ user_content_type_identifier|join(',') }}"
value="{{ creatorExists ? ibexa_content_name(creator) }}"
placeholder="{{ 'search.creator_input.placeholder'|trans|desc('Type creator\'s name') }}"
{{ creatorExists ? 'disabled' }}
>
<button class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-btn--reset-creator">
<svg class="ibexa-icon ibexa-icon--small ibexa-icon--reset">
<use xlink:href="{{ ibexa_icon_path('circle-close') }}"></use>
</svg>
</button>
</div>
<ul class="ibexa-trash-search-form__user-list ibexa-trash-search-form__user-list--hidden"></ul>
{% set creator_exists = creator is not empty ? true : false %}

<div class="ibexa-trash-search-form__input-wrapper">
<input
type="text"
class="form-control ibexa-input ibexa-input--text ibexa-trash-search-form__input"
data-content-type-identifiers="{{ user_content_type_identifier|join(',') }}"
value="{{ creator_exists ? ibexa_content_name(creator) }}"
placeholder="{{ 'search.creator_input.placeholder'|trans|desc('Type creator\'s name') }}"
{{ creator_exists ? 'disabled' }}
>
<button class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-btn--reset-creator">
<svg class="ibexa-icon ibexa-icon--tiny-small ibexa-icon--reset">
<use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
</svg>
</button>
</div>

{{ form_widget(form_search.creator, {'attr': {'hidden': 'hidden'}}) }}
{{ form_widget(form_search.sort, {'attr': {'hidden': 'hidden'}}) }}
{{ form_widget(form_search.trashed_interval, {'attr': {'hidden': 'hidden'}}) }}
<ul class="ibexa-trash-search-form__user-list ibexa-trash-search-form__user-list--hidden"></ul>
</div>
{{ form_end(form_search) }}

{{ form_start(form_trash_item_restore, {
'action': path('ibexa.trash.restore', { 'trash_search': trashSearchParams })
{{ form_widget(form_search.creator, {'attr': {'hidden': 'hidden'}}) }}
{{ form_widget(form_search.sort, {'attr': {'hidden': 'hidden'}}) }}
{{ form_widget(form_search.trashed_interval, {'attr': {'hidden': 'hidden'}}) }}
{% endblock %}
{% block actions %}{% endblock %}
{% endembed %}

{{ form_start(form_trash_item_restore, {
'action': path('ibexa.trash.restore', { 'trash_search': trash_search_params })
}) }}

{% if form_search.vars.data.sort is defined %}
Expand Down Expand Up @@ -282,7 +293,7 @@
{{ form_end(form_trash_item_restore, { 'render_rest': false }) }}

{{ form_start(form_trash_item_delete, {
'action': path('ibexa.trash.delete', { 'trash_search': trashSearchParams })
'action': path('ibexa.trash.delete', { 'trash_search': trash_search_params })
}) }}
{% for key, form in form_trash_item_delete.trash_items %}
{% set trash_item = trash_items[key] %}
Expand All @@ -301,8 +312,7 @@
} %}
{% endif %}
{% include '@ibexadesign/trash/modal/empty_trash_confirmation.html.twig' with {'form': form_trash_empty, 'trash_items_count': pager.nbResults} %}
</section>
</div>
</div>
{% endblock %}

{% block react_modules %}
Expand Down
4 changes: 2 additions & 2 deletions src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,8 +318,8 @@
</div>
{%- endblock -%}

{%- block _trash_search_trashed_widget -%}
{{ form_widget(form) }}
{%- block _trash_search_trashed_row -%}
{{ form_row(form) }}
<div
class="ibexa-trash-search-form__range-wrapper ibexa-trash-search-form__range-wrapper--select-trashed-range {% if form.vars.data == "custom_range" %}ibexa-trash-search-form__range-wrapper--visible{% endif %}"
data-period-selector="#trash_search_trashed_interval_date_interval"
Expand Down

0 comments on commit a2a312f

Please sign in to comment.