Skip to content

Commit

Permalink
Rework main toolbar layout, apply correct branding styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@gashcrumb
gashcrumb committed Aug 22, 2013
1 parent 98e38b3 commit 8a58f3e
Show file tree
Hide file tree
Showing 5 changed files with 209 additions and 47 deletions.
4 changes: 3 additions & 1 deletion hawtio-web/src/main/webapp/app/branding/js/brandingPlugin.ts
View file
Expand Up @@ -5,6 +5,8 @@ module Branding {
$.get('/hawtio/branding', (enabled) => {
Branding.enabled = enabled;

// Branding.enabled = false;

if (Branding.enabled) {
// pull in branding stylesheet
var link = $("<link>");
Expand All @@ -31,7 +33,7 @@ module Branding {

if (Branding.enabled) {
console.log("enabled branding");
branding.appName = 'Management Console';
branding.appName = 'Red Hat JBoss Fuse';
branding.appLogo = '';
branding.loginBg = 'img/branding/login-screen-background.jpg';
branding.fullscreenLogin = true;
Expand Down
4 changes: 4 additions & 0 deletions hawtio-web/src/main/webapp/app/core/js/app.ts
View file
Expand Up @@ -171,6 +171,10 @@ module Core {
return false;
}

$scope.login = () => {
return $location.url().startsWith("/login");
}

}

}
71 changes: 66 additions & 5 deletions hawtio-web/src/main/webapp/css/site-base.less
View file
Expand Up @@ -738,7 +738,7 @@ div#main div ul.nav li a:hover {
background: white;
position: fixed;
width: 87%;
top: 40px;
top: 70px;
left: 5%;
border-bottom: 1px solid @control-border;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
Expand Down Expand Up @@ -794,10 +794,6 @@ div#main div ul.nav li a:hover {
margin-top: 55px;
}

.prefs {
margin-top: 1.5em;
}

.control i {
cursor: pointer;
}
Expand Down Expand Up @@ -1797,4 +1793,69 @@ div#main div ul.nav li a.nav-primary .caret {
border-bottom-color: #ffffff;
}

.main-nav-upper .container:before {
display: none
}

.main-nav-upper .container:after {
display: none
}

.main-nav-upper .container {
width: auto;
line-height: 11px;
}


.main-nav-lower .container:before {
display: none
}

.main-nav-lower .container:after {
display: none
}

.main-nav-lower .container {
width: auto;
}

.navbar-inner {
height: auto;
min-height: 0;
}

.main-nav-upper {
background-image: none;
background-color: white;
height: 28px;
min-height: 28px;
font-size: 11px;
}

.main-nav-upper .brand {
font-size: 13px;
margin-left: 0px;
padding: 0px;
padding-top: 7px;
font-weight: normal;
margin-left: 20px;
}

.main-nav-upper .nav.pull-right {
// margin-right: 10px;
}

.main-nav-upper .nav li a {
padding-top: 4px;
padding-bottom: 5px;
}

#main-nav {
max-height: 70px;
}

#main {
margin-top: 70px !important;
}


98 changes: 88 additions & 10 deletions hawtio-web/src/main/webapp/css/site-branding.css
View file
Expand Up @@ -32,27 +32,91 @@ a:hover {
text-decoration: underline;
}

#main-nav .main-nav-upper .nav {
max-height: 25px !important;
}

#main-nav .main-nav-upper .nav li {
max-height: 25px !important;
}

#main-nav .main-nav-upper .nav li a {
max-height: 25px !important;
}

#main-nav .navbar-inner {
background-color: inherit;
background-image: linear-gradient(to bottom, #3f4349 0%, #464c51 100%);
}

.navbar-inner {
height: auto;
min-height: 0;
}

.main-nav-upper {
height: auto;
min-height: 0;
}

#main-nav .navbar-inner.main-nav-upper {
border-top: 3px solid #CC0000;
background-color: #393F45;
background-image: none;
border-bottom: none;
height: 25px !important;
min-height: 25px: !important;
box-shadow: none;
}

#main-nav .navbar-inner.main-nav-lower {
border-top: 1px solid #53565b;
box-shadow: none;
background: #3f4349;

background: -moz-linear-gradient(top, #3f4349 0%, #464c51 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f4349), color-stop(100%,#464c51));
background: -webkit-linear-gradient(top, #3f4349 0%,#464c51 100%);
background: -o-linear-gradient(top, #3f4349 0%,#464c51 100%);
background: -ms-linear-gradient(top, #3f4349 0%,#464c51 100%);
background: linear-gradient(to bottom, #3f4349 0%,#464c51 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4349', endColorstr='#464c51',GradientType=0 );

padding: 0px;
height: 42px;
max-height: 42px;
min-height: 42px;
border-bottom: none;

}

.prefs {
margin-top: 14px;
}

#main-nav .navbar-inner .container .brand {
#main-nav .navbar-inner.main-nav-upper .container .brand {
display: block !important;
color: #ffffff;
text-shadow: none;
}

#main-nav .navbar-inner .container div .nav li a {
#main-nav .navbar-inner.main-nav-lower .nav {
width: 100%;
float: none;
position: relative;
top: -1px;
height: 42px;
}

#main-nav .navbar-inner .nav li a {
border-top: 1px solid #53565B;
color: #ffffff;
text-shadow: none;
border-top: 1px solid #53565b;
background-color: inherit;
background-image: linear-gradient(to bottom, #3f4349 0%, #464c51 100%);
height: 32px;
padding-bottom: 0px;
}

#main-nav .navbar-inner .container div .nav li a:hover {
#main-nav .navbar-inner .nav li a:hover {
color: #ffffff;
border-top: 1px solid #949699;
text-shadow: none;
Expand All @@ -61,14 +125,28 @@ a:hover {
}


#main-nav .navbar-inner .container div .nav li.active a {
#main-nav .navbar-inner .nav li.active a {
color: #ffffff;
text-shadow: none;
border-top: 1px solid #949699;
background-color: inherit;
background-image: linear-gradient(to bottom, #72757a 0%, #64686C 100%);
}

#main-nav .navbar-inner.main-nav-upper .nav li a {
height: 24px;
padding-top: 1px;
border-top: none;
}

#main-nav .navbar-inner.main-nav-upper .nav li.active a {
border-top: none;
}

