Add possibillity to link on Logo

kitconcept · Dec 11, 2023 · 7e6db66 · 7e6db66
1 parent f63924b
commit 7e6db66
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 26 deletions.
diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
@@ -16,6 +16,11 @@ msgstr ""
 msgid "It is advised to use a svg graphic."
 msgstr "Es wird empfohlen eine svg Grafik zu verwenden"
 
+#: components/Logo/schema
+# defaultMessage: Link
+msgid "Link"
+msgstr "Link"
+
 #: components/Logo/Data
 #: components/Logo/schema
 # defaultMessage: Logo
@@ -27,12 +32,12 @@ msgstr "Logo"
 msgid "Please choose a logo as source for this element"
 msgstr "Bitte wählen Sie ein Logo als Quelle für dieses Element"
 
+#: components/Logo/schema
+# defaultMessage: Title
+msgid "Title"
+msgstr "Titel"
+
 #: components/Logo/schema
 # defaultMessage: description
 msgid "description"
 msgstr "Beschreibung"
-
-#: components/Logo/schema
-# defaultMessage: title
-msgid "title"
-msgstr "Titel"
diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
@@ -16,6 +16,11 @@ msgstr ""
 msgid "It is advised to use a svg graphic."
 msgstr "It is advised to use a svg graphic."
 
+#: components/Logo/schema
+# defaultMessage: Link
+msgid "Link"
+msgstr ""
+
 #: components/Logo/Data
 #: components/Logo/schema
 # defaultMessage: Logo
@@ -27,12 +32,12 @@ msgstr "Logo"
 msgid "Please choose a logo as source for this element"
 msgstr "Please choose a logo as source for this element"
 
+#: components/Logo/schema
+# defaultMessage: Title
+msgid "Title"
+msgstr ""
+
 #: components/Logo/schema
 # defaultMessage: description
 msgid "description"
 msgstr "description"
-
-#: components/Logo/schema
-# defaultMessage: title
-msgid "title"
-msgstr "title"
diff --git a/locales/volto.pot b/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-12-08T15:34:03.624Z\n"
+"POT-Creation-Date: 2023-12-11T12:47:09.894Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -18,6 +18,11 @@ msgstr ""
 msgid "It is advised to use a svg graphic."
 msgstr ""
 
+#: components/Logo/schema
+# defaultMessage: Link
+msgid "Link"
+msgstr ""
+
 #: components/Logo/Data
 #: components/Logo/schema
 # defaultMessage: Logo
@@ -30,11 +35,11 @@ msgid "Please choose a logo as source for this element"
 msgstr ""
 
 #: components/Logo/schema
-# defaultMessage: description
-msgid "description"
+# defaultMessage: Title
+msgid "Title"
 msgstr ""
 
 #: components/Logo/schema
-# defaultMessage: title
-msgid "title"
+# defaultMessage: description
+msgid "description"
 msgstr ""
diff --git a/news/4.feature b/news/4.feature
@@ -0,0 +1 @@
+Add possibillity to link on Logo
diff --git a/src/components/Logo/View.jsx b/src/components/Logo/View.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { UniversalLink } from '@plone/volto/components';
 import { Message } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
@@ -12,9 +13,11 @@ const messages = defineMessages({
 });
 
 const View = (props) => {
-  const { data } = props;
+  const { data, isEditMode } = props;
   const intl = useIntl();
   const logo = data.logo?.[0];
+  console.log(data);
+
   return (
     <div className="logo-block">
       {!logo && props.isEditMode && (
@@ -25,13 +28,23 @@ const View = (props) => {
           </div>
         </Message>
       )}
-      {logo && (
-        <img
-          src={flattenToAppURL(`${logo['@id']}/@@images/image/teaser`)}
-          alt="placeholder"
-          className="logo-image"
-        />
-      )}
+      {logo &&
+        (isEditMode ? (
+          <img
+            src={flattenToAppURL(`${logo['@id']}/@@images/image/teaser`)}
+            alt="placeholder"
+            className="logo-image"
+          />
+        ) : (
+          <UniversalLink href={data.link?.[0]?.['@id']}>
+            <img
+              src={flattenToAppURL(`${logo['@id']}/@@images/image/teaser`)}
+              alt="placeholder"
+              className="logo-image"
+            />
+          </UniversalLink>
+        ))}
+
       <h3 className="logo-heading headline">{data.heading}</h3>
       {data.description && <p>{data.description}</p>}
     </div>

diff --git a/src/components/Logo/schema.js b/src/components/Logo/schema.js
@@ -6,8 +6,8 @@ const messages = defineMessages({
     defaultMessage: 'Logo',
   },
   title: {
-    id: 'title',
-    defaultMessage: 'title',
+    id: 'Title',
+    defaultMessage: 'Title',
   },
   description: {
     id: 'description',
@@ -21,6 +21,10 @@ const messages = defineMessages({
     id: 'It is advised to use a svg graphic.',
     defaultMessage: 'It is advised to use a svg graphic.',
   },
+  link: {
+    id: 'Link',
+    defaultMessage: 'Link',
+  },
 });
 
 export const LogoBlockSchema = (props) => {
@@ -31,7 +35,7 @@ export const LogoBlockSchema = (props) => {
       {
         id: 'default',
         title: 'Default',
-        fields: ['logo', 'heading'],
+        fields: ['logo', 'heading', 'link'],
       },
     ],
     properties: {
@@ -45,10 +49,17 @@ export const LogoBlockSchema = (props) => {
       heading: {
         title: props.intl.formatMessage(messages.title),
       },
+      //description currently unused
       description: {
         title: props.intl.formatMessage(messages.description),
         widget: 'text',
       },
+      link: {
+        title: props.intl.formatMessage(messages.link),
+        widget: 'object_browser',
+        mode: 'link',
+        allowExternals: true,
+      },
     },
     required: ['logo'],
   };