diff --git a/src/bundle/Resources/public/scss/_field-group.scss b/src/bundle/Resources/public/scss/_field-group.scss index aee3a5a65f..6408073cc3 100644 --- a/src/bundle/Resources/public/scss/_field-group.scss +++ b/src/bundle/Resources/public/scss/_field-group.scss @@ -22,45 +22,72 @@ } .ibexa-fieldgroup { + &__header { + display: flex; + justify-content: space-between; + align-items: center; + font-weight: bold; + } + &__name { color: $ibexa-color-dark; border-bottom: calculateRem(1px) solid $ibexa-color-light; padding: calculateRem(24px) calculateRem(8px); font-weight: normal; - font-size: calculateRem(16px); + font-size: $ibexa-text-font-size; + } + + &__toggler-label-show { + display: none; + } + + &__toggler-label-hide { + display: inline; } &__toggler { position: relative; display: block; padding: calculateRem(24px) calculateRem(16px); - font-size: calculateRem(16px); + font-size: $ibexa-text-font-size-medium; + font-weight: normal; color: $ibexa-color-black; text-decoration: none; - font-weight: bold; + &:focus, &:hover { color: $ibexa-color-primary; text-decoration: none; + + &::after { + border-top: calculateRem(5px) solid $ibexa-color-primary; + } } - &:before { - content: ''; + &::after { position: absolute; top: calculateRem(33px); - left: 0; - display: inline-block; - width: calculateRem(7px); - height: calculateRem(7px); - border-right: calculateRem(2px) solid $ibexa-color-black; - border-bottom: calculateRem(2px) solid $ibexa-color-black; - transition: all 0.3s $ibexa-admin-transition; - transform: rotate(-135deg); + right: 0; + content: ''; + border-left: calculateRem(5px) solid transparent; + border-right: calculateRem(5px) solid transparent; + border-top: calculateRem(5px) solid $ibexa-color-black; + transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; } &.collapsed { - &:before { - transform: rotate(-45deg); + .ibexa-fieldgroup { + &__toggler-label-show { + display: inline; + } + + &__toggler-label-hide { + display: none; + } + } + + &:after { + transform: rotate(180deg); } } } diff --git a/src/bundle/Resources/translations/messages.en.xliff b/src/bundle/Resources/translations/messages.en.xliff index 9c4f0b7037..f85a5c0613 100644 --- a/src/bundle/Resources/translations/messages.en.xliff +++ b/src/bundle/Resources/translations/messages.en.xliff @@ -433,6 +433,16 @@ log in to eZ Platform.]]> key: ezplatform.reset_user_password.success + + Hide + Hide + key: fieldview.toggler.hide + + + Show + Show + key: fieldview.toggler.show + diff --git a/src/bundle/Resources/views/themes/admin/content/content_view_fields.html.twig b/src/bundle/Resources/views/themes/admin/content/content_view_fields.html.twig index 6caaa3431b..a5735be16f 100644 --- a/src/bundle/Resources/views/themes/admin/content/content_view_fields.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/content_view_fields.html.twig @@ -13,9 +13,13 @@ {% set collapse_class_name = 'ibexa-content-preview-collapse--' ~ group_name %} - - {{ group.name|capitalize }} - + + {{ group.name|capitalize }} + + {{ 'fieldview.toggler.show'|trans|desc('Show') }} + {{ 'fieldview.toggler.hide'|trans|desc('Hide') }} + + {% for field_definition in group.fieldDefinitions %} {% block field %}