LnF updates to navigation menu.

Change-Id: I8dce2d5feebcf65143b1c0b4eee8b298a68995e0
(cherry picked from commit c0e282b)
This commit is contained in:
Simon Hunt 2016-05-26 11:43:00 -07:00 committed by Brian O'Connor
parent d42e5d1a76
commit fb35b83a55
4 changed files with 39 additions and 25 deletions

View File

@ -53,6 +53,8 @@ public class MainNavResource extends AbstractInjectionResource {
"<div class=\"nav-hdr\">%s</div>%n"; "<div class=\"nav-hdr\">%s</div>%n";
private static final String NAV_FORMAT = private static final String NAV_FORMAT =
"<a ng-click=\"navCtrl.hideNav()\" href=\"#/%s\">%s %s</a>%n"; "<a ng-click=\"navCtrl.hideNav()\" href=\"#/%s\">%s %s</a>%n";
private static final String ICON_FORMAT =
"<div icon icon-id=\"%s\"></div>";
private static final String BLANK_GLYPH = "unknown"; private static final String BLANK_GLYPH = "unknown";
@ -119,6 +121,6 @@ public class MainNavResource extends AbstractInjectionResource {
private String icon(UiView view) { private String icon(UiView view) {
String gid = view.iconId() == null ? BLANK_GLYPH : view.iconId(); String gid = view.iconId() == null ? BLANK_GLYPH : view.iconId();
return "<div icon icon-id=\"" + gid + "\"></div>"; return String.format(ICON_FORMAT, gid);
} }
} }

View File

@ -19,42 +19,46 @@
*/ */
.light #nav { .light #nav {
background-color: #bbb; background-color: #231f20;
box-shadow: 0 2px 8px #777;
} }
.dark #nav { .dark #nav {
background-color: #444; /* TODO: dark theme */
box-shadow: 0 2px 8px #111; background-color: #231f20;
} }
.light #nav .nav-hdr { .light #nav .nav-hdr {
color: #ddd; color: #716b6a;
border-bottom: solid 1px #999; background-color: #3c3a3a;
background-color: #aaa;
} }
.dark #nav .nav-hdr { .dark #nav .nav-hdr {
color: #888; /* TODO: dark theme */
border-bottom: solid 1px #444; color: #716b6a;
background-color: #555; background-color: #3c3a3a;
} }
.light #nav a { .light #nav a {
color: #369; color: #c7c7c0;
border-bottom: solid #ccc 1px; border-bottom: solid #3c3a3a 1px;
} }
.dark #nav a { .dark #nav a {
color: #eee; /* TODO: dark theme */
border-bottom: solid #333 1px; color: #c7c7c0;
border-bottom: solid #3c3a3a 1px;
} }
.light #nav a:hover { .light #nav a:hover {
background-color: #ddd; color: #ffffff;
} }
.dark #nav a:hover { .dark #nav a:hover {
background-color: #777; /* TODO: dark theme */
color: #ffffff;
} }
#nav a div svg.embeddedIcon g.icon .glyph { #nav a div svg.embeddedIcon g.icon .glyph {
fill: #c66; fill: #007dc4;
}
#nav a:hover div svg.embeddedIcon g.icon .glyph {
fill: #20b2ff;
} }

View File

@ -20,27 +20,32 @@
#nav { #nav {
position: absolute; position: absolute;
top: 45px; top: 48px;
left: 1px; left: 0;
padding: 0; padding: 0;
z-index: 3000; z-index: 3000;
visibility: hidden; visibility: hidden;
} }
html[data-platform='iPad'] #nav { html[data-platform='iPad'] #nav {
top: 57px; top: 60px;
} }
#nav .nav-hdr { #nav .nav-hdr {
font-style: italic; font-weight: bold;
padding: 6px 8px 6px 8px; font-variant: small-caps;
text-transform: uppercase;
font-size: 12pt;
padding: 8px 15px;
} }
#nav a { #nav a {
text-decoration: none; text-decoration: none;
font-size: 14pt; font-size: 13pt;
font-weight: lighter;
display: block; display: block;
padding: 8px 16px 6px 12px; padding: 6px 10px;
margin: 0 7px;
} }
#nav a div { #nav a div {

View File

@ -24,6 +24,9 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700'
rel='stylesheet' type='text/css'>
<title>ONOS</title> <title>ONOS</title>
<!-- Third party library code included here --> <!-- Third party library code included here -->