Skip to content

Commit

Permalink
feat(gallery): design update - FRONT-4387 (#3390)
Browse files Browse the repository at this point in the history
  • Loading branch information
@emeryro
emeryro authored Jun 13, 2024
1 parent 50bf507 commit 6cdcbb4
Show file tree
Hide file tree
Showing 15 changed files with 807 additions and 716 deletions.
1,160 changes: 632 additions & 528 deletions src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap
View file

Large diffs are not rendered by default.

10 changes: 7 additions & 3 deletions src/implementations/twig/components/gallery/gallery-item.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,13 +118,17 @@
data-ecl-gallery-description
>
{%- if _item.title is defined and _item.title is not empty -%}
<span class="ecl-gallery__title" data-ecl-gallery-title id="{{ _id }}-title">
<span class="ecl-gallery__title" id="{{ _id }}-title">
{{- _item.title -}}
</span>
{%- endif -%}
{{- _item.description -}}
{%- if _item.description is defined and _item.description is not empty -%}
<span class="ecl-gallery__caption">
{{- _item.description -}}
</span>
{%- endif -%}
{%- if _item.meta is defined and _item.meta is not empty -%}
<span class="ecl-gallery__meta" data-ecl-gallery-meta>
<span class="ecl-gallery__meta">
{{- _item.meta -}}
</span>
{%- endif -%}
Expand Down
173 changes: 87 additions & 86 deletions src/implementations/twig/components/gallery/gallery-overlay.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,88 +62,94 @@

<footer class="ecl-gallery__detail" data-ecl-gallery-overlay-footer>
<div class="ecl-container">
<div class="ecl-gallery__pager">
{% if _overlay.previous is defined and _overlay.previous is not empty %}
{% include '@ecl/button/button.html.twig' with _overlay.previous|merge({
extra_classes: 'ecl-gallery__slider-previous',
type: _button_type,
variant: 'tertiary',
icon_position: 'before',
hide_label: true,
icon: _overlay.previous.icon|merge({
size: 'm',
transform: 'rotate-270',
name: 'corner-arrow',
}),
extra_attributes: [
{ name: 'data-ecl-gallery-overlay-previous' },
],
}) only %}
{% endif %}
{% if _overlay.counter_separator is defined and _overlay.counter_separator is not empty %}
<div class="ecl-gallery__detail-counter">
<span data-ecl-gallery-overlay-counter-current>0</span>{{- ' ' -}}
{{- _overlay.counter_separator }}{{- ' ' -}}
<span data-ecl-gallery-overlay-counter-max>0</span>
<div class="ecl-gallery__detail-container">
<div class="ecl-gallery__pager">
{% if _overlay.counter_separator is defined and _overlay.counter_separator is not empty %}
<div class="ecl-gallery__detail-counter">
<span data-ecl-gallery-overlay-counter-current>0</span>{{- ' ' -}}
{{- _overlay.counter_separator }}{{- ' ' -}}
<span data-ecl-gallery-overlay-counter-max>0</span>
</div>
{% endif %}
{% if _overlay.previous is not empty or _overlay.next is not empty %}
<div class="ecl-gallery__controls">
{% if _overlay.previous is defined and _overlay.previous is not empty %}
{% include '@ecl/button/button.html.twig' with _overlay.previous|merge({
extra_classes: 'ecl-gallery__slider-previous',
type: _button_type,
variant: 'tertiary',
icon_position: 'before',
hide_label: true,
icon: _overlay.previous.icon|merge({
size: 'm',
transform: 'rotate-270',
name: 'corner-arrow',
}),
extra_attributes: [
{ name: 'data-ecl-gallery-overlay-previous' },
],
}) only %}
{% endif %}
{% if (_overlay.next is defined and _overlay.next is not empty) and
(_overlay.next.icon is defined and _overlay.next.icon is not empty) %}
{% include '@ecl/button/button.html.twig' with _overlay.next|merge({
extra_classes: 'ecl-gallery__slider-next',
type: _button_type,
variant: 'tertiary',
hide_label: true,
icon: _overlay.next.icon|merge({
size: 'm',
transform: 'rotate-90',
name: 'corner-arrow',
}),
extra_attributes: [
{ name: 'data-ecl-gallery-overlay-next' },
],
}) only %}
{% endif %}
</div>
{% endif %}
</div>
<div class="ecl-gallery__detail-actions">
{% if _overlay.full_screen_label is not empty %}
{% include '@ecl/link/link.html.twig' with {
link: {
icon_position: 'after',
type: 'standalone',
inverted: true,
label: _overlay.full_screen_label ?: _overlay.download.link.label|default(''),
},
icon: {
name: 'fullscreen',
size: 'fluid',
path: icon_path|default('')
},
extra_classes: 'ecl-gallery__download',
extra_attributes: [
{ name: 'target', value: '_blank' },
{ name: 'data-ecl-gallery-overlay-download' },
],
} only %}
{% endif %}
{% if (_overlay.share is defined and _overlay.share is not empty) and
(_overlay.share.link is defined and _overlay.share.link is not empty) %}
{% include '@ecl/link/link.html.twig' with _overlay.share|merge({
link: _overlay.share.link|merge({
icon_position: 'after',
type: 'standalone',
inverted: true,
}),
icon: _overlay.share.icon|merge({
name: 'share',
size: 'fluid',
}),
extra_classes: 'ecl-gallery__share',
extra_attributes: [
{ name: 'data-ecl-gallery-overlay-share' },
],
}) only %}
{% endif %}
</div>
{% endif %}
{% if (_overlay.next is defined and _overlay.next is not empty) and
(_overlay.next.icon is defined and _overlay.next.icon is not empty) %}
{% include '@ecl/button/button.html.twig' with _overlay.next|merge({
extra_classes: 'ecl-gallery__slider-next',
type: _button_type,
variant: 'tertiary',
hide_label: true,
icon: _overlay.next.icon|merge({
size: 'm',
transform: 'rotate-90',
name: 'corner-arrow',
}),
extra_attributes: [
{ name: 'data-ecl-gallery-overlay-next' },
],
}) only %}
{% endif %}
</div>
<div class="ecl-gallery__detail-actions">
{% if _overlay.full_screen_label is not empty %}
{% include '@ecl/link/link.html.twig' with {
link: {
icon_position: 'after',
type: 'standalone',
inverted: true,
label: _overlay.full_screen_label ?: _overlay.download.link.label|default(''),
},
icon: {
name: 'fullscreen',
size: 'fluid',
path: icon_path|default('')
},
extra_classes: 'ecl-gallery__download',
extra_attributes: [
{ name: 'target', value: '_blank' },
{ name: 'data-ecl-gallery-overlay-download' },
],
} only %}
{% endif %}
{% if (_overlay.share is defined and _overlay.share is not empty) and
(_overlay.share.link is defined and _overlay.share.link is not empty) %}
{% include '@ecl/link/link.html.twig' with _overlay.share|merge({
link: _overlay.share.link|merge({
icon_position: 'after',
type: 'standalone',
inverted: true,
}),
icon: _overlay.share.icon|merge({
name: 'share',
size: 'fluid',
}),
extra_classes: 'ecl-gallery__share',
extra_attributes: [
{ name: 'data-ecl-gallery-overlay-share' },
],
}) only %}
{% endif %}
</div>
{% if _item.description is defined and _item.description is not empty %}
<div
Expand All @@ -153,11 +159,6 @@
{{- _item.description -}}
</div>
{% endif %}
{% if _item.meta is defined and _item.meta is not empty %}
<div class="ecl-gallery__detail-meta" data-ecl-gallery-overlay-meta>
{{- _item.meta -}}
</div>
{% endif %}
</div>
</footer>
</dialog>
Expand Down
3 changes: 2 additions & 1 deletion src/implementations/twig/components/gallery/gallery.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@
<div class="ecl-gallery__footer">
{%- if _expandable -%}
<div class="ecl-gallery__info">
<div class="ecl-gallery__info-total">
<div class="ecl-gallery__info-total" id="{{ _id }}-info">
<strong data-ecl-gallery-count>0</strong> {{- _counter_label -}}
</div>
{% include '@ecl/button/button.html.twig' with {
Expand All @@ -127,6 +127,7 @@
{ name: 'data-ecl-gallery-all' },
{ name: 'data-ecl-gallery-collapsed-label', value: _view_all_label },
{ name: 'data-ecl-gallery-expanded-label', value: _view_all_expanded_label },
{ name: 'aria-describedby', value: _id ~ '-info' },
],
extra_classes: 'ecl-gallery__view-all',
} only %}
Expand Down
5 changes: 2 additions & 3 deletions src/implementations/vanilla/components/button/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,8 @@ $min-width: 44px; // According to COMM every interactive element should be at le
// Icon only
$size-icon-only: calc(
#{map.get($button, 'padding-vertical')} * 2 + #{map.get(
$theme,
'line-height',
'm'
$button,
'line-height-icon'
)} - #{map.get($button, 'border-width')} * 2
);

