49 Commits

Author SHA1 Message Date
Rob Cresswell
041af0fd0a Replace table row 'status_unknown' class with 'warning' class
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
2016-09-08 09:57:06 +00:00
Diana Whitten
f73051524a Remove 'default' theme styles
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
2016-07-28 14:02:02 -07:00
Diana Whitten
1af2a966c5 Material: Progress Bars should allow text
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
2016-07-13 16:30:02 -07:00
Diana Whitten
03ede4ce5e 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
2016-06-21 15:54:00 -07:00
Diana Whitten
2679c3864a Default theme lacks support for dropup menus
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
2016-06-03 07:44:44 -07:00
Diana Whitten
20c17d28d3 Horizon selects are now themable: Volumes
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
2016-06-01 09:32:28 -07:00
Rob Cresswell
d5b24d7b97 Use breadcrumb nav across Horizon
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
2016-05-05 23:12:59 +00:00
Diana Whitten
58553ba6e8 Add Charts to Preview Page
* 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
2016-04-27 14:03:03 +00:00
Andy Hsiang
d76fb60fd7 Reduced the left padding value on alert message
Closes-Bug: 1566405

Change-Id: I8592a5ce11a8501d28140eae75963364ffc2f286
2016-04-10 19:09:11 -04:00
Richard Jones
4c39136997 Add ngSwift containers and objects display
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
2016-03-07 22:05:16 +11:00
Jenkins
721c963b9d Merge "Horizon Checkboxes are now themeable." 2016-03-03 17:09:48 +00:00
Rob Cresswell
be9023d86e Fix theming in angular launch instance
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
2016-03-02 20:08:49 -07:00
Diana Whitten
259973dd06 Horizon Checkboxes are now themeable.
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
2016-03-02 19:17:09 -07:00
Rob Cresswell
b69ff722c1 Match python/ angular table styles
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
2016-03-01 10:36:16 +00:00
Diana Whitten
0bfca75f45 Context Picker should inherit BS dropdown styles
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
2016-02-10 04:23:15 +00:00
Jenkins
c6f75a224d Merge "Branding: Context selector delim should be icon" 2016-02-06 21:03:07 +00:00
Diana Whitten
a84e904225 Default Theme:Responsive Menu shouldn't have Arrow
The responsive menu on the 'default' theme shouldn't have the little
'arrow' associated with it.

Closes-bug: #1539972

Change-Id: Icb4a500e9bd3bb1e11853391a5357876ffa61348
2016-02-03 14:52:30 +00:00
Diana Whitten
a516ca0c55 Clean up horizon.scss - Organize Imports
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
2016-01-26 14:46:24 -07:00
Jenkins
8584df5494 Merge "Clean up horizon.scss - default/bootstrap/_type.scss" 2016-01-25 22:07:05 +00:00
Jenkins
cb71cc6087 Merge "Clean up horizon.scss - default/boostrap/_form.scss" 2016-01-25 20:16:03 +00:00
Diana Whitten
88d181b028 Clean up horizon.scss - default/bootstrap/_type.scss
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
2016-01-25 17:27:21 +00:00
Diana Whitten
b86bca8bf2 Clean up horizon.scss - default/boostrap/_form.scss
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
2016-01-25 17:26:09 +00:00
Diana Whitten
a9bd8b2335 Branding: Context selector delim should be icon
The delimiter in the context selector should use an icon to enable
vast customization options.

Change-Id: I07551471213e79b6f7d6e1c95ccc7a605c2a9418
Closes-bug: #1537594
2016-01-24 21:37:19 -07:00
Brian Tully
4c4294dbda Themeable loader/progress bar for tables
Replace outdated animated loading.gif and action_required.png with
themeable Bootstrap progress bars

Screenshots of comparison/changes: http://imgur.com/a/uDOhm

Partially-Implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards
Co-Authored-By: Diana Whitten <hurgleburgler@gmail.com>
Change-Id: I3f3d10171122f4d6017e0906c1df0669151dfe6c
2016-01-22 20:31:52 +00:00
Jenkins
073ce8c5fd Merge "Magic Search now inherits from Bootstrap Theme" 2016-01-13 01:03:04 +00:00
Diana Whitten
32e076af5b Clean up horizon.scss - Keypairs
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
2016-01-11 10:27:05 -07:00
Diana Whitten
fc8538c8de Magic Search now inherits from Bootstrap Theme
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
2016-01-09 17:40:23 -07:00
Jenkins
2487c7f202 Merge "Clean up horizon.scss - Flavor Table" 2015-12-31 00:52:24 +00:00
Jenkins
f84a1fb9de Merge "default theme's warning color is not readable" 2015-12-30 18:47:40 +00:00
Diana Whitten
dcac725550 Clean up horizon.scss - Flavor Table
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
2015-12-22 09:43:25 -07:00
Diana Whitten
bffc1a645e default theme's warning color is not readable
It was far too bright to make out with white lettering.

Change-Id: Ib3695cc630fb41df4a3bd63506f1ba705bf940a8
Closes-bug: #1528382
2015-12-21 16:34:19 -07:00
Diana Whitten
c7de6d5bee Horizon Messages now inherit from a Bootstrap Theme
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
2015-12-21 21:16:13 +00:00
Diana Whitten
f5f371655e Barcharts now inherit from a Bootstrap Theme
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
2015-12-18 12:28:25 -07:00
Diana Whitten
3a2564e398 Quota pages now inherit from Bootstrap Theme
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
2015-12-16 23:32:08 +00:00
Rob Cresswell
ebd2768350 Move Detail page styling into theme
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
2015-12-03 19:58:53 +00:00
Diana Whitten
521712a262 Top Nav shouldn't include giant bottom margin
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
2015-11-24 15:21:01 +00:00
Diana Whitten
171f835fc4 Top and Bottom Padding should be removed from navbar-brand
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
2015-11-24 15:20:45 +00:00
Diana Whitten
20ff47185f 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 <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
2015-11-16 15:41:25 -07:00
Diana Whitten
8ba1a5e06a Basic tables now inherit from Bootstrap Theme
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
2015-11-14 08:14:56 -07:00
Jenkins
93c6c80f31 Merge "Dropdowns should have a consistent design" 2015-11-10 19:29:03 +00:00
Rob Cresswell
7a58d15aec Navigation + cleanup for details pages
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
2015-11-09 07:01:04 +00:00
Diana Whitten
94464af154 Dropdowns should have a consistent design
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
2015-11-05 21:40:12 -07:00
Eric Peterson
985209ed7f Nav checkbox placement fix
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
2015-09-09 08:32:07 -06:00
Diana Whitten
2d007cb1b7 Pie Charts now inherit from Bootstrap Theme
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
2015-09-02 14:05:20 +00:00
Diana Whitten
a7ac8791d5 Horizon Logo Documentation is out of date
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
2015-08-29 04:36:59 +00:00
Diana Whitten
97939292eb Horizon Context Selection should be to the right
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
2015-08-14 10:48:45 -07:00
Diana Whitten
35706f5b6b Sidebar now inherits from a Bootstrap Theme
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
2015-08-11 15:01:56 -07:00
Diana Whitten
5b3af1f0d5 Top Nav is responsive and inherits from its theme
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
2015-08-03 10:44:04 -07:00
Diana Whitten
fa84424524 Themes should live at root of openstack_dashboard
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
2015-07-28 11:45:53 -07:00