Merge pull request #2224 from tf/teaser-text-align

Allow changing text alignment in teaser links

Author: tf

entry_types/scrolled/config/locales/new/ext-link-options.de.yml

@@ -68,6 +68,13 @@ de:
                 small: Klein
                 medium: Mittel
                 large: Groß
+            textAlign:
+                label: Textausrichtung
+                inline_help: Ausrichtung des Texts innerhalb der Links.
+                values:
+                  left: Links
+                  center: Zentriert
+                  right: Rechts
             displayButtons:
               label: "Buttons anzeigen"
               inline_help: |-

entry_types/scrolled/config/locales/new/ext-link-options.en.yml

@@ -66,6 +66,13 @@ en:
                 small: Small
                 medium: Medium
                 large: Large
+            textAlign:
+              label: Text alignment
+              inline_help: Align the text in the links.
+              values:
+                left: Left
+                center: Center
+                right: Right
             displayButtons:
               label: "Display buttons"
               inline_help: |-

entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js

@@ -81,6 +81,9 @@ editor.contentElementTypes.register('externalLinkList', {
       this.input('textSize', SelectInputView, {
         values: ['small', 'medium', 'large']
       });
+      this.input('textAlign', SelectInputView, {
+        values: ['left', 'right', 'center']
+      });
       this.input('displayButtons', CheckBoxInputView);
     });
   }

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js

@@ -114,6 +114,7 @@ export function ExternalLink({id, configuration, ...props}) {
             </Thumbnail>
           </div>
           <div className={classNames(styles.background,
+                                     styles[`align-${configuration.textAlign}`],
                                      props.darkBackground ? styles.light : styles.dark)}
                style={{pointerEvents: !isEditable || isSelected ? undefined : 'none'}}>
             <InlineFileRights context="afterElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
@@ -137,7 +138,8 @@ export function ExternalLink({id, configuration, ...props}) {
                                onChange={value => handleTextChange('description', value)} />
                </div>}
               {configuration.displayButtons && presentOrEditing('link') &&
-               <LinkButton href={href}
+               <LinkButton className={styles.link}
+                           href={href}
                            openInNewTab={openInNewTab}
                            value={itemTexts[id]?.link}
                            linkPreviewDisabled={true}

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css

@@ -108,6 +108,7 @@
   position: absolute;
   bottom: 0;
   width: 100%;
+  box-sizing: border-box;
   background: transparent;
   z-index: 1;
 }
@@ -149,3 +150,15 @@
 .textPosition-overlay .title:last-child {
   margin-bottom: 0;
 }
+
+.link {
+  margin-bottom: -5px;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-right {
+  text-align: right;
+}

entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js

@@ -98,6 +98,12 @@ storiesOfContentElement(module, {
         textSize: 'large',
       }
     },
+    {
+      name: 'With text alignment',
+      configuration: {
+        textAlign: 'center',
+      }
+    },
     {
       name: 'With inverted content colors',
       configuration: {

entry_types/scrolled/package/src/frontend/LinkButton.module.css

@@ -11,8 +11,9 @@
 }
 
 .button {
-  display: flex;
-  width: var(--theme-link-button-width);
+  display: inline-flex;
+  min-width: var(--theme-link-button-width, 100%);
+  box-sizing: border-box;
   justify-content: center;
   gap: 0.5em;
   border-radius: var(--theme-link-button-border-radius, 5px);