Skip to content

Commit

Permalink
Merge pull request #10741 from sarjon/fix-import-form-alignment
Browse files Browse the repository at this point in the history 
Fix import form alignment
  • Loading branch information
@PierreRambaud
PierreRambaud committed Oct 1, 2018
2 parents 3fa35c9 + 6f1f02d commit 82c406a
Show file tree
Hide file tree
Showing 2 changed files with 163 additions and 164 deletions.
289 changes: 143 additions & 146 deletions ...opBundle/Resources/views/Admin/Configure/AdvancedParameters/Blocks/import_panel.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,152 +28,149 @@

{{ form_start(importForm, {'attr': { 'data-file-upload-url': importFileUploadUrl, 'data-delete-confirm-message': ('Are you sure that you would like to delete this entity:'|trans({}, 'Admin.Advparameters.Notification')), 'class': 'js-import-form' }}) }}
<div class="card">
<h3 class="card-header">
<i class="material-icons">import_export</i> {{ 'Import'|trans({}, 'Admin.Actions') }}
</h3>
<div class="card-block">
<div class="alert alert-info" role="alert">
<p class="alert-text">
{{ 'You can read information on import at:'|trans({}, 'Admin.Advparameters.Help') }}
<a href="{{ 'http://doc.prestashop.com/display/PS17/Import'|trans({}, 'Admin.Advparameters.Help') }}" class="_blank">
{{ 'http://doc.prestashop.com/display/PS17/Import'|trans({}, 'Admin.Advparameters.Help') }}
</a>
</p>
<p class="alert-text">
{{ 'Read more about the CSV format at:'|trans({}, 'Admin.Advparameters.Help') }}
<a href="{{ 'https://en.wikipedia.org/wiki/Comma-separated_values'|trans({}, 'Admin.Advparameters.Help') }}" class="_blank">
{{ 'https://en.wikipedia.org/wiki/Comma-separated_values'|trans({}, 'Admin.Advparameters.Help') }}
</a>
</p>
</div>

<hr>

<div class="card-text">
<div class="form-group">
<label class="form-control-label">{{ 'What do you want to import?'|trans }}</label>
{{ form_errors(importForm.entity) }}
{{ form_widget(importForm.entity, {'attr': {'class': 'js-entity-select'}}) }}
</div>

<div class="alert alert-warning js-entity-alert" role="alert">
<ul>
<li>{{ 'Note that the Category import does not support having two categories with the same name.'|trans({}, 'Admin.Advparameters.Notification') }}</li>
<li>{{ 'Note that you can have several products with the same reference.'|trans({}, 'Admin.Advparameters.Notification') }}</li>
</ul>
</div>

<hr>

<div class="form-group hidden-xs-up">
{{ form_errors(importForm.csv) }}
{{ form_widget(importForm.csv, {'attr': {'class': 'js-import-file-input'}}) }}
</div>

<div class="form-group js-file-upload-form-group">
<label class="form-control-label">{{ 'Select a file to import'|trans }}</label>
{{ form_errors(importForm.file) }}
{{ form_widget(importForm.file, {'attr': {'class': 'js-import-file', 'data-max-file-upload-size': maxFileUploadSize }}) }}
<span>{{ 'or'|trans({}, 'Admin.Global') }}</span>
<button type="button"
class="btn btn-outline-primary btn-sm js-from-files-history-btn"
{% if importFileNames is empty %}disabled{% endif %}
>
<span class="badge badge-primary js-files-history-number">{{ importFileNames|length }}</span>
{{ 'Choose from history / FTP'|trans({}, 'Admin.Advparameters.Feature') }}
</button>
<small class="form-text">{{ 'Allowed formats: .csv, .xls, .xlsx, .xlst, .ods, .ots'|trans({}, 'Admin.Advparameters.Help') }}</small>
<small class="form-text">{{ 'Only UTF-8 and ISO 8859-1 encodings are allowed'|trans({}, 'Admin.Advparameters.Help') }}</small>
<small class="form-text">{{ 'You can also upload your file via FTP to the following directory: %s .'|trans({'%s': importDirectory}, 'Admin.Advparameters.Help') }}</small>
</div>

<div class="alert alert-danger d-none js-import-file-error" role="alert">
<p class="alert-text">
<strong class="js-file-data"></strong>: <span class="js-error-message"></span>
</p>
</div>

