IBX-1562: Redesigned url management (#83)

ibexa · Dec 2, 2021 · e32f343 · e32f343
1 parent 2b678cc
commit e32f343
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 29 deletions.
diff --git a/src/bundle/Resources/public/scss/_search-links-form.scss b/src/bundle/Resources/public/scss/_search-links-form.scss
@@ -0,0 +1,29 @@
+.ibexa-search-links-form {
+    display: flex;
+    align-items: flex-end;
+    border: calculateRem(1px) solid $ibexa-color-light;
+    border-radius: $ibexa-border-radius;
+    padding: calculateRem(8px) calculateRem(24px) calculateRem(14px);
+    margin-top: calculateRem(12px);
+
+    &__input-wrapper {
+        padding-right: calculateRem(24px);
+
+        .ibexa-input-text-wrapper {
+            min-width: calculateRem(410px);
+        }
+    }
+
+    &__status-wrapper {
+        padding-left: calculateRem(24px);
+        border-left: calculateRem(1px) solid $ibexa-color-light;
+
+        .ibexa-label {
+            margin-top: 0;
+        }
+
+        .ibexa-dropdown {
+            min-width: calculateRem(216px);
+        }
+    }
+}
diff --git a/src/bundle/Resources/public/scss/ezplatform.scss b/src/bundle/Resources/public/scss/ezplatform.scss
@@ -106,3 +106,4 @@
 @import 'grid-view';
 @import 'grid-view-item';
 @import 'list-search';
+@import 'search-links-form';
diff --git a/src/bundle/Resources/views/themes/admin/link_manager/list.html.twig b/src/bundle/Resources/views/themes/admin/link_manager/list.html.twig
@@ -4,22 +4,17 @@
 
 {%- block content -%}
     <section class="container">
-        {{ form_start(form, {'attr': {'class': 'form-inline justify-content-between'}}) }}
-            <div class="input-group">
+        {{ form_start(form, {'attr': {'class': 'ibexa-search-links-form'}}) }}
+            <div class="ibexa-search-links-form__input-wrapper">
                 {{ form_widget(form.searchQuery, { attr: {
                     'placeholder': 'url.search.placeholder'|trans,
                 }}) }}
-
-                <button class="btn ibexa-btn ibexa-btn--primary ml-2">
-                    {{ 'url.search'|trans|desc("Search") }}
-                </button>
             </div>
-            <div class="d-inline-flex">
-                {{ form_label(form.status) }} &nbsp;
+            <div class="ibexa-search-links-form__status-wrapper">
+                {{ form_label(form.status) }}
                 {{ form_widget(form.status) }}
             </div>
-
-        {{ form_widget(form.page, { attr: { value: '1' }}) }}
+            {{ form_widget(form.page, { attr: { value: '1' }}) }}
         {{ form_end(form) }}
     </section>
 
@@ -32,7 +27,11 @@
 
             {% set col_raw %}
                 <a href="{{ view_url }}">{{ url.url|u.truncate(50) }}</a>
-                (<a href="{{ url.url }}" target="_blank">{{ 'url.open'|trans }}</a>)
+                <a href="{{ url.url }}" target="_blank">
+                    <svg class="ibexa-icon ibexa-icon--small">
+                        <use xlink:href="{{ ibexa_icon_path('open-newtab') }}"></use>
+                    </svg>
+                </a>
             {% endset %}
             {% set body_row_cols = body_row_cols|merge([{
                 content: col_raw,
@@ -81,9 +80,10 @@
         } %}
 
         {% if urls.haveToPaginate %}
-            <div class="row justify-content-center align-items-center ez-pagination__spacing mb-5">
-                {{ pagerfanta(urls, 'ez', {'pageParameter': '[search_data][page]'}) }}
-            </div>
+            {% include '@ezdesign/ui/pagination.html.twig' with {
+                'pager': urls,
+                'paginaton_params' : {'pageParameter': '[search_data][page]'}
+            } %}
         {% endif %}
     </section>
 {%- endblock -%}

diff --git a/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig b/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
@@ -61,6 +61,12 @@
     {{ block('form_widget_simple') }}
 {%- endblock -%}
 
+{%- block _search_data_searchQuery_widget -%}
+    {% set has_search = true %}
+
+    {{ block('form_widget_simple') }}
+{%- endblock -%}
+
 {%- block _search_content_types_widget -%}
     <div class="ibexa-content-type-selector accordion">
         {%- set groups = choices -%}

diff --git a/src/bundle/Resources/views/themes/admin/url_management/url_management.html.twig b/src/bundle/Resources/views/themes/admin/url_management/url_management.html.twig
@@ -2,29 +2,27 @@
 
 {% trans_default_domain 'ezplatform_url_management' %}
 
-{% block body_class %}ez-url-management{% endblock %}
+{% block body_class %}ibexa-url-management{% endblock %}
 
 {% block breadcrumbs %}
-    {% include '@ezdesign/ui/breadcrumbs.html.twig' with { items: [
-        { value: 'breadcrumb.admin'|trans(domain='messages')|desc('Admin') },
-        { value: 'url_management.breadcrumb.list'|trans|desc('URL Management') },
-    ]} %}
-{% endblock %}
-
-{% block title %}
-    {{ 'url_management.view.list.title'|trans|desc('URL Management') }}
+    <div class="container">
+        {% include '@ezdesign/ui/breadcrumbs.html.twig' with { items: [
+            { value: 'breadcrumb.admin'|trans(domain='messages')|desc('Admin') },
+            { value: 'url_management.breadcrumb.list'|trans|desc('URL Management') },
+        ]} %}
+    </div>
 {% endblock %}
 
 {% block header %}
-    {% include '@ezdesign/ui/page_title.html.twig' with {
-        title: 'url_management.view.list.title'|trans|desc('URL Management'),
-    } %}
+    <div class="container">
+        {% include '@ezdesign/ui/page_title.html.twig' with {
+            title: 'url_management.view.list.title'|trans|desc('URL Management'),
+        } %}
+    </div>
 {% endblock %}
 
 {% block content %}
-    <section class="container ez-container">
-        {{ ibexa_render_component_group('link-manager-block') }}
-    </section>
+    {{ ez_render_component_group('link-manager-block') }}
 {% endblock %}
 
 {% block javascripts %}