diff --git a/frontend/packages/devsite/locales/de/LC_MESSAGES/volto.po b/frontend/packages/devsite/locales/de/LC_MESSAGES/volto.po index 97cb3dd..ec7a964 100644 --- a/frontend/packages/devsite/locales/de/LC_MESSAGES/volto.po +++ b/frontend/packages/devsite/locales/de/LC_MESSAGES/volto.po @@ -140,3 +140,8 @@ msgstr "" #: components/Controlpanels/UpgradeControlPanel msgid "Your site is up to date." msgstr "" + +#. Default: "Zoom" +#: components/Blocks/Listing/ImageAlbum +msgid "Zoom" +msgstr "" diff --git a/frontend/packages/devsite/locales/en/LC_MESSAGES/volto.po b/frontend/packages/devsite/locales/en/LC_MESSAGES/volto.po index 97c2f20..2a773a1 100644 --- a/frontend/packages/devsite/locales/en/LC_MESSAGES/volto.po +++ b/frontend/packages/devsite/locales/en/LC_MESSAGES/volto.po @@ -140,3 +140,8 @@ msgstr "" #: components/Controlpanels/UpgradeControlPanel msgid "Your site is up to date." msgstr "" + +#. Default: "Zoom" +#: components/Blocks/Listing/ImageAlbum +msgid "Zoom" +msgstr "" diff --git a/frontend/packages/devsite/locales/es/LC_MESSAGES/volto.po b/frontend/packages/devsite/locales/es/LC_MESSAGES/volto.po index f3f566a..40e32ba 100644 --- a/frontend/packages/devsite/locales/es/LC_MESSAGES/volto.po +++ b/frontend/packages/devsite/locales/es/LC_MESSAGES/volto.po @@ -147,3 +147,8 @@ msgstr "" #: components/Controlpanels/UpgradeControlPanel msgid "Your site is up to date." msgstr "" + +#. Default: "Zoom" +#: components/Blocks/Listing/ImageAlbum +msgid "Zoom" +msgstr "" diff --git a/frontend/packages/devsite/locales/pt_BR/LC_MESSAGES/volto.po b/frontend/packages/devsite/locales/pt_BR/LC_MESSAGES/volto.po index ca1ada2..a4b07ac 100644 --- a/frontend/packages/devsite/locales/pt_BR/LC_MESSAGES/volto.po +++ b/frontend/packages/devsite/locales/pt_BR/LC_MESSAGES/volto.po @@ -145,3 +145,8 @@ msgstr "" #: components/Controlpanels/UpgradeControlPanel msgid "Your site is up to date." msgstr "" + +#. Default: "Zoom" +#: components/Blocks/Listing/ImageAlbum +msgid "Zoom" +msgstr "Visualizar" diff --git a/frontend/packages/devsite/locales/volto.pot b/frontend/packages/devsite/locales/volto.pot index 9446715..a73f599 100644 --- a/frontend/packages/devsite/locales/volto.pot +++ b/frontend/packages/devsite/locales/volto.pot @@ -1,7 +1,7 @@ msgid "" msgstr "" "Project-Id-Version: Plone\n" -"POT-Creation-Date: 2025-08-06T16:50:29.518Z\n" +"POT-Creation-Date: 2025-08-20T22:43:27.383Z\n" "Last-Translator: Plone i18n \n" "Language-Team: Plone i18n \n" "Content-Type: text/plain; charset=utf-8\n" @@ -142,3 +142,8 @@ msgstr "" #: components/Controlpanels/UpgradeControlPanel msgid "Your site is up to date." msgstr "" + +#. Default: "Zoom" +#: components/Blocks/Listing/ImageAlbum +msgid "Zoom" +msgstr "" diff --git a/frontend/packages/devsite/news/5.feature b/frontend/packages/devsite/news/5.feature new file mode 100644 index 0000000..92f5fea --- /dev/null +++ b/frontend/packages/devsite/news/5.feature @@ -0,0 +1 @@ +Altera botão de abertura da modal de pré-visualização do album de imagens. @ericof diff --git a/frontend/packages/devsite/src/components/Blocks/Listing/ImageAlbum.tsx b/frontend/packages/devsite/src/components/Blocks/Listing/ImageAlbum.tsx index 0aec790..32d273f 100644 --- a/frontend/packages/devsite/src/components/Blocks/Listing/ImageAlbum.tsx +++ b/frontend/packages/devsite/src/components/Blocks/Listing/ImageAlbum.tsx @@ -1,11 +1,23 @@ import React, { useState } from 'react'; +import { defineMessages } from 'react-intl'; +import { useIntl } from 'react-intl'; import { flattenToAppURL } from '@plone/volto/helpers/Url/Url'; +import Icon from '@plone/volto/components/theme/Icon/Icon'; import { Button, Modal } from 'semantic-ui-react'; import { Container } from '@plone/components'; import type { ContainedItem } from '@plone/types'; +import zoomSVG from '@plone/volto/icons/zoom-in.svg'; import config from '@plone/volto/registry'; +const messages = defineMessages({ + zoomAction: { + id: 'Zoom', + defaultMessage: 'Zoom', + }, +}); + const AlbumItem = ({ item }: { item: ContainedItem }) => { + const intl = useIntl(); const [modalOpen, setModalOpen] = useState(false); const baseURL = flattenToAppURL(item['@id']); const imageField = item.image_field || 'image'; @@ -13,6 +25,7 @@ const AlbumItem = ({ item }: { item: ContainedItem }) => { const scales = image.scales || {}; const originalImage = `${baseURL}/${image?.download}`; const previewImage = `${baseURL}/${scales?.preview?.download}`; + const acao = intl.formatMessage(messages.zoomAction); return ( image && (
@@ -26,11 +39,12 @@ const AlbumItem = ({ item }: { item: ContainedItem }) => { size="fullscreen" trigger={ } onClose={() => setModalOpen(false)} diff --git a/frontend/packages/devsite/src/theme/components/blocks/_listing_image_album.scss b/frontend/packages/devsite/src/theme/components/blocks/_listing_image_album.scss index 4706852..49d07c9 100644 --- a/frontend/packages/devsite/src/theme/components/blocks/_listing_image_album.scss +++ b/frontend/packages/devsite/src/theme/components/blocks/_listing_image_album.scss @@ -37,6 +37,17 @@ pointer-events: none; text-align: center; transition: opacity 0.3s ease; + .zoom.btn-open { + display: flex; + flex-direction: row; + align-items: center; + background-color: var(--primary-color); + color: var(--primary-foreground-color); + gap: $spacing-small; + .icon { + filter: drop-shadow(1px 1px var(--primary-foreground-color)); + } + } } &:hover { .album-item-image {