Skip to content

Commit

Permalink
IBX-9056: Redesigned content preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@bozatko
bozatko committed Oct 28, 2024
1 parent c99e076 commit 937b7a8
Show file tree
Hide file tree
Showing 7 changed files with 99 additions and 43 deletions.
47 changes: 47 additions & 0 deletions src/bundle/Resources/public/scss/_buttons.scss
View file
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
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
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
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
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
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
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

0 comments on commit 937b7a8

Please sign in to comment.