From 64e98239922cf9f3239d7652260aaa3dfeaf6d0e Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Mon, 28 Oct 2024 15:46:02 +0100 Subject: [PATCH 1/6] 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 555b99a8fd..185945817a 100644 --- a/src/bundle/Resources/translations/ibexa_content.en.xliff +++ b/src/bundle/Resources/translations/ibexa_content.en.xliff @@ -97,8 +97,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 %} From ec6727adaa2edc4ae336d452fb19a643af902693 Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Tue, 29 Oct 2024 13:54:18 +0100 Subject: [PATCH 2/6] style fixes --- src/bundle/Resources/public/scss/_buttons.scss | 4 +++- src/bundle/Resources/public/scss/_general.scss | 1 + src/bundle/Resources/public/scss/_preview-header.scss | 4 ++-- src/bundle/Resources/public/scss/_preview.scss | 3 ++- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss index 7e6ef697e9..d6d68802c8 100644 --- a/src/bundle/Resources/public/scss/_buttons.scss +++ b/src/bundle/Resources/public/scss/_buttons.scss @@ -400,13 +400,15 @@ 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; + box-shadow: 0 0 0 calculateRem(4px) $ibexa-color-dark-500; } &.disabled, diff --git a/src/bundle/Resources/public/scss/_general.scss b/src/bundle/Resources/public/scss/_general.scss index 38c93fdc91..19e5a1c61c 100644 --- a/src/bundle/Resources/public/scss/_general.scss +++ b/src/bundle/Resources/public/scss/_general.scss @@ -120,6 +120,7 @@ img { .ibexa-main-container__content-column { @include drag-module-backdrop-background; } + .ibexa-main-container { height: 100vh; background-color: $ibexa-color-dark-500; diff --git a/src/bundle/Resources/public/scss/_preview-header.scss b/src/bundle/Resources/public/scss/_preview-header.scss index 600b32366c..f15dfcb971 100644 --- a/src/bundle/Resources/public/scss/_preview-header.scss +++ b/src/bundle/Resources/public/scss/_preview-header.scss @@ -19,8 +19,8 @@ margin-left: calculateRem(16px); .ibexa-dropdown { - --ibexa-dropdown-primary-color: white; - --ibexa-text-color: white; + --ibexa-dropdown-primary-color: $ibexa-color-white; + --ibexa-text-color: $ibexa-color-white; } .ibexa-dropdown__selection-info { diff --git a/src/bundle/Resources/public/scss/_preview.scss b/src/bundle/Resources/public/scss/_preview.scss index 96ce249c35..da13f23985 100644 --- a/src/bundle/Resources/public/scss/_preview.scss +++ b/src/bundle/Resources/public/scss/_preview.scss @@ -1,9 +1,10 @@ .ibexa-preview { width: 100%; + &__iframe { iframe { width: 100%; - height: calc(100vh - 72px); + height: calc(100vh - calculateRem(72px)); display: block; margin: 0 auto; transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; From d61dcfdff5b8c92bcb3bbd67126dfe39224f20a2 Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Wed, 30 Oct 2024 09:00:32 +0100 Subject: [PATCH 3/6] style fixes cd. --- src/bundle/Resources/public/scss/_preview-header.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/bundle/Resources/public/scss/_preview-header.scss b/src/bundle/Resources/public/scss/_preview-header.scss index f15dfcb971..1b1aa8db7f 100644 --- a/src/bundle/Resources/public/scss/_preview-header.scss +++ b/src/bundle/Resources/public/scss/_preview-header.scss @@ -4,6 +4,7 @@ grid-template-columns: auto 1fr 1fr; border-bottom: calculateRem(1px) solid $ibexa-color-dark-400; background-color: $ibexa-color-dark; + &__item { &--back { grid-area: back; From ea0edbc4650a259bf392043e7f88a8c3b3b6f9e9 Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Thu, 7 Nov 2024 16:52:16 +0100 Subject: [PATCH 4/6] Changes after QA --- .../Resources/public/scss/_preview-header.scss | 16 ++++++++++------ src/bundle/Resources/public/scss/_preview.scss | 1 - .../admin/content/content_preview.html.twig | 6 ++++-- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/bundle/Resources/public/scss/_preview-header.scss b/src/bundle/Resources/public/scss/_preview-header.scss index 1b1aa8db7f..9e29841110 100644 --- a/src/bundle/Resources/public/scss/_preview-header.scss +++ b/src/bundle/Resources/public/scss/_preview-header.scss @@ -1,40 +1,44 @@ .ibexa-preview-header { display: grid; grid-template-areas: 'siteaccess actions back'; - grid-template-columns: auto 1fr 1fr; + grid-template-columns: auto 1fr auto; border-bottom: calculateRem(1px) solid $ibexa-color-dark-400; background-color: $ibexa-color-dark; &__item { + padding: calculateRem(10px); + &--back { grid-area: back; - padding: calculateRem(10px); justify-items: flex-end; } &--siteaccess { grid-area: siteaccess; - padding: calculateRem(10px); display: flex; align-items: center; margin-left: calculateRem(16px); .ibexa-dropdown { - --ibexa-dropdown-primary-color: $ibexa-color-white; - --ibexa-text-color: $ibexa-color-white; + --ibexa-dropdown-primary-color: #{$ibexa-color-white}; + --ibexa-text-color: #{$ibexa-color-white}; } .ibexa-dropdown__selection-info { margin-bottom: 0; + border: none; } } &--actions { grid-area: actions; - padding: calculateRem(10px); display: flex; align-items: center; } + + &--separation-line { + border-right: calculateRem(1px) solid $ibexa-color-dark-400; + } } &__link { diff --git a/src/bundle/Resources/public/scss/_preview.scss b/src/bundle/Resources/public/scss/_preview.scss index da13f23985..8e79658499 100644 --- a/src/bundle/Resources/public/scss/_preview.scss +++ b/src/bundle/Resources/public/scss/_preview.scss @@ -9,7 +9,6 @@ margin: 0 auto; transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; background: $ibexa-color-white; - border-radius: $ibexa-border-radius; } &--desktop { 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 58f2531deb..5894de2e2b 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 @@ -14,8 +14,10 @@ {% block header_row %}
-
- {{ form(site_access_form) }} +
+
+ {{ form(site_access_form) }} +