Skip to content

Commit

Permalink
fix form template structure and move submit label (#145)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-schranz @wachterjohannes
alexander-schranz authored and wachterjohannes committed Feb 26, 2018
1 parent 03fb24d commit f89b5c8
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 112 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

## 1.0.0-RC3

- BUGFIX #145 Fix form template structure and move submit label
- BUGFIX #144 Avoid normalize keys for dynamic width and ajax templates configuration
- ENHANCEMENT #143 Remove unused parameter dynamic default view
- BUGFIX #142 Render placeholder only with value and upate ChoiceTrait
Expand Down
2 changes: 1 addition & 1 deletion Resources/translations/sulu/backend.de.xlf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@
</trans-unit>
<trans-unit id="64">
<source>sulu_form.submit_label</source>
<target>Beschriftung Button Absenden</target>
<target>Beschriftung Absende Button</target>
</trans-unit>
<trans-unit id="65">
<source>sulu_form.success_text</source>
Expand Down
2 changes: 1 addition & 1 deletion Resources/translations/sulu/backend.en.xlf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@
</trans-unit>
<trans-unit id="64">
<source>sulu_form.submit_label</source>
<target>Caption Button Submit</target>
<target>Caption Submit Button</target>
</trans-unit>
<trans-unit id="65">
<source>sulu_form.success_text</source>
Expand Down
232 changes: 122 additions & 110 deletions Resources/views/forms/template.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,96 +25,90 @@
</div>
</div>
</div>

<div class="fixed-width">
<div class="grid">
<div class="grid-row m-bottom-40">
{# Section Form Fields #}
<div class="grid m-bottom-40">
<h2 class="divider m-bottom-20">
<%= translate('sulu_form.form_fields') %>
</h2>

{% set blockId = 'fields' %}

<div class="grid-row m-bottom-0">
<div class="grid-col-12">
<div class="grid-col-12 floating m-top-20">
<h2 class="divider m-bottom-20">
<%= translate('sulu_form.form_fields') %>
</h2>
<div id="text-block-header-{{ blockId }}"> {#class="text-blocks-header"#}
<div id="collapse-text-blocks-{{ blockId }}" tabindex="0" class="text-blocks-toggle-btn">
<%= translate('sulu.content.collapse.blocks') %>
</div>
<div id="expand-text-blocks-{{ blockId }}" tabindex="0" class="text-blocks-toggle-btn">
<%= translate('sulu.content.expand.blocks') %>
</div>
<div class="clear"></div>
</div>

{% set blockId = 'fields' %}
<style>
/* FIXME DropDown to big */
#form-form .grid-row.dropdown-list.dropdown-shadow.husky-select-dropdown-container.top {
max-height: 160px !important;
max-height: 70vh !important;
}
<div class="grid">
<div id="text-block-header-{{ blockId }}"> {#class="text-blocks-header"#}
<div id="collapse-text-blocks-{{ blockId }}" tabindex="0" class="text-blocks-toggle-btn">
<%= translate('sulu.content.collapse.blocks') %>
</div>
<div id="expand-text-blocks-{{ blockId }}" tabindex="0" class="text-blocks-toggle-btn">
<%= translate('sulu.content.expand.blocks') %>
</div>
<div class="clear"></div>
</div>
#form-form .grid-row.dropdown-list.dropdown-shadow.husky-select-dropdown-container {
height: auto !important;
max-height: 200px !important;
}
</style>

<style>
/* FIXME DropDown to big */
#form-form .grid-row.dropdown-list.dropdown-shadow.husky-select-dropdown-container.top {
max-height: 160px !important;
max-height: 70vh !important;
}
#form-form .grid-row.dropdown-list.dropdown-shadow.husky-select-dropdown-container {
height: auto !important;
max-height: 200px !important;
}
</style>

