diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/MainNavResource.java b/web/gui/src/main/java/org/onosproject/ui/impl/MainNavResource.java index 81e57f0966..a8fed5f7e0 100644 --- a/web/gui/src/main/java/org/onosproject/ui/impl/MainNavResource.java +++ b/web/gui/src/main/java/org/onosproject/ui/impl/MainNavResource.java @@ -53,6 +53,8 @@ public class MainNavResource extends AbstractInjectionResource { "
%s
%n"; private static final String NAV_FORMAT = "%s %s%n"; + private static final String ICON_FORMAT = + "
"; private static final String BLANK_GLYPH = "unknown"; @@ -119,6 +121,6 @@ public class MainNavResource extends AbstractInjectionResource { private String icon(UiView view) { String gid = view.iconId() == null ? BLANK_GLYPH : view.iconId(); - return "
"; + return String.format(ICON_FORMAT, gid); } } diff --git a/web/gui/src/main/webapp/app/fw/nav/nav-theme.css b/web/gui/src/main/webapp/app/fw/nav/nav-theme.css index 6111642c29..8d22fd0e9a 100644 --- a/web/gui/src/main/webapp/app/fw/nav/nav-theme.css +++ b/web/gui/src/main/webapp/app/fw/nav/nav-theme.css @@ -19,42 +19,46 @@ */ .light #nav { - background-color: #bbb; - box-shadow: 0 2px 8px #777; + background-color: #231f20; } .dark #nav { - background-color: #444; - box-shadow: 0 2px 8px #111; + /* TODO: dark theme */ + background-color: #231f20; } .light #nav .nav-hdr { - color: #ddd; - border-bottom: solid 1px #999; - background-color: #aaa; + color: #716b6a; + background-color: #3c3a3a; } .dark #nav .nav-hdr { - color: #888; - border-bottom: solid 1px #444; - background-color: #555; + /* TODO: dark theme */ + color: #716b6a; + background-color: #3c3a3a; } .light #nav a { - color: #369; - border-bottom: solid #ccc 1px; + color: #c7c7c0; + border-bottom: solid #3c3a3a 1px; } .dark #nav a { - color: #eee; - border-bottom: solid #333 1px; + /* TODO: dark theme */ + color: #c7c7c0; + border-bottom: solid #3c3a3a 1px; } .light #nav a:hover { - background-color: #ddd; + color: #ffffff; } .dark #nav a:hover { - background-color: #777; + /* TODO: dark theme */ + color: #ffffff; } #nav a div svg.embeddedIcon g.icon .glyph { - fill: #c66; + fill: #007dc4; +} + +#nav a:hover div svg.embeddedIcon g.icon .glyph { + fill: #20b2ff; } diff --git a/web/gui/src/main/webapp/app/fw/nav/nav.css b/web/gui/src/main/webapp/app/fw/nav/nav.css index 79910883f3..7d283bd66a 100644 --- a/web/gui/src/main/webapp/app/fw/nav/nav.css +++ b/web/gui/src/main/webapp/app/fw/nav/nav.css @@ -20,27 +20,32 @@ #nav { position: absolute; - top: 45px; - left: 1px; + top: 48px; + left: 0; padding: 0; z-index: 3000; visibility: hidden; } html[data-platform='iPad'] #nav { - top: 57px; + top: 60px; } #nav .nav-hdr { - font-style: italic; - padding: 6px 8px 6px 8px; + font-weight: bold; + font-variant: small-caps; + text-transform: uppercase; + font-size: 12pt; + padding: 8px 15px; } #nav a { text-decoration: none; - font-size: 14pt; + font-size: 13pt; + font-weight: lighter; display: block; - padding: 8px 16px 6px 12px; + padding: 6px 10px; + margin: 0 7px; } #nav a div { diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html index de42a8ea51..e4fa6e2db3 100644 --- a/web/gui/src/main/webapp/index.html +++ b/web/gui/src/main/webapp/index.html @@ -24,6 +24,9 @@ + + ONOS