A recent branding effort exposed several aspects of the header
templates that need to be more composable to enable richer
customizations.
The Horizon _header.html template has many components within it:
region pickers, user menus, logos. All of these things are highly
desirable to customize, but because it is all contained in the same
template, a brander will have to override the entire template. This
is not ideal as it increase the cost of maintenance.
The splash section of the login page, the context selector, the logo
section of the header, the user menu and the region selector are now
composable to a much more granular level. The top navigation menus
can now be used outside of existing within a list. The templates
now allow use as normal, standalone dropdown items.
Also, the current primary color used for 'material' was highly
unpleasant with OpenStack Red. Another color on the material design
palette was chosen, very close to the previous blue. See
https://www.google.com/design/spec/style/color.html#color-color-palette
To showcase this new composability, 'material' now shows how to
customize the logo and logo-splash beyond just replacing the png, but
now allowing the use of any type of image. In this case, the
OpenStack logos have been upgraded with their svg counterparts.
It was also noted that the context selection menu was using the wrong
variable to set the color of its links. This was corrected.
Closes-Bug: #1518584
Change-Id: Ib544176b9836e17fc913170664646e1d10eda831
Angular Panels have enabled ngRoute and HTML5 which
allows Angular to handle routing which makes all
routes to pass via Angular.
Links that do not have route defintion as a result stop
working.
This can be fixed by specifying the target="_self" on the <a> tags.
This is already in place for the Sidebar. It needs to done for the
Header Links as well.
Closes-Bug: #1531734
Change-Id: Ida76b40fdf0b66ba3ee3af4d32701974c312af57
The dropdownToggle directive from angular-ui/bootstrap v0.11.2
conflicts with the native Bootstrap data-toggle="dropdown" attribute
(see https:github.com/angular-ui/bootstrap/issues/2156). This is fixed
in 0.13, but before that it'd be valuable to ensure that the same html
markup works the same way with both versions of angular-ui/bootstrap
(0.11.2 and 0.13). The decorator code could be safely deleted once
Horizon migrates to angular-ui/bootstrap v0.13.
Also fix dropdowns in material theme templates.
Closes-Bug: #1466146
Change-Id: I8f01c1ce7b0a5dc29bf9d8aba23c9ea7e6e1ec35
In order to facilitate the bulk of the CSS Reorg effort, it was
extremely beneficial to quickly toggle between many different themes
in order to validate proper cascading inheritance. This work
prompted the following example theme.
The 'material' theme gives an example of how to make use of a 3rd
party theme using the theming functionality. In addition to
incorporating a theme, loaded as a static asset using
requirements.txt, it also gives examples of how to cleanly override
styles, variables, icon fonts and Django templates.
This theme is replacing 'blue' as the example of how to use a theme
other than 'default'.
To use this theme, add the theme to your local_settings.py:
CUSTOM_THEME_PATH = 'themes/material', recollect and recompress your
static files.
Change-Id: Ic67189de5aac5ca541ad6fe82b823e8fcf318bd0
Partially-Implements: blueprint horizon-theme-css-reorg
Diana Whitten