A major part of the css reorg is a better organization of the css
styles themselves. horizon.scss should be a global import level file.
Keypair details was, for some reason, using a textarea element to
display non-form 'Public Key'. Textarea is used for allowing users
to input data, this is a read only display. Replaced with a simple
<div> and removed the unnecessary styles from horizon.scss. Added
a util class for easier use.
Cleaned up class name for 'key-text' class name. Adding classes,
even if they are unused, allows for rich customization hooks for
consumers of Horizon.
Change-Id: I3d5ce1cb0a4cae6774e515206e511f61e2a9d10e
Partially-Implements: blueprint horizon-theme-css-reorg
The magic search css was not themeable out of the box. Also, we were
overriding almost every style in it with our own. This causes
unneccessary complexity in the css; we should just not include it and
provide css that uses theme variables.
Partially-Implements: blueprint horizon-theme-css-reorg
Change-Id: I116e32b64bd6ba4c8f3e65fd1e145387f3071663
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
A major part of the css reorg is a better organization of the css
styles themselves. horizon.scss should be a global import level file.
Launch Instance Flavor Table needs to have base Bootstrap table class.
It was noted that a bold style set for the pie charts title was
affecting the same class for the bar charts. This was fixed.
Change-Id: If4ba59259632aa3e902129cc50c83fb9c1a36f89
Partially-Implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards
Material Design is ALL about a stack of 3-D elements, so the upper
toasts/messages/growls in the corner should really reflect that.
More information here:
http://tinyurl.com/qequctw
Change-Id: I62dd1bbc51e9ad5b9f538b5c02355f8559977f2b
Closes-bug: #1528397
Horizon messages (toasts/growls/alerts) now inherit from a theme.
In addition, a default message type was added 'default', since it
it possible to kick up an alert without a type specified at all.
To test all the types, run the following command on a JavaScript
console with Horizon loaded:
horizon.alert('warning', 'foo');
horizon.alert('info', 'foo');
horizon.alert('success', 'foo');
horizon.alert('', 'foo');
horizon.alert('danger', 'foo');
Partially-Implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards
Change-Id: Ice65773fe1d2cdc0305fd01acd8bea3d3f84a9fa
Barcharts were using a complex D3 mechanism to draw very very simple
markup that can be achieved using a simple Bootstrap Stacked Progress
Bar. A templatetag was added to aid in markup reuse.
Also, a 'minifyspace' template helper was also added that enables us
to make templates that have excessive attributes to be more readable,
while not affecting the rendered HTML on the page.
By moving the logic to simple markup, the rendering of the barcharts
are now immediate on the page, instead of requiring Horizon Init
functions to run and draw. This immediate render removes the first
animation on the Quota bars, but it retains animations driven by user
interaction with the forms.
It was hoped that horizon.d3barchart.js could be completely removed,
but it is currently being used by horizon.d3linechart.js. This will
be addressed soon, but was outside of the scope of this patch.
Much of the markup on the Quota pages was cleaned up and made simpler
to use existing style as well as replacing improper usage of <strong>
Summary of Improvements:
* Immediate Render time for Bar Charts
* Bar Charts now Inherit from theme, and use progress bar styles
* 'minifyspace' was added to increase readability to templates
* bs_progress_bar templatetag was added to facilitate code reuse
* Markup for Quota Bar pages refactored
Partially-Implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards
Change-Id: I16a1e3955d3a4fded0f2ea6a87f5e7c2f630185d
It was noted, while fixing the barcharts, that there were several
elements of the Pie Chart Quota pages that needed to use proper
Bootstrap markup.
Styles for Quota were hardcoded. The styles were moved from
horizon.scss into their own component file and made to properly use
theme variables.
Partially-Implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards
Change-Id: I7bdf4f9366b7c5b9c8f61340bdc96a779c503366
This patch creates a breadcrumb header component and moves the detail
styling into the theme. This should make it easier for themes to
override.
- Alter the breadcrumb header padding, so that everything is aligned correctly
after the bootstrap tabs patch: https://review.openstack.org/#/c/246004/
- Add a small margin under tabs, to account for both details and
workflows; remove the previous workflows-only padding.
Change-Id: I11034d30de900eda50bbc92c275194b6ec731c0d
Closes-Bug: 1516021
The modal size is too small for complex modals like the create
instance wizard. This patch increases the size to the same
as the default theme.
Change-Id: Ic69eb048af1a1b619d4eb0a6ffdfde9cdadc9ad2
Closes-Bug: 1520431
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
To test, go to ng launch instance wizard. Open up the slide out
help panel (via the question mark icon). It is missing the close
icon.
Change-Id: I24fcf8a0eb0dd475791ee1832534b1072f78507e
Closes-Bug: #1519484
In the 'default' and 'material' themes, we remove the default bootstrap
margin on the top navbar because it creates a gap between the sidenav
and the topnav. This should be a global style so that other themes can
take advantage of it. It looks best with a single 1px value on
alternate themes.
Change-Id: Ie0f3e5e22c29fe737d128af6d2fd6499fe9ee99a
Closes-Bug: #1518455
When using a theme other than 'default', a custom logo that is too
big won't be sized to fit inside of the header exactly perfectly.
The 'default' theme does this. The style just needs to be moved
outside of 'default' theme to be global.
Change-Id: I241e49ad94cba24592209f5f4f23eedeb0e592a6
Closes-Bug: #1518123
Tabs were pretty basic. For the most, tabs were using the standard
styles nicely, except when embedded inside of a modal. There was a
lot of adding padding and removing padding to the tab-content and
modal container. This has been cleaned up.
Also, the 'asterisk' that is used to show when a tab has required
information for a workflow was changed to an icon font.
Many unused styles were removed from horizon.scss.
Partially-Implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards
Change-Id: I929de0ae31a3c2cca9e332956eed755c4e279f3d
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 <img> 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
Horizon tables had many hardcoded padding and colors in them, which
made them not theme-ready. This patch vets all the old table styles
for their current usage (if any) and reimplemented the necessary
rules to inherit from the theme.
There were a number of styles that were obviously not being used any
longer. These rules were removed. There were also many rules that
were very difficult to determine their lineage, as the scss lacks
much needed commentary on why some styles exist (if they are working
around specific browser issues, or usability glitches, etc).
A few examples of some of these removed styles include:
* th.narrow
* td.select
* th span.required:after
This patch does not include refactor of the dropdowns or inline edit.
Immediate Improvements:
* Table Actions are now all consistent heights
* The cursor is a pointer ONLY on sortable rows now
* The column sort indicator is now an icon font, therefore high def
* table_header height no longer hardcoded, can grow with theme
* Slow waiting cursor style using global selector * removed
* Many dead styles were removed!!
* Hovering on status_unknown rows now keeps proper color
Partially-Implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards
Change-Id: I4a904704926dc50010ad480539db828eff559fa0
A recent change fixed the sidebar height of the default theme but introduced
a bug in the Large screen of the Material Design theme.
It was also noted, while fixing this bug, that old styles were also
preventing webkit checkbox customizing properly on Chrome.
Change-Id: I5809037d336e401611614d0c7b2e0569a1f4c07a
Closes-Bug: #1508692
Adds a common detail page and a breadcrumb templatetag. The breadcrumb
templatetag defaults to displaying the panel name and the existing page
title, which is usually name_or_id. The templatetag can also access the
context, and accepts a "custom_breadcrumb", for complex nested pages or
customised layouts.
This type of navigation is also useful for small devices (mobile/
tablet), providing logical direction that isn't dependant on the
sidebar being displayed.
Currently implemented in Images, Volumes (simple breadcrumb), Ports and
Subnets (more complex nesting).
This approach has been chosen as manipulation of the URLs was seen as
undesirable, making request.path too unreliable. Furthermore, the
templatetag seperation means this could easily be used in other views.
NOTE: The network details page itself will be updated following the
resolution of https://bugs.launchpad.net/horizon/+bug/1416838
Change-Id: I7443b2ffa61560e5d1fd4d6d91b11201f1db6fac
Partial-Bug: 1413823
While working on making various dropdowns in Horizon Bootstrap
compliant, it was noticed that there are two distinct types of
dropdowns currently being used in Horizon. This creates some style
inconsitencies. This consolidates the styles so that it will be
easier to make the component theme-ready.
Partially-Implements: blueprint horizon-theme-css-reorg
Change-Id: Ib2be3fef3af01fcf85163f24cabb835e23ca2aff
This small css change adjusts how the checkbox displays
in safari so the checkbox is in the correct place.
Change-Id: I8431655ef05b936f0a41fc54b849c8bdb5d373d5
Closes-bug: #1493581
Bootswatch 3.3.5.2 is trying to load external assets from
googleapis.com
Bootswatch 3.3.5.3 makes this variable configurable, so we should
update and take advantage of this configuration.
Change-Id: Ib0a61af9568c44ec15aa4bd8bb85bc5699ddc05b
Closes-Bug: #1492070
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
Horizon's pie charts had hard coded styles directly in the JavaScript
code. This made it impossible for them to inherit any of their look
and feel from the install theme. This patch fixes that problem.
It was noted, while doing the refactor, that the legend was being
implemented within D3, but this was not necessary at all, since it
has no graphing visuals associated with it. It was impossible to
allow the legend label sizes to inherit and be configurable from
the css while they were being generated in the SVG. The height
could never be known unless D3 knew the height of each element.
Noted Improvements:
* Consistent Colors! Colors, even for distribution charts, now come
from the palette
* All aspects of the charts are now resizable and can inherit the
sizes of the charts, as well as the paddings and type settings
from the theme
* A bug in the 'Show Numbers' function was discovered and will be
fixed as a result
* The legend symbol, which was a hardcoded cube before, is now an
icon font, and therefore can be customized per theme. I.E., you
can now use rectangles, circles, ovals, smiley faces, etc
* It now inherits directly from the Theme
Change-Id: I5d5c13e57553f8b504593aac6d7611175e900f3c
Partially-Implements: blueprint horizon-theme-css-reorg
Due to recent changes to faciliate logo and favicon overrides,
the documentation was out of date.
Also, it was noted that the theme path needed to get updated as
well because it was recently moved up a directory.
It was noted, while writing the documentation, that styles had
been placed in the 'default' theme that should be global.
Change-Id: I025514b8ff31863858a7941c2380dd8c6397772a
Closes-bug: #1485272
There is double maintenance right now when you change the STATIC_URL
via settings.py, you must also use a custom theme to have access to
also change $webroot within the SCSS to serve font-awesome from a
custom location.
This patch makes the STATIC_URL available by default in the SCSS
namespace through variable $static_url.
Also, it was being called $webroot in the SCSS, but it should
actually be called $static_url since it should map directly to
settings.py's STATIC_URL.
Change-Id: I1ee40652f8110b176f45b8811f0e0197789a73da
Closes-Bug: #1478794
An unintended result of a recent refactor left the context picker css
without any love. The refactor of the topbar needs to have style
parity to its previous incantation.
It was noted that the design for the current context selection is not
a good pattern to follow for responsive design. The menu grows
horizontally, which will make it difficult to see on smaller screens
as well as when it is displayed in the now responsive topbar. The
original design still applies to larger screens, but now on smaller
screens, the menu will fall back to a vertically growing responsive
menu.
The nav-header color has been changed, because it was also the same
color as the 'disabled' nav item state, which was confusing.
Refactoring of the some of the context_selection.py code was required
in order to support wrapping the menus in <li> tagss without needing
to change their corresponding HTML files. Since the files can be
used as templatetag templates outside of _header.html, it was best to
keep them as stand alone <ul> lists.
Change-Id: I6e7c7b6fed08d215bcf83941da1bf90b40cd17b2
closes-bug: #1483910
partially implements bp: bootstrap-html-standards
Horizon's sidebar now uses .nav and implements a nav using
.nav-stacked and .nav-pills to support a standard Bootstrap theme.
It was also simplfied to use Bootstrap's built in accordion
functionality and therefore removes all of the javascript required to
duplicate this experience. There was also a small glitchy experience
with the custom accordion code, this is now solved with Bootstrap.
All highly customized style elements that were specific to the 'default'
theme were moved into the theme folder itself. Only the styles
necessary to conform standard Bootstrap remain in the dashboard
directory tree.
The sidebar was formerly named an 'accordion-nav', but this name is
coupled with the presentational experience that is implemented within
the sidebar. Therefore, sidebar is more semantic than accordion.
Because it is now simple to override the sidebar with a non-accordion
experience, we should just call it the sidebar going forward.
sidebar-bg.png was removed as it was only limiting the ability to
easily grow the size of the sidebar. It was providing a box-shadow
which can be done with pure css.
To test and use this functionality, clean your static directory, then
run collectstatic and compress prior to starting your server.
Partially-Implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards
Change-Id: Ic7fcde7dd82e70815dc7fcae04bc9ae9d618d4d8
Horizon's top nav now uses <nav> and correcly implements
the Bootstrap HTML standards to make a responsive experience.
Partially-Implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards
Change-Id: I73c5529ae477a17f10a17946ac7120969578a0ba
Recent changes to Horizon Themes has broadened the scope of simply
containing only static files. Themes can now house simple Django
overrides and as such, should not be located under '/static' by
default any longer.
Change-Id: Ifbf4cf65e063a2f5342d9cfdc82287a827789e93
Partially-Implements: blueprint horizon-theme-css-reorg