Our templates are very inconsistent and sometimes even use single and
double quotes in the same tag. This is an attempt to clean it up a
little and use double quotes everywhere.
In addition, I have run into a problem with single quotes being
incorrectly escaped by the Django compressor, and I want to see if
this will help with the issue.
Change-Id: I2d5137a87ed65c6abef38a49264346f917a1c85a
Material Theme css tags differ from the ones from Default Theme,
so the navigation we have doesn't work for some actions such as
opening a new details page or reloading it, displaying breadcrumbs
and menu panels. This patch adds some tweaks to fix that.
Closes-Bug: #1968272
Change-Id: I18bd2e8515614463a911978879523744a9b059d7
':before' class doesn't work as expected with current versions of
xstatic-mdi and PyScss. It's a temporary workaround with copy ':before'
styles from MDI directly into the Material theme.
Closes-Bug: #1771559
Co-Authored-By: Akihiro Motoki <amotoki@gmail.com>
Change-Id: I969ad70065c580ba90bb0a050c7a9cf242d805ec
'selector-append' is used in xstatic-mdi [1] but it isn't supported by
the latest pyScss.
As a workaround we use 'append-selector' function from pyScss until
'selector-append' will be supported.
This patch also reverts Ia9e1e807591d4428f585177f521d4cb9d463b917
because we don't need it anymore.
[1] https://opendev.org/openstack/xstatic-mdi/src/tag/1.6.50.2/xstatic/pkg/mdi/data/scss/_functions.scss#L2
Change-Id: Ib8ca0fcfe339cb68d6a157a00cbc2d34854ef4c5
Closes-Bug: #1771559
pyScss v1.3.5 implements 'function-exists' function now. It breaks
MaterialDesign-Webfont [1] which is provided by xstatic-mdi package.
This patch re-implements FontAwesome-based styles for Material theme to
not use MaterialDesign-Webfont classes.
Another advantage of this improvement is we can use the latest pyScss
(once it'll be released) and update xstatic-mdi too.
[1] https://github.com/Templarian/MaterialDesign-Webfont/issues/19
Closes-Bug: #1771559
Depends-On: https://review.opendev.org/714450
Change-Id: Ia9e1e807591d4428f585177f521d4cb9d463b917
From Rocky we can now support Django's recursive template
inheritance. Let's move away from all these stand alone
templates for deployers to override and instead direct them
to recursively extend the existing templates and the blocks they
need.
This adds more blocks, docs on how to use them, and an example
theme which can be turned on and used to show how this works.
blueprint: less-customization-templates
Change-Id: I69f1e16ff1b88cec78580df0911fe3c01b7507dd
This patch also adds checks for executable files in
pep8 job.
nose ignores executable files by default, so it is important
to ensure executable flag is not set for test files [1].
openstack_dashboard/test/test_plugins/panel_tests.py was not
tested actually and it was broken. This commit fixes it too.
[1] http://nose.readthedocs.io/en/latest/usage.html#cmdoption-exe
Co-Authored-By: Ivan Kolodyazhny <e0ne@e0ne.info>
Change-Id: I3a124fa2f9f0676b2b43a094e32e3d8b18fa6005
This change is to introduce a flexible mechanism for projects to
add content to horizon's navbar.
- Introduces a new plugin file variable called ADD_HEADER_SECTIONS,
which will take a list of views. These are template views that
will be used to render individual header sections.
- There is a new view in openstack_dashboard/views.py to cycle
through these added views and combine them into the complete
header to be added to the navbar.
- This view is queried by newly added javascript after page load.
On response it is inserted into the page's navbar.
If more than one header is present, the first will be shown in
the navbar, while the rest are added to a drop-down menu.
- The currently displayed header can be changed by clicking on a
new header in the drop-down; this is stored in a cookie to
persist the selection between pages.
- Unit tests were modified/added to verify the new plugin entry
can be parsed successfully and the main header view can parse
a plugin's view successfully
Change-Id: I177b69ec4e78c17f827e540a7e669af1c29e8b59
Implements: blueprint extensible-header
Signed-off-by: Tyler Smith <tyler.smith@windriver.com>
1.As mentioned in [1], we should avoid using dict.iteritems()
to achieve iterators. We can use dict.items instead, as it will
return iterators in PY3 as well. And dict.items/keys will more
readable.
2.In py2, the performance about list should be negligible,
see the link [2].
[1] https://wiki.openstack.org/wiki/Python3
[2] http://lists.openstack.org/pipermail/openstack-dev/2015-June/066391.htmls
Change-Id: Idba02079d76b529b344ae96cebb7d6161c0ecbc6
The datepicker plugin that we use provides its own css file, which we
were including and using, however, it was not inheriting any theme
variables. Because the CSS was built with the default Bootstrap
skin in mind, it looked fine until you tried it on a different theme
and it inherited nothing.
A very minimal SCSS has been provided that actually pulls in theme
variables. The datepicker markup has been broken into templates that
will allow more granular overrides.
Change-Id: I3b6c92a205b2bfff908cb720974821db517a6a3f
Partially-implements: blueprint horizon-dynamic-theme
Partially-Implements: blueprint bootstrap-html-standards
Much like the themable selects and checkboxes, number spinners
should also be themable.
Standard number spinners are not very customizable. We should use
existing buttons and fonts to add their functionality to allow a
richer experience if desired downstream.
An example of how to customize the spinner was placed in Material.
The example shows how to use flexbox to change layout type from
column to row, change icon order, and how to override the icons.
'autocomplete' needs to be false on this new element, otherwise
the browser will retain and load the last value without actually
triggering any JavaScript events by which we can key on and update
the state of the spinner buttons.
Change-Id: Ifd266cd515a903841e2d28e2f4731879116e3513
Closes-bug: #1598311
The problem was casued by .close class in _bootswatch.scss. The
size is 34px while correct size should 19.5px. Patch the fix to
have a smaller size.
When alert message has one line the close button is centered now.
When alert message has multiple lines, the close button is at the
right upper corner of the message box.
Change-Id: Ic5af8ae7e2b4ed0e136fad205a03b3f2368f72a9
Closes-bug: #1550066
The Horizon spinner was using a spinner generated and animated
entirely out of JavaScript. Since CSS3 provides animates and we have
access to icon fonts, doing everything with JavaScript is not
necessary and actually taxing on the browser. Plus, all of the
spinner options were being passed in and around with JavaScript,
including the colors. This makes it supremely difficult to use the
theme to style the spinner.
The new spinner is just defined by a handful of templates now. There
are two clientside templates to support Legacy Horizon, and one
template in the Angular to support spinners going forward. Legacy
Horizon had two forms of spinners, so it was broken up. Angular as
not yet made use of the inline spinner, but should follow the same
markup when it is made.
There are two types of spinners, inline spinners (those shown when a
dynamic tab content is loading) and modal spinners (various other
places). These are consistent with each other for the 'default'
experience, but their experience can be entirely customized separate
from each other. 'material' has been augmented with loaders defined
within their design spec to show the power of this new feature.
horizon.templates.js was augmented with this refactor to support only
having to compile one tempalte at a time (instead of all of them) and
caching that template so that all of them can be recompiled later.
Also, horizon.loader.js was added to house template compilation code
that was repeated in several locations.
To test overwriting page modal spinner and inline-modal spinner
examples, please follow the instructions in _loading_inline_exmaple.html,
_loading_modal_example.html under
openstack_dashboard/themes/material/templates/horizon/client_side
Change-Id: I92bc786160e070d30691eeabd4f2a50d6e2bb395
Partially-implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards
Closes-bug: #1570485
Provide both pythonic Django part and the static assets (angular
directives and styles) for the new panel.
DEPLOY NOTES:
To enable panel itself, copy
openstack_dashboard/local/local_settings.d/_9030_profiler_settings.py.example
file from the previous commit to
openstack_dashboard/local/local_settings.d/_9030_profiler_settings.py
and copy openstack_dashboard/contrib/developer/enabled/_9030_profiler.py
to openstack_dashboard/local/enabled/_9030_profiler.py
To support storing profiler data on server-side, MongoDB cluster needs
to be installed on Devstack host (default configuration), see
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/#install-mongodb-community-edition
for instructions. Then, change net:bindIp: key to 0.0.0.0 inside
/etc/mongod.conf and invoke `sudo service mongod restart` for the
changes to have an effect.
Implements-blueprint: openstack-profiler-at-developer-dashboard
Change-Id: Ice7b8b4b4decad2c45a9edef3f3c4cc2ff759de4
- Make menu responsive (hides on smaller screens, e,g, 1/2 laptop screen,
tablet, mobile)
- Add aria parameters for accessibility
- Show current focus when navigating (accessibility)
- Remove the blue outline when clicking links in Chrome
- Makes menu less hideous
Change-Id: I1cdfa079f0b371d1afddefa67d8a21e93abde9ee
Implements: blueprint navigation-improvements
Closes-Bug: 1315488
Closes-Bug: 1628274
Previous fix was somewhat duct taped; following up to prevent console
errors.
Added Depends-On to test fix to devstack while we're at it.
Change-Id: Ie6c729edc20c9d6d03a0b6567fc5ce29cdc09415
Depends-On: I8c853c35c5b0b61925c27b461ad625266381f73b
The icons in the transfer table used + /- icons to move
items up and down. The arrow buttons are more intuitive / appropriate.
Change-Id: I9d9200b87dd7c7d916d50100137359063097ee79
Closes-Bug: #1642406
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 material theme is missing an icon for star outline.
So, if a horizon plugin uses fa-star-o,
the material theme just shows an empty box.
Change-Id: I646c5e46548869136444f567ef1a51668e937e65
Closes-Bug: #1621341
The material theme is missing an icon for filter.
So, if a horizon plugin uses fa-filter,
the material theme just shows an empty box.
Change-Id: I7a7c6b337cf2a2906df9cb54c12e513d7a2c2c5e
Closes-Bug: #1621310
This patch reduces duplication arbitrary directory choices for
xstatic package locations in the static directory.
It moves the xstatic configuration from the library into the
settings file, and the supporting functions move to
the openstack_dashboard.utils.settings module. Having the xstatic
module list in settings allows deployers to add new modules.
It standardises the paths the files are served from, reducing
potential conflicts.
It simplifies the interaction with the xstatic modules, and also uses
the new MAIN variable if present to determine the entry points used.
Since some of the xstatic packages were installed into special
snowflakes directories (not following a pattern) the references to
those (bootstrap_scss and font_awesome) have been fixed.
Change-Id: Ia5be0e96fff1a4ddd6058d6b030ddf96da4b46e7
Horizon radio buttons were using the standard browser radio buttons.
The default radio buttons have 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 altered. The 'default' theme uses the
standard Font Awesome radio button icons. The 'material' theme uses
the Material Design radio buttons. It was noted, during this refactor,
that there was an error in the _themable_checkbox template. This has
been fixed.
Change-Id: I1ca2e39e893b45adddf513c0dcb2670b2876594f
Partially-Implements: blueprint horizon-theme-css-reorg
This patch adds Angular Schema Form[1] and its requirements to Horizon.
There are a number of advantages to this over the current methods of
defining forms and workflows:
- All fields have an individual template, making theming improvements,
bug fixes, and bootstrap conformity easier.
- The file and line count, especially for workflows, is dramatically
reduced. The Create Net workflow, for example, goes from 12+ files to
2, with a big reduction in boilerplate HTML.
- All field validation messages are standardised, so we can match them
across Horizon and plugins
What this patch contains:
- Many common form fields, including things like the themable checkboxes
and selects.
- A basic modal template that can be passed with ui-bootstraps $modal
service to take advantage of schema-form
Next steps:
- Remove the other modal templates so we can standardise. A single
template opened from the $modal service is fine, and we shouldn't need
several directives. In this case, we should deprecate them, as the
modal forms will be used elsewhere.
- Map commonly used form items, like transfer tables, to a schema form
type like array (they serve similar purposes, so maybe thats what
should be replaced)
- Use themable selects instead of regular ones
1. http://schemaform.io/
Co-Authored-By: Tyr Johanson <tyr@hpe.com>
Implements: blueprint angular-schema-form
Change-Id: Ib22b2d0db2c4d4775fdef62a180cc994e8ae6280
Style: Host Aggregate: Update Metadata overflow fail
admin/images: 'Update Metadata' overflow text failure, seen here:
https://i.imgur.com/LlI1x1I.png
Also took the oportunity to fix a color problem on selected rows.
Closes-bug: #1570513
Closes-bug: #1570477
Change-Id: I46ffdb4cbd74e5e20e613852dbf00e83b6ab9521
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
* Added themable checkboxes so that all the checkboxes
are now consistent. There was already a single themable
one in the contain detail view
* Removed unneccesary padding around swift breadcrumb
* Added themable checkboxes to hz-table
* Replaced 'empty table' with bootstrap well, which works
quite well for this type of implememtation.
Closes-bug: #1597532
Change-Id: Ifff3f608d309ef0bd926c553be0a3a0e1d419096
Magic Search input should allow variable length, instead
of being hardcoded. Also, recent changes broke the layout
of magic search in Swift. This also fixes extra long strings
in the search text and overflows properly.
Change-Id: I8e467eadb7e4bb5afa3b7d181634b076e1e94060
Closes-bug: #1595754
Somewhere along the lines, the preview page code button, when
viewed in 'Material' shows an alarm clock instead of a code icon.
Closes-bug: #1597503
Change-Id: I577cc5853f6580fa60dadc8fa34a4955b6aae710
* 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 3rd party tablesorter plugin needs to use options to configure
sorting icon so that we can override it via the theme.
Closes-bug: #1589647
Change-Id: I34ab18988c9cba8065449ca3a054b9c66f2cff02
This is very small issue. In material theme,
"Modify Usage Report Parameters" menu's icon doesn't show in
Admin -> Resource Usage Overview page. This patch will fix it.
Change-Id: I868d606caebe08f2d13ffe704fc07e4415dce4be
Closes-Bug: #1589378
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
use ng-images as example to explan the issue:
1.enable ng-images page and go into this page.
2.click left sidebar to collapse/expand a dashboard or panel-group
3.the url change to "project/ngimages/#sidebar-accordion-***" which
match the route[1]. Current page will reload even it's not change.
Use "data-target" instead of "href" to fix it. ref:[2]
[1]https://github.com/openstack/horizon/blob/master/
openstack_dashboard/static/app/core/images/images.module.js#L190
[2]https://github.com/openstack/xstatic-bootstrap-scss/blob/
master/xstatic/pkg/bootstrap_scss/data/js/bootstrap.js#L505
Change-Id: I1c84c6af49a67bf2833ad5b0103f6cbd4abd0ddb
Closes-Bug: #1543327
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
Radomir Dopieralski
