Merge pull request #2110 from tf/external-links-inline-rights

External links improvements
codevise · Jun 7, 2024 · f9eb0fd · f9eb0fd
2 parents 5fbdcf8 + 2602bbc
commit f9eb0fd
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 27 deletions.
diff --git a/entry_types/scrolled/package/spec/support/stories.js b/entry_types/scrolled/package/spec/support/stories.js
@@ -181,13 +181,18 @@ function variantsExampleStories({typeName, baseConfiguration, variants}) {
     typeName,
     name: 'Variants',
     examples: variants.map(({
-      name, permaId, configuration, themeOptions, sectionConfiguration
+      name, permaId, configuration, themeOptions, sectionConfiguration, inlineFileRightsWidgetTypeName
     }) => ({
       name: name,
       permaId,
       contentElementConfiguration: {...baseConfiguration, ...configuration},
       themeOptions,
-      sectionConfiguration
+      sectionConfiguration,
+      inlineFileRightsFor: inlineFileRightsWidgetTypeName ? ['audioFiles', 'imageFiles', 'videoFiles'] : [],
+      widgets: inlineFileRightsWidgetTypeName ? [{
+        role: 'inlineFileRights',
+        typeName: inlineFileRightsWidgetTypeName
+      }] : []
     }))
   });
 }
