From 00948da58d1dd879d86d2fe44c0e68cecd169daa Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Fri, 7 Jun 2024 07:45:20 +0200 Subject: [PATCH 1/3] Display inline file rights in external links REDMINE-20744 --- .../editor/SidebarEditLinkView.js | 4 ++- .../externalLinkList/frontend/ExternalLink.js | 26 ++++++++++++++----- .../frontend/ExternalLink.module.css | 23 +++++++++++----- 3 files changed, 39 insertions(+), 14 deletions(-) diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/SidebarEditLinkView.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/SidebarEditLinkView.js index ed79446f8a..bccc958679 100644 --- a/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/SidebarEditLinkView.js +++ b/entry_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 index 3caf54da25..07b6acbd83 100644 --- 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) { + - -
-

{props.title}

-

{props.description}

+
+ +
+

{props.title}

+

{props.description}

+
- {renderNewTabTooltip()} ); 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 index 8543fe57cf..da92eddafc 100644 --- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css +++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css @@ -42,30 +42,41 @@ position: relative; } -.link_details { +.background { flex: 1; - padding: 20px; color: darkContentTextColor; + --content-text-color: darkContentTextColor; background-color: lightContentSurfaceColor; + padding-left: 5px; + padding-right: 5px; } -.invert > .link_details { +.details { + padding: 15px 15px 20px; +} + +.details:first-child { + padding-top: 20px; +} + +.invert > .background { background-color: darkContentSurfaceColor; color: lightContentTextColor; + --content-text-color: lightContentTextColor; } -.link_details > .link_title { +.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; From 751c51d345b4b2a287282e20e62afedd1470c019 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Fri, 7 Jun 2024 07:45:53 +0200 Subject: [PATCH 2/3] Let text inline file rights wrap Long rights strings need to wrap inside external link items. REDMINE-20744 --- .../scrolled/package/src/frontend/InlineFileRights.module.css | 4 ---- .../iconInlineFileRights/IconInlineFileRights.module.css | 4 ++++ 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/entry_types/scrolled/package/src/frontend/InlineFileRights.module.css b/entry_types/scrolled/package/src/frontend/InlineFileRights.module.css index 3616b3472c..5d70b78197 100644 --- 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/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.module.css b/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.module.css index 2e2a22ac89..6605a12f89 100644 --- a/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.module.css +++ b/entry_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); } From 2602bbc8cee93cafac31e15d8c0737dd8f4d61cf Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Fri, 7 Jun 2024 10:44:31 +0200 Subject: [PATCH 3/3] Add external links variant with transparent cards Remove spacing around card text. Skip transform on hover. REDMINE-20744 --- .../scrolled/package/spec/support/stories.js | 11 +++-- .../frontend/ExternalLink.module.css | 24 ++++++----- .../externalLinkList/stories.js | 42 ++++++++++++++++++- 3 files changed, 63 insertions(+), 14 deletions(-) diff --git a/entry_types/scrolled/package/spec/support/stories.js b/entry_types/scrolled/package/spec/support/stories.js index 120dd82c2e..cb64853a74 100644 --- 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/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css index da92eddafc..26fce8addf 100644 --- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css +++ b/entry_types/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 { @@ -43,16 +43,20 @@ } .background { + --padding-inline: var(--theme-external-links-card-padding-inline, 15px); flex: 1; - color: darkContentTextColor; - --content-text-color: darkContentTextColor; - background-color: lightContentSurfaceColor; - padding-left: 5px; - padding-right: 5px; + 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); } .details { - padding: 15px 15px 20px; + padding-top: 15px; + padding-bottom: 20px; + padding-left: calc(var(--padding-inline) - 5px); + padding-right: calc(var(--padding-inline) - 5px); } .details:first-child { @@ -60,9 +64,9 @@ } .invert > .background { - background-color: darkContentSurfaceColor; - color: lightContentTextColor; - --content-text-color: lightContentTextColor; + 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 { diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js index fe2d13daf0..3f510de980 100644 --- 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 });