Merge pull request #224 from inakijv/Modals_SendtoTRash_Improvement

EZP-28463: Updated design for Modal Send to trash
ezsystems · Dec 19, 2017 · 06155ae · 06155ae
2 parents e310dfc + bf46945
commit 06155ae
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 25 deletions.
diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss
@@ -69,3 +69,41 @@
     align-items: center;
     justify-content: center;
 }
+
+.ez-modal--send-to-trash {
+    .modal-header {
+        .close {
+            position: absolute;
+            right: 1rem;
+        }
+    }
+
+    .modal-footer {
+        .btn {
+            line-height: 1.25;
+            padding: .5rem .75rem;
+        }
+
+        .btn-secondary {
+            background-color: $ez-color-base-medium;
+            border-color: $ez-color-base-medium;
+
+            &:hover {
+                background-color: $ez-color-base-medium-hover;
+                border-color: $ez-color-base-medium-hover;
+            }
+        }
+    }
+}
+
+.ez-content-view,
+.ez-trash-list-view {
+    .ez-modal--send-to-trash {
+        .modal-footer {
+            .btn {
+                font-size: 1rem;
+                padding-bottom: .5rem;
+            }
+        }
+    }
+}
diff --git a/src/bundle/Resources/public/scss/_custom.scss b/src/bundle/Resources/public/scss/_custom.scss
@@ -22,6 +22,7 @@ $ez-ground-base-dark: #e5e3e3;
 $ez-color-base-pale: #dbdbdb;
 $ez-color-base-light: #878787;
 $ez-color-base-medium: #646464;
+$ez-color-base-medium-hover: darken($ez-color-base-medium, 15%);
 $ez-color-base-dark: #555;
 $ez-black: #333;
 

diff --git a/src/bundle/Resources/public/scss/_modals.scss b/src/bundle/Resources/public/scss/_modals.scss
@@ -0,0 +1,40 @@
+.ez-modal--send-to-trash {
+    .modal-dialog {
+        background-color: $ez-ground-base-medium;
+        border-radius: .25rem;
+    }
+
+    .modal-header {
+        border-bottom: none;
+        padding: 15px 15px 0 15px;
+        position: relative;
+        min-height: 2.5rem;
+    }
+
+    .modal-body {
+        padding: 15px 30px;
+
+        .ez-modal-body__main,
+        .ez-modal-body__explanation {
+            margin-bottom: 0;
+        }
+    }
+
+    .modal-footer {
+        border-top: none;
+    }
+}
+
+.ez-trash-list-view {
+    .ez-modal--send-to-trash {
+        .modal-body {
+            .ez-modal-body__main {
+                font-weight: 700;
+            }
+
+            .ez-modal-body__explanation {
+                font-size: .9375rem;
+            }
+        }
+    }
+}
diff --git a/src/bundle/Resources/public/scss/ezplatform.scss b/src/bundle/Resources/public/scss/ezplatform.scss
@@ -10,6 +10,7 @@
 @import 'buttons';
 @import 'field-group';
 @import 'main-nav';
+@import 'modals';
 @import 'notifications';
 @import 'instant-filter';
 @import 'login';

diff --git a/src/bundle/Resources/views/admin/bulk_delete_confirmation_modal.html.twig b/src/bundle/Resources/views/admin/bulk_delete_confirmation_modal.html.twig
@@ -1,22 +1,21 @@
-<div class="modal fade" id="{{ id }}" tabindex="-1" role="dialog">
+<div class="modal fade ez-modal ez-modal--send-to-trash" id="{{ id }}" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">{{ 'modal.title'|trans|desc('Please confirm') }}</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-                <p>{{ message }}</p>
+                <p class="ez-modal-body__main">{{ message }}</p>
             </div>
             <div class="modal-footer">
-                <button class="btn btn-danger btn--trigger" data-click="{{ data_click }}">
-                    {{ 'modal.delete'|trans|desc('Delete') }}
-                </button>
                 <button type="button" class="btn btn-secondary btn--no" data-dismiss="modal">
                     {{ 'modal.cancel'|trans|desc('Cancel') }}
                 </button>
+                <button class="btn btn-danger btn--trigger" data-click="{{ data_click }}">
+                    {{ 'modal.delete'|trans|desc('Delete') }}
+                </button>
             </div>
         </div>
     </div>

diff --git a/src/bundle/Resources/views/admin/content_type/delete_confirmation_modal.html.twig b/src/bundle/Resources/views/admin/content_type/delete_confirmation_modal.html.twig
@@ -1,6 +1,6 @@
 {% trans_default_domain 'content_type' %}
 
-<div class="modal fade" id="delete-content-type-modal" tabindex="-1" role="dialog">
+<div class="modal fade ez-modal ez-modal--send-to-trash" id="delete-content-type-modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">

diff --git a/src/bundle/Resources/views/admin/language/delete_confirmation_modal.html.twig b/src/bundle/Resources/views/admin/language/delete_confirmation_modal.html.twig
@@ -1,10 +1,9 @@
 {% trans_default_domain 'language' %}
 
-<div class="modal fade" id="delete-language-modal" tabindex="-1" role="dialog">
+<div class="modal fade ez-modal ez-modal--send-to-trash" id="delete-language-modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">{{ 'language.modal.title'|trans|desc('Please confirm') }}</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
@@ -13,8 +12,8 @@
                 <p>{{ 'language.modal.message'|trans|desc('Do you want to delete Language?') }}</p>
             </div>
             <div class="modal-footer">
