Commit 3d4662e2 authored by David Steeb's avatar David Steeb
Browse files

[TASK] Add EXT:form

Add extension form, add custom styling, templates, and configuration, remove finishers not to be used, remove field types not to be shown in demo projects.
parent 90328d45
<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<formvh:renderRenderable renderable="{element}">
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
<f:form.textfield
type="number"
property="{element.identifier}"
id="{element.uniqueIdentifier}"
class="b_form__text b_form__text--number {element.properties.elementClassAttribute}"
errorClass="{element.properties.elementErrorClassAttribute}"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
</f:render>
</formvh:renderRenderable>
</html>
<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<formvh:renderRenderable renderable="{element}">
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
<f:form.password
property="{element.identifier}"
id="{element.uniqueIdentifier}"
class="b_form__text b_form__text--password {element.properties.elementClassAttribute}"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
errorClass="{element.properties.elementErrorClassAttribute}"
/>
</f:render>
</formvh:renderRenderable>
</html>
<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<formvh:renderRenderable renderable="{element}">
<f:render partial="Field/Field" arguments="{element: element, doNotShowLabel: 0}" contentAs="elementContent">
<f:for each="{element.properties.options}" as="label" key="value" iteration="idIterator">
<f:form.radio
property="{element.identifier}"
id="{element.uniqueIdentifier}-{idIterator.index}"
class="b_form__radio {element.properties.elementClassAttribute}"
value="{value}"
errorClass="{element.properties.elementErrorClassAttribute}"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
<label class="b_form__label b_form__label--radio" for="{element.uniqueIdentifier}-{idIterator.index}">
<span>{formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')}</span>
</label>
</f:for>
</f:render>
</formvh:renderRenderable>
</html>
<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<formvh:renderRenderable renderable="{element}">
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
<f:if condition="{element.properties.prependOptionLabel}">
<f:then>
<f:form.select
property="{element.identifier}"
id="{element.uniqueIdentifier}"
options="{formvh:translateElementProperty(element: element, property: 'options')}"
class="b_form__select {element.properties.elementClassAttribute}"
errorClass="{element.properties.elementErrorClassAttribute}"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
prependOptionLabel="{formvh:translateElementProperty(element: element, property: 'prependOptionLabel')}"
prependOptionValue="{formvh:translateElementProperty(element: element, property: 'prependOptionValue')}"
/>
</f:then>
<f:else>
<f:form.select
property="{element.identifier}"
id="{element.uniqueIdentifier}"
options="{formvh:translateElementProperty(element: element, property: 'options')}"
class="b_form__select {element.properties.elementClassAttribute}"
errorClass="{element.properties.elementErrorClassAttribute}"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
</f:else>
</f:if>
</f:render>
</formvh:renderRenderable>
</html>
<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<formvh:renderRenderable renderable="{element}">
<div class="b_form__group b_form__group--static-text">
<f:if condition="{element.label}">
<p class="b_form__static-text-header">{formvh:translateElementProperty(element: element, property: 'label')}</p>
</f:if>
<f:if condition="{element.properties.text}">
<p class="b_form__static-text-text{f:if(condition: element.properties.elementClassAttribute,
then: '{element.properties.elementClassAttribute}')}">{formvh:translateElementProperty(element: element,
property: 'text') -> f:format.nl2br()}</p>
</f:if>
</div>
</formvh:renderRenderable>
</html>
<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<formvh:renderRenderable renderable="{element}">
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
<f:form.textfield
type="tel"
property="{element.identifier}"
id="{element.uniqueIdentifier}"
class="b_form__text b_form__text--tel {element.properties.elementClassAttribute}"
errorClass="{element.properties.elementErrorClassAttribute}"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
</f:render>
</formvh:renderRenderable>
</html>
<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<formvh:renderRenderable renderable="{element}">
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
<f:form.textfield
property="{element.identifier}"
id="{element.uniqueIdentifier}"
class="b_form__text {element.properties.elementClassAttribute}"
errorClass="{element.properties.elementErrorClassAttribute}"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
</f:render>
</formvh:renderRenderable>
</html>
<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<formvh:renderRenderable renderable="{element}">
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
<f:form.textarea
property="{element.identifier}"
id="{element.uniqueIdentifier}"
class="b_form__textarea {element.properties.elementClassAttribute}"
rows="{element.properties.rows}"
cols="{element.properties.cols}"
errorClass="{element.properties.elementErrorClassAttribute}"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
</f:render>
</formvh:renderRenderable>
</html>
<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<formvh:renderRenderable renderable="{element}">
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
<f:form.textfield
type="url"
property="{element.identifier}"
id="{element.uniqueIdentifier}"
class="b_form__text b_form__text--url {element.properties.elementClassAttribute}"
errorClass="{element.properties.elementErrorClassAttribute}"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
</f:render>
</formvh:renderRenderable>
</html>
<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<f:asset.css identifier="forms" href="EXT:site_t3demo/Resources/Public/Css/form.css" />
<formvh:renderRenderable renderable="{form}">
<formvh:form
class="b_form"
object="{form}"
action="{form.renderingOptions.controllerAction}"
method="{form.renderingOptions.httpMethod}"
id="{form.identifier}"
section="{form.identifier}"
enctype="{form.renderingOptions.httpEnctype}"
addQueryString="{form.renderingOptions.addQueryString}"
argumentsToBeExcludedFromQueryString="{form.renderingOptions.argumentsToBeExcludedFromQueryString}"
additionalParams="{form.renderingOptions.additionalParams}"
additionalAttributes="{formvh:translateElementProperty(element: form, property: 'fluidAdditionalAttributes')}"
>
<f:render partial="{form.currentPage.templateName}" arguments="{page: form.currentPage}" />
<f:render partial="Form/Navigation" arguments="{form: form}" />
</formvh:form>
</formvh:renderRenderable>
</html>
......@@ -57,6 +57,12 @@ p {
margin: $paragraph-margin-sm 0;
}
button {
font-size: 16px;
cursor: pointer;
font-family: $font-light;
}
strong, b {
font-family: $font-regular;
}
......
.b_form {
$self: &;
--border-color: #{$color-gray-light};
--checkbox-border-color: #{$color-black};
&__fieldset {
margin: 30px 0 60px;
padding: 0;
border: 0;
}
&__legend {
font-size: 18px;
text-transform: uppercase;
margin: 20px 0 15px;
padding: 0;
}
&__group {
margin: 16px 0;
&--has-error {
--border-color: #{$color-error};
--checkbox-border-color: #{$color-error};
}
&--navigation {
margin: 30px 0 60px;
}
}
&__label {
// margin-bottom: 5px;
// display: block;
display: inline-block;
// font-size: 16px;
}
&__required {
}
&__error {
color: $color-error;
line-height: 1;
margin-bottom: 5px;
font-size: 12px;
}
&__field {
margin-top: 5px;
}
&__button {
& + & {
margin-inline-start: 20px;
}
}
&__field-help {
//text-transform: uppercase;
font-size: 14px;
margin-top: 5px;
display: block;
#{$self}__label ~ & {
margin-top: -8px;
}
}
&__static-text {
}
&__static-text-header {
font-weight: bold;
}
&__text,
&__select {
width: 100%;
// border: 1px solid $color-gray-light;
border: 1px solid var(--border-color);
border-radius: 10px;
font-size: 18px;
background: $color-white;
max-width: 100%;
box-sizing: border-box;
padding: 12px;
height: 48px;
font-family: inherit;
&::placeholder {
color: $color-gray-light;
}
&:focus {
outline: none;
}
}
&__text {
line-height: 48px;
&--password {}
&--date {}
&--email {}
&--number {}
}
&__select {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
// this is the SVG we have in our Resources folder *except* with added with to
// allow for consistent positioning (48px instead of 24px)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0,0H24V24H0Z' fill='none'/%3E%3Cpath d='M18,15,12,9,6,15H18' transform='translate(24 26) rotate(180)' fill='none' stroke='%232f292c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: right center;
}
&__textarea {
width: 100%;
border: 1px solid var(--border-color);
border-radius: 10px;
font-size: 18px;
background: $color-white;
max-width: 100%;
box-sizing: border-box;
padding: 12px;
height: 148px;
font-family: inherit;
&::placeholder {
color: $color-gray-light;
}
&:focus {
outline: none;
}
}
/* checkbox and radios */
&__checkbox,
&__radio {
display: none;
}
&__label--checkbox,
&__label--radio {
padding-left: 45px;
position: relative;
display: block;
margin: 8px 0;
min-height: 40px;
}
&__label--checkbox:before,
&__label--radio:before {
width: 32px;
height: 32px;
content: "";
position: absolute;
left: 0;
top: -5px;
border-radius: 8px;
background: $color-white;
border: 1px solid var(--checkbox-border-color);
}
&__label--checkbox:before {
#{$self}__checkbox:checked + & {
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0,0H24V24H0Z' fill='none'/%3E%3Cpath d='M5,12l5,5L20,7' fill='none' stroke='%232f292c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: center;
}
}
&__label--radio:before {
border-radius: 32px;
}
&__label--radio:before {
#{$self}__radio:checked + & {
border-width: 9px;
width: 18px;
height: 18px;
}
}
}
@mixin form-md {
.b_form__row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 30px;
}
}
......@@ -17,6 +17,8 @@ $color-bg-warm: #FCFAF2;
$color-bg-cold: #F8FAFC;
$color-bg-default: #F2F2F2;
$color-error: $color-primary;
$typo3universe-background: #313131;
$typo3universe-button-background: $color-gray-light;
$typo3universe-hover-background: $color-gray-dark;
......
@import "variables";
@import "Mixins/media";
@import "_form";
@include media(md) {
@include form-md;
}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0,0H24V24H0Z" fill="none"/>
<path d="M5,12l5,5L20,7" fill="none" stroke="#2f292c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0,0H24V24H0Z" fill="none"/>
<path d="M18,15,12,9,6,15H18" transform="translate(24 26) rotate(180)" fill="none" stroke="#2f292c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</svg>
......@@ -13,6 +13,7 @@ module.exports = {
[`${relCssPath}/main.css`]: `${relScssPath}/main.scss`,
[`${relCssPath}/faqlist.css`]: `${relScssPath}/faqlist.scss`,
[`${relCssPath}/login.css`]: `${relScssPath}/login.scss`,
[`${relCssPath}/form.css`]: `${relScssPath}/form.scss`,
[`${relCssPath}/../Backend/Css/be_rte.css`]: `${relScssPath}/be_rte.scss`,
[`${relCssPath}/../Backend/Css/Skin/t3skin_override.css`]: `${relScssPath}/t3skin_override.scss`
},
......
......@@ -19,6 +19,7 @@
"build-dev": "yarn build-scss && yarn build-webpack-dev",
"build-prod": "yarn build-scss && yarn build-webpack-prod",
"watch-main-css": "./node_modules/node-sass/bin/node-sass -w ../extensions/site_t3demo/Resources/Private/Scss/main.scss -o ../extensions/site_t3demo/Resources/Public/Css/",
"watch-form-css": "./node_modules/node-sass/bin/node-sass -w ../extensions/site_t3demo/Resources/Private/Scss/form.scss -o ../extensions/site_t3demo/Resources/Public/Css/",
"hmr": "webpack-dev-server --public 127.0.0.1:8080 --watch-poll --mode development --config config/webpack.config.hmr.js --env site_t3demo"
},
"browserslist": [
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment