The default bootstrap styling for table rows uses the same classes as
alerts (warning, danger etc). Rather than layering additional logic
around this with a new class, we should just fall back to the documented
boostrap method.
Also resets the warning colour to its default bootstrap variable, rather
than carrying an altered version.
Change-Id: I3472244fcbbd121a8de48d78084554760dab6385
Closes-Bug: 1615632
The default theme houses lots of styles that intended to maintain
style parity with legacy Horizon during the themability effort.
Because Horizon is mostly ingesting native bootstrap now, we can
just remove the 'default' theme entirely and use vanilla Bootstrap
styles for Basic Horizon moving forward.
implements: blueprint horizon-bootstrap-styles
Change-Id: I76f48265321037d1bc71b52cd7a86531548816ba
Material progress bars are so thin, that when you add text to them, its
unplesant. We need to support a progress bar type containing text that
is bigger by default.
Used this opportunity to align other progress bar experiences, and in
addition, generalize the text progress bar and progress loader bar for
general use everywhere.
Change-Id: I3d51c6a4582e3dc043f30632b6635a9ff17f5fbf
Closes-bug: #1602880
* 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
The default theme assumes ALL dropdowns are drop'down' menus, however
Bootstrap supports dropup menus as well. This simplies the logic in
the theme's dropdown.scss file in order to support all Bootstrap
types.
Also, added the dropup to the theme preview page for ease of testing.
Closes-bug: #1583754
Change-Id: Ib05bc59c35371dc8b2291d4a0522cf4c52047813
Horizon was using a standard select input. Unfortunately, this
type of input is only customizable to a small extent.
I/We have created a new input type for forms to use that is a bootstrap
dropdown. This will allow bootstrap themes to affect selects the same
way they do for check boxes and radio buttons and the like.
Material's inputs are a bit special, so custom css was added to keep
style parity with Bootswatch's Paper.
co-authored-by: brian.tully@hp.com
co-authored-by: hurgleburgler@gmail.com
ThemableSelect widget template has been modified so that shadow select
element does not contain any classes (which are usually used for
customizing appearance - since it's hidden, it doesn't need
that). Given that we could match legacy select element as 'div >
select.form-control' with no possibility that SelectFormFieldRegion
(legacy select widget region) will bind a hidden part of
ThemableSelect widget and intercept all commands send to
ThemableSelectFormFieldRegion. ThemableSelectFormFieldRegion was
modified to still use legacy widget wrapper for getting 'name' and
'value' properties, while doing all other things on its own, not using
Selenium wrapper for <select>.
Co-Authored-By: Timur Sufiev <tsufiev@mirantis.com>
Change-Id: Ie921b3adc2e1d3388d3c2aa1f76afe3af6ceb87b
Partially-implements: blueprint horizon-theme-css-reorg
We've added breadcrumbs to the Details pages, but its a pretty
inconsistent experience. This patch adds breadcrumbs to the base
template, making the breadcrumbs consistent across all pages; this will
be useful when the side nav is hidden for responsive design. This patch
also makes the breadcrumbs on the detail pages behave better with
theming.
- Made the detail header and actions avoid using floats
- Moved breadcrumb truncating to the front end, so that it can be
customised easily via CSS
- Manually added breadcrumb for ngcontainers page
- Removed overly specific HTML check from Key Pair Details test
- Fixed <dt> alignment on Key Pair Details page
Closes-Bug: 1554812
Partially-Implements: blueprint navigation-improvements
Change-Id: Ibcd4c369b5d8ad62f7c839c0deeaefc750677b40
* Added Distribution and Usage charts to the theme preview page to
make branding them easier.
* Added additional color options for the distribution pie charts
* Cleaned up naming, using dashes instead of underscores
Closes-bug: #1565303
Change-Id: If82a94ccc8e37353dcaf313929ca876b92552c28
This patch adds listing of containers and objects in selected
containers, but not additional functionality. That additional
functionality will be added in subsequent patches.
To test set DISABLED = False in _1921_project_ng_containers_panel.py
Change-Id: I37980a7b84dbddb99d8f1d4d8235cc11917da30e
Co-Author: Neill Cox <neill@ingenious.com.au>
Partially-Implements: blueprint angularize-swift
This patch makes the new angular Launch Instance workflow mostly
themeable. Most of the existing CSS has been deleted, and this now
follows bootstraps markup. This is not intended to solve all edge cases
given the size of the work, but is a big step in the right direction.
Changes:
- Use stacked nav tabs for navigation. Move base nav tabs toward
bootstrap default. Style primary side nav as before.
- Use bootstraps form markup for modal
- Use bootstraps form markup for form fields and their errors
- Make pie charts and tables inherit any missing theme variables. A more
thorough pass will be done on this next release cycle.
Closes-Bug: 1538491
Change-Id: Ic20b7f4341a2853ca334824c6a811125b04e88cc
Horizon checkboxes were using a standard checkbox. Unfortunately,
this type of checkbox is only customizable through Chrome, and
even then, its not completely flexible.
The default checkboxes have now been altered to allow for a highly
customized experience through the use of CSS pseudo elements and
Icon Fonts. This allows the color, size and unselected and selected
states of the checkbox to be customized.
The 'default' theme uses the standard Font Awesome checked and
unchecked icons. The 'material' now uses the Material Design
checkbox design.
It was also noticed (and fixed) that the help-icon on the forms
were not the same color as its corresponding text.
Partially-Implements: blueprint horizon-theme-css-reorg
Change-Id: I52602357d831a5e978fe6916b37b0cde9edb2b9b
This patch unifies the Python and Angular table styles (there is no
reason for them to look drastically different).
- Clean up table header in _data_table.html
- Remove page_header styling for default theme, as it causes the angular
panels to shift downwards on the page
- Removed styling workarounds from default themes
- Removed several chunks of angular specific scss code, including the
'modern' class
- Removed the "Actions" header in python tables, to match Angular
- Removed duplicate 'no items to display' info in footer, when table is
empty.
- Also fixes the Containers header, which was different to all the
others
Closes-Bug: 1517081
Co-Authored-By: Diana Whitten <hurgleburgler@gmail.com>
Change-Id: Id71aab6e8bbbcd1f7fa4d5575156e4d3c6aa990d
The first step in the dynamic theme effort requires that the context
selection picker inherit properly from a dropdown menu, so that the
styles can be shared and the experience is matched.
Dynamic themes will use the 'select' experience of the context menu
but from within the user menu, so it was necessary to match the
experiences to minimize duplicated code.
The style of the context menu was extremely dependant on DOM structure
and therefore difficult to customize. This has been simplified by using
classes and attempting to keep specificity as low as possible.
Change-Id: Idb9e8f5c1d246688418f68e12fb53f094c01ea34
Partially-implements: blueprint horizon-dynamic-theme
Partially-Implements: blueprint bootstrap-html-standards
The responsive menu on the 'default' theme shouldn't have the little
'arrow' associated with it.
Closes-bug: #1539972
Change-Id: Icb4a500e9bd3bb1e11853391a5357876ffa61348
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.
Organize the Component Imports alphabetically. Also, standardize
quotes to match.
Change-Id: I39e62135d1200db56c46449c274d2acdccb72a00
Partially-Implements: blueprint horizon-theme-css-reorg
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.
page-header is a Bootstrap style. We shouldn't be overriding it so
much. Inherit from the theme. Also, fixed padding of header on
default theme.
Change-Id: I771e03b3fc24ccd716bb556ecb8342e0da1dc37b
Partially-Implements: blueprint horizon-theme-css-reorg
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.
Move form customization into 'default' theme.
Change-Id: Ibd49562e6da8713efbb9a2e0c0d37f14f0ef8df0
Partially-Implements: blueprint horizon-theme-css-reorg
The delimiter in the context selector should use an icon to enable
vast customization options.
Change-Id: I07551471213e79b6f7d6e1c95ccc7a605c2a9418
Closes-bug: #1537594
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
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
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
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
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
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
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
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