From 03ede4ce5e85f3729b5764c217d32e6564614583 Mon Sep 17 00:00:00 2001 From: Diana Whitten Date: Thu, 14 Apr 2016 15:30:28 -0700 Subject: [PATCH] Modals should inherit from the theme * Fullscreen Modals have been removed These weren't working properly anyways, and the styling is very unpleasant: https://i.imgur.com/QfvGli7.png * Added two more modal sizes: xs and xl, and added all modals sizes to the theme preview page. Also updated the theme preview page to use fa-close instead of 'x'. * Cleaned up Spinner css to use modal sizes properly. Themability of spinner to come later. * Confirmation Modal JavaScript was cleaned up, and contents turned into an easier to digest client side template. Themability of client side templates show cased in 'material' design. * 'material' confirmation dialog was altered to show how themes can make use of overriding client-side templates. * Moved the Bootstrap helper variables into its own file. * Added helper variables for various modal calculations. Change-Id: I599ad2ffcf3034a24a19bc87e6ebed3eab079f45 --- .../framework/widgets/wizard/wizard.html | 18 +-- horizon/static/horizon/js/horizon.tables.js | 78 +++++---- .../static/horizon/js/horizon.templates.js | 9 +- .../horizon/client_side/_confirm.html | 12 ++ .../horizon/client_side/_loading.html | 4 +- .../templates/horizon/client_side/_modal.html | 2 +- .../horizon/client_side/templates.html | 3 +- horizon/test/tests/workflows.py | 18 --- horizon/workflows/base.py | 8 - horizon/workflows/views.py | 2 - .../theme-preview/theme-preview.html | 149 +++++++++++++++--- .../theme-preview/theme-preview.scss | 4 - .../dashboard/scss/_bootstrap_helpers.scss | 32 ++++ .../static/dashboard/scss/_variables.scss | 10 +- .../dashboard/scss/components/_dropdowns.scss | 2 +- .../dashboard/scss/components/_loader.scss | 13 ++ .../dashboard/scss/components/_modals.scss | 70 +++----- .../static/dashboard/scss/horizon.scss | 1 + .../components/_context_selection.scss | 2 +- .../horizon/components/_help_panel.scss | 21 --- .../horizon/client_side/_confirm.html | 22 +++ .../theme-modal-sizes-924e5835efe9bb79.yaml | 13 ++ 22 files changed, 316 insertions(+), 177 deletions(-) create mode 100644 horizon/templates/horizon/client_side/_confirm.html create mode 100644 openstack_dashboard/static/dashboard/scss/_bootstrap_helpers.scss create mode 100644 openstack_dashboard/static/dashboard/scss/components/_loader.scss create mode 100644 openstack_dashboard/themes/material/templates/horizon/client_side/_confirm.html create mode 100644 releasenotes/notes/theme-modal-sizes-924e5835efe9bb79.yaml diff --git a/horizon/static/framework/widgets/wizard/wizard.html b/horizon/static/framework/widgets/wizard/wizard.html index d084d7bb4d..b24f38bfd0 100644 --- a/horizon/static/framework/widgets/wizard/wizard.html +++ b/horizon/static/framework/widgets/wizard/wizard.html @@ -8,7 +8,7 @@
-
+
-
+
@@ -46,14 +46,14 @@
- - - - -
+ + + + +
diff --git a/horizon/static/horizon/js/horizon.tables.js b/horizon/static/horizon/js/horizon.tables.js index 76141800c0..fbf557d263 100644 --- a/horizon/static/horizon/js/horizon.tables.js +++ b/horizon/static/horizon/js/horizon.tables.js @@ -226,59 +226,81 @@ horizon.datatables = { }; /* Generates a confirmation modal dialog for the given action. */ -horizon.datatables.confirm = function (action) { - var $action = $(action), - $modal_parent = $(action).closest('.modal'), - name_array = [], - closest_table_id, action_string, name_string, - help_text, - title, body, modal, form; - if($action.hasClass("disabled")) { +horizon.datatables.confirm = function(action) { + var $action = $(action); + + if ($action.hasClass("disabled")) { return; } - action_string = $action.text(); - help_text = $action.attr("help_text") || ""; - name_string = ""; + + var $modal_parent = $action.closest('.modal'); + var name_array = []; + var action_string = $action.text(); + var help_text = $action.attr("help_text") || ""; + var name_string = ""; + // Add the display name defined by table.get_object_display(datum) - closest_table_id = $(action).closest("table").attr("id"); + var $closest_table = $action.closest("table"); + // Check if data-display attribute is available - if ($("#"+closest_table_id+" tr[data-display]").length > 0) { - var actions_div = $(action).closest("div"); - if(actions_div.hasClass("table_actions") || actions_div.hasClass("table_actions_menu")) { + var $data_display = $closest_table.find('tr[data-display]'); + if ($data_display.length > 0) { + var $actions_div = $action.closest("div"); + if ($actions_div.hasClass("table_actions") || $actions_div.hasClass("table_actions_menu")) { // One or more checkboxes selected - $("#"+closest_table_id+" tr[data-display]").has(".table-row-multi-select:checked").each(function() { + $data_display.has(".table-row-multi-select:checked").each(function() { name_array.push(" \"" + $(this).attr("data-display") + "\""); }); - name_array.join(", "); - name_string = name_array.toString(); + name_string = name_array.join(", "); } else { // If no checkbox is selected - name_string = " \"" + $(action).closest("tr").attr("data-display") + "\""; + name_string = " \"" + $action.closest("tr").attr("data-display") + "\""; + name_array = [name_string]; } - name_string = interpolate(gettext("You have selected %s. "), [name_string]); } - title = interpolate(gettext("Confirm %s"), [action_string]); - body = name_string + gettext("Please confirm your selection. ") + help_text; - modal = horizon.modals.create(title, body, action_string); + + var title = interpolate(gettext("Confirm %s"), [action_string]); + + // compose the action string using a template that can be overridden + var template = horizon.templates.compiled_templates["#confirm_modal"], + params = { + selection: name_string, + selection_list: name_array, + help: help_text + }; + + var body; + try { + body = $(template.render(params)).html(); + } catch (e) { + body = name_string + gettext("Please confirm your selection. ") + help_text; + } + + var modal = horizon.modals.create(title, body, action_string); modal.modal(); - if($modal_parent.length) { + + if ($modal_parent.length) { var child_backdrop = modal.next('.modal-backdrop'); // re-arrange z-index for these stacking modal child_backdrop.css('z-index', $modal_parent.css('z-index')+10); modal.css('z-index', child_backdrop.css('z-index')+10); } + modal.find('.btn-primary').click(function () { - form = $action.closest('form'); + var $form = $action.closest('form'); var el = document.createElement("input"); - el.type='hidden'; + el.type = 'hidden'; el.name = $action.attr('name'); el.value = $action.attr('value'); - form.append(el); - form.submit(); + $form + .append(el) + .submit(); + modal.modal('hide'); horizon.modals.modal_spinner(gettext("Working")); return false; }); + return modal; }; diff --git a/horizon/static/horizon/js/horizon.templates.js b/horizon/static/horizon/js/horizon.templates.js index 17d62900cc..244c618fe5 100644 --- a/horizon/static/horizon/js/horizon.templates.js +++ b/horizon/static/horizon/js/horizon.templates.js @@ -1,7 +1,14 @@ /* global Hogan */ /* Namespace for core functionality related to client-side templating. */ horizon.templates = { - template_ids: ["#modal_template", "#empty_row_template", "#alert_message_template", "#spinner-modal", "#membership_template"], + template_ids: [ + "#modal_template", + "#empty_row_template", + "#alert_message_template", + "#spinner-modal", + "#membership_template", + "#confirm_modal" + ], compiled_templates: {} }; diff --git a/horizon/templates/horizon/client_side/_confirm.html b/horizon/templates/horizon/client_side/_confirm.html new file mode 100644 index 0000000000..8ed566735b --- /dev/null +++ b/horizon/templates/horizon/client_side/_confirm.html @@ -0,0 +1,12 @@ +{% extends "horizon/client_side/template.html" %} +{% load i18n horizon %} + +{% block id %}confirm_modal{% endblock %} + +{% block template %}{% spaceless %}{% jstemplate %} +
+ {% trans 'You have selected:' %} [[selection]]. + {% trans 'Please confirm your selection.'%} + [[help]] +
+{% endjstemplate %}{% endspaceless %}{% endblock %} diff --git a/horizon/templates/horizon/client_side/_loading.html b/horizon/templates/horizon/client_side/_loading.html index 7deae3bb7e..92d98088f6 100644 --- a/horizon/templates/horizon/client_side/_loading.html +++ b/horizon/templates/horizon/client_side/_loading.html @@ -5,10 +5,10 @@ {% block template %}{% spaceless %}{% jstemplate %}
-
+
-

[[text]]…

+

[[text]]…

diff --git a/horizon/templates/horizon/client_side/_modal.html b/horizon/templates/horizon/client_side/_modal.html index 7d764af9b0..28e58f5e07 100644 --- a/horizon/templates/horizon/client_side/_modal.html +++ b/horizon/templates/horizon/client_side/_modal.html @@ -14,7 +14,7 @@

[[title]]

- [[body]] + [[[body]]]
[[cancel]] diff --git a/horizon/templates/horizon/client_side/templates.html b/horizon/templates/horizon/client_side/templates.html index 33a0f2169e..e738200e62 100644 --- a/horizon/templates/horizon/client_side/templates.html +++ b/horizon/templates/horizon/client_side/templates.html @@ -2,4 +2,5 @@ {% include "horizon/client_side/_table_row.html" %} {% include "horizon/client_side/_alert_message.html" %} {% include "horizon/client_side/_loading.html" %} -{% include "horizon/client_side/_membership.html" %} \ No newline at end of file +{% include "horizon/client_side/_membership.html" %} +{% include "horizon/client_side/_confirm.html" %} diff --git a/horizon/test/tests/workflows.py b/horizon/test/tests/workflows.py index cec60f21ff..cccf394b4e 100644 --- a/horizon/test/tests/workflows.py +++ b/horizon/test/tests/workflows.py @@ -334,21 +334,3 @@ class WorkflowsTests(test.TestCase): flow = TestWorkflow(req, entry_point="test_action_two") self.assertEqual("test_action_two", flow.get_entry_point()) - - def test_fullscreenworkflow_view(self): - view = TestFullscreenWorkflowView.as_view() - req = self.factory.get("/") - req.is_ajax = lambda: True - res = view(req) - output = res.render() - self.assertRegexpMatches(bytes(output), - b'class="[^"]*\\bfullscreen\\b[^"]*"') - - def test_notfullscreenworkflow_view(self): - view = TestWorkflowView.as_view() - req = self.factory.get("/") - req.is_ajax = lambda: True - res = view(req) - output = res.render() - self.assertNotRegexpMatches(bytes(output), - b'class="[^"]*\\bfullscreen\\b[^"]*"') diff --git a/horizon/workflows/base.py b/horizon/workflows/base.py index 45e11c5007..5ef09a5c50 100644 --- a/horizon/workflows/base.py +++ b/horizon/workflows/base.py @@ -603,13 +603,6 @@ class Workflow(html.HTMLElement): Whether to present the workflow as a wizard, with "prev" and "next" buttons and validation after every step. - .. attribute:: fullscreen - - If the workflow is presented in a modal, and this attribute is - set to True, then the ``fullscreen`` css class will be added so - the modal can take advantage of the available screen estate. - Defaults to ``False``. - """ slug = None default_steps = () @@ -620,7 +613,6 @@ class Workflow(html.HTMLElement): redirect_param_name = "next" multipart = False wizard = False - fullscreen = False _registerable_class = Step def __str__(self): diff --git a/horizon/workflows/views.py b/horizon/workflows/views.py index 8c00067164..65af97804e 100644 --- a/horizon/workflows/views.py +++ b/horizon/workflows/views.py @@ -107,8 +107,6 @@ class WorkflowView(hz_views.ModalBackdropMixin, generic.TemplateView): """ if self.request.is_ajax(): layout = ['modal', ] - if self.workflow_class.fullscreen: - layout += ['fullscreen', ] else: layout = ['static_page', ] diff --git a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html index dccc6261d7..f00f4865ac 100644 --- a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html +++ b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html @@ -1305,29 +1305,7 @@
-
-

Modals

-
-
-
-
-
- -

Modal title

-
-
-

One fine body…

-
-
- - -
-
-
-
-
-
-
+

Popovers

@@ -1344,6 +1322,131 @@
+
+
+

Modals

+
+
+
+
+
+
+
+
+
+ +

Standard Modal

+
+
+

One fine body…

+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ +

Small Modal

+
+
+

One small body…

+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +

XS

+
+
+

One tiny body…

+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +

Large Modal

+
+
+

One large body…

+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +

XL Modal

+
+
+

One super large body…

+
+
+ + +
+
+
+
+
+
+