Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
src/extensions/site_t3demo/Resources/Private/Plugins/Form/Partials/Number.html 0 → 100644
View file @ 3d4662e2
<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>
src/extensions/site_t3demo/Resources/Private/Plugins/Form/Partials/Password.html 0 → 100644
View file @ 3d4662e2
<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>
src/extensions/site_t3demo/Resources/Private/Plugins/Form/Partials/RadioButton.html 0 → 100644
View file @ 3d4662e2
<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>
src/extensions/site_t3demo/Resources/Private/Plugins/Form/Partials/SingleSelect.html 0 → 100644
View file @ 3d4662e2
<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>
src/extensions/site_t3demo/Resources/Private/Plugins/Form/Partials/StaticText.html 0 → 100644
View file @ 3d4662e2
<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>
src/extensions/site_t3demo/Resources/Private/Plugins/Form/Partials/Telephone.html 0 → 100644
View file @ 3d4662e2
<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>
src/extensions/site_t3demo/Resources/Private/Plugins/Form/Partials/Text.html 0 → 100644
View file @ 3d4662e2
<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>
src/extensions/site_t3demo/Resources/Private/Plugins/Form/Partials/Textarea.html 0 → 100644
View file @ 3d4662e2
<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>
src/extensions/site_t3demo/Resources/Private/Plugins/Form/Partials/Url.html 0 → 100644
View file @ 3d4662e2
<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>
src/extensions/site_t3demo/Resources/Private/Plugins/Form/Templates/Form.html 0 → 100644
View file @ 3d4662e2
<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>
src/extensions/site_t3demo/Resources/Private/Scss/_base.scss
View file @ 3d4662e2
......@@ -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;
}
......
src/extensions/site_t3demo/Resources/Private/Scss/_form.scss 0 → 100644
View file @ 3d4662e2
.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;
}
}
src/extensions/site_t3demo/Resources/Private/Scss/_variables.scss
View file @ 3d4662e2
......@@ -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;
......
src/extensions/site_t3demo/Resources/Private/Scss/form.scss 0 → 100644
View file @ 3d4662e2
@import "variables";
@import "Mixins/media";
@import "_form";
@include media(md) {
@include form-md;
}
src/extensions/site_t3demo/Resources/Public/Assets/SVGs/check.svg 0 → 100644
View file @ 3d4662e2
<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>
src/extensions/site_t3demo/Resources/Public/Assets/SVGs/more.svg 0 → 100644
View file @ 3d4662e2
<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>
src/webpack/config/site_t3demo.js
View file @ 3d4662e2
......@@ -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`
},
......
src/webpack/package.json
View file @ 3d4662e2
......@@ -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": [
......
Markdown is supported
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