ONOS-1477 - GUI -- Added glyphs to nav menu.
Change-Id: Ifacd5d389bdc2bb5adc61182b8329de9e2557af2
diff --git a/core/api/src/main/java/org/onosproject/ui/UiView.java b/core/api/src/main/java/org/onosproject/ui/UiView.java
index e406a6d..2b8b7fa2 100644
--- a/core/api/src/main/java/org/onosproject/ui/UiView.java
+++ b/core/api/src/main/java/org/onosproject/ui/UiView.java
@@ -66,9 +66,10 @@
}
}
+ private final Category category;
private final String id;
private final String label;
- private final Category category;
+ private final String iconId;
/**
* Creates a new user interface view descriptor. The navigation item
@@ -79,9 +80,24 @@
* @param label view label
*/
public UiView(Category category, String id, String label) {
+ this(category, id, label, null);
+ }
+
+ /**
+ * Creates a new user interface view descriptor. The navigation item
+ * will appear in the navigation menu under the specified category,
+ * with the specified icon adornment.
+ *
+ * @param category view category
+ * @param id view identifier
+ * @param label view label
+ * @param iconId icon id
+ */
+ public UiView(Category category, String id, String label, String iconId) {
this.category = category;
this.id = id;
this.label = label;
+ this.iconId = iconId;
}
/**
@@ -111,6 +127,15 @@
return label;
}
+ /**
+ * Returns the icon ID.
+ *
+ * @return icon ID
+ */
+ public String iconId() {
+ return iconId;
+ }
+
@Override
public int hashCode() {
return Objects.hash(id);
@@ -134,6 +159,7 @@
.add("category", category)
.add("id", id)
.add("label", label)
+ .add("iconId", iconId)
.toString();
}
}
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 7c58250..f134886 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
@@ -51,7 +51,9 @@
private static final String HDR_FORMAT =
"<div class=\"nav-hdr\">%s</div>\n";
private static final String NAV_FORMAT =
- "<a ng-click=\"navCtrl.hideNav()\" href=\"#/%s\">%s</a>\n";
+ "<a ng-click=\"navCtrl.hideNav()\" href=\"#/%s\">%s %s</a>\n";
+
+ private static final String BLANK_GLYPH = "unknown";
@GET
@Produces(MediaType.TEXT_HTML)
@@ -110,7 +112,12 @@
private void addCatItems(StringBuilder sb, List<UiView> catViews) {
for (UiView view : catViews) {
- sb.append(String.format(NAV_FORMAT, view.id(), view.label()));
+ sb.append(String.format(NAV_FORMAT, view.id(), icon(view), view.label()));
}
}
+
+ private String icon(UiView view) {
+ String gid = view.iconId() == null ? BLANK_GLYPH : view.iconId();
+ return "<div icon icon-id=\"" + gid + "\"></div>";
+ }
}
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/UiExtensionManager.java b/web/gui/src/main/java/org/onosproject/ui/impl/UiExtensionManager.java
index a924dba..bd17c9f 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/UiExtensionManager.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/UiExtensionManager.java
@@ -62,14 +62,16 @@
// Creates core UI extension
private static UiExtension createCoreExtension() {
- List<UiView> coreViews = of(new UiView(PLATFORM, "app", "Applications"),
- new UiView(PLATFORM, "cluster", "Cluster Nodes"),
- new UiView(NETWORK, "topo", "Topology"),
- new UiView(NETWORK, "device", "Devices"),
- new UiViewHidden("flow"),
- new UiView(NETWORK, "link", "Links"),
- new UiView(NETWORK, "host", "Hosts"),
- new UiView(NETWORK, "intent", "Intents"));
+ List<UiView> coreViews = of(
+ new UiView(PLATFORM, "app", "Applications", "nav_apps"),
+ new UiView(PLATFORM, "cluster", "Cluster Nodes", "nav_cluster"),
+ new UiView(NETWORK, "topo", "Topology", "nav_topo"),
+ new UiView(NETWORK, "device", "Devices", "nav_devs"),
+ new UiViewHidden("flow"),
+ new UiView(NETWORK, "link", "Links", "nav_links"),
+ new UiView(NETWORK, "host", "Hosts", "nav_hosts"),
+ new UiView(NETWORK, "intent", "Intents", "nav_intents")
+ );
UiMessageHandlerFactory messageHandlerFactory =
() -> ImmutableList.of(
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 7f67745..ea8c4cf 100644
--- a/web/gui/src/main/webapp/app/fw/nav/nav.css
+++ b/web/gui/src/main/webapp/app/fw/nav/nav.css
@@ -56,7 +56,7 @@
text-decoration: none;
font-size: 14pt;
display: block;
- padding: 8px 16px 6px 16px;
+ padding: 8px 16px 6px 12px;
}
.light #nav a {
@@ -75,3 +75,12 @@
background-color: #777;
}
+#nav a div {
+ display: inline-block;
+ vertical-align: middle;
+ padding-right: 4px;
+}
+
+#nav a div svg.embeddedIcon g.icon .glyph {
+ fill: #c66;
+}
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.js b/web/gui/src/main/webapp/app/fw/svg/icon.js
index e7e40f0..e53fe2a 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -47,7 +47,15 @@
hostIcon_endstation: 'endstation',
hostIcon_router: 'router',
- hostIcon_bgpSpeaker: 'bgpSpeaker'
+ hostIcon_bgpSpeaker: 'bgpSpeaker',
+
+ nav_apps: 'bird',
+ nav_cluster: 'node',
+ nav_topo: 'unknown', // TODO: need a topology glyph
+ nav_devs: 'switch',
+ nav_links: 'ports',
+ nav_hosts: 'endstation',
+ nav_intents: 'relatedIntents'
};
function ensureIconLibDefs() {