<div class="grid-row small"
id="{{ blockId }}"
data-form="true"
data-type="block"
data-type-config='
[
{% set groupBefore = null %}
{% for alias, type in types %}
{% if type.configuration.group != groupBefore and not loop.first %}
{
"divider": true
},{% endif %}
{
"data": "{{ alias }}",
"title": "<%= translate('{{ type.configuration.title }}') %>",
"tpl": "{{ alias }}-{{ blockId }}-tpl"
}
{% if not loop.last %},{% endif %}
{% set groupBefore = type.configuration.group %}
{% endfor %}
]'
data-type-min="0"
data-type-max="999"
data-type-default="{{ types|keys|first }}"
data-mapper-property="{{ blockId }}"
data-mapper-full-class="full"
data-mapper-empty-class="empty">

{% for alias, type in types %}
{% include type.configuration.template with {
<div class="grid-row small"
id="{{ blockId }}"
data-form="true"
data-type="block"
data-type-config='
[
{% set groupBefore = null %}
{% for alias, type in types %}
{% if type.configuration.group != groupBefore and not loop.first %}
{
"divider": true
},{% endif %}
{
"data": "{{ alias }}",
"title": "<%= translate('{{ type.configuration.title }}') %>",
"tpl": "{{ alias }}-{{ blockId }}-tpl"
}
{% if not loop.last %},{% endif %}
{% set groupBefore = type.configuration.group %}
{% endfor %}
]'
data-type-min="0"
data-type-max="999"
data-type-default="{{ types|keys|first }}"
data-mapper-property="{{ blockId }}"
data-mapper-full-class="full"
data-mapper-empty-class="empty">

{% for alias, type in types %}
{% include type.configuration.template with {
'viewData': type.configuration.attributes,
'alias': alias
}%}
{% endfor %}
</div>
}%}
{% endfor %}
</div>

<div class="text-block-footer" id="{{ blockId }}-add" style="width: 200px">
<div class="text-block-footer" id="{{ blockId }}-add" style="width: 200px">

</div>
</div>

</div>
</div>
</div>
<div class="grid">
<h2 class="divider m-bottom-20">
<%= translate('sulu_form.website_configuration') %>
</h2>
<div class="grid-row m-bottom-20">

<div class="grid-row">
<div class="grid-col-12">
<div class="form-group">
<label for="submitLabel">
<%= translate('sulu_form.submit_label') %>
</label>

<div id="submitLabel"
class="form-element husky-validate"
data-type="husky-input"
Expand All @@ -127,7 +121,15 @@
</div>
</div>
</div>
<div class="grid-row m-bottom-40">
</div>

