Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

IBX-9056: Redesigned content preview #1381

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+99 −43
Open

IBX-9056: Redesigned content preview #1381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions src/bundle/Resources/public/scss/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/bundle/Resources/public/scss/_dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 4 additions & 0 deletions src/bundle/Resources/public/scss/_general.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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] {
Expand Down
13 changes: 9 additions & 4 deletions src/bundle/Resources/public/scss/_preview-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
}
Expand Down
7 changes: 3 additions & 4 deletions src/bundle/Resources/public/scss/_preview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/bundle/Resources/translations/ibexa_content.en.xliff
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,8 @@
<note>key: embedded_items.action.go_to_label</note>
</trans-unit>
<trans-unit id="f6ae7078e77f584ad00c8003405ca11dc57c4d56" resname="preview_header.back">
<source>Back</source>
<target state="new">Back</target>
<source>Close</source>
<target state="new">Close</target>
<note>key: preview_header.back</note>
</trans-unit>
<trans-unit id="2720e3018fc8b1158cb728b1d5dc377ef7293b57" resname="trash.modal.message">
Expand Down
65 changes: 33 additions & 32 deletions src/bundle/Resources/views/themes/admin/content/content_preview.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand All @@ -13,6 +14,26 @@

{% block header_row %}
<div class="ibexa-preview-header">
<div class="ibexa-preview-header__item ibexa-preview-header__item--siteaccess">
{{ form(site_access_form) }}
</div>
<div class="ibexa-preview-header__item ibexa-preview-header__item--actions">
<button data-preview-mode="desktop" class="btn ibexa-btn ibexa-btn--no-text ibexa-btn--dark-selector ibexa-btn--selected ibexa-preview-header__action">
<svg class="ibexa-icon ibexa-icon--medium ibexa-icon--desktop">
<use xlink:href="{{ ibexa_icon_path('view-desktop') }}"></use>
</svg>
</button>
<button data-preview-mode="tablet" class="btn ibexa-btn ibexa-btn--no-text ibexa-btn--dark-selector ibexa-preview-header__action">
<svg class="ibexa-icon ibexa-icon--medium ibexa-icon--tablet">
<use xlink:href="{{ ibexa_icon_path('view-tablet') }}"></use>
</svg>
</button>
<button data-preview-mode="mobile" class="btn ibexa-btn ibexa-btn--no-text ibexa-btn--dark-selector ibexa-preview-header__action">
<svg class="ibexa-icon ibexa-icon--light ibexa-icon--medium ibexa-icon--mobile">
<use xlink:href="{{ ibexa_icon_path('view-mobile') }}"></use>
</svg>
</button>
</div>
<div class="ibexa-preview-header__item ibexa-preview-header__item--back">
{% if referrer == 'content_draft_edit' %}
{% set back_url = url('ibexa.content.draft.edit', {
Expand All @@ -29,47 +50,27 @@
{% endif %}

<a
class="ibexa-preview-header__link btn ibexa-btn ibexa-btn--ghost"
class="ibexa-preview-header__link btn ibexa-btn ibexa-btn--secondary-light"
href="{{ back_url }}"
>
<svg class="ibexa-icon ibexa-icon--small-medium">
<use xlink:href="{{ ibexa_icon_path('back') }}"></use>
</svg>
<span class="ibexa-btn__label">{{ 'preview_header.back'|trans({}, 'ibexa_content')|desc('Back') }}</span>
<span class="ibexa-btn__label">{{ 'preview_header.back'|trans({}, 'ibexa_content')|desc('Close') }}</span>
</a>
</div>
<div class="ibexa-preview-header__item ibexa-preview-header__item--siteaccess">
{{ form(site_access_form) }}
</div>
<div class="ibexa-preview-header__item ibexa-preview-header__item--actions">
<button data-preview-mode="desktop" class="btn ibexa-btn ibexa-btn--no-text ibexa-btn--selector ibexa-btn--selected ibexa-preview-header__action">
<svg class="ibexa-icon ibexa-icon--medium ibexa-icon--desktop">
<use xlink:href="{{ ibexa_icon_path('view-desktop') }}"></use>
</svg>
</button>
<button data-preview-mode="tablet" class="btn ibexa-btn ibexa-btn--no-text ibexa-btn--selector ibexa-preview-header__action">
<svg class="ibexa-icon ibexa-icon--medium ibexa-icon--tablet">
<use xlink:href="{{ ibexa_icon_path('view-tablet') }}"></use>
</svg>
</button>
<button data-preview-mode="mobile" class="btn ibexa-btn ibexa-btn--no-text ibexa-btn--selector ibexa-preview-header__action">
<svg class="ibexa-icon ibexa-icon--medium ibexa-icon--mobile">
<use xlink:href="{{ ibexa_icon_path('view-mobile') }}"></use>
</svg>
</button>
</div>

</div>
{% endblock %}

{% block content %}
<div class="ibexa-preview">
<div class="ibexa-preview__iframe ibexa-preview__iframe--desktop">
<iframe src="{{ url('ibexa.version.preview', {
'contentId': content.id, 'versionNo': version_no, 'language': language_code, 'siteAccessName': preselected_site_access
}) }}" frameborder="0"></iframe>
{% block content_column %}
{% block content_header %}{% endblock %}
{% block content %}
<div class="ibexa-preview">
<div class="ibexa-preview__iframe ibexa-preview__iframe--desktop">
<iframe src="{{ url('ibexa.version.preview', {
'contentId': content.id, 'versionNo': version_no, 'language': language_code, 'siteAccessName': preselected_site_access
}) }}" frameborder="0"></iframe>
</div>
</div>
</div>
{% endblock %}
{% endblock %}

{% block javascripts %}
Expand Down
Loading