Merge pull request #2222 from tf/teaser-list-buttons

tf · web-flow · commit ccc11c894a6e · 2025-04-10T12:50:23.000+02:00
Add display buttons option for external links
diff --git a/entry_types/scrolled/config/locales/new/ext-link-options.de.yml b/entry_types/scrolled/config/locales/new/ext-link-options.de.yml
@@ -68,3 +68,7 @@ de:
                 small: Klein
                 medium: Mittel
                 large: Groß
+            displayButtons:
+              label: "Buttons anzeigen"
+              inline_help: |-
+                Zeige Buttons an, um die Links zu öffnen.
diff --git a/entry_types/scrolled/config/locales/new/ext-link-options.en.yml b/entry_types/scrolled/config/locales/new/ext-link-options.en.yml
@@ -66,3 +66,7 @@ en:
                 small: Small
                 medium: Medium
                 large: Large
+            displayButtons:
+              label: "Display buttons"
+              inline_help: |-
+                Display buttons to open the links.
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js
@@ -1,6 +1,6 @@
 import {editor} from 'pageflow-scrolled/editor';
 import {features} from 'pageflow/frontend';
-import {SelectInputView, SliderInputView, SeparatorView} from 'pageflow/ui';
+import {SelectInputView, SliderInputView, SeparatorView, CheckBoxInputView} from 'pageflow/ui';
 
 import {SidebarRouter} from './SidebarRouter';
 import {SidebarController} from './SidebarController';
@@ -81,6 +81,7 @@ editor.contentElementTypes.register('externalLinkList', {
       this.input('textSize', SelectInputView, {
         values: ['small', 'medium', 'large']
       });
+      this.input('displayButtons', CheckBoxInputView);
     });
   }
 });
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js
@@ -11,7 +11,8 @@ import {
   useContentElementConfigurationUpdate,
   useContentElementEditorState,
   useI18n,
-  utils
+  utils,
+  LinkButton
 } from 'pageflow-scrolled/frontend';
 
 import {Thumbnail} from './Thumbnail';
@@ -89,21 +90,21 @@ export function ExternalLink({id, configuration, ...props}) {
   return (
     <li className={classNames(styles.item,
                               styles[`textPosition-${props.textPosition}`],
-                              {[styles.link]: !!href},
+                              {[styles.link]: !!href && !configuration.displayButtons},
                               {[styles.outlined]: props.outlined},
                               {[styles.highlighted]: props.highlighted},
                               {[styles.selected]: props.selected})}
         onClick={props.onClick}>
-      <Link isEditable={isEditable}
+      <Link isEnabled={!configuration.displayButtons}
+            isEditable={isEditable}
             actionButtonVisible={props.selected}
             href={href}
             openInNewTab={openInNewTab}
             onChange={handleLinkChange}>
         <div className={classNames(
           styles.card,
-          styles[`thumbnailSize-${props.thumbnailSize}`],
-          {[styles.invert]: props.invert
-        })}>
+          styles[`thumbnailSize-${props.thumbnailSize}`]
+        )}>
           <div className={styles.thumbnail}>
             <Thumbnail imageFile={thumbnailImageFile}
                        aspectRatio={props.thumbnailAspectRatio}
@@ -112,7 +113,8 @@ export function ExternalLink({id, configuration, ...props}) {
               <InlineFileRights context="insideElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
             </Thumbnail>
           </div>
-          <div className={styles.background}
+          <div className={classNames(styles.background,
+                                     props.darkBackground ? styles.light : styles.dark)}
                style={{pointerEvents: !isEditable || isSelected ? undefined : 'none'}}>
             <InlineFileRights context="afterElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
             <div className={styles.details}>
@@ -134,6 +136,14 @@ export function ExternalLink({id, configuration, ...props}) {
                                placeholder={t('pageflow_scrolled.inline_editing.type_text')}
                                onChange={value => handleTextChange('description', value)} />
                </div>}
+              {configuration.displayButtons && presentOrEditing('link') &&
+               <LinkButton href={href}
+                           openInNewTab={openInNewTab}
+                           value={itemTexts[id]?.link}
+                           linkPreviewDisabled={true}
+                           actionButtonVisible={false}
+                           onTextChange={value => handleTextChange('link', value)}
+                           onLinkChange={value => handleLinkChange(value)} />}
             </div>
           </div>
         </div>
@@ -142,8 +152,8 @@ export function ExternalLink({id, configuration, ...props}) {
   );
 }
 
