More options for external links

REDMINE-20852
codevise · Nov 7, 2024 · cbf3914 · cbf3914
1 parent dd9b141
commit cbf3914
Show file tree

Hide file tree

Showing 10 changed files with 147 additions and 26 deletions.
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
@@ -1,4 +1,7 @@
 de:
+  pageflow:
+    external_links_options:
+      feature_name: "External Links Optionen"
   pageflow_scrolled:
     editor:
       content_elements:
@@ -12,3 +15,15 @@ de:
                 square: Quadratisch (1:1)
                 wide: Landscape (3:4)
                 original: Original
+            textPosition:
+              label: Text Position
+              values:
+                below: "Unter dem Bild"
+                right: "Rechts neben dem Bild"
+                title: "Versteckt"
+            thumbnailSize:
+              label: Thumbnail Breite
+              values:
+                small: "Klein"
+                medium: "Mittel"
+                large: "Groß"
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
@@ -1,4 +1,7 @@
 en:
+  pageflow:
+    external_links_options:
+      feature_name: "External Links Options"
   pageflow_scrolled:
     editor:
       content_elements:
@@ -12,3 +15,15 @@ en:
                 square: Square (1:1)
                 wide: Landscape (16:9)
                 original: Original
+            textPosition:
+              label: Text Position
+              values:
+                below: "Below image"
+                right: "Right from image"
+                title: "Hidden"
+            thumbnailSize:
+              label: Thumbnail width
+              values:
+                small: "Small"
+                medium: "Medium"
+                large: "Large"
diff --git a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
@@ -42,6 +42,7 @@ def configure(config)
         c.features.register('frontend_v2')
         c.features.register('scrolled_entry_fragment_caching')
         c.features.register('backdrop_content_elements')
+        c.features.register('external_links_options')
 
         c.additional_frontend_seed_data.register(
           'frontendVersion',

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,4 +1,5 @@
 import {editor} from 'pageflow-scrolled/editor';
+import {features} from 'pageflow/frontend';
 import {SelectInputView} from 'pageflow/ui';
 
 import {SidebarRouter} from './SidebarRouter';
@@ -20,19 +21,35 @@ editor.contentElementTypes.register('externalLinkList', {
   pictogram,
   category: 'links',
   supportedPositions: ['inline'],
+  supportedWidthRange: ['s', 'l'],
 
   configurationEditor({entry}) {
     this.tab('general', function() {
-      this.group('ContentElementVariant', {entry});
+      if (!features.isEnabled('external_links_options')) {
+        this.group('ContentElementVariant', {entry});
+      }
 
       this.view(SidebarListView, {
         contentElement: this.model.parent,
         collection: ExternalLinkCollection.forContentElement(this.model.parent, entry)
       });
 
-      this.input('thumbnailAspectRatio', SelectInputView, {
-        values: ['wide', 'narrow', 'square', 'portrait', 'original']
-      })
+      if (features.isEnabled('external_links_options')) {
+        this.input('textPosition', SelectInputView, {
+          values: ['below', 'right', 'title']
+        });
+
+        this.group('ContentElementVariant', {entry});
+
+        this.input('thumbnailAspectRatio', SelectInputView, {
+          values: ['wide', 'narrow', 'square', 'portrait', 'original']
+        });
+        this.input('thumbnailSize', SelectInputView, {
+          values: ['small', 'medium', 'large']
+        });
+
+        this.group('ContentElementPosition');
+      }
     });
   }
 });

diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js
@@ -56,23 +56,28 @@ export function ExternalLink(props) {
   }
 
   return (
-    <a className={classNames(styles.link_item,
+    <a className={classNames(styles.item,
+                             styles[`textPosition-${props.textPosition}`],
+                             styles[`thumbnailSize-${props.thumbnailSize}`],
                              {
                                [styles.invert]: props.invert,
                                [styles.layout_center]:
-                                 layout === 'center' || layout === 'centerRagged'
-                             })}
+                               layout === 'center' || layout === 'centerRagged'})}
        href={url || 'about:blank'}
+       title={props.textPosition === 'title' &&
+              [props.title, props.description].filter(Boolean).join("\n")}
        onClick={onClick}
        onMouseLeave={onMouseLeave}
        target={props.open_in_new_tab ? '_blank' : '_self'}
        rel={props.open_in_new_tab ? 'noopen noreferrer' : undefined}>
-      <Thumbnail imageFile={thumbnailImageFile}
-                 aspectRatio={props.thumbnailAspectRatio}
-                 cropPosition={props.thumbnailCropPosition}
-                 load={props.loadImages}>
-        <InlineFileRights context="insideElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
-      </Thumbnail>
+      <div className={styles.thumbnail}>
+        <Thumbnail imageFile={thumbnailImageFile}
+                   aspectRatio={props.thumbnailAspectRatio}
+                   cropPosition={props.thumbnailCropPosition}
+                   load={props.loadImages}>
+          <InlineFileRights context="insideElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
+        </Thumbnail>
+      </div>
       <div className={styles.background}>
         <InlineFileRights context="afterElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
         <div className={styles.details}>

diff --git a/...es/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css b/...es/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
@@ -9,10 +9,8 @@
   display: none;
 }
 