Expand Down
5 changes: 5 additions & 0 deletions src/implementations/vanilla/components/gallery/gallery-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,11 @@ $gallery: null !default;
display: none;
}

.ecl-gallery__list .ecl-gallery__caption,
.ecl-gallery__list .ecl-gallery__meta {
display: none;
}

.ecl-gallery__footer {
display: none;
}
Expand Down
13 changes: 0 additions & 13 deletions src/implementations/vanilla/components/gallery/gallery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { createFocusTrap } from 'focus-trap';
* @param {Object} options
* @param {String} options.galleryItemSelector Selector for gallery element
* @param {String} options.descriptionSelector Selector for gallery description element
* @param {String} options.metaSelector Selector for gallery meta info element
* @param {String} options.closeButtonSelector Selector for close button element
* @param {String} options.allButtonSelector Selector for view all button element
* @param {String} options.overlaySelector Selector for gallery overlay element
Expand All @@ -18,7 +17,6 @@ import { createFocusTrap } from 'focus-trap';
* @param {String} options.overlayDownloadSelector Selector for gallery overlay download element
* @param {String} options.overlayShareSelector Selector for gallery overlay share element
* @param {String} options.overlayDescriptionSelector Selector for gallery overlay description element
* @param {String} options.overlayMetaSelector Selector for gallery overlay meta info element
* @param {String} options.overlayPreviousSelector Selector for gallery overlay previous link element
* @param {String} options.overlayNextSelector Selector for gallery overlay next link element
* @param {String} options.videoPlayerLabelSelector Selector for video player label
Expand Down Expand Up @@ -48,7 +46,6 @@ export class Gallery {
galleryItemSelector = '[data-ecl-gallery-item]',
descriptionSelector = '[data-ecl-gallery-description]',
noOverlaySelector = 'data-ecl-gallery-no-overlay',
metaSelector = '[data-ecl-gallery-meta]',
itemsLimitSelector = 'data-ecl-gallery-visible-items',
closeButtonSelector = '[data-ecl-gallery-close]',
viewAllSelector = '[data-ecl-gallery-all]',
Expand All @@ -64,7 +61,6 @@ export class Gallery {
overlayDownloadSelector = '[data-ecl-gallery-overlay-download]',
overlayShareSelector = '[data-ecl-gallery-overlay-share]',
overlayDescriptionSelector = '[data-ecl-gallery-overlay-description]',
overlayMetaSelector = '[data-ecl-gallery-overlay-meta]',
overlayPreviousSelector = '[data-ecl-gallery-overlay-previous]',
overlayNextSelector = '[data-ecl-gallery-overlay-next]',
videoPlayerLabelSelector = 'data-ecl-gallery-player-label',
Expand All @@ -85,7 +81,6 @@ export class Gallery {
// Options
this.galleryItemSelector = galleryItemSelector;
this.descriptionSelector = descriptionSelector;
this.metaSelector = metaSelector;
this.closeButtonSelector = closeButtonSelector;
this.viewAllSelector = viewAllSelector;
this.countSelector = countSelector;
Expand All @@ -100,7 +95,6 @@ export class Gallery {
this.overlayDownloadSelector = overlayDownloadSelector;
this.overlayShareSelector = overlayShareSelector;
this.overlayDescriptionSelector = overlayDescriptionSelector;
this.overlayMetaSelector = overlayMetaSelector;
this.overlayPreviousSelector = overlayPreviousSelector;
this.overlayNextSelector = overlayNextSelector;
this.attachClickListener = attachClickListener;
Expand All @@ -113,7 +107,6 @@ export class Gallery {

// Private variables
this.galleryItems = null;
this.meta = null;
this.closeButton = null;
this.viewAll = null;
this.count = null;
Expand All @@ -126,7 +119,6 @@ export class Gallery {
this.overlayDownload = null;
this.overlayShare = null;
this.overlayDescription = null;
this.overlayMeta = null;
this.overlayPrevious = null;
this.overlayNext = null;
this.selectedItem = null;
Expand Down Expand Up @@ -207,7 +199,6 @@ export class Gallery {
this.overlayDescriptionSelector,
this.overlay,
);
this.overlayMeta = queryOne(this.overlayMetaSelector, this.overlay);
this.overlayPrevious = queryOne(
this.overlayPreviousSelector,
this.overlay,
Expand Down Expand Up @@ -575,10 +566,6 @@ export class Gallery {
this.overlayDownload.hidden = true;
}

// Update meta
const meta = queryOne(this.metaSelector, selectedItem);
this.overlayMeta.innerHTML = meta.innerHTML;

// Update description
const description = queryOne(this.descriptionSelector, selectedItem);
this.overlayDescription.innerHTML = description.innerHTML;
Expand Down
Loading

1 comment on commit 6cdcbb4

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://v4-dev--europa-component-library.netlify.app

Please sign in to comment.