-function Link(props) {
-  if (props.href || props.isEditable) {
+function Link({isEnabled, isEditable, ...props}) {
+  if ((isEnabled && props.href) || isEditable) {
     return (
       <EditableLink {...props}
                     actionButtonVisible={props.actionButtonVisible}
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
@@ -83,22 +83,27 @@
   width: 100%;
 }
 
-.background {
-  --padding-inline: var(--theme-external-links-card-padding-inline, 15px);
+.light {
+  composes: scope-darkContent from global;
   --content-text-color: var(--theme-external-links-card-text-color, darkContentTextColor);
   --card-surface-color: var(--theme-external-links-card-surface-color, lightContentSurfaceColor);
+}
+
+.dark {
+  composes: scope-lightContent from global;
+  --content-text-color: var(--theme-external-links-card-text-color, lightContentTextColor);
+  --card-surface-color: var(--theme-external-links-card-surface-color, darkContentSurfaceColor);
+}
+
+.background {
+  --padding-inline: var(--theme-external-links-card-padding-inline, 15px);
   color: var(--content-text-color);
   background-color: var(--card-surface-color);
   flex: 1;
   padding-left: min(var(--padding-inline), 5px);
   padding-right: min(var(--padding-inline), 5px);
 }
 
-.invert > .background {
-  --card-surface-color: var(--theme-external-links-card-surface-color, darkContentSurfaceColor);
-  --content-text-color: var(--theme-external-links-card-text-color, lightContentTextColor);
-}
-
 .textPosition-overlay .background {
   position: absolute;
   bottom: 0;
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js
@@ -98,7 +98,7 @@ export function ExternalLinkList(props) {
                         thumbnailSize={props.configuration.thumbnailSize || 'small'}
                         textPosition={props.configuration.textPosition || 'below'}
                         textSize={props.configuration.textSize || 'small'}
-                        invert={!darkBackground}
+                        darkBackground={darkBackground}
                         loadImages={shouldLoad}
                         outlined={isSelected}
                         highlighted={highlightedIndex === index}
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js
@@ -160,6 +160,42 @@ storiesOfContentElement(module, {
         ]
       },
     },
+    {
+      name: 'With buttons',
+      configuration: {
+        displayButtons: true,
+        itemTexts: {
+          1: {
+            title: editableTextValue('Item 1'),
+            description: editableTextValue('This is description'),
+            link: editableTextValue('Read more')
+          },
+          2: {
+            title: editableTextValue('Item 2'),
+            description: editableTextValue('This is another description'),
+            link: editableTextValue('Read more')
+          }
+        },
+        itemLinks: {
+          1: {
+            href: 'https://www.pageflow.io/'
+          },
+          2: {
+            href: 'https://www.pageflow.io/'
+          }
+        },
+        links: [
+          {
+            id: '1',
+            thumbnail: filePermaId('imageFiles', 'turtle')
+          },
+          {
+            id: '2',
+            thumbnail: filePermaId('imageFiles', 'turtle')
+          }
+        ]
+      }
+    },
     {
       name: 'With legacy external links',
       configuration: {
diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js b/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js
@@ -25,7 +25,8 @@ import {
   useDarkBackground,
   useFileWithInlineRights,
   useI18n,
-  utils
+  utils,
+  LinkButton
 } from 'pageflow-scrolled/frontend';
 
 import {getTooltipInlineStyles} from './getTooltipInlineStyles';
@@ -177,8 +178,7 @@ export function Tooltip({
                                         styles[`maxWidth-${maxWidth}`],
                                         styles[`align-${area.tooltipTextAlign}`],
                                         light ? styles.light : styles.dark,
-                                        {[styles.editable]: isEditable,
-                                         [styles.paddingForScrollButtons]: keepInViewport,
+                                        {[styles.paddingForScrollButtons]: keepInViewport,
                                          [styles.minWidth]: presentOrEditing('link')})}
                   onMouseEnter={onMouseEnter}
                   onMouseLeave={onMouseLeave}
@@ -214,18 +214,13 @@ export function Tooltip({
                                 scaleCategory="hotspotsTooltipDescription"
                                 placeholder={t('pageflow_scrolled.inline_editing.type_text')} />}
                  {presentOrEditing('link') &&
-                  <Text inline scaleCategory="hotspotsTooltipLink">
-                    <EditableLink href={tooltipLinks[area.id]?.href}
-                                  openInNewTab={tooltipLinks[area.id]?.openInNewTab}
-                                  linkPreviewDisabled={utils.isBlankEditableTextValue(tooltipTexts[area.id]?.link)}
-                                  className={styles.link}
-                                  onChange={value => handleLinkChange(value)}>
-                      <EditableInlineText value={tooltipTexts[area.id]?.link}
-                                          onChange={value => handleTextChange('link', value)}
-                                          placeholder={t('pageflow_scrolled.inline_editing.type_text')} />
-                      ›
-                    </EditableLink>
-                  </Text>}
+                  <LinkButton className={styles.link}
+                              scaleCategory="hotspotsTooltipLink"
+                              href={tooltipLinks[area.id]?.href}
+                              openInNewTab={tooltipLinks[area.id]?.openInNewTab}
+                              value={tooltipTexts[area.id]?.link}
+                              onTextChange={value => handleTextChange('link', value)}
+                              onLinkChange={value => handleLinkChange(value)} />}
                </div>
              </div>
            </div>
diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.module.css b/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.module.css
@@ -47,14 +47,17 @@
 }
 
 .light {
+  composes: scope-darkContent from global;
   background-color: lightContentSurfaceColor;
   color: darkContentTextColor;
   --content-text-color: darkContentTextColor;
   --content-link-color: darkContentLinkColor;
   box-shadow: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
+  --theme-link-button-on-surface-color: var(--theme-widget-primary-color);
 }
 
 .dark {
+  composes: scope-lightContent from global;
   background-color: darkContentSurfaceColor;
   color: lightContentTextColor;
   --content-text-color: lightContentTextColor;
@@ -122,42 +125,10 @@
   margin-bottom: 0;
 }
 
-.link {
-  display: flex;
-  justify-content: center;
-  gap: 0.5em;
-  border-radius: 5px;
-  text-decoration: none;
-  padding: 0.5rem;
-  background-color: transparent;
-  color: inherit;
-  margin-top: 1rem;
-  font-weight: bold;
-  border: solid 1px color-mix(in srgb, currentColor, transparent);
-}
-
 .textWrapper > :first-child .link {
   margin-top: 0;
 }
 
-.link:hover,
-.link:active {
-  border: solid 1px currentColor;
-}
-
-.light .link {
-  color: var(--theme-widget-primary-color);
-}
-
 .box > :first-child .link {
   margin-top: 0;
 }
-
-.editable .link {
-  opacity: 0.5;
-}
-
-.editable .link:has([data-slate-string]),
-.editable .link:focus-within {
-  opacity: 1;
-}
diff --git a/entry_types/scrolled/package/src/frontend/LinkButton.js b/entry_types/scrolled/package/src/frontend/LinkButton.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './LinkButton.module.css';
+import {EditableLink} from './EditableLink';
+import {EditableInlineText} from './EditableInlineText';
+import {Text} from './Text';
+import {utils} from './utils';
+import {useI18n} from './i18n';
+import {useContentElementEditorState} from './useContentElementEditorState';
+
+export function LinkButton({
+  href,
+  openInNewTab,
+  value,
+  onTextChange,
+  onLinkChange,
+  scaleCategory,
+  className,
+  actionButtonVisible,
+  linkPreviewPosition,
+  linkPreviewDisabled,
+  children,
+  ...props
+}) {
+  const {t} = useI18n({locale: 'ui'});
+  const {isEditable} = useContentElementEditorState();
+
+  return (
+    <Text inline scaleCategory={scaleCategory}>
+      <EditableLink href={href}
+                    openInNewTab={openInNewTab}
+                    linkPreviewPosition={linkPreviewPosition}
+                    linkPreviewDisabled={utils.isBlankEditableTextValue(value) || linkPreviewDisabled}
+                    actionButtonVisible={actionButtonVisible}
+                    className={classNames(styles.button, className, {[styles.editable]: isEditable})}
+                    onChange={onLinkChange}
+                    {...props}>
+        <EditableInlineText value={value}
+                           onChange={onTextChange}
+                           placeholder={t('pageflow_scrolled.inline_editing.type_text')} />
+        {children}
+      </EditableLink>
+    </Text>
+  );
+}
diff --git a/entry_types/scrolled/package/src/frontend/LinkButton.module.css b/entry_types/scrolled/package/src/frontend/LinkButton.module.css
@@ -0,0 +1,48 @@
+:global .scope-lightContent {
+  --link-button-on-surface-color: var(--theme-light-content-link-button-on-surface-color,
+                                      currentColor);
+  --link-button-surface-color: var(--theme-light-content-link-button-surface-color);
+}
+
+:global .scope-darkContent {
+  --link-button-on-surface-color: var(--theme-dark-content-link-button-on-surface-color,
+                                      var(--theme-widget-primary-color));
+  --link-button-surface-color: var(--theme-dark-content-link-button-surface-color);
+}
+
+.button {
+  display: flex;
+  width: var(--theme-link-button-width);
+  justify-content: center;
+  gap: 0.5em;
+  border-radius: var(--theme-link-button-border-radius, 5px);
+  text-decoration: none;
+  padding: var(--theme-link-button-padding, 0.5rem);
+  background-color: var(--link-button-surface-color, transparent);
+  color: var(--link-button-on-surface-color);
+  margin-top: 1rem;
+  font-weight: bold;
+  border: solid 1px var(--link-button-surface-color,
+                        color-mix(in srgb,
+                                  var(--link-button-on-surface-color),
+                                  transparent));
+  cursor: pointer;
+}
+
+.button::after {
+  content: var(--theme-link-button-symbol, "›");
+}
+
+.button:hover,
+.button:active {
+  border: solid 1px var(--link-button-surface-color, var(--link-button-on-surface-color));
+}
+
+.editable {
+  opacity: 0.5;
+}
+
+.editable:has([data-slate-string]),
+.editable:focus-within {
+  opacity: 1;
+}
diff --git a/entry_types/scrolled/package/src/frontend/index.js b/entry_types/scrolled/package/src/frontend/index.js