{# Section Website Configuration #}
<div class="grid m-bottom-40">
<h2 class="divider m-bottom-20">
<%= translate('sulu_form.website_configuration') %>
</h2>

<div class="grid-row">
<div class="grid-col-12">
<div class="form-group">
<label for="successText">
Expand All @@ -152,9 +154,14 @@
</div>
</div>
</div>
</div>

{# Section E-Mail Configuration #}
<div class="grid m-bottom-40">
<h2 class="divider m-bottom-20">
<%= translate('sulu_form.email_configuration') %>
</h2>

<div class="grid-row m-bottom-20">
<div class="grid-col-12">
<div class="form-group">
Expand All @@ -174,6 +181,7 @@
</div>
</div>
</div>

<div class="grid-row m-bottom-20">
<div class="grid-col-6">
<div class="form-group">
Expand Down Expand Up @@ -212,6 +220,7 @@
</div>
</div>
</div>

<div class="grid-row m-bottom-20">
<div class="grid-col-6">
<div class="form-group">
Expand All @@ -232,6 +241,7 @@
</div>
</div>
</div>

<div class="grid-col-6">
<div class="form-group">
<label for="toName">
Expand All @@ -250,6 +260,7 @@
</div>
</div>
</div>

<div class="grid-row m-bottom-20">
<div class="grid-col-12">
<div class="form-group">
Expand Down Expand Up @@ -294,6 +305,7 @@
</div>
</div>
</div>

<div class="grid-col-6">
<div class="form-group">
<label for="sendAttachments">
Expand All @@ -313,6 +325,7 @@
</div>
</div>
</div>

<div class="grid-row m-bottom-40">
<div class="grid-col-6">
<div class="form-group">
Expand All @@ -332,6 +345,7 @@
</div>
</div>
</div>

<div class="grid-col-6">
<div class="form-group">
<label for="deactivateCustomerMails">
Expand All @@ -351,53 +365,51 @@
</div>
</div>
</div>
</div>

<!-- Added -->
<div class="grid-col-12 floating m-top-20">
<h2 class="light">
<%= translate('sulu_form.receivers') %>
</h2>

<div class="grid">
<div id="text-block-header-receivers" class="text-blocks-header">
<div id="collapse-text-blocks-receivers" tabindex="0" class="text-blocks-toggle-btn"><%=
translate('sulu.content.collapse.blocks') %>
<div class="grid-row m-bottom-0">
<div class="grid-col-12">
<div id="text-block-header-receivers" class="text-blocks-header">
<div id="collapse-text-blocks-receivers" tabindex="0" class="text-blocks-toggle-btn"><%=
translate('sulu.content.collapse.blocks') %>
</div>
<div id="expand-text-blocks-receivers" tabindex="0" class="text-blocks-toggle-btn"><%=
translate('sulu.content.expand.blocks') %>
</div>
<div class="clear"></div>
</div>
<div id="expand-text-blocks-receivers" tabindex="0" class="text-blocks-toggle-btn"><%=
translate('sulu.content.expand.blocks') %>

<div class="grid-row small"
id="receivers"
data-form="true"
data-type="block"
data-type-config='[{"data": "to", "title": "<%= translate('sulu_form.receiver.to') %>", "tpl": "to-receivers-tpl"},{"data": "cc", "title": "<%= translate('sulu_form.receiver.cc') %>", "tpl": "cc-receivers-tpl"},{"data": "bcc", "title": "<%= translate('sulu_form.receiver.bcc') %>", "tpl": "bcc-receivers-tpl"}]'
data-type-min="0"
data-type-max="999"
data-type-default="to"
data-mapper-property="receivers"
data-mapper-full-class="full"
data-mapper-empty-class="empty">

{% include 'SuluFormBundle:forms/blocks:email-receiver.html.twig' with {
name: receiverTypes['to']
} %}
{% include 'SuluFormBundle:forms/blocks:email-receiver.html.twig' with {
name: receiverTypes['cc']
} %}
{% include 'SuluFormBundle:forms/blocks:email-receiver.html.twig' with {
name: receiverTypes['bcc']
} %}
</div>
<div class="clear"></div>
</div>
<div class="grid-row small"
id="receivers"
data-form="true"
data-type="block"
data-type-config='[{"data": "to", "title": "<%= translate('sulu_form.receiver.to') %>", "tpl": "to-receivers-tpl"},{"data": "cc", "title": "<%= translate('sulu_form.receiver.cc') %>", "tpl": "cc-receivers-tpl"},{"data": "bcc", "title": "<%= translate('sulu_form.receiver.bcc') %>", "tpl": "bcc-receivers-tpl"}]'
data-type-min="0"
data-type-max="999"
data-type-default="to"
data-mapper-property="receivers"
data-mapper-full-class="full"
data-mapper-empty-class="empty">

{% include 'SuluFormBundle:forms/blocks:email-receiver.html.twig' with {
name: receiverTypes['to']
} %}
{% include 'SuluFormBundle:forms/blocks:email-receiver.html.twig' with {
name: receiverTypes['cc']
} %}
{% include 'SuluFormBundle:forms/blocks:email-receiver.html.twig' with {
name: receiverTypes['bcc']
} %}
</div>

<div class="text-block-footer" id="receivers-add" style="width: 200px">
<div class="text-block-footer" id="receivers-add" style="width: 200px">

</div>
</div>
</div>
</div>
<!-- Closed -->

</div>
</form>

0 comments on commit f89b5c8

Please sign in to comment.