Skip to content

Commit

Permalink
Add text position and sizing options to external links
Browse files Browse the repository at this point in the history 
* Larger element width -> more links side by side

* Aim to keep link width consistent across element widths

* Larger element width -> larger link widths available

* Aim to stay consistent with widths of adjacent elements (e.g. text
  block width) for "text right" variant.

* Divvy up available width in "text below" variant. Each increase of
  link width results in reduction of column number by one.

REDMINE-20852
  • Loading branch information
@tf
tf committed Nov 20, 2024
1 parent 7e2eb4b commit a9ce6bf
Show file tree
Hide file tree
Showing 11 changed files with 476 additions and 80 deletions.
49 changes: 49 additions & 0 deletions entry_types/scrolled/config/locales/new/ext-link-options.de.yml
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,63 @@
de:
pageflow:
external_links_options:
feature_name: "External Links Optionen"
pageflow_scrolled:
editor:
content_elements:
externalLinkList:
attributes:
thumbnailAspectRatio:
label: "Thumbnail Seitenverhältnis"
inline_help: |-
Bestimme die Proportion der Thumbnails. Wird der Text
neben dem Bild gezeigt, kann längerer Text dazu
führen, dass ein hochformatigeres Seitenverähltnis
gewählt wird, damit das Thumbnail die gesamte Höhe des
Links überdeckt.
values:
narrow: Landscape (4:3)
portrait: Portrait (3:4)
square: Quadratisch (1:1)
wide: Landscape (16:9)
original: Original
textPosition:
label: "Textposition"
inline_help: |-
Anordnung von Bild und Text innerhalb von Links.
values:
below: "Unter dem Bild"
right: "Rechts neben dem Bild"
title: "Nur Bild"
thumbnailSize:
label: "Thumbnail-Breite"
inline_help: |-
Anteil der Thumbnail-Breite im Verhältnis zur
Gesamtbreite des Links.
values:
small: "Klein"
medium: "Mittel"
large: "Groß"
linkWidth:
label: "Link-Breite"
inline_help: |-
Wähle eine schmalere Breite, um mehr Links
nebeneinander anzuordnen.
linkAlignment:
label: "Link-Ausrichtung"
inline_help: |-
Bestimmt die Ausrichtung in Zeilen, die nicht
vollständig mit Links gefüllt sind.
values:
spaceEvenly: Gleichmäßig verteilt
left: Links
right: Rechts
center: Mittig
textSize:
label: "Schriftgröße"
inline_help: |
Legt die Schriftgröße für Titel und Beschreibung der Links fest.
values:
small: Klein
medium: Mittel
large: Groß
48 changes: 48 additions & 0 deletions entry_types/scrolled/config/locales/new/ext-link-options.en.yml
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,62 @@
en:
pageflow:
external_links_options:
feature_name: "External Links Options"
pageflow_scrolled:
editor:
content_elements:
externalLinkList:
attributes:
thumbnailAspectRatio:
label: "Thumbnail aspect ratio"
inline_help: |-
Determine the proportions of the thumbnails. If the
text is displayed next to the image, longer text may
result in a more portrait-like aspect ratio so that
the thumbnail covers the entire height of the link.
values:
narrow: Landscape (4:3)
portrait: Portrait (3:4)
square: Square (1:1)
wide: Landscape (16:9)
original: Original
textPosition:
label: "Text position"
inline_help: |-
Arrangement of image and text within links.
values:
below: "Below image"
right: "Right from image"
title: "Image only"
thumbnailSize:
label: "Thumbnail width"
inline_help: |-
Proportion of the thumbnail width relative to the
overall width of the link.
values:
small: "Small"
medium: "Medium"
large: "Large"
linkWidth:
label: "Link width"
inline_help: |-
Choose a narrower width to arrange more links
side by side.
linkAlignment:
label: "Link alignment"
inline_help: |-
Determines the alignment in rows that are not
completely filled with links.
values:
spaceEvenly: Space evenly
left: Left
right: Right
center: Center
textSize:
label: "Text size"
inline_help: |-
Defines the font size for the title and description of the links.
values:
small: Small
medium: Medium
large: Large
1 change: 1 addition & 0 deletions entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
57 changes: 50 additions & 7 deletions entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {editor} from 'pageflow-scrolled/editor';
import {SelectInputView} from 'pageflow/ui';
import {features} from 'pageflow/frontend';
import {SelectInputView, SliderInputView, SeparatorView} from 'pageflow/ui';

