From 71cf9c0dc0cb0ffc668bf705b9d958e3eeca1cff Mon Sep 17 00:00:00 2001 From: Jakub Brzegowski Date: Fri, 28 Jan 2022 16:49:37 +0100 Subject: [PATCH 1/2] IBX-2004: Add tabs error state; fix tabs in Page Builder --- src/bundle/Resources/public/scss/_tabs.scss | 25 ++++++++++++++++ .../Resources/public/scss/_warning-icon.scss | 29 ------------------- src/bundle/Resources/public/scss/ibexa.scss | 1 - .../admin/ui/component/tab/tabs.html.twig | 4 +-- .../ui/component/tab/tabs_header.html.twig | 1 + .../ui/component/tab/tabs_link.html.twig | 9 +++++- .../admin/ui/component/tab/tabs_tab.html.twig | 10 +++++-- .../tab/tabs_tab_warning_icon.html.twig | 5 ++++ .../admin/ui/component/warning_icon.html.twig | 5 ---- 9 files changed, 48 insertions(+), 41 deletions(-) delete mode 100644 src/bundle/Resources/public/scss/_warning-icon.scss create mode 100644 src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab_warning_icon.html.twig delete mode 100644 src/bundle/Resources/views/themes/admin/ui/component/warning_icon.html.twig diff --git a/src/bundle/Resources/public/scss/_tabs.scss b/src/bundle/Resources/public/scss/_tabs.scss index f6964b8d0e..ee436f583b 100644 --- a/src/bundle/Resources/public/scss/_tabs.scss +++ b/src/bundle/Resources/public/scss/_tabs.scss @@ -92,6 +92,25 @@ } } + &__tab-warning-icon { + display: none; + position: absolute; + right: calculateRem(20px); + top: 50%; + transform: translateY(-50%); + width: calculateRem(16px); + height: calculateRem(16px); + border-radius: 50%; + align-items: center; + justify-content: center; + background: $ibexa-color-danger; + z-index: 10; + + .ibexa-icon { + fill: $ibexa-color-white; + } + } + &__tab { height: calculateRem(48px); display: flex; @@ -104,6 +123,12 @@ transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; margin-left: calculateRem(-3px); + &--error { + .ibexa-tabs__tab-warning-icon { + display: flex; + } + } + &:first-of-type { margin-left: 0; } diff --git a/src/bundle/Resources/public/scss/_warning-icon.scss b/src/bundle/Resources/public/scss/_warning-icon.scss deleted file mode 100644 index 10edba0e84..0000000000 --- a/src/bundle/Resources/public/scss/_warning-icon.scss +++ /dev/null @@ -1,29 +0,0 @@ -.ibexa-tabs { - &__tab { - .ibexa-warning-icon { - position: absolute; - top: 0; - right: 0; - left: auto; - background: $ibexa-color-danger; - border-radius: 50%; - width: 1.25rem; - height: 1.25rem; - align-items: center; - justify-content: center; - display: none; - - .ibexa-icon.ibexa-icon--warning { - height: calculateRem(12px); - width: calculateRem(12px); - margin: calculateRem(-10px) calculateRem(4px) 0; - } - } - - &--invalid { - .ibexa-warning-icon { - display: block; - } - } - } -} diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss index b70de75b3d..6cd2ff7348 100644 --- a/src/bundle/Resources/public/scss/ibexa.scss +++ b/src/bundle/Resources/public/scss/ibexa.scss @@ -83,7 +83,6 @@ @import 'admin.section-view'; @import 'content-tree'; @import 'flatpickr'; -@import 'warning-icon'; @import 'trash-search-form'; @import 'inputs'; @import 'links'; diff --git a/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs.html.twig index a21c4e1c76..499ee74dc9 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs.html.twig @@ -6,8 +6,8 @@ {% endif %} {% include '@ibexadesign/ui/component/tab/tabs_header.html.twig' with { - tabs: tabs, - active_tab: active_tab, + tabs, + active_tab, hide_toggler: hide_toggler|default(false), include_tab_more: include_tab_more|default(false), } %} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_header.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_header.html.twig index 9b2785cfe0..d81a3c24e1 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_header.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_header.html.twig @@ -8,6 +8,7 @@ id: tab.id, label: tab.label, active: tab == active_tab, + has_error: tab.has_error|default(false), } %} {% endfor %} {% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_link.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_link.html.twig index ed826efe66..5b9c96d73f 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_link.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_link.html.twig @@ -1,3 +1,10 @@ - + {{ label }} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab.html.twig index 63630bdf46..97e2553635 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab.html.twig @@ -1,11 +1,15 @@ -{% set active = active|default(false) %} - -
  • +
  • {% block tab_link %} {% include '@ibexadesign/ui/component/tab/tabs_link.html.twig' with { id: tab.id, label: tab.label, } %} + {% include '@ibexadesign/ui/component/tab/tabs_tab_warning_icon.html.twig' %} {% endblock %} {% include '@ibexadesign/ui/component/tab/tab_corner.html.twig' %}
    • diff --git a/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab_warning_icon.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab_warning_icon.html.twig new file mode 100644 index 0000000000..670fec0a4c --- /dev/null +++ b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab_warning_icon.html.twig @@ -0,0 +1,5 @@ + + + + + diff --git a/src/bundle/Resources/views/themes/admin/ui/component/warning_icon.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/warning_icon.html.twig deleted file mode 100644 index 808be5c923..0000000000 --- a/src/bundle/Resources/views/themes/admin/ui/component/warning_icon.html.twig +++ /dev/null @@ -1,5 +0,0 @@ - - - - - From 14bd8d9433876bd6e907fe76d08b6687428b296d Mon Sep 17 00:00:00 2001 From: Jakub Brzegowski Date: Mon, 31 Jan 2022 14:42:13 +0100 Subject: [PATCH 2/2] use ! character instead of SVG --- src/bundle/Resources/public/scss/_tabs.scss | 5 +---- .../admin/ui/component/tab/tabs_tab_warning_icon.html.twig | 4 +--- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/bundle/Resources/public/scss/_tabs.scss b/src/bundle/Resources/public/scss/_tabs.scss index ee436f583b..d3411f33f0 100644 --- a/src/bundle/Resources/public/scss/_tabs.scss +++ b/src/bundle/Resources/public/scss/_tabs.scss @@ -104,11 +104,8 @@ align-items: center; justify-content: center; background: $ibexa-color-danger; + color: $ibexa-color-white; z-index: 10; - - .ibexa-icon { - fill: $ibexa-color-white; - } } &__tab { diff --git a/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab_warning_icon.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab_warning_icon.html.twig index 670fec0a4c..b2cda6611e 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab_warning_icon.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab_warning_icon.html.twig @@ -1,5 +1,3 @@ - - - + !