From 937b7a8f20ac11d8e8b14054984a35a5272a9d4a Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Mon, 28 Oct 2024 15:46:02 +0100 Subject: [PATCH] IBX-9056: Redesigned content preview --- .../Resources/public/scss/_buttons.scss | 47 ++++++++++++++ .../Resources/public/scss/_dropdown.scss | 2 +- .../Resources/public/scss/_general.scss | 4 ++ .../public/scss/_preview-header.scss | 13 ++-- .../Resources/public/scss/_preview.scss | 7 +- .../translations/ibexa_content.en.xliff | 4 +- .../admin/content/content_preview.html.twig | 65 ++++++++++--------- 7 files changed, 99 insertions(+), 43 deletions(-) diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss index 8336eb397e..7e6ef697e9 100644 --- a/src/bundle/Resources/public/scss/_buttons.scss +++ b/src/bundle/Resources/public/scss/_buttons.scss @@ -378,6 +378,53 @@ } } + &--dark-selector.ibexa-btn { + color: $ibexa-color-white; + fill: $ibexa-color-white; + padding: calculateRem(11px) calculateRem(12px); + pointer-events: auto; + + &.ibexa-btn--selected { + background-color: $ibexa-color-dark-500; + border-color: transparent; + } + + &.ibexa-btn--error { + background-color: $ibexa-color-danger-100; + border-color: $ibexa-color-danger; + fill: $ibexa-color-danger; + } + + &:hover { + .ibexa-icon { + fill: $ibexa-color-light-600; + } + } + &:not(.ibexa-btn--selected) { + &:focus { + box-shadow: 0 0 0 calculateRem(4px) rgba($ibexa-color-white, 0.2); + } + } + &:focus { + box-shadow: 0px 0px 0px 4px $ibexa-color-dark-500; + } + + &.disabled, + &[disabled], + &:disabled { + color: $ibexa-color-dark-300; + fill: $ibexa-color-dark-300; + border-color: transparent; + box-shadow: none; + + &:hover { + .ibexa-icon { + fill: $ibexa-color-dark-300; + } + } + } + } + &--secondary-light.ibexa-btn { color: $ibexa-color-white; fill: $ibexa-color-white; diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss index 685d65d276..b375051e52 100644 --- a/src/bundle/Resources/public/scss/_dropdown.scss +++ b/src/bundle/Resources/public/scss/_dropdown.scss @@ -140,7 +140,7 @@ } &--single:not(&--disabled) &__selected-item:not(&__selected-placeholder) { - color: $ibexa-color-dark; + color: var(--ibexa-text-color, #{$ibexa-color-dark}); } &__selected-overflow-number { diff --git a/src/bundle/Resources/public/scss/_general.scss b/src/bundle/Resources/public/scss/_general.scss index ff316d1fc4..38c93fdc91 100644 --- a/src/bundle/Resources/public/scss/_general.scss +++ b/src/bundle/Resources/public/scss/_general.scss @@ -120,6 +120,10 @@ img { .ibexa-main-container__content-column { @include drag-module-backdrop-background; } + .ibexa-main-container { + height: 100vh; + background-color: $ibexa-color-dark-500; + } } [disabled] { diff --git a/src/bundle/Resources/public/scss/_preview-header.scss b/src/bundle/Resources/public/scss/_preview-header.scss index a1951f705a..600b32366c 100644 --- a/src/bundle/Resources/public/scss/_preview-header.scss +++ b/src/bundle/Resources/public/scss/_preview-header.scss @@ -1,14 +1,14 @@ .ibexa-preview-header { display: grid; - grid-template-areas: 'back siteaccess actions'; + grid-template-areas: 'siteaccess actions back'; grid-template-columns: auto 1fr 1fr; - border-bottom: calculateRem(1px) solid $ibexa-color-light; - + border-bottom: calculateRem(1px) solid $ibexa-color-dark-400; + background-color: $ibexa-color-dark; &__item { &--back { grid-area: back; padding: calculateRem(10px); - border-right: calculateRem(1px) solid $ibexa-color-light; + justify-items: flex-end; } &--siteaccess { @@ -18,6 +18,11 @@ align-items: center; margin-left: calculateRem(16px); + .ibexa-dropdown { + --ibexa-dropdown-primary-color: white; + --ibexa-text-color: white; + } + .ibexa-dropdown__selection-info { margin-bottom: 0; } diff --git a/src/bundle/Resources/public/scss/_preview.scss b/src/bundle/Resources/public/scss/_preview.scss index e100d986f9..96ce249c35 100644 --- a/src/bundle/Resources/public/scss/_preview.scss +++ b/src/bundle/Resources/public/scss/_preview.scss @@ -1,8 +1,9 @@ .ibexa-preview { + width: 100%; &__iframe { iframe { width: 100%; - height: calc(100vh - 45px); + height: calc(100vh - 72px); display: block; margin: 0 auto; transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; @@ -19,16 +20,14 @@ iframe { width: calculateRem(769px); - height: calculateRem(1157px); } } &--mobile { - height: calculateRem(900px); + height: calculateRem(920px); iframe { width: calculateRem(375px); - height: calculateRem(792px); } } } diff --git a/src/bundle/Resources/translations/ibexa_content.en.xliff b/src/bundle/Resources/translations/ibexa_content.en.xliff index f97a02233a..488ba28134 100644 --- a/src/bundle/Resources/translations/ibexa_content.en.xliff +++ b/src/bundle/Resources/translations/ibexa_content.en.xliff @@ -92,8 +92,8 @@ key: embedded_items.action.go_to_label - Back - Back + Close + Close key: preview_header.back diff --git a/src/bundle/Resources/views/themes/admin/content/content_preview.html.twig b/src/bundle/Resources/views/themes/admin/content/content_preview.html.twig index eddbde9a58..58f2531deb 100644 --- a/src/bundle/Resources/views/themes/admin/content/content_preview.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/content_preview.html.twig @@ -4,6 +4,7 @@ {% set is_published = content.contentInfo.published and content.contentInfo.mainLocationId is not null %} {% set preselected_site_access = preselected_site_access|default(siteaccesses|first) %} +{% set is_back_to_top_disabled = true %} {% block body_class %}ibexa-content-preview{% endblock %} @@ -13,6 +14,26 @@ {% block header_row %}
+
+ {{ form(site_access_form) }} +
+
+ + + +
{% if referrer == 'content_draft_edit' %} {% set back_url = url('ibexa.content.draft.edit', { @@ -29,47 +50,27 @@ {% endif %} - - - - {{ 'preview_header.back'|trans({}, 'ibexa_content')|desc('Back') }} + {{ 'preview_header.back'|trans({}, 'ibexa_content')|desc('Close') }}
-
- {{ form(site_access_form) }} -
-
- - - -
{% endblock %} -{% block content %} -
-
- +{% block content_column %} + {% block content_header %}{% endblock %} + {% block content %} +
+
+ +
-
+ {% endblock %} {% endblock %} {% block javascripts %}