import {SidebarRouter} from './SidebarRouter';
import {SidebarController} from './SidebarController';
Expand All @@ -19,20 +20,62 @@ editor.registerSideBarRouting({
editor.contentElementTypes.register('externalLinkList', {
pictogram,
category: 'links',
supportedPositions: ['inline'],
supportedPositions: ['inline', 'standAlone'],
supportedWidthRange: ['m', 'xl'],

configurationEditor({entry}) {
configurationEditor({entry, contentElement}) {
this.tab('general', function() {
this.group('ContentElementVariant', {entry});
const layout = contentElement.section.configuration.get('layout');

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.view(SeparatorView);
this.group('ContentElementPosition');
this.view(SeparatorView);
this.input('linkWidth', SliderInputView, {
displayText: value => [
'XS', 'S', 'M', 'L', 'XL', 'XXL'
][value + 2],
saveOnSlide: true,
minValue: -2,
maxValueBinding: ['width', 'textPosition'],
maxValue: ([width, textPosition]) =>
(textPosition === 'right' ?
(layout === 'center' || layout === 'centerRagged') ?
[0, 1, 2][width] :
[-1, 0, 2][width] :
[1, 1, 3][width]),
defaultValue: -1
});
this.input('linkAlignment', SelectInputView, {
values: ['spaceEvenly', 'left', 'right', 'center'],
visibleBinding: 'textPosition',
visible: textPosition => textPosition !== 'right'
});
this.input('thumbnailSize', SelectInputView, {
values: ['small', 'medium', 'large'],
visibleBinding: 'textPosition',
visibleBindingValue: 'right'
});
this.input('thumbnailAspectRatio', SelectInputView, {
values: ['wide', 'narrow', 'square', 'portrait', 'original']
});
this.input('textSize', SelectInputView, {
values: ['small', 'medium', 'large']
});
}
});
}
});
Expand Down
33 changes: 16 additions & 17 deletions entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {Thumbnail} from './Thumbnail';

export function ExternalLink(props) {
const [hideTooltip, setHideTooltip] = useState(true);
var {layout} = props.sectionProps;
const {t} = useI18n({locale: 'ui'});
const {isEditable, isSelected} = useContentElementEditorState();
const thumbnailImageFile = useFileWithInlineRights({
Expand Down Expand Up @@ -56,23 +55,27 @@ export function ExternalLink(props) {
}

return (
<a className={classNames(styles.link_item,
{
[styles.invert]: props.invert,
[styles.layout_center]:
layout === 'center' || layout === 'centerRagged'
})}
<a className={classNames(styles.item,
styles[`textPosition-${props.textPosition}`],
styles[`thumbnailSize-${props.thumbnailSize}`],
styles[`textSize-${props.textSize}`],
{[styles.invert]: props.invert})}
href={url || 'about:blank'}
title={props.textPosition === 'title' ?
[props.title, props.description].filter(Boolean).join("\n") :
null}
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}>
Expand All @@ -85,10 +88,6 @@ export function ExternalLink(props) {
);
}

ExternalLink.defaultProps = {
sectionProps: {}
};

function ensureAbsolute(url) {
if (url.match(/^(https?:)?\/\//)) {
return url;
Expand Down
Loading

0 comments on commit a9ce6bf

Please sign in to comment.