openstack/horizon
Code Issues Proposed changes

Fix for the broken header's dropdowns for both v0.11.2 and v0.13

Browse Source 
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
This commit is contained in:
Timur Sufiev 2015-08-31 14:40:21 +03:00
parent b9e8dc1e30
commit dab7e45c74
4 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
horizon/static/framework/framework.module.js
View File

@ -10,13 +10,14 @@
.config(config);
config.$inject = [
'$injector',
'$provide',
'$interpolateProvider',
'$httpProvider',
'$windowProvider'
];
function config($provide, $interpolateProvider, $httpProvider, $windowProvider) {
function config($injector, $provide, $interpolateProvider, $httpProvider, $windowProvider) {
var path = $windowProvider.$get().STATIC_URL + 'framework/';
$provide.constant('horizon.framework.basePath', path);
@ -32,6 +33,25 @@
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
$httpProvider.defaults.headers.common['Content-Type'] = 'application/json;charset=utf-8';
// NOTE(tsufiev): angular-ui/bootstrap v0.11.2 dropdownToggle directive
// 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). Could be safely deleted once
// Horizon migrates to angular-ui/bootstra v0.13
if ($injector.has('dropdownToggleDirective')) {
$provide.decorator('dropdownToggleDirective', patchDropdowns);
}
patchDropdowns.$inject = ['$delegate'];
function patchDropdowns($delegate) {
var directive = $delegate[0];
directive.restrict = 'A';
return $delegate;
}
// Global http error handler
// if user is not authorized, log user out
// this can happen when session expires

2
horizon/templates/horizon/common/_region_selector.html
View File

@ -1,5 +1,5 @@
{% if regions.support %}
<a href="#" class="dropdown-toggle" role="button" aria-expanded="false">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ regions.current.name }}
<span class="fa fa-caret-down"></span>
</a>

4
openstack_dashboard/templates/_header.html
View File

@ -20,7 +20,7 @@
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button" aria-expanded="false">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{% show_overview %}
<span class="fa fa-caret-down"></span>
</a>
@ -54,7 +54,7 @@
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button" aria-expanded="false">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<span class="fa fa-user"></span>
{{ request.user.username }}
<span class="fa fa-caret-down"></span>

4
openstack_dashboard/themes/material/templates/_header.html
View File

@ -29,7 +29,7 @@
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button" aria-expanded="false">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{% show_overview %}
<span class="fa fa-caret-down"></span>
</a>
@ -63,7 +63,7 @@
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button" aria-expanded="false">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<span class="fa fa-user"></span>
{{ request.user.username }}
<span class="fa fa-caret-down"></span>