#main-nav .navbar-inner.main-nav-upper .nav li a:hover {
border-top: none;
}

#main.container-fluid {
padding-left: 0px;
padding-right: 0px;
Expand Down Expand Up @@ -153,7 +231,7 @@ div[ng-controller='Core.LoginController']:after {
font-weight: 200;
font-size: 22px;
font-size: 22px;
content: 'Management Console';
content: 'Red Hat JBoss Fuse';
color: #FFFFFF;
}

Expand Down Expand Up @@ -252,8 +330,8 @@ div[ng-controller='Core.LoginController']:after {
.login-wrapper form fieldset input[type="text"],
.login-wrapper form fieldset input[type="password"] {
color: #ffffff;
background-color:
margin: 4px 0;
background-color: inherit;
margin: 4px 0px;
margin-bottom: 14px;
width: 282px;
}
Expand Down
79 changes: 48 additions & 31 deletions hawtio-web/src/main/webapp/index.html
View file
Expand Up @@ -52,18 +52,58 @@

<!-- navbar-inverse -->
<div id="main-nav" class="navbar navbar-fixed-top" ng-show="!fullScreen()" ng-controller="Core.NavBarController">
<div class="navbar-inner" ng-cloak class="ng-cloak">

<div class="navbar-inner main-nav-upper" ng-cloak class="ng-cloak">

<div class="container">
<div class="pull-left">
<a class="brand" href="#">
<img ng-show="appLogo" ng-src="{{appLogo}}"/>
<strong>{{appName}}</strong>
</a>
</div>

<div class="pull-right">
<ul class="nav pull-right">
<li ng-show="loggedIn()" ng-class="{active : isActive('#/preferences')}">
<a ng-href="{{link('#/preferences')}}" title="Edit your preferences" data-placement="bottom">
<i class="icon-cogs"></i>
</a>
</li>
<li ng-show="loggedIn()">
<a href="" title="Log out" data-placement="bottom" ng-click="logout()">
<i class="icon-signout"></i>
</a>
</li>
<li ng-hide="loggedIn()" ng-class="{active : isActive('#/login')}">
<a ng-href="{{link('#/login')}}" title="Log in" data-placement="bottom">
<i class="icon-user"></i>
</a>
</li>
<li ng-show="loggedIn()" ng-class="{active : isActive('#/help')}">
<a ng-href="{{link('#/help')}}" title="Read the help about how to use this console"
data-placement="bottom">
<i class="icon-question-sign"></i>
</a>
</li>
</ul>
</div>

</div>

</div>

<div class="navbar-inner main-nav-lower" ng-cloak class="ng-cloak" ng-show="!login()">
<div class="container">
<!--
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span>{{activeLink()}}</span>
</a>
<a class="brand" href="#">
<img ng-show="appLogo" ng-src="{{appLogo}}"/>
{{appName}}
</a>

-->

<!--
<div class="nav-collapse collapsed">
-->

<ul ng-show="loggedIn()" class="nav">
<li ng-repeat="nav in topLevelTabs()" ng-class="{active : isActive(nav)}" ng-show="isValid(nav)">
Expand All @@ -72,32 +112,9 @@
</li>
</ul>

<div class="pull-right">
<ul class="nav pull-right">
<li ng-show="loggedIn()" ng-class="{active : isActive('#/preferences')}">
<a ng-href="{{link('#/preferences')}}" title="Edit your preferences" data-placement="bottom">
<i class="icon-cogs"></i>
</a>
</li>
<li ng-show="loggedIn()">
<a href="" title="Log out" data-placement="bottom" ng-click="logout()">
<i class="icon-signout"></i>
</a>
</li>
<li ng-hide="loggedIn()" ng-class="{active : isActive('#/login')}">
<a ng-href="{{link('#/login')}}" title="Log in" data-placement="bottom">
<i class="icon-user"></i>
</a>
</li>
<li ng-show="loggedIn()" ng-class="{active : isActive('#/help')}">
<a ng-href="{{link('#/help')}}" title="Read the help about how to use this console"
data-placement="bottom">
<i class="icon-question-sign"></i>
</a>
</li>
</ul>
</div>
<!--
</div>
-->
</div>
</div>
</div>
Expand Down

0 comments on commit 8a58f3e

Please sign in to comment.