<div class="alert alert-success d-none js-import-file-alert" role="alert">
<button type="button"
class="close btn btn-outline-secondary js-change-import-file-btn"
aria-label="{{ 'Change'|trans({}, 'Admin.Actions') }}"
>
<span aria-hidden="true"><i class="material-icons">edit</i></span>
</button>
<p class="alert-text js-import-file"></p>
</div>

{% block import_file_history_block %}
{% include '@PrestaShop/Admin/Configure/AdvancedParameters/Blocks/import_file_history.html.twig' %}
{% endblock %}

<hr>

<div class="form-group">
{{ ps.label_with_help(('Language of the file'|trans), ('The locale must be installed'|trans({}, 'Admin.Advparameters.Notification'))) }}
{{ form_errors(importForm.iso_lang) }}
{{ form_widget(importForm.iso_lang) }}
</div>

<div class="form-group">
<label class="form-control-label">{{ 'Field separator'|trans }}</label>
{{ form_errors(importForm.separator) }}
{{ form_widget(importForm.separator) }}
<small class="form-text">{{ 'e.g. '|trans({}, 'Admin.Advparameters.Help') }} 1; Blouse; 129.90; 5</small>
</div>

<div class="form-group">
<label class="form-control-label">{{ 'Multiple value separator'|trans }}</label>
{{ form_errors(importForm.multiple_value_separator) }}
{{ form_widget(importForm.multiple_value_separator) }}
<small class="form-text">{{ 'e.g. '|trans({}, 'Admin.Advparameters.Help') }} Blouse; red.jpg, blue.jpg, green.jpg; 129.90</small>
</div>

<hr>

<div class="form-group js-truncate-form-group">
<label class="form-control-label">
{{ 'Delete all [1]categories[/1] before import'|trans({'[1]': '<span class="js-entity-name">', '[/1]': '</span>'})|raw }}
</label>
{{ form_errors(importForm.truncate) }}
{{ form_widget(importForm.truncate) }}
</div>

<div class="form-group js-match-ref-form-group">
{{ ps.label_with_help(('Use product reference as key'|trans), ('If enabled, the product\'s reference number MUST be unique!'|trans({}, 'Admin.Advparameters.Help'))) }}
{{ form_errors(importForm.match_ref) }}
{{ form_widget(importForm.match_ref) }}
</div>

<div class="form-group js-regenerate-form-group">
<label class="form-control-label">{{ 'Skip thumbnails regeneration'|trans }}</label>
{{ form_errors(importForm.regenerate) }}
{{ form_widget(importForm.regenerate) }}
</div>

<div class="form-group js-force-ids-form-group">
{{ ps.label_with_help(('Force all ID numbers'|trans), ("If you enable this option, your imported items' ID number will be used as is. If you do not enable this option, the imported ID numbers will be ignored, and PrestaShop will instead create auto-incremented ID numbers for all the imported items."|trans({}, 'Admin.Advparameters.Help'))) }}
{{ form_errors(importForm.forceIDs) }}
{{ form_widget(importForm.forceIDs) }}
</div>

<div class="form-group">
{{ ps.label_with_help(('Send notification email'|trans), ('Sends an email to let you know your import is complete. It can be useful when handling large files, as the import may take some time.'|trans({}, 'Admin.Advparameters.Help'))) }}
{{ form_errors(importForm.sendemail) }}
{{ form_widget(importForm.sendemail) }}
</div>

{{ form_rest(importForm) }}
</div>
</div>

<div class="card-footer">
<div class="d-flex justify-content-end">
<button class="btn btn-primary" name="submitImportFile">
{{ 'Next step'|trans({}, 'Admin.Advparameters.Feature') }}
<i class="material-icons">navigate_next</i>
</button>
</div>
<h3 class="card-header">
<i class="material-icons">import_export</i> {{ 'Import'|trans({}, 'Admin.Actions') }}
</h3>
<div class="card-body">
<div class="alert alert-info" role="alert">
<p class="alert-text">
{{ 'You can read information on import at:'|trans({}, 'Admin.Advparameters.Help') }}
<a href="{{ 'http://doc.prestashop.com/display/PS17/Import'|trans({}, 'Admin.Advparameters.Help') }}" class="_blank">
{{ 'http://doc.prestashop.com/display/PS17/Import'|trans({}, 'Admin.Advparameters.Help') }}
</a>
</p>
<p class="alert-text">
{{ 'Read more about the CSV format at:'|trans({}, 'Admin.Advparameters.Help') }}
<a href="{{ 'https://en.wikipedia.org/wiki/Comma-separated_values'|trans({}, 'Admin.Advparameters.Help') }}" class="_blank">
{{ 'https://en.wikipedia.org/wiki/Comma-separated_values'|trans({}, 'Admin.Advparameters.Help') }}
</a>
</p>
</div>

