From 5cf6727c1757e454f184e04bbd4c592e97e0d50b Mon Sep 17 00:00:00 2001 From: Robert Swoboda <53216935+Gengar-i@users.noreply.github.com> Date: Wed, 30 Nov 2022 03:56:07 -0800 Subject: [PATCH] IBX-4324: fixed overflow in selected items sidebar (#648) --- .../Resources/public/img/ibexa-icons.svg | 20 +++++++++++++++++++ .../public/img/icons/caret-double-back.svg | 10 ++++++++++ .../public/img/icons/caret-double-next.svg | 10 ++++++++++ .../_content.edit.button.scss | 3 +++ .../_selected.locations.item.scss | 3 ++- .../_selected.locations.scss | 13 +++++------- .../universal_discovery_widget.en.xliff | 10 +++++----- .../selected.locations.item.js | 2 +- .../selected-locations/selected.locations.js | 11 ++++++---- 9 files changed, 63 insertions(+), 19 deletions(-) create mode 100644 src/bundle/Resources/public/img/icons/caret-double-back.svg create mode 100644 src/bundle/Resources/public/img/icons/caret-double-next.svg diff --git a/src/bundle/Resources/public/img/ibexa-icons.svg b/src/bundle/Resources/public/img/ibexa-icons.svg index cd56d45946..ea47b17c4c 100644 --- a/src/bundle/Resources/public/img/ibexa-icons.svg +++ b/src/bundle/Resources/public/img/ibexa-icons.svg @@ -142,6 +142,26 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/bundle/Resources/public/img/icons/caret-double-back.svg b/src/bundle/Resources/public/img/icons/caret-double-back.svg new file mode 100644 index 0000000000..7e3a53b1f0 --- /dev/null +++ b/src/bundle/Resources/public/img/icons/caret-double-back.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/bundle/Resources/public/img/icons/caret-double-next.svg b/src/bundle/Resources/public/img/icons/caret-double-next.svg new file mode 100644 index 0000000000..41d13ea6d0 --- /dev/null +++ b/src/bundle/Resources/public/img/icons/caret-double-next.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content.edit.button.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content.edit.button.scss index 667857db1d..8c84ce7dc4 100644 --- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content.edit.button.scss +++ b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content.edit.button.scss @@ -7,4 +7,7 @@ justify-content: center; align-items: center; } + .ibexa-icon { + margin-right: 0; + } } diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_selected.locations.item.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_selected.locations.item.scss index def0210137..e117b7fd2f 100644 --- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_selected.locations.item.scss +++ b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_selected.locations.item.scss @@ -3,7 +3,7 @@ align-items: center; padding: calculateRem(5px); margin-bottom: calculateRem(8px); - border-top: calculateRem(1px) solid $ibexa-color-light; + border: calculateRem(1px) solid $ibexa-color-light; border-radius: $ibexa-border-radius; box-shadow: calculateRem(4px) calculateRem(2px) calculateRem(17px) 0 rgba($ibexa-color-black, 0.05); @@ -38,6 +38,7 @@ &__actions-wrapper { display: flex; justify-content: flex-end; + align-items: center; } &__remove-button { diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_selected.locations.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_selected.locations.scss index 22808a863d..f4f33d1e42 100644 --- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_selected.locations.scss +++ b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_selected.locations.scss @@ -2,7 +2,7 @@ background-color: $ibexa-color-white; position: fixed; top: calculateRem(95px); - right: 0; + right: calculateRem(16px); min-height: calculateRem(60px); min-width: calculateRem(390px); border: calculateRem(1px) solid $ibexa-color-light; @@ -16,24 +16,20 @@ display: flex; justify-content: space-between; align-items: center; - padding: calculateRem(12px) calculateRem(12px) calculateRem(12px) calculateRem(32px); + padding: calculateRem(7px) calculateRem(12px) calculateRem(7px) calculateRem(22px); } &__selection-counter { + color: $ibexa-color-dark; font-size: calculateRem(22px); font-weight: 600; padding-right: calculateRem(16px); } - &__toggle-button { - .ibexa-icon:first-child { - margin-right: calculateRem(-6px); - } - } - &--expanded { bottom: calculateRem(100px); min-width: calculateRem(491px); + overflow: hidden; .c-selected-locations { &__items-wrapper { @@ -47,6 +43,7 @@ overflow: auto; padding: 0 calculateRem(38px) calculateRem(16px) calculateRem(22px); border-top: calculateRem(1px) solid $ibexa-color-light; + height: calc(100% - calculateRem(70px)); } &__actions { diff --git a/src/bundle/Resources/translations/universal_discovery_widget.en.xliff b/src/bundle/Resources/translations/universal_discovery_widget.en.xliff index a24a38a612..717949786f 100644 --- a/src/bundle/Resources/translations/universal_discovery_widget.en.xliff +++ b/src/bundle/Resources/translations/universal_discovery_widget.en.xliff @@ -296,16 +296,16 @@ Collapse sidebar key: selected_locations.collapse.sidebar + + Deselect all + Deselect all + key: selected_locations.deselect_all + Expand sidebar Expand sidebar key: selected_locations.expand.sidebar - - Remove all - Remove all - key: selected_locations.remove_all - %count% selected item(s) %count% selected item(s) diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.item.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.item.js index 48dfd6fd2c..75402559cd 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.item.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.item.js @@ -39,7 +39,7 @@ const SelectedLocationsItem = ({ location, permissions }) => { return (
- +
{location.ContentInfo.Content.TranslatedName} diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.js index 3666e7d838..90e1952170 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.js @@ -42,7 +42,7 @@ const SelectedLocations = () => { return
{selectedLabel}
; }; const renderToggleButton = () => { - const iconName = isExpanded ? 'caret-next' : 'caret-back'; + const iconName = isExpanded ? 'caret-double-next' : 'caret-double-back'; return ( ); }; const renderActionButtons = () => { - const removeAllLabel = Translator.trans(/*@Desc("Remove all")*/ 'selected_locations.remove_all', {}, 'universal_discovery_widget'); + const removeAllLabel = Translator.trans( + /*@Desc("Deselect all")*/ 'selected_locations.deselect_all', + {}, + 'universal_discovery_widget', + ); return (