Updates
This commit is contained in:
orasche committed
1 parent
48da8bccd8
commit
8d3ac08a37
22 files changed
+1127
-350
No files matched your search
@@ -19,5 +19,11 @@ fields:
|
||||
value: light
|
||||
- label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:button_style.items.dark.label'
|
||||
value: dark
|
||||
- label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:button_style.items.transparent_white_outline.label'
|
||||
value: transparent_white_outline
|
||||
- label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:button_style.items.transparent_black_outline.label'
|
||||
value: transparent_black_outline
|
||||
- label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:button_style.items.transparent_red_outline.label'
|
||||
value: transparent_red_outline
|
||||
- label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:button_style.items.text_only.label'
|
||||
value: text_only
|
||||
@@ -19,5 +19,11 @@ fields:
|
||||
value: light
|
||||
- label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:secondary_button_style.items.dark.label'
|
||||
value: dark
|
||||
- label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:secondary_button_style.items.transparent_white_outline.label'
|
||||
value: transparent_white_outline
|
||||
- label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:secondary_button_style.items.transparent_black_outline.label'
|
||||
value: transparent_black_outline
|
||||
- label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:secondary_button_style.items.transparent_red_outline.label'
|
||||
value: transparent_red_outline
|
||||
- label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:secondary_button_style.items.text_only.label'
|
||||
value: text_only
|
||||
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<rect x="1.5" y="3.5" width="13" height="9" rx="1" fill="none" stroke="#000" stroke-width="1.2"/>
|
||||
<rect x="8" y="4.7" width="5.3" height="6.6" rx="0.3" fill="#000" opacity="0.5"/>
|
||||
<rect x="3" y="5.4" width="4" height="1" rx="0.2" fill="#000" opacity="0.55"/>
|
||||
<rect x="3" y="7.1" width="3.2" height="0.8" rx="0.2" fill="#000" opacity="0.35"/>
|
||||
<rect x="3" y="8.6" width="4" height="0.8" rx="0.2" fill="#000" opacity="0.35"/>
|
||||
<rect x="3" y="10.2" width="2.6" height="1.2" rx="0.3" fill="#000" opacity="0.6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 609 B |
@@ -0,0 +1,129 @@
|
||||
name: vitec/featured-content
|
||||
group: vitec_custom_components
|
||||
prefixFields: true
|
||||
prefixType: vendor
|
||||
|
||||
fields:
|
||||
# ──────────────────────────────────────────────────────────────────────
|
||||
- identifier: tab_content
|
||||
type: Tab
|
||||
label: Content
|
||||
|
||||
- identifier: header_section
|
||||
type: Palette
|
||||
label: Header
|
||||
fields:
|
||||
- identifier: header
|
||||
useExistingField: true
|
||||
required: true
|
||||
- type: Linebreak
|
||||
- identifier: header_layout
|
||||
useExistingField: true
|
||||
- identifier: header_position
|
||||
useExistingField: true
|
||||
- identifier: date
|
||||
useExistingField: true
|
||||
- type: Linebreak
|
||||
- identifier: header_link
|
||||
useExistingField: true
|
||||
- type: Linebreak
|
||||
- identifier: subheader
|
||||
useExistingField: true
|
||||
|
||||
- identifier: bodytext
|
||||
useExistingField: true
|
||||
enableRichtext: true
|
||||
|
||||
- identifier: cta
|
||||
type: Link
|
||||
allowedTypes:
|
||||
- page
|
||||
- url
|
||||
- file
|
||||
- email
|
||||
|
||||
- identifier: cta_label
|
||||
type: Text
|
||||
default: 'Learn more'
|
||||
max: 30
|
||||
|
||||
- identifier: Vitec/ButtonStyle
|
||||
type: Basic
|
||||
|
||||
- identifier: featured_layout
|
||||
type: Select
|
||||
renderType: selectSingle
|
||||
default: text_left
|
||||
items:
|
||||
- label: Text left, media right
|
||||
value: text_left
|
||||
- label: Text right, media left
|
||||
value: text_right
|
||||
|
||||
# ──────────────────────────────────────────────────────────────────────
|
||||
- identifier: tab_media
|
||||
type: Tab
|
||||
label: Media
|
||||
|
||||
- identifier: featured_image
|
||||
type: File
|
||||
minitems: 0
|
||||
maxitems: 1
|
||||
allowed: common-image-types
|
||||
extendedPalette: true
|
||||
|
||||
- identifier: featured_video
|
||||
type: File
|
||||
minitems: 0
|
||||
maxitems: 1
|
||||
allowed: mp4,webm,ogv,mov,m4v
|
||||
|
||||
- identifier: featured_video_autoplay
|
||||
type: Checkbox
|
||||
default: 0
|
||||
|
||||
- identifier: featured_video_loop
|
||||
type: Checkbox
|
||||
default: 0
|
||||
|
||||
- identifier: featured_video_muted
|
||||
type: Checkbox
|
||||
default: 1
|
||||
|
||||
# ──────────────────────────────────────────────────────────────────────
|
||||
- identifier: tab_overlay
|
||||
type: Tab
|
||||
label: Overlay
|
||||
|
||||
- identifier: overlay_color
|
||||
type: Color
|
||||
valuePicker:
|
||||
items:
|
||||
- label: 'VITEC Blue'
|
||||
value: '#26358C'
|
||||
|
||||
- identifier: overlay_opacity
|
||||
type: Number
|
||||
format: decimal
|
||||
default: 0.4
|
||||
range:
|
||||
lower: 0
|
||||
upper: 1
|
||||
slider:
|
||||
step: 0.05
|
||||
width: 200
|
||||
|
||||
# Horizontal position, not a vertical one: this element is wide rather than
|
||||
# tall, so the overlay runs across the width. 0 = gradient starts at the very
|
||||
# left edge (overlay covers everything from there), 100 = it starts at the
|
||||
# right edge. Which side is covered follows featured_layout, so the text side
|
||||
# stays readable.
|
||||
- identifier: overlay_gradient_start
|
||||
type: Number
|
||||
default: 50
|
||||
range:
|
||||
lower: 0
|
||||
upper: 100
|
||||
slider:
|
||||
step: 1
|
||||
width: 300
|
||||
@@ -0,0 +1,88 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<xliff version="1.2">
|
||||
<file source-language="en" datatype="plaintext" original="messages">
|
||||
<body>
|
||||
<!-- Element -->
|
||||
<trans-unit id="title">
|
||||
<source>VITEC · Featured Content</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="description">
|
||||
<source>Wide feature block: headline + RTE text + CTA next to an image or video, with a horizontal overlay gradient.</source>
|
||||
</trans-unit>
|
||||
|
||||
<!-- Tabs -->
|
||||
<trans-unit id="tab_content.label">
|
||||
<source>Content</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="tab_media.label">
|
||||
<source>Media</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="tab_overlay.label">
|
||||
<source>Overlay</source>
|
||||
</trans-unit>
|
||||
|
||||
<!-- Content -->
|
||||
<trans-unit id="cta.label">
|
||||
<source>CTA Link</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="cta_label.label">
|
||||
<source>CTA Button Text</source>
|
||||
</trans-unit>
|
||||
|
||||
<trans-unit id="featured_layout.label">
|
||||
<source>Layout</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="featured_layout.description">
|
||||
<source>Which side the text sits on. The media fills the other side.</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="featured_layout.items.text_left.label">
|
||||
<source>Text left, media right</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="featured_layout.items.text_right.label">
|
||||
<source>Text right, media left</source>
|
||||
</trans-unit>
|
||||
|
||||
<!-- Media -->
|
||||
<trans-unit id="featured_image.label">
|
||||
<source>Image</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="featured_video.label">
|
||||
<source>Video</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="featured_video.description">
|
||||
<source>If both image and video are set, the video wins and the image serves as its poster.</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="featured_video_autoplay.label">
|
||||
<source>Autoplay video</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="featured_video_loop.label">
|
||||
<source>Loop video</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="featured_video_muted.label">
|
||||
<source>Mute video</source>
|
||||
</trans-unit>
|
||||
|
||||
<!-- Overlay -->
|
||||
<trans-unit id="overlay_color.label">
|
||||
<source>Overlay Colour</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="overlay_color.description">
|
||||
<source>Colour of the gradient laid over the image or video. Leave empty for no overlay.</source>
|
||||
</trans-unit>
|
||||
|
||||
<trans-unit id="overlay_opacity.label">
|
||||
<source>Overlay Opacity (0–1)</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="overlay_opacity.description">
|
||||
<source>Strength of the overlay at its fully covered end.</source>
|
||||
</trans-unit>
|
||||
|
||||
<trans-unit id="overlay_gradient_start.label">
|
||||
<source>Gradient Start (% of width)</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="overlay_gradient_start.description">
|
||||
<source>Where across the width the overlay begins to fade out. 0 = fades out right at the text edge, 100 = the overlay covers the full width. The fade always runs away from the text side, so the text stays readable.</source>
|
||||
</trans-unit>
|
||||
</body>
|
||||
</file>
|
||||
</xliff>
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||
<f:layout name="Preview"/>
|
||||
<f:section name="Content">
|
||||
|
||||
<f:asset.css identifier="vitec-backend-preview" href="EXT:vitec/Resources/Public/Css/backend-preview.css"/>
|
||||
|
||||
<div class="vitec-preview">
|
||||
|
||||
<f:comment>Thumbnail: video poster falls back to the image</f:comment>
|
||||
<f:if condition="{data.featured_image.0}">
|
||||
<f:then>
|
||||
<f:image image="{data.featured_image.0}"
|
||||
class="vitec-preview__thumb"
|
||||
width="120c"
|
||||
height="80c"
|
||||
alt="Featured Content Preview"/>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="vitec-preview__thumb-placeholder">No Image</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
|
||||
<div class="vitec-preview__body">
|
||||
<div class="vitec-preview__label">VITEC · Featured Content</div>
|
||||
|
||||
<h3 class="vitec-preview__headline">
|
||||
<f:if condition="{data.header}">
|
||||
<f:then>{data.header}</f:then>
|
||||
<f:else>
|
||||
<em style="color:#c00;">⚠ Headline missing</em>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</h3>
|
||||
|
||||
<f:if condition="{data.subheader}">
|
||||
<div class="vitec-preview__subline">{data.subheader}</div>
|
||||
</f:if>
|
||||
|
||||
<f:if condition="{data.bodytext}">
|
||||
<div class="vitec-preview__body-text">
|
||||
<f:format.stripTags>{data.bodytext}</f:format.stripTags>
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
<f:if condition="{data.cta_label}">
|
||||
<div class="vitec-preview__ctas">
|
||||
<span class="vitec-preview__cta-btn">{data.cta_label} →</span>
|
||||
</div>
|
||||
</f:if>
|
||||
</div>
|
||||
|
||||
<div class="vitec-preview__settings">
|
||||
|
||||
<span class="vitec-badge">
|
||||
<f:switch expression="{data.featured_layout}">
|
||||
<f:case value="text_left">◧ Text left</f:case>
|
||||
<f:case value="text_right">◨ Text right</f:case>
|
||||
<f:defaultCase>{data.featured_layout}</f:defaultCase>
|
||||
</f:switch>
|
||||
</span>
|
||||
|
||||
<f:if condition="{data.featured_video.0}">
|
||||
<span class="vitec-badge">▶ Video</span>
|
||||
</f:if>
|
||||
|
||||
<f:comment>
|
||||
The preview cannot paint the styles, so the chosen one is named.
|
||||
Same reasoning as in the hero section.
|
||||
</f:comment>
|
||||
<f:if condition="{data.cta_label}">
|
||||
<span class="vitec-badge">Button: {data.button_style}</span>
|
||||
</f:if>
|
||||
|
||||
<f:if condition="{data.overlay_color}">
|
||||
<span class="vitec-badge">
|
||||
Overlay: {data.overlay_color} · {data.overlay_opacity} · from {data.overlay_gradient_start}%
|
||||
</span>
|
||||
</f:if>
|
||||
|
||||
<f:if condition="{data.cta_label} && {data.cta.url} == ''">
|
||||
<span class="vitec-badge vitec-badge--warning">⚠ Button text without link</span>
|
||||
</f:if>
|
||||
|
||||
<f:if condition="{data.featured_image.0} == '' && {data.featured_video.0} == ''">
|
||||
<span class="vitec-badge vitec-badge--warning">⚠ No image or video</span>
|
||||
</f:if>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</f:section>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||
<!-- Headless mode: JSON is built by nb-headless-content-blocks -->
|
||||
</html>
|
||||
@@ -51,9 +51,24 @@ fields:
|
||||
default: 'Learn more'
|
||||
max: 30
|
||||
|
||||
- identifier: secondary_cta
|
||||
type: Link
|
||||
allowedTypes:
|
||||
- page
|
||||
- url
|
||||
- file
|
||||
- email
|
||||
|
||||
- identifier: secondary_cta_label
|
||||
type: Text
|
||||
max: 30
|
||||
|
||||
- identifier: Vitec/ButtonStyle
|
||||
type: Basic
|
||||
|
||||
- identifier: Vitec/SecondaryButtonStyle
|
||||
type: Basic
|
||||
|
||||
- identifier: hero_layout_variant
|
||||
type: Select
|
||||
renderType: selectSingle
|
||||
|
||||
@@ -26,6 +26,17 @@
|
||||
<source>CTA Button Text</source>
|
||||
</trans-unit>
|
||||
|
||||
<trans-unit id="secondary_cta.label">
|
||||
<source>Second CTA Link (optional)</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="secondary_cta.description">
|
||||
<source>Leave empty for a single button. With both link and label filled, the two buttons render side by side.</source>
|
||||
</trans-unit>
|
||||
|
||||
<trans-unit id="secondary_cta_label.label">
|
||||
<source>Second CTA Button Text</source>
|
||||
</trans-unit>
|
||||
|
||||
<trans-unit id="hero_image.label">
|
||||
<source>Hero Image</source>
|
||||
</trans-unit>
|
||||
|
||||
+28
-2
@@ -46,9 +46,14 @@
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
<f:if condition="{data.cta_label}">
|
||||
<f:if condition="{data.cta_label} || {data.secondary_cta_label}">
|
||||
<div class="vitec-preview__ctas">
|
||||
<span class="vitec-preview__cta-btn">{data.cta_label} →</span>
|
||||
<f:if condition="{data.cta_label}">
|
||||
<span class="vitec-preview__cta-btn">{data.cta_label} →</span>
|
||||
</f:if>
|
||||
<f:if condition="{data.secondary_cta_label}">
|
||||
<span class="vitec-preview__cta-btn vitec-preview__cta-btn--secondary">{data.secondary_cta_label} →</span>
|
||||
</f:if>
|
||||
</div>
|
||||
</f:if>
|
||||
</div>
|
||||
@@ -60,6 +65,27 @@
|
||||
Background: {data.background_variant}
|
||||
</span>
|
||||
|
||||
<f:comment>
|
||||
The preview has no per-style colours, so the chosen styles are named
|
||||
instead of painted — otherwise "Transparent White Outline" would be
|
||||
indistinguishable from the default orange here.
|
||||
</f:comment>
|
||||
<f:if condition="{data.cta_label}">
|
||||
<span class="vitec-badge">Button: {data.button_style}</span>
|
||||
</f:if>
|
||||
|
||||
<f:if condition="{data.secondary_cta_label}">
|
||||
<span class="vitec-badge">2nd Button: {data.secondary_button_style}</span>
|
||||
</f:if>
|
||||
|
||||
<f:if condition="{data.secondary_cta_label}">
|
||||
<f:if condition="{data.secondary_cta}">
|
||||
<f:else>
|
||||
<span class="vitec-badge vitec-badge--warning">⚠ 2nd button without link</span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:if>
|
||||
|
||||
<f:if condition="{data.show_logo_wall}">
|
||||
<span class="vitec-badge">🏢 Logo Wall</span>
|
||||
</f:if>
|
||||
|
||||
@@ -121,6 +121,29 @@ fields:
|
||||
type: Checkbox
|
||||
default: 0
|
||||
|
||||
# Background colour for the whole element. No default on purpose: empty means
|
||||
# "no background", so every existing record keeps the look it has today.
|
||||
# The presets are the VITEC palette from Resources/Public/SCSS/_vitec.scss,
|
||||
# in the same order as the button styles above so both dropdowns read alike.
|
||||
# Lower-case hex, because the native colour picker emits lower case -- an
|
||||
# upper-case preset would store the same colour under two spellings.
|
||||
- identifier: background_color
|
||||
type: Color
|
||||
valuePicker:
|
||||
items:
|
||||
- label: 'VITEC Orange'
|
||||
value: '#f47937'
|
||||
- label: 'VITEC Blue'
|
||||
value: '#26358c'
|
||||
- label: 'VITEC Graphite'
|
||||
value: '#313131'
|
||||
- label: 'VITEC Midnight'
|
||||
value: '#0d0d0d'
|
||||
- label: 'VITEC Light Grey'
|
||||
value: '#cccccc'
|
||||
- label: 'White'
|
||||
value: '#ffffff'
|
||||
|
||||
- identifier: debug
|
||||
type: Checkbox
|
||||
default: 0
|
||||
@@ -66,6 +66,14 @@
|
||||
<trans-unit id="fullwidth.label">
|
||||
<source>Render full-width (edge to edge)</source>
|
||||
</trans-unit>
|
||||
|
||||
<trans-unit id="background_color.label">
|
||||
<source>Background Colour</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="background_color.description">
|
||||
<source>Background for the whole element. Leave empty for no background. The list next to the field offers the VITEC palette; any other colour can still be picked freely.</source>
|
||||
</trans-unit>
|
||||
|
||||
<trans-unit id="debug.label">
|
||||
<source>Allow Debug Output</source>
|
||||
</trans-unit>
|
||||
|
||||
+12
@@ -60,6 +60,18 @@
|
||||
<span class="vitec-badge">↔ Full width</span>
|
||||
</f:if>
|
||||
|
||||
<f:comment>
|
||||
The dot modifiers in backend-preview.css are fixed palette classes;
|
||||
this colour is free-form, so the swatch carries the stored hex as an
|
||||
inline style. The outline keeps white visible on the light preview.
|
||||
</f:comment>
|
||||
<f:if condition="{data.background_color}">
|
||||
<span class="vitec-badge">
|
||||
<span class="vitec-badge__dot" style="background: {data.background_color}; border: 1px solid #999;"></span>
|
||||
BG: {data.background_color}
|
||||
</span>
|
||||
</f:if>
|
||||
|
||||
<f:if condition="{data.button_text} && {data.button_link.url} == ''">
|
||||
<span class="vitec-badge vitec-badge--warning">⚠ Button text without link</span>
|
||||
</f:if>
|
||||
|
||||
Reference in new issue
Block a user