@@ -324,7 +329,7 @@ function exampleStoryGroup({
       widgets: examples[index].widgets,
       themeOptions: examples[index].themeOptions,
       consentVendors,
-      inlineFileRightsFor,
+      inlineFileRightsFor: inlineFileRightsFor || examples[index].inlineFileRightsFor,
       contentElementConsentVendors: consentVendors &&
                                     contentElements
                                       .filter(({id}) => id)

diff --git a/...types/scrolled/package/src/contentElements/externalLinkList/editor/SidebarEditLinkView.js b/...types/scrolled/package/src/contentElements/externalLinkList/editor/SidebarEditLinkView.js
@@ -1,5 +1,6 @@
 import {ConfigurationEditorView, TextInputView, CheckBoxInputView} from 'pageflow/ui';
 import {editor, FileInputView} from 'pageflow/editor';
+import {InlineFileRightsMenuItem} from 'pageflow-scrolled/editor';
 import Marionette from 'backbone.marionette';
 import I18n from 'i18n-js';
 
@@ -37,7 +38,8 @@ export const SidebarEditLinkView = Marionette.Layout.extend({
         fileSelectionHandlerOptions: {
           contentElementId: self.options.contentElement.get('id')
         },
-        positioning: false
+        positioning: false,
+        dropDownMenuItems: [InlineFileRightsMenuItem]
       });
       this.input('title', TextInputView, {
         required: true

diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js
@@ -1,14 +1,24 @@
 import React, {useState} from 'react';
 import classNames from 'classnames';
 import styles from './ExternalLink.module.css';
-import {Image, useFile, useI18n, useContentElementEditorState} from 'pageflow-scrolled/frontend';
+import {
+  Image,
+  InlineFileRights,
+  useFileWithInlineRights,
+  useI18n,
+  useContentElementEditorState
+} from 'pageflow-scrolled/frontend';
 
 export function ExternalLink(props) {
   const [hideTooltip, setHideTooltip] = useState(true);
   var {layout} = props.sectionProps;
   const {t} = useI18n({locale: 'ui'});
   const {isEditable, isSelected} = useContentElementEditorState();
-  const thumbnailImageFile = useFile({collectionName: 'imageFiles', permaId: props.thumbnail});
+  const thumbnailImageFile = useFileWithInlineRights({
+    configuration: props,
+    collectionName: 'imageFiles',
+    propertyName: 'thumbnail'
+  });
   const url = ensureAbsolute(props.url);
 
   const onClick = function (event) {
@@ -60,13 +70,15 @@ export function ExternalLink(props) {
         <Image imageFile={thumbnailImageFile}
                load={props.loadImages}
                variant="linkThumbnailLarge" />
+        <InlineFileRights context="insideElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
       </div>
-
-      <div className={styles.link_details}>
-        <p className={styles.link_title}>{props.title}</p>
-        <p className={styles.link_desc}>{props.description}</p>
+      <div className={styles.background}>
+        <InlineFileRights context="afterElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
+        <div className={styles.details}>
+          <p className={styles.link_title}>{props.title}</p>
+          <p className={styles.link_desc}>{props.description}</p>
+        </div>
       </div>
-
       {renderNewTabTooltip()}
     </a>
   );

diff --git a/...es/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css b/...es/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
@@ -27,7 +27,7 @@
 }
 
 .link_item:hover {
-  transform: scale(1.05);
+  transform: scale(var(--theme-external-links-card-hover-scale, 1.05));
 }
 
 .link_item:hover .link_title {
@@ -42,30 +42,45 @@
   position: relative;
 }
 
-.link_details {
+.background {
+  --padding-inline: var(--theme-external-links-card-padding-inline, 15px);
   flex: 1;
-  padding: 20px;
-  color: darkContentTextColor;
-  background-color: lightContentSurfaceColor;
+  color: var(--theme-external-links-card-text-color, darkContentTextColor);
+  --content-text-color: var(--theme-external-links-card-text-color, darkContentTextColor);
+  background-color: var(--theme-external-links-card-surface-color, lightContentSurfaceColor);
+  padding-left: min(var(--padding-inline), 5px);
+  padding-right: min(var(--padding-inline), 5px);
 }
 
-.invert > .link_details {
-  background-color: darkContentSurfaceColor;
-  color: lightContentTextColor;
+.details {
+  padding-top: 15px;
+  padding-bottom: 20px;
+  padding-left: calc(var(--padding-inline) - 5px);
+  padding-right: calc(var(--padding-inline) - 5px);
 }
 
-.link_details > .link_title {
+.details:first-child {
+  padding-top: 20px;
+}
+
+.invert > .background {
+  background-color: var(--theme-external-links-card-surface-color, darkContentSurfaceColor);
+  color: var(--theme-external-links-card-text-color, lightContentTextColor);
+  --content-text-color: var(--theme-external-links-card-text-color, lightContentTextColor);
+}
+
+.details > .link_title {
   font-weight: bold;
   margin: 0 0 20px;
 }
 
 @media screen and breakpoint-sm {
-  .link_details > .link_title {
+  .details > .link_title {
     font-size: 1.2em;
   }
 }
 
-.link_details > p {
+.details > p {
   width: 100%;
   white-space: normal;
   line-height: 1.3em;

diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js
@@ -38,5 +38,45 @@ storiesOfContentElement(module, {
         open_in_new_tab: '0'
       }
     ]
-  }
+  },
+  variants: [
+    {
+      name: 'With inverted content colors',
+      configuration: {
+        variant: 'cards-inverted'
+      },
+      themeOptions: {
+        properties: {
+          'externalLinkList-cards-inverted': {
+            darkContentSurfaceColor: 'var(--root-light-content-surface-color)',
+            lightContentSurfaceColor: 'var(--root-dark-content-surface-color)',
+            darkContentTextColor: 'var(--root-light-content-text-color)',
+            lightContentTextColor: 'var(--root-dark-content-text-color)'
+          }
+        }
+      }
+    },
+    {
+      name: 'With transparent background',
+      configuration: {
+        variant: 'cards-inverted'
+      },
+      sectionConfiguration: {
+        backdrop: {
+          image: filePermaId('imageFiles', 'turtle')
+        }
+      },
+      inlineFileRightsWidgetTypeName: 'textInlineFileRights',
+      themeOptions: {
+        properties: {
+          'externalLinkList-cards-inverted': {
+            externalLinksCardSurfaceColor: 'transparent',
+            externalLinksCardTextColor: 'var(--content-text-color)',
+            externalLinksCardPaddingInline: '0'
+          }
+        }
+      }
+    }
+  ],
+  inlineFileRights: true
 });
diff --git a/entry_types/scrolled/package/src/frontend/InlineFileRights.module.css b/entry_types/scrolled/package/src/frontend/InlineFileRights.module.css
@@ -5,7 +5,3 @@
   margin: 0;
   list-style: none;
 }
-
-.list > li {
-  white-space: nowrap;
-}
diff --git a/...y_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.module.css b/...y_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.module.css
@@ -87,6 +87,10 @@
   text-decoration-color: rgba(255, 255, 255, 0.3);
 }
 
+.tooltip li {
+  white-space: nowrap;
+}
+
 .tooltip span {
   color: rgba(255, 255, 255, 0.7);
 }