Skip to content

Commit

Permalink
IBX-9056: Redesigned content preview (#1381)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bozatko
bozatko authored Nov 21, 2024
1 parent eafdc92 commit 39cad4f
Show file tree
Hide file tree
Showing 7 changed files with 112 additions and 47 deletions.
49 changes: 49 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,55 @@
}
}

&--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: 0 0 0 calculateRem(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
5 changes: 5 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,11 @@ 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
25 changes: 18 additions & 7 deletions src/bundle/Resources/public/scss/_preview-header.scss
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,42 @@
.ibexa-preview-header {
display: grid;
grid-template-areas: 'back siteaccess actions';
grid-template-columns: auto 1fr 1fr;
border-bottom: calculateRem(1px) solid $ibexa-color-light;
grid-template-areas: 'siteaccess actions back';
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);
border-right: calculateRem(1px) solid $ibexa-color-light;
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};
border-right: calculateRem(1px) solid $ibexa-color-dark-400;

&:hover {
--ibexa-dropdown-primary-color: #{$ibexa-color-light-600};
}
}

.ibexa-dropdown__selection-info {
margin-bottom: 0;
border: none;
}
}

&--actions {
grid-area: actions;
padding: calculateRem(10px);
display: flex;
align-items: center;
}
Expand Down
9 changes: 4 additions & 5 deletions src/bundle/Resources/public/scss/_preview.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
.ibexa-preview {
width: 100%;

&__iframe {
iframe {
width: 100%;
height: calc(100vh - 45px);
height: calc(100vh - calculateRem(72px));
display: block;
margin: 0 auto;
transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
background: $ibexa-color-white;
border-radius: $ibexa-border-radius;
}

&--desktop {
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 @@ -97,8 +97,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 ibexa-preview-header__item--separation-line">
{{ 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 39cad4f

Please sign in to comment.