-.link_item {
+.item {
   display: flex;
-  flex-direction: column;
-  width: 45%;
   vertical-align: top;
   margin: 2% auto;
   text-decoration: none;
@@ -22,18 +20,63 @@
   will-change: transform;
 }
 
-.link_item.layout_center {
+.textPosition-below {
+  flex-direction: column;
+  width: 45%;
+}
+
+.textPosition-title {
+  composes: textPosition-below;
+}
+
+.textPosition-below.thumbnailSize-medium {
+  width: 66%;
+}
+
+.textPosition-below.layout_center {
   width: 29%;
 }
 
-.link_item:hover {
+.textPosition-below.layout_center.thumbnailSize-medium {
+  width: 45%;
+}
+
+.textPosition-below.thumbnailSize-large {
+  width: 95%;
+}
+
+.textPosition-right {
+  width: 100%;
+}
+
+.textPosition-right.layout_center.thumbnailSize-small {
+  width: 45%;
+}
+
+.textPosition-below:hover {
   transform: scale(var(--theme-external-links-card-hover-scale, 1.05));
 }
 
-.link_item:hover .link_title {
+.textPosition-right:hover {
+  transform: scale(var(--theme-external-links-card-hover-scale, 1.02));
+}
+
+.item:hover .link_title {
   text-decoration: underline;
 }
 
+.textPosition-right .thumbnail {
+  width: 33%;
+}
+
+.textPosition-right.thumbnailSize-medium .thumbnail {
+  width: 50%;
+}
+
+.textPosition-right.thumbnailSize-large .thumbnail {
+  width: 66%;
+}
+
 .background {
   --padding-inline: var(--theme-external-links-card-padding-inline, 15px);
   flex: 1;
@@ -44,17 +87,25 @@
   padding-right: min(var(--padding-inline), 5px);
 }
 
-.details {
+.textPosition-title .background {
+  display: none;
+}
+
+.textPosition-below .details {
   padding-top: 15px;
   padding-bottom: 20px;
   padding-left: calc(var(--padding-inline) - 5px);
   padding-right: calc(var(--padding-inline) - 5px);
 }
 
-.details:first-child {
+.textPosition-below .details:first-child {
   padding-top: 20px;
 }
 
+.textPosition-right .details {
+  padding: 10px 10px 10px 15px;
+}
+
 .invert > .background {
   background-color: var(--theme-external-links-card-surface-color, darkContentSurfaceColor);
   color: var(--theme-external-links-card-text-color, lightContentTextColor);
@@ -107,16 +158,24 @@
 }
 
 @media only screen and (max-width: 600px) {
-  .link_item.layout_center {
+  .textPosition-below.layout_center {
     width: 45%;
   }
+
+  .textPosition-right.layout_center.thumbnailSize-small {
+    width: 100%;
+  }
+
+  .textPosition-right.thumbnailSize-large .thumbnail {
+    width: 50%;
+  }
 }
 
 @media only screen and (max-width: 350px) {
-  .link_item {
+  .textPosition-below {
     width: 85%;
   }
-  .link_item.layout_center {
+  .textPosition-below.layout_center {
     width: 85%;
   }
 }
diff --git a/..._types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js b/..._types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js
@@ -13,12 +13,15 @@ export function ExternalLinkList(props) {
     <div className={classNames(
       styles.ext_links_container,
       props.configuration.variant &&
-      `scope-externalLinkList-${props.configuration.variant}`
+      `scope-externalLinkList-${props.configuration.variant}`,
+      styles[`textPosition-${props.configuration.textPosition || 'below'}`]
     )}>
       {linkList.map((link, index) =>
         <ExternalLink {...link}
                       key={link.id}
                       thumbnailAspectRatio={props.configuration.thumbnailAspectRatio}
+                      thumbnailSize={props.configuration.thumbnailSize || 'small'}
+                      textPosition={props.configuration.textPosition || 'below'}
                       invert={!darkBackground}
                       sectionProps={props.sectionProps}
                       loadImages={shouldLoad} />

diff --git a/...crolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css b/...crolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css
@@ -7,7 +7,6 @@
   flex-wrap: wrap;
   border-collapse: separate;
   border-spacing: 10px;
-  min-height: 240px;
   width: auto;
   height: auto;
   pointer-events: auto;
@@ -18,3 +17,7 @@
   transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);
   transition-duration: 0ms;
 }
+
+.textPosition-below {
+  min-height: 240px;
+}
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/Thumbnail.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/Thumbnail.js
@@ -23,6 +23,7 @@ export function Thumbnail({imageFile, aspectRatio, cropPosition, load, children}
          style={{paddingTop: aspectRatioPadding}}>
       <Image imageFile={imageFile}
              load={load}
+             preferSvg={true}
              variant={(aspectRatioPadding || cropPosition) ? 'medium' : 'linkThumbnailLarge'}  />
       {children}
     </div>

diff --git a/...types/scrolled/package/src/contentElements/externalLinkList/frontend/Thumbnail.module.css b/...types/scrolled/package/src/contentElements/externalLinkList/frontend/Thumbnail.module.css
@@ -2,4 +2,6 @@
   width: auto;
   padding-top: 56.25%;
   position: relative;
+  height: 100%;
+  box-sizing: border-box;;
 }