From 20ff47185f90bc7ffe52f8e0bacc8707da5df7c6 Mon Sep 17 00:00:00 2001 From: Diana Whitten Date: Tue, 1 Sep 2015 18:25:01 -0700 Subject: [PATCH] Horizon Login now inherits from Bootstrap Theme The Horizon login page was not properly inheriting its styles from its theme. The implementation was making use of the _modal_form.html template just to inherit a form, but there was no way to remove the modal classes with that implementation. The login page now uses a standard Bootstrap 'panel'. This will inherit the look and feel of any theme more naturally when its not inside of a modal, as not all themes use box-shadow outside of a modal; some chose to be very flat on purpose, and the built in panels take advantage of this. When used within the Region selector, it does need to exist within a modal, so some simple logic was added for the classes necessary. The panel is a little bit wider than it was before, but it is now a standard Bootstrap column size, so its responsive down to a very small screen size. The modal is a little bit wider than it was before as well, as it is is now the standard medium modal size for Bootstrap. Improvements: * Logo is now an tag, which means it can automagically resize to fit in the available space * Unneccesary styles removed * _splash.scss was only being used in _login.html, which was confusing, so _splash.scss is renamed to _login.scss, and is now a class based style, so it can live in /components * Its now Theme ready and responsive * Region Selector Login now has a proper modal backdrop * has-error help-text should not be alert alert-danger Partially-Implements: blueprint horizon-theme-css-reorg Partially-Implements: blueprint bootstrap-html-standards Change-Id: Ie968414ab8ef2154623edfc21ce5623e8c4057c6 --- doc/source/topics/customizing.rst | 20 +++++ .../auth/login/login-finder.directive.js | 2 +- .../static/auth/login/login.regular.mock.html | 2 +- horizon/static/auth/login/login.spec.js | 4 +- .../static/auth/login/login.websso.mock.html | 2 +- horizon/templates/auth/_description.html | 4 +- horizon/templates/auth/_login.html | 49 ++---------- horizon/templates/auth/_login_form.html | 80 +++++++++++++++++++ horizon/templates/auth/_login_modal.html | 28 +++++++ horizon/templates/auth/_login_page.html | 23 ++++++ .../templates/horizon/common/_form_field.html | 6 +- .../horizon/common/_region_selector.html | 2 +- .../static/dashboard/scss/_splash.scss | 33 -------- .../static/dashboard/scss/_util.scss | 7 ++ .../dashboard/scss/components/_login.scss | 28 +++++++ .../static/dashboard/scss/horizon.scss | 21 +---- .../test/integration_tests/pages/loginpage.py | 2 +- .../themes/default/bootstrap/_styles.scss | 3 + .../themes/default/bootstrap/_variables.scss | 6 +- .../default/bootstrap/components/_panels.scss | 3 + .../themes/default/horizon/_styles.scss | 12 ++- 21 files changed, 227 insertions(+), 110 deletions(-) create mode 100644 horizon/templates/auth/_login_form.html create mode 100644 horizon/templates/auth/_login_modal.html create mode 100644 horizon/templates/auth/_login_page.html delete mode 100644 openstack_dashboard/static/dashboard/scss/_splash.scss create mode 100644 openstack_dashboard/static/dashboard/scss/_util.scss create mode 100644 openstack_dashboard/static/dashboard/scss/components/_login.scss create mode 100644 openstack_dashboard/themes/default/bootstrap/components/_panels.scss diff --git a/doc/source/topics/customizing.rst b/doc/source/topics/customizing.rst index 926db263f..0f89439e4 100644 --- a/doc/source/topics/customizing.rst +++ b/doc/source/topics/customizing.rst @@ -128,6 +128,7 @@ full use of the Bootstrap theme architecture. ~~~~~~~~~~~~~~ * Tables_ +* Login_ Step 1 ------ @@ -197,6 +198,25 @@ The standard Bootstrap tables will be borderless by default. If you wish to add a border, like the ``default`` theme, see ``openstack_dashboard/themes/default/horizon/components/_tables.scss`` +.. _Login: + +Login +----- + +Login Splash Page +~~~~~~~~~~~~~~~~~ + +The login splash page now uses a standard Bootstrap panel in its implementation. +See the **Panels** section in your variables file to variables to easily +customize. + +Modal Login +~~~~~~~~~~~ + +The modal login experience, as used when switching regions, uses a standard +Bootstrap dialog. See the **Modals** section of your variables file for +specific variables to customize. + Bootswatch and Material Design ------------------------------ diff --git a/horizon/static/auth/login/login-finder.directive.js b/horizon/static/auth/login/login-finder.directive.js index 138581a4d..b00b6fe0f 100644 --- a/horizon/static/auth/login/login-finder.directive.js +++ b/horizon/static/auth/login/login-finder.directive.js @@ -47,7 +47,7 @@ * `helpText` exists outside of element, * so we have to traverse one node up */ - var helpText = element.parent().find('#help_text'); + var helpText = element.parent().find('.help_text'); helpText.hide(); // Update the visuals when user selects item from dropdown diff --git a/horizon/static/auth/login/login.regular.mock.html b/horizon/static/auth/login/login.regular.mock.html index 3ab996e4e..02b6a3c6d 100644 --- a/horizon/static/auth/login/login.regular.mock.html +++ b/horizon/static/auth/login/login.regular.mock.html @@ -1,5 +1,5 @@
-

