IBX-1814: Empty product catalog hints (#161)

ibexa · Jan 5, 2022 · a955f96 · a955f96
1 parent e45f297
commit a955f96
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/src/bundle/Resources/public/scss/_custom.scss b/src/bundle/Resources/public/scss/_custom.scss
@@ -422,6 +422,7 @@ $accordion-button-active-bg: $ibexa-color-white;
 $accordion-button-active-color: $ibexa-color-dark;
 
 // Ibexa fonts
+$ibexa-text-font-size-extra-large: calculateRem(22px);
 $ibexa-text-font-size-large: calculateRem(18px);
 $ibexa-text-font-size: calculateRem(16px);
 $ibexa-text-font-size-medium: calculateRem(14px);

diff --git a/src/bundle/Resources/public/scss/_tables.scss b/src/bundle/Resources/public/scss/_tables.scss
@@ -47,22 +47,29 @@
     }
 
     &__empty-table-cell {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         background: $ibexa-color-white;
-        text-align: center;
     }
 
     &__empty-table-text {
         @include ibexa-font-sans-serif();
 
-        font-size: $ibexa-text-font-size;
-        line-height: calculateRem(24px);
+        max-width: calculateRem(440px);
+        margin-left: calculateRem(56px);
         color: $ibexa-color-dark-400;
+    }
 
-        strong {
-            font-size: $ibexa-text-font-size-large;
-            line-height: calculateRem(33px);
-            font-weight: 600;
-        }
+    &__empty-table-info-text {
+        margin-bottom: calculateRem(16px);
+        font-weight: $headings-font-weight;
+        font-family: $headings-font-family;
+        font-size: $ibexa-text-font-size-extra-large;
+    }
+
+    &__empty-table-action-text {
+        margin-bottom: calculateRem(16px);
     }
 
     &__header-cell {

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/table/empty_table_body_row.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/table/empty_table_body_row.html.twig
@@ -7,10 +7,15 @@
         />
         <div class="ibexa-table__empty-table-text">
             {% if empty_table_info_text is defined %}
-                <strong>{{ empty_table_info_text }}</strong>
+                <div class="ibexa-table__empty-table-info-text">{{ empty_table_info_text }}</div>
             {% endif %}
+
             {% if empty_table_action_text is defined %}
-                <br>{{ empty_table_action_text }}
+                <div class="ibexa-table__empty-table-action-text">{{ empty_table_action_text }}</div>
+            {% endif %}
+
+            {% if empty_table_extra_actions is defined %}
+                {{ empty_table_extra_actions|raw }}
             {% endif %}
         </div>
     </td>