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

IBX-9056: Redesigned content preview #1381

Merged
merged 6 commits into from
Nov 21, 2024
Merged

IBX-9056: Redesigned content preview #1381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
64e9823
IBX-9056: Redesigned content preview
bozatko Oct 28, 2024
ec6727a
style fixes
bozatko Oct 29, 2024
d61dcfd
style fixes cd.
bozatko Oct 30, 2024
ea0edbc
Changes after QA
bozatko Nov 7, 2024
ba14ca6
style changes
bozatko Nov 8, 2024
2b37de5
Changed color on hover
bozatko Nov 20, 2024
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
49 changes: 49 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,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) {
bozatko marked this conversation as resolved.
Show resolved Hide resolved
&:focus {
box-shadow: 0 0 0 calculateRem(4px) rgba($ibexa-color-white, 0.2);
}
}

&:focus {
bozatko marked this conversation as resolved.
Show resolved Hide resolved
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
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
5 changes: 5 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,11 @@ img {
.ibexa-main-container__content-column {
@include drag-module-backdrop-background;
}

.ibexa-main-container {
bozatko marked this conversation as resolved.
Show resolved Hide resolved
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
Open in desktop
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;
bozatko marked this conversation as resolved.
Show resolved Hide resolved

&__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
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
.ibexa-preview {
width: 100%;
bozatko marked this conversation as resolved.
Show resolved Hide resolved

&__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
Open in desktop
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
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 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
Loading