Skip to content

Commit 16cd00c

Browse files
javiereguiluzjaviereguiluz
committed
feature #203 Use a modal window to confirm the blog post deletion (yceruto, javiereguiluz)
This PR was merged into the master branch. Discussion ---------- Use a modal window to confirm the blog post deletion This pull request finished #202 by making some tweaks to the design of the delete dialog. **Before** We used the classic Yes/No dialog mostly used in Windows systems: ![dialog_before](https://cloud.githubusercontent.com/assets/73419/9975960/6047b9c8-5ed1-11e5-81e0-a8f691a2a011.png) **After** I propose to use the Delete/Cancel dialog used in Apple systems, because it's more user friendly: ![dialog_after](https://cloud.githubusercontent.com/assets/73419/9975962/75aee46c-5ed1-11e5-8873-37ad97eb55f7.png) I've just tweaked this dialog contents. The rest of the pull request is the result of the great work made by @yceruto. Commits ------- 620162b Updated the styles for the latest changes 36e61c5 Use a modal window to confirm the blog post deletion 0a2e717 disable submit button on submit. fecb034 rename js file e07792d fixing file documentation db88d34 fixing file documentation c0aaf79 confirmation message using bootstrap modal a41db16 using short name and statements 0a8299f avoids a DOM query for 'body' and avoids the need to wait for DOM ready db98a4e check the show_confirmation_message value 86d4f1c using event delegation d731ee8 removed multi-purpose variables 775ddba removing old code 167e3a1 confirmation message now listen from submit event of the form fd91b05 Removed return statement and improving the code. 40e771d Fixing translation position f6aa107 feature #191 Add confirmation message before to delete a post
2 parents c65ba44 + 620162b commit 16cd00c

File tree

12 files changed

+114
-8
lines changed

12 files changed

+114
-8
lines changed

‎app/Resources/assets/js/main.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
* This file is part of the Symfony package.
3+
*
4+
* (c) Fabien Potencier <[email protected]>
5+
*
6+
* For the full copyright and license information, please view the LICENSE
7+
* file that was distributed with this source code.
8+
*/
9+
10+
/**
11+
* Handling the modal confirmation message.
12+
*/
13+
(function ($) {
14+
$(document).on('submit', 'form[data-confirmation]', function (event) {
15+
var $form = $(this),
16+
$confirm = $('#confirmationModal');
17+
18+
if ($confirm.data('result') !== 'yes') {
19+
//cancel submit event
20+
event.preventDefault();
21+
22+
$confirm
23+
.off('click', '#btnYes')
24+
.on('click', '#btnYes', function () {
25+
$confirm.data('result', 'yes');
26+
$form.find('input[type="submit"]').attr('disabled', 'disabled');
27+
$form.submit();
28+
})
29+
.modal('show');
30+
}
31+
});
32+
})(window.jQuery);

‎app/Resources/assets/scss/main.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,19 @@ footer {
136136
}
137137
}
138138

139+
// Confirmation Modal Window
140+
#confirmationModal {
141+
.modal-dialog {
142+
width: 500px;
143+
}
144+
145+
.modal-footer {
146+
button {
147+
min-width: 75px;
148+
}
149+
}
150+
}
151+
139152
//
140153
// Forms
141154
// --------------------------------------------------

‎app/Resources/translations/messages.en.xliff

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,22 @@
8080
<source>action.delete_post</source>
8181
<target>Delete post</target>
8282
</trans-unit>
83+
<trans-unit id="delete_post_modal.title">
84+
<source>delete_post_modal.title</source>
85+
<target>Are you sure you want to delete this post?</target>
86+
</trans-unit>
87+
<trans-unit id="delete_post_modal.body">
88+
<source>delete_post_modal.body</source>
89+
<target>This action cannot be undone.</target>
90+
</trans-unit>
91+
<trans-unit id="label.delete_post">
92+
<source>label.delete_post</source>
93+
<target>Delete post</target>
94+
</trans-unit>
95+
<trans-unit id="label.cancel">
96+
<source>label.cancel</source>
97+
<target>Cancel</target>
98+
</trans-unit>
8399
<trans-unit id="action.create_post">
84100
<source>action.create_post</source>
85101
<target>Create a new post</target>