<hr>

<div class="form-group">
<label class="form-control-label">{{ 'What do you want to import?'|trans }}</label>
{{ form_errors(importForm.entity) }}
{{ form_widget(importForm.entity, {'attr': {'class': 'js-entity-select'}}) }}
</div>

<div class="alert alert-warning js-entity-alert" role="alert">
<ul>
<li>{{ 'Note that the Category import does not support having two categories with the same name.'|trans({}, 'Admin.Advparameters.Notification') }}</li>
<li>{{ 'Note that you can have several products with the same reference.'|trans({}, 'Admin.Advparameters.Notification') }}</li>
</ul>
</div>

<hr>

<div class="form-group hidden-xs-up">
{{ form_errors(importForm.csv) }}
{{ form_widget(importForm.csv, {'attr': {'class': 'js-import-file-input'}}) }}
</div>

<div class="form-group js-file-upload-form-group">
<label class="form-control-label">{{ 'Select a file to import'|trans }}</label>
{{ form_errors(importForm.file) }}
{{ form_widget(importForm.file, {'attr': {'class': 'js-import-file', 'data-max-file-upload-size': maxFileUploadSize }}) }}
<span>{{ 'or'|trans({}, 'Admin.Global') }}</span>
<button type="button"
class="btn btn-outline-primary btn-sm js-from-files-history-btn"
{% if importFileNames is empty %}disabled{% endif %}
>
<span class="badge badge-primary js-files-history-number">{{ importFileNames|length }}</span>
{{ 'Choose from history / FTP'|trans({}, 'Admin.Advparameters.Feature') }}
</button>
<small class="form-text">{{ 'Allowed formats: .csv, .xls, .xlsx, .xlst, .ods, .ots'|trans({}, 'Admin.Advparameters.Help') }}</small>
<small class="form-text">{{ 'Only UTF-8 and ISO 8859-1 encodings are allowed'|trans({}, 'Admin.Advparameters.Help') }}</small>
<small class="form-text">{{ 'You can also upload your file via FTP to the following directory: %s .'|trans({'%s': importDirectory}, 'Admin.Advparameters.Help') }}</small>
</div>

<div class="alert alert-danger d-none js-import-file-error" role="alert">
<p class="alert-text">
<strong class="js-file-data"></strong>: <span class="js-error-message"></span>
</p>
</div>

<div class="alert alert-success d-none js-import-file-alert" role="alert">
<button type="button"
class="close btn btn-outline-secondary js-change-import-file-btn"
aria-label="{{ 'Change'|trans({}, 'Admin.Actions') }}"
>
<span aria-hidden="true"><i class="material-icons">edit</i></span>
</button>
<p class="alert-text js-import-file"></p>
</div>

{% block import_file_history_block %}
{% include '@PrestaShop/Admin/Configure/AdvancedParameters/Blocks/import_file_history.html.twig' %}
{% endblock %}

<hr>

<div class="form-group">
{{ ps.label_with_help(('Language of the file'|trans), ('The locale must be installed'|trans({}, 'Admin.Advparameters.Notification'))) }}
{{ form_errors(importForm.iso_lang) }}
{{ form_widget(importForm.iso_lang) }}
</div>

<div class="form-group">
<label class="form-control-label">{{ 'Field separator'|trans }}</label>
{{ form_errors(importForm.separator) }}
{{ form_widget(importForm.separator) }}
<small class="form-text">{{ 'e.g. '|trans({}, 'Admin.Advparameters.Help') }} 1; Blouse; 129.90; 5</small>
</div>

<div class="form-group">
<label class="form-control-label">{{ 'Multiple value separator'|trans }}</label>
{{ form_errors(importForm.multiple_value_separator) }}
{{ form_widget(importForm.multiple_value_separator) }}
<small class="form-text">{{ 'e.g. '|trans({}, 'Admin.Advparameters.Help') }} Blouse; red.jpg, blue.jpg, green.jpg; 129.90</small>
</div>

<hr>

<div class="form-group js-truncate-form-group">
<label class="form-control-label">
{{ 'Delete all [1]categories[/1] before import'|trans({'[1]': '<span class="js-entity-name">', '[/1]': '</span>'})|raw }}
</label>
{{ form_errors(importForm.truncate) }}
{{ form_widget(importForm.truncate) }}
</div>

<div class="form-group js-match-ref-form-group">
{{ ps.label_with_help(('Use product reference as key'|trans), ('If enabled, the product\'s reference number MUST be unique!'|trans({}, 'Admin.Advparameters.Help'))) }}
{{ form_errors(importForm.match_ref) }}
{{ form_widget(importForm.match_ref) }}
</div>

<div class="form-group js-regenerate-form-group">
<label class="form-control-label">{{ 'Skip thumbnails regeneration'|trans }}</label>
{{ form_errors(importForm.regenerate) }}
{{ form_widget(importForm.regenerate) }}
</div>

<div class="form-group js-force-ids-form-group">
{{ ps.label_with_help(('Force all ID numbers'|trans), ("If you enable this option, your imported items' ID number will be used as is. If you do not enable this option, the imported ID numbers will be ignored, and PrestaShop will instead create auto-incremented ID numbers for all the imported items."|trans({}, 'Admin.Advparameters.Help'))) }}
{{ form_errors(importForm.forceIDs) }}
{{ form_widget(importForm.forceIDs) }}
</div>

<div class="form-group">
{{ ps.label_with_help(('Send notification email'|trans), ('Sends an email to let you know your import is complete. It can be useful when handling large files, as the import may take some time.'|trans({}, 'Admin.Advparameters.Help'))) }}
{{ form_errors(importForm.sendemail) }}
{{ form_widget(importForm.sendemail) }}
</div>

{{ form_rest(importForm) }}
</div>
<div class="card-footer">
<div class="d-flex justify-content-end">
<button class="btn btn-primary" name="submitImportFile">
{{ 'Next step'|trans({}, 'Admin.Advparameters.Feature') }}
<i class="material-icons">navigate_next</i>
</button>
</div>
</div>
</div>
{{ form_end(importForm) }}
38 changes: 20 additions & 18 deletions ...ShopBundle/Resources/views/Admin/Configure/AdvancedParameters/ImportPage/import.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,31 +27,33 @@
{% trans_default_domain 'Admin.Advparameters.Feature' %}

{% block content %}
{% if importForm is defined %}
<div class="container">
{% if importForm is defined %}
<div class="row row justify-content-center">
<div class="col-xl-10">
<div class="row">
<div class="col-8">
{% block import_panel %}
{% include '@PrestaShop/Admin/Configure/AdvancedParameters/Blocks/import_panel.html.twig' %}
{% endblock %}
</div>
<div class="col-12 col-md-8">
{% block import_panel %}
{% include '@PrestaShop/Admin/Configure/AdvancedParameters/Blocks/import_panel.html.twig' %}
{% endblock %}
</div>

<div class="col-4">
{% block import_available_fields %}
{% include '@PrestaShop/Admin/Configure/AdvancedParameters/Blocks/import_available_fields.html.twig' %}
{% endblock %}
<div class="col-12 col-md-4">
{% block import_available_fields %}
{% include '@PrestaShop/Admin/Configure/AdvancedParameters/Blocks/import_available_fields.html.twig' %}
{% endblock %}

{% block import_sample_files %}
{% include '@PrestaShop/Admin/Configure/AdvancedParameters/Blocks/import_sample_files.html.twig' %}
{% endblock %}
</div>
{% block import_sample_files %}
{% include '@PrestaShop/Admin/Configure/AdvancedParameters/Blocks/import_sample_files.html.twig' %}
{% endblock %}
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% endblock %}

{% block javascripts %}
{{ parent() }}
{{ parent() }}

<script src="{{ asset('themes/new-theme/public/imports.bundle.js') }}"></script>
<script src="{{ asset('themes/new-theme/public/imports.bundle.js') }}"></script>
{% endblock %}

0 comments on commit 82c406a

Please sign in to comment.