-                {{ form_widget(deleteForm.delete, { 'attr': {'class': 'btn btn-danger'} }) }}
                 <button type="button" class="btn btn-secondary btn--no" data-dismiss="modal">{{ 'language.form.cancel'|trans|desc('Cancel') }}</button>
+                {{ form_widget(deleteForm.delete, { 'attr': {'class': 'btn btn-danger'} }) }}
             </div>
         </div>
     </div>

diff --git a/src/bundle/Resources/views/admin/section/delete_confirmation_modal.html.twig b/src/bundle/Resources/views/admin/section/delete_confirmation_modal.html.twig
@@ -1,25 +1,26 @@
-<div class="modal fade" id="delete-section-modal" tabindex="-1" role="dialog">
+<div class="modal fade ez-modal ez-modal--send-to-trash" id="delete-section-modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">{{ 'section.modal.title'|trans|desc('Please confirm') }}</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-                <p>{{ 'section.modal.message'|trans|desc('Do you want to delete section?') }}</p>
+                <p class="ez-modal-body__main">
+                    {{ 'section.modal.message'|trans|desc('Do you want to delete section?') }}
+                </p>
             </div>
             <div class="modal-footer">
                 {{ form_start(form, {
                     "action": path("ezplatform.section.delete", {"sectionId": section.id}),
                     'attr': {'class': 'd-inline-block'}
                 }) }}
-                {{ form_widget(form.delete, {'attr': {'class': 'btn btn-danger', 'disabled': not deletable}}) }}
-                {{ form_end(form) }}
                 <button type="button" class="btn btn-secondary btn--no" data-dismiss="modal">
                     {{ 'form.cancel'|trans|desc('Cancel') }}
                 </button>
+                {{ form_widget(form.delete, {'attr': {'class': 'btn btn-danger', 'disabled': not deletable}}) }}
+                {{ form_end(form) }}
             </div>
         </div>
     </div>

diff --git a/src/bundle/Resources/views/admin/trash/empty_trash_confirmation_modal.html.twig b/src/bundle/Resources/views/admin/trash/empty_trash_confirmation_modal.html.twig
@@ -1,24 +1,29 @@
 {% form_theme form 'EzPlatformAdminUiBundle:parts/form:flat_widgets.html.twig' %}
 
-<div class="modal fade" id="confirmEmptyTrash" tabindex="-1" role="dialog" aria-labelledby="confirmEmptyTrash"
+<div class="modal fade ez-modal ez-modal--send-to-trash" id="confirmEmptyTrash" tabindex="-1" role="dialog" aria-labelledby="confirmEmptyTrash"
      aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">{{ 'trash.delete.all.confirm'|trans({'%trashItemsCount%': trash_items_count})|desc('Are you sure you want to permanently delete %trashItemsCount% item(s)?') }}</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-                {{ 'trash.delete.all.info'|trans|desc('This action cannot be reversed') }}
+                <p class="ez-modal-body__main">
+                    {{ 'trash.delete.all.confirm'|trans({'%trashItemsCount%': trash_items_count})|desc('Are you sure you want to permanently delete %trashItemsCount% item(s)?') }}
+                </p>
+                <p class="ez-modal-body__explanation">
+                    {{ 'trash.delete.all.info'|trans|desc('This action cannot be reversed') }}
+                </p>
             </div>
             <div class="modal-footer">
                 {{ form_start(form, {
                     'action': path('ezplatform.trash.empty')
                 }) }}
-                <button type="button" class="btn"
-                        data-dismiss="modal">{{ 'trash.delete.button.cancel'|trans|desc('Cancel') }}</button>
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                    {{ 'trash.delete.button.cancel'|trans|desc('Cancel') }}
+                </button>
                 {{ form_widget(form.empty, {'attr': {'class': 'btn btn-danger'}}) }}
                 {{ form_widget(form.empty_trash, {'label_attr': {'class': 'checkbox-inline'}, 'attr': {'hidden': true}}) }}
                 {{ form_end(form) }}

diff --git a/src/bundle/Resources/views/bulk_delete_confirmation_modal.html.twig b/src/bundle/Resources/views/bulk_delete_confirmation_modal.html.twig
@@ -1,4 +1,4 @@
-<div class="modal fade" id="{{ id }}" tabindex="-1" role="dialog">
+<div class="modal fade ez-modal ez-modal--send-to-trash" id="{{ id }}" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">

diff --git a/src/bundle/Resources/views/content/modal_location_trash.html.twig b/src/bundle/Resources/views/content/modal_location_trash.html.twig
@@ -1,21 +1,22 @@
-<div class="modal fade" id="trash-location-modal" tabindex="-1" role="dialog">
+<div class="modal fade ez-modal ez-modal--send-to-trash" id="trash-location-modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">{{ 'trash.form.title'|trans|desc('Please confirm') }}</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-                <p>{{ 'trash.modal.message'|trans|desc('Are you sure you want to send this content item to trash?') }}</p>
+                <p class="ez-modal-body__main">
+                    {{ 'trash.modal.message'|trans|desc('Are you sure you want to send this content item to trash?') }}
+                </p>
             </div>
             <div class="modal-footer">
                 {{ form_start(form, {'action': path('ezplatform.location.trash')}) }}
-                {{ form_widget(form.trash, {'attr': {'class': 'btn btn-danger'}}) }}
                 <button type="button" class="btn btn-secondary btn--no" data-dismiss="modal">
                     {{ 'trash.form.cancel'|trans|desc('Cancel') }}
                 </button>
+                {{ form_widget(form.trash, {'attr': {'class': 'btn btn-danger'}}) }}
                 {{ form_end(form) }}
             </div>
         </div>