‎app/Resources/translations/messages.es.xliff

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,22 @@
8484
<source>action.delete_post</source>
8585
<target>Borrar artículo</target>
8686
</trans-unit>
87+
<trans-unit id="delete_post_modal.title">
88+
<source>delete_post_modal.title</source>
89+
<target>¿Está seguro que quiere eliminar este artículo?</target>
90+
</trans-unit>
91+
<trans-unit id="delete_post_modal.body">
92+
<source>delete_post_modal.body</source>
93+
<target>Esta acción no se puede deshacer.</target>
94+
</trans-unit>
95+
<trans-unit id="label.delete_post">
96+
<source>label.delete_post</source>
97+
<target>Borrar artículo</target>
98+
</trans-unit>
99+
<trans-unit id="label.cancel">
100+
<source>label.cancel</source>
101+
<target>Cancelar</target>
102+
</trans-unit>
87103
<trans-unit id="action.create_post">
88104
<source>action.create_post</source>
89105
<target>Crear un nuevo artículo</target>

‎app/Resources/views/admin/blog/_form.html.twig

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,18 @@
66
{{ form_start(form, { attr: { novalidate: 'novalidate' } }) }}
77
#}
88

9-
{{ form_start(form) }}
9+
{% if show_confirmation|default(false) %}
10+
{% set attr = {'data-confirmation': 'true'} %}
11+
{{ include('blog/_delete_post_confirmation.html.twig') }}
12+
{% endif %}
13+
14+
{{ form_start(form, { attr: attr|default({}) }) }}
1015
{{ form_widget(form) }}
1116

1217
<input type="submit" value="{{ button_label|default('label.create_post'|trans) }}"
1318
class="{{ button_css|default("btn btn-primary") }}" />
1419

15-
{% if include_back_to_home_link is not defined or include_back_to_home_link == true %}
20+
{% if include_back_to_home_link|default(false) %}
1621
<a href="{{ path('admin_post_index') }}" class="btn btn-link">
1722
{{ 'action.back_to_list'|trans }}
1823
</a>

‎app/Resources/views/admin/blog/edit.html.twig

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
{{ include('admin/blog/_form.html.twig', {
1111
form: edit_form,
1212
button_label: 'action.save'|trans,
13+
include_back_to_home_link: true,
1314
}, with_context = false) }}
1415
{% endblock %}
1516

@@ -19,7 +20,7 @@
1920
form: delete_form,
2021
button_label: 'action.delete_post'|trans,
2122
button_css: 'btn btn-lg btn-block btn-danger',
22-
include_back_to_home_link: false
23+
show_confirmation: true,
2324
}, with_context = false) }}
2425
</div>
2526

‎app/Resources/views/admin/blog/new.html.twig

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
{% block main %}
66
<h1>{{ 'title.post_new'|trans }}</h1>
77

8-
{{ include('admin/blog/_form.html.twig') }}
8+
{{ include('admin/blog/_form.html.twig', {
9+
include_back_to_home_link: true,
10+
}) }}
911
{% endblock %}
1012

1113
{% block sidebar %}

‎app/Resources/views/admin/blog/show.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
form: delete_form,
4040
button_label: 'action.delete_post'|trans,
4141
button_css: 'btn btn-lg btn-block btn-danger',
42-
include_back_to_home_link: false
42+
show_confirmation: true,
4343
}, with_context = false) }}
4444
</div>
4545

‎app/Resources/views/base.html.twig

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,8 @@
144144
{% javascripts filter="?jsqueeze" output="js/app.js"
145145
"%kernel.root_dir%/Resources/assets/js/jquery-2.1.4.js"
146146
"%kernel.root_dir%/Resources/assets/js/bootstrap-3.3.4.js"
147-
"%kernel.root_dir%/Resources/assets/js/highlight.pack.js" %}
147+
"%kernel.root_dir%/Resources/assets/js/highlight.pack.js"
148+
"%kernel.root_dir%/Resources/assets/js/main.js" %}
148149
<script src="{{ asset_url }}"></script>
149150
{% endjavascripts %}
150151
#}

‎app/Resources/views/blog/_delete_post_confirmation.html.twig

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{# Bootstrap modal, see http://getbootstrap.com/javascript/#modals #}
2+
<div class="modal fade" id="confirmationModal" tabindex="-1">
3+
<div class="modal-dialog">
4+
<div class="modal-content">
5+
<div class="modal-body">
6+
<h4>{{ 'delete_post_modal.title'|trans }}</h4>
7+
<p>{{ 'delete_post_modal.body'|trans }}</p>
8+
</div>
9+
<div class="modal-footer">
10+
<button type="button" class="btn btn-default" id="btnNo" data-dismiss="modal">
11+
{{ 'label.cancel'|trans }}
12+
</button>
13+
<button type="button" class="btn btn-danger" id="btnYes" data-dismiss="modal">
14+
{{ 'label.delete_post'|trans }}
15+
</button>
16+
</div>
17+
</div>
18+
</div>
19+
</div>

‎web/css/app.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)