Some help text.

+

Some help text.

diff --git a/horizon/static/auth/login/login.spec.js b/horizon/static/auth/login/login.spec.js index 4311e5ad5..e6083c001 100644 --- a/horizon/static/auth/login/login.spec.js +++ b/horizon/static/auth/login/login.spec.js @@ -64,7 +64,7 @@ authType = element.find('#id_auth_type'); userInput = element.find("#id_username").parents('.form-group'); passwordInput = element.find("#id_password").parents('.form-group'); - helpText = element.find('#help_text'); + helpText = element.find('.help_text'); $rootScope.$apply(); }); @@ -96,7 +96,7 @@ passwordInput = element.find("#id_password").parents('.form-group'); domainInput = element.find("#id_domain").parents('.form-group'); regionInput = element.find("#id_region").parents('.form-group'); - helpText = element.find('#help_text'); + helpText = element.find('.help_text'); $rootScope.$apply(); }); diff --git a/horizon/static/auth/login/login.websso.mock.html b/horizon/static/auth/login/login.websso.mock.html index 277474d93..3482abbaf 100644 --- a/horizon/static/auth/login/login.websso.mock.html +++ b/horizon/static/auth/login/login.websso.mock.html @@ -1,5 +1,5 @@ -

Some help text.

+

Some help text.

- -
- {%endif%} - {% include "auth/_description.html" %} -
- {% if request.user.is_authenticated and 'next' in request.GET %} -
-

{% trans "You do not have permission to access the resource:" %}

-

{{ request.GET.next }}

-

{% url 'horizon:user_home' as home_url %}{% blocktrans %}Login as different user or go back to home page{% endblocktrans %}

- -
- {% endif %} - {% if request.COOKIES.logout_reason %} -
-

{{ request.COOKIES.logout_reason }}

 -
- {% endif %} - {% if next %}{% endif %} - {% include "horizon/common/_form_fields.html" %} -
-{% endblock %} - -{% block modal-footer %} - -{% endblock %} +{% if 'is_modal' in request.GET or 'is_modal' in request.POST %} + {% include 'auth/_login_modal.html' %} +{% else %} + {% include 'auth/_login_page.html' %} +{% endif %} diff --git a/horizon/templates/auth/_login_form.html b/horizon/templates/auth/_login_form.html new file mode 100644 index 000000000..0cd1acf19 --- /dev/null +++ b/horizon/templates/auth/_login_form.html @@ -0,0 +1,80 @@ +{% load i18n %} +{% load url from future %} + +{% block pre_login %} + + {% csrf_token %} +{% endblock %} + +
+ +
+ {% block login_header %} + + {% endblock %} +
+ +
+ {% block login_body %} + {% comment %} + These fake fields are required to prevent Chrome v34+ from autofilling form. + {% endcomment %} + {% if HORIZON_CONFIG.password_autocomplete != "on" %} + + {%endif%} + {% include "auth/_description.html" %} +
+ {% if request.user.is_authenticated and 'next' in request.GET %} +
+

+ {% trans "You do not have permission to access the resource:" %} +

+

+ + {{ request.GET.next }} + +

+

+ {% url 'horizon:user_home' as home_url %} + {% blocktrans %} + Login as different user or go back to home page + {% endblocktrans %} +

+
+ {% endif %} + {% if request.COOKIES.logout_reason %} +
+

{{ request.COOKIES.logout_reason }}

+
+ {% endif %} + {% if next %} + + {% endif %} + {% include "horizon/common/_form_fields.html" %} +
+ {% endblock %} +
+ +
+ {% block login_footer %} + +
+ {% endblock %} +
+
+ +{% block post_login%} + +{% endblock %} diff --git a/horizon/templates/auth/_login_modal.html b/horizon/templates/auth/_login_modal.html new file mode 100644 index 000000000..77f7584b8 --- /dev/null +++ b/horizon/templates/auth/_login_modal.html @@ -0,0 +1,28 @@ +{% extends 'auth/_login_form.html' %} +{% load i18n %} + +{% block pre_login %} + +{% endblock %} \ No newline at end of file diff --git a/horizon/templates/auth/_login_page.html b/horizon/templates/auth/_login_page.html new file mode 100644 index 000000000..6d72a2e67 --- /dev/null +++ b/horizon/templates/auth/_login_page.html @@ -0,0 +1,23 @@ +{% extends 'auth/_login_form.html' %} +{% load i18n %} + +{% block pre_login %} + +{% endblock %} \ No newline at end of file diff --git a/horizon/templates/horizon/common/_form_field.html b/horizon/templates/horizon/common/_form_field.html index 711b65111..a9062fc18 100644 --- a/horizon/templates/horizon/common/_form_field.html +++ b/horizon/templates/horizon/common/_form_field.html @@ -20,7 +20,7 @@ {% endif %} {% for error in field.errors %} - {{ error }} + {{ error }} {% endfor %} @@ -42,7 +42,7 @@ {% endfor %} {% for error in field.errors %} - {{ error }} + {{ error }} {% endfor %} @@ -70,7 +70,7 @@ {% endif %} {% endwith %} {% for error in field.errors %} - {{ error }} + {{ error }} {% endfor %} {% endif %} diff --git a/horizon/templates/horizon/common/_region_selector.html b/horizon/templates/horizon/common/_region_selector.html index a3a16dd9d..bbcd9f6dc 100644 --- a/horizon/templates/horizon/common/_region_selector.html +++ b/horizon/templates/horizon/common/_region_selector.html @@ -7,7 +7,7 @@ {% for region in regions.available %} {% if region.name != regions.current.name %}
  • - + {{ region.name }}
    • diff --git a/openstack_dashboard/static/dashboard/scss/_splash.scss b/openstack_dashboard/static/dashboard/scss/_splash.scss deleted file mode 100644 index d90578492..000000000 --- a/openstack_dashboard/static/dashboard/scss/_splash.scss +++ /dev/null @@ -1,33 +0,0 @@ - -/** - * Styling for the splash/login page. - * Restyled for federated login. - */ - -#splash { - - .login { - background: url(../img/logo-splash.png) no-repeat center 35px; - position: absolute; - top: 80px; - left: 50%; - margin: 0 0 0 -195px; - padding-top: 170px; - width: 390px; - border: 1px solid $border-color; - max-height: none; - border-radius: 6px; - @include box-shadow(0 3px 7px rgba(0, 0, 0, 0.3)); - background-clip: padding-box; - - p#help_text { - display: none; - padding: 1em 0.5em; - margin: 0; - } - } - - p.help-block { - display: none; - } -} \ No newline at end of file diff --git a/openstack_dashboard/static/dashboard/scss/_util.scss b/openstack_dashboard/static/dashboard/scss/_util.scss new file mode 100644 index 000000000..cf1fc4fa5 --- /dev/null +++ b/openstack_dashboard/static/dashboard/scss/_util.scss @@ -0,0 +1,7 @@ +/* Some utility classes useful everywhere */ + +.row .horizontal-center, +.horizontal-center { + float: none; + margin: 0 auto; +} \ No newline at end of file diff --git a/openstack_dashboard/static/dashboard/scss/components/_login.scss b/openstack_dashboard/static/dashboard/scss/components/_login.scss new file mode 100644 index 000000000..70445c6f7 --- /dev/null +++ b/openstack_dashboard/static/dashboard/scss/components/_login.scss @@ -0,0 +1,28 @@ +/** + * Styling for the splash/login page. + */ + +.login { + margin-top: $navbar-height*2; + + .splash-logo { + padding: $padding-large-horizontal $padding-large-vertical; + max-width: 100%; + } + + .help_text { + display: none; + } + + .login-title { + display: inline-block; + } + + ul.errorlist { + padding-left: 0; + } + + .modal-content .panel { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss index 2ff11d3de..fb4bc299a 100644 --- a/openstack_dashboard/static/dashboard/scss/horizon.scss +++ b/openstack_dashboard/static/dashboard/scss/horizon.scss @@ -7,13 +7,16 @@ // Horizon Mixins @import "mixins"; +// Horizon Util +@import "util"; + // Vendor Components @import "/bootstrap/scss/bootstrap"; @import "/horizon/lib/font-awesome/scss/font-awesome.scss"; @import "/horizon/lib/magic_search/magic_search.scss"; // Dashboard Components -@import "splash"; +@import "components/login"; @import "components/resource_browser"; @import "components/sidebar"; @import "components/navbar"; @@ -98,10 +101,6 @@ ul { margin: 0; } -.login ul.errorlist { - padding-left: 0; -} - // Disc-styled list. This list should be used to build bullet-items lists. .list-bullet { list-style: disc; @@ -254,7 +253,6 @@ a.current_item:hover h4 { } .modal > form, -.login > form, .alert-actions > form { margin-bottom: 0; } @@ -318,17 +316,6 @@ a.current_item:hover h4 { @extend .form-control; } -form label { - text-align: left; - color: $gray; - font-weight: bold; - display: inline-block; -} - -.login.modal .modal-dialog { - width: 390px; -} - .modal.fullscreen .modal-dialog { width: 90%; margin: auto; diff --git a/openstack_dashboard/test/integration_tests/pages/loginpage.py b/openstack_dashboard/test/integration_tests/pages/loginpage.py index 1630bb73f..8d6587816 100644 --- a/openstack_dashboard/test/integration_tests/pages/loginpage.py +++ b/openstack_dashboard/test/integration_tests/pages/loginpage.py @@ -24,7 +24,7 @@ class LoginPage(pageobject.PageObject): _login_username_field_locator = (by.By.ID, 'id_username') _login_password_field_locator = (by.By.ID, 'id_password') _login_submit_button_locator = (by.By.CSS_SELECTOR, - 'div.modal-footer button.btn') + 'div.panel-footer button.btn') _login_logout_reason_locator = (by.By.ID, 'logout_reason') def __init__(self, driver, conf): diff --git a/openstack_dashboard/themes/default/bootstrap/_styles.scss b/openstack_dashboard/themes/default/bootstrap/_styles.scss index 74d4b7844..6f53d7e3e 100644 --- a/openstack_dashboard/themes/default/bootstrap/_styles.scss +++ b/openstack_dashboard/themes/default/bootstrap/_styles.scss @@ -1,4 +1,7 @@ +@import '/bootstrap/scss/bootstrap/mixins/vendor-prefixes'; + @import 'components/dropdowns'; @import 'components/navbar'; @import 'components/navs'; +@import 'components/panels'; @import 'components/tables'; \ No newline at end of file diff --git a/openstack_dashboard/themes/default/bootstrap/_variables.scss b/openstack_dashboard/themes/default/bootstrap/_variables.scss index 5c0f6fbb8..52ecc4196 100644 --- a/openstack_dashboard/themes/default/bootstrap/_variables.scss +++ b/openstack_dashboard/themes/default/bootstrap/_variables.scss @@ -689,16 +689,16 @@ $list-group-link-heading-color: #333 !default; $panel-bg: #fff !default; $panel-body-padding: 15px !default; $panel-heading-padding: 10px 15px !default; -$panel-footer-padding: $panel-heading-padding !default; +$panel-footer-padding: 15px !default; $panel-border-radius: $border-radius-base !default; //** Border color for elements within panels $panel-inner-border: #ddd !default; -$panel-footer-bg: #f5f5f5 !default; +$panel-footer-bg: $panel-bg !default; $panel-default-text: $gray-dark !default; $panel-default-border: #ddd !default; -$panel-default-heading-bg: #f5f5f5 !default; +$panel-default-heading-bg: $panel-bg !default; $panel-primary-text: #fff !default; $panel-primary-border: $brand-primary !default; diff --git a/openstack_dashboard/themes/default/bootstrap/components/_panels.scss b/openstack_dashboard/themes/default/bootstrap/components/_panels.scss new file mode 100644 index 000000000..d9a55c1f1 --- /dev/null +++ b/openstack_dashboard/themes/default/bootstrap/components/_panels.scss @@ -0,0 +1,3 @@ +.panel { + @include box-shadow(0 3px 7px rgba(0, 0, 0, 0.3)); +} \ No newline at end of file diff --git a/openstack_dashboard/themes/default/horizon/_styles.scss b/openstack_dashboard/themes/default/horizon/_styles.scss index bf6deb4d1..a165ae872 100644 --- a/openstack_dashboard/themes/default/horizon/_styles.scss +++ b/openstack_dashboard/themes/default/horizon/_styles.scss @@ -10,4 +10,14 @@ // The 114 is a legacy value to push the context-menu over padding-right: 114px; -} \ No newline at end of file +} + +// TODO(hurgleburgler): This seems awfully global ... and strange +// need to look into why we are actually doing this. +form label { + text-align: left; + color: $gray; + font-weight: bold; + display: inline-block; +} +