Skip to content

Commit

Permalink
Fix #644
Browse files Browse the repository at this point in the history
  • Loading branch information
@gashcrumb
gashcrumb committed Oct 17, 2013
1 parent ef0f2c9 commit 06fdd5a
Show file tree
Hide file tree
Showing 7 changed files with 184 additions and 35 deletions.
2 changes: 1 addition & 1 deletion hawtio-web/src/main/webapp/app/fabric/js/container.ts
View file
Expand Up @@ -21,7 +21,7 @@ module Fabric {

$scope.$watch('tab', (newValue, oldValue) => {
if (newValue !== oldValue) {
$location.search({tab: newValue});
$location.search({tab: newValue}).replace();
}
});

Expand Down
62 changes: 34 additions & 28 deletions hawtio-web/src/main/webapp/app/osgi/html/layoutOsgi.html
View file
@@ -1,31 +1,37 @@
<ul class="nav nav-tabs" ng-controller="Karaf.NavBarController">
<li ng-class='{active : isActive("#/osgi/server")}'>
<a ng-href="#/osgi/server{{hash}}">Server</a>
</li>
<li ng-class='{active : isActive("#/osgi/bundle")}'>
<a ng-href="#/osgi/bundle-list{{hash}}">Bundles</a>
</li>
<li ng-class='{active : isActive("#/osgi/package")}'>
<a ng-href="#/osgi/packages{{hash}}">Packages</a>
</li>
<li ng-class='{active : isActive("#/osgi/service")}'>
<a ng-href="#/osgi/services{{hash}}">Services</a>
</li>
<li ng-class='{active : isActive("#/osgi/features") || isActive("#/osgi/feature")}' ng-show="isFeaturesEnabled">
<a ng-href="#/osgi/features{{hash}}">Features</a>
</li>
<li ng-class='{active : isActive("#/osgi/configuration")}'>
<a ng-href="#/osgi/configurations{{hash}}">Configuration</a>
</li>
<li ng-class='{active : isActive("#/osgi/scr-components")}' ng-show="isScrEnabled">
<a ng-href="#/osgi/scr-components{{hash}}">Declarative Services</a>
</li>
<li ng-class='{active : isActive("#/osgi/fwk")}'>
<a ng-href="#/osgi/fwk{{hash}}">Framework</a>
</li>
<li ng-class='{active : isActive("#/osgi/dependencies")}'>
<a ng-href="#/osgi/dependencies{{hash}}">Dependencies</a>
</li>
<ul class="nav nav-tabs" hawtio-auto-dropdown ng-controller="Karaf.NavBarController">
<li ng-class='{active : isActive("#/osgi/server")}'>
<a ng-href="#/osgi/server{{hash}}">Server</a>
</li>
<li ng-class='{active : isActive("#/osgi/bundle")}'>
<a ng-href="#/osgi/bundle-list{{hash}}">Bundles</a>
</li>
<li ng-class='{active : isActive("#/osgi/package")}'>
<a ng-href="#/osgi/packages{{hash}}">Packages</a>
</li>
<li ng-class='{active : isActive("#/osgi/service")}'>
<a ng-href="#/osgi/services{{hash}}">Services</a>
</li>
<li ng-class='{active : isActive("#/osgi/features") || isActive("#/osgi/feature")}' ng-show="isFeaturesEnabled">
<a ng-href="#/osgi/features{{hash}}">Features</a>
</li>
<li ng-class='{active : isActive("#/osgi/configuration")}'>
<a ng-href="#/osgi/configurations{{hash}}">Configuration</a>
</li>
<li ng-class='{active : isActive("#/osgi/scr-components")}' ng-show="isScrEnabled">
<a ng-href="#/osgi/scr-components{{hash}}">Declarative Services</a>
</li>
<li ng-class='{active : isActive("#/osgi/fwk")}'>
<a ng-href="#/osgi/fwk{{hash}}">Framework</a>
</li>
<li ng-class='{active : isActive("#/osgi/dependencies")}'>
<a ng-href="#/osgi/dependencies{{hash}}">Dependencies</a>
</li>

<li class="dropdown overflow" style="float: right !important; visibility: hidden;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-chevron-down"></i></a>
<ul class="dropdown-menu right"></ul>
</li>

</ul>
<div class="row-fluid">
<div ng-view></div>
Expand Down
69 changes: 69 additions & 0 deletions hawtio-web/src/main/webapp/app/ui/js/autoDropDown.ts
View file
@@ -0,0 +1,69 @@
module UI {

// expand the element to accomodate a group of elements to prevent them from wrapping
export var AutoDropDown = {
restrict: 'A',
link: ($scope, $element, $attrs) => {


function locateElements (event) {
var el = $element.get(0);
if (event && event.relatedNode !== el && event.type) {
if (event && event.type !== 'resize') {
return;
}
}

var overflowEl = $($element.find('.overflow'));
var overflowMenu = $(overflowEl.find('ul.dropdown-menu'));
var availableWidth = $element.innerWidth() - ($element.innerWidth() - overflowEl.offset().left);

$element.children('li').each(function(index) {
var self = $(this);
var cssClass = self.attr('class')
if ( (cssClass && cssClass.has("overflow")) || self.css('display') === 'none') {
return;
}

availableWidth = availableWidth - self.outerWidth();
if (availableWidth < 0) {
self.detach();
overflowMenu.append(self);
}
});

if (overflowMenu.children().length > 0) {
overflowEl.css({visibility: "visible"});
}

if (availableWidth > 130) {
overflowMenu.children('li').each(function(index) {
var self = $(this);
var cssClass = self.attr('class')
if ((cssClass && cssClass.has("overflow")) || self.css('display') === 'none') {
return;
}

if (availableWidth > self.outerWidth()) {
availableWidth = availableWidth - self.outerWidth();
self.detach();
$element.append(self);
}
});
}

if (overflowMenu.children().length === 0) {
overflowEl.css({visibility: "hidden"});
}

}


$(window).resize(locateElements);
$element.get(0).addEventListener("DOMNodeInserted", locateElements);
$scope.$watch(setTimeout(locateElements, 500));

}
};

}
2 changes: 2 additions & 0 deletions hawtio-web/src/main/webapp/app/ui/js/uiPlugin.ts
View file
Expand Up @@ -42,6 +42,8 @@ module UI {
// return new UI.JSPlumbConnection();
}).directive('zeroClipboard', () => {
return new UI.ZeroClipboardDirective();
}).directive('hawtioAutoDropdown', () => {
return UI.AutoDropDown;
}).run(function (helpRegistry) {
helpRegistry.addDevDoc("ui", 'app/ui/doc/developer.md');
});
Expand Down
29 changes: 28 additions & 1 deletion hawtio-web/src/main/webapp/css/site-base.css
View file
Expand Up @@ -1686,8 +1686,15 @@ div#main div ul.nav li a.nav-primary .caret {
display: none;
}
.main-nav-lower .container {
width: auto;
padding-left: 5px;
padding-right: 5px;
width: 100%;
}

.main-nav-lower .container ul.nav {
width: 100%;
}

.navbar-inner {
height: auto;
min-height: 0;
Expand Down Expand Up @@ -2594,6 +2601,26 @@ i.expandable-indicator.folder {
background-image: url('../img/img-noise-600x600.png')
}

.main-nav-lower .container ul .dropdown.overflow {
margin-right: 25px;
}

.dropdown-menu.right {
left: auto;
right: 0;
}

.dropdown-menu.right:before {
left:auto !important;
right: 9px;
}

.dropdown-menu.right:after {
left:auto !important;
right: 10px;
}



@media(max-width: 1134px) {
.profile-details > [class^="span"] {
Expand Down
49 changes: 45 additions & 4 deletions hawtio-web/src/main/webapp/css/site-branding.css
View file
Expand Up @@ -123,6 +123,47 @@ a:hover {
background-image: inherit;
}

.main-nav-lower .container ul .dropdown.overflow {
margin-right: 0;
}

@media (max-width: 767px) {
.navbar .container {
margin-left: 10px;
margin-right: 10px;
}

.main-nav-lower .container ul .dropdown.overflow {
margin-right: 25px;
}

}

.main-nav-lower .container {
padding-left: 0 !important;
padding-right: 0 !important;
}

#main-nav .main-nav-lower .container .nav li.overflow ul li a {
font-weight: normal;
color: #4D5258;
}

#main-nav .main-nav-lower .nav li.overflow.open a {
color: #ffffff;
text-shadow: none;
border-top: 1px solid #949699;
background-color: inherit;
background-image: linear-gradient(to bottom, #72757a 0%, #64686C 100%);
font-weight: bold;
border-bottom: none;
}

.dropdown-menu {
border-radius: 0;
}


#main-nav .navbar-inner .nav li a {
border-top: 1px solid #53565B;
color: #ffffff;
Expand Down Expand Up @@ -524,7 +565,7 @@ div#main div ul.nav li a.nav-primary {
.dropdown-menu {
border: 1px solid #b6b6b6;
border-top: 0;
margin-top: 0px;
margin-top: 0;
padding: 0;
background-color: white;
}
Expand Down Expand Up @@ -590,15 +631,15 @@ div#main div ul.nav li a.nav-primary {
.dropdown-menu li {
padding-left: 10px !important;
padding-right: 10px !important;
line-height: 22px !important;
line-height: 24px !important;
border-top: 1px solid;
border-color: white;
max-height: 22px;
max-height: 24px;
}

li.dropdown.open a.dropdown-toggle {
color: #2289ba !important;
border-bottom: 1px solid #2289ba !important;
border-bottom: 1px solid #2289ba;
}

.caret {
Expand Down
6 changes: 5 additions & 1 deletion hawtio-web/src/main/webapp/index.html
View file
Expand Up @@ -124,11 +124,15 @@
<div class="nav-collapse collapsed">
-->

<ul ng-show="loggedIn()" class="nav">
<ul ng-show="loggedIn()" class="nav" hawtio-auto-dropdown>
<li ng-repeat="nav in topLevelTabs" ng-class="{active : isActive(nav)}" ng-show="isValid(nav)">
<a ng-href="{{link(nav)}}" title="{{nav.title}}" data-placement="bottom" ng-bind="nav.content">
</a>
</li>
<li class="dropdown overflow" style="float: right !important; visibility: hidden;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-chevron-down"></i></a>
<ul class="dropdown-menu right"></ul>
</li>
</ul>

<!--
Expand Down

0 comments on commit 06fdd5a

Please sign in to comment.