GUI -- Added application view buttons. (WIP - require click handlers still)
- cleaned up icon.css rules.
Change-Id: If76f1e731da80e44391077c265f7671b07ef34db
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.css b/web/gui/src/main/webapp/app/fw/svg/icon.css
index 6d83da2..ca9837b 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.css
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.css
@@ -22,45 +22,49 @@
display: none;
}
-svg.embeddedIcon .icon .glyph {
+svg .svgIcon {
+ fill-rule: evenodd;
+}
+
+svg.embeddedIcon g.icon {
+ fill: none;
+}
+
+svg.embeddedIcon g.icon rect {
+ stroke: none;
+ fill: none;
+}
+
+svg.embeddedIcon g.icon .glyph {
stroke: none;
fill: white;
fill-rule: evenodd;
}
-/*
- FIXME: The following should be consolidated to result in much less CSS and
- not to require entries for every icon.
- */
-.light svg.embeddedIcon .icon.appActive,
-.light svg.embeddedIcon .icon.appInactive {
- fill: none;
+/* Sortable table headers */
+.light div.tableColSort svg.embeddedIcon .icon .glyph {
+ fill: black;
+}
+.dark div.tableColSort svg.embeddedIcon .icon .glyph {
+ fill: #ccc;
}
-.dark svg.embeddedIcon .icon.appActive,
-.dark svg.embeddedIcon .icon.appInactive {
- fill: none;
+
+/* color schemes for specific icon classes */
+
+svg.embeddedIcon .icon.appInactive .glyph {
+ fill: rgba(166, 166, 166, 0.52);
}
.light svg.embeddedIcon .icon.appActive .glyph {
fill: green;
}
.dark svg.embeddedIcon .icon.appActive .glyph {
- fill: #266610;
+ fill: #308C10;
}
-.light svg.embeddedIcon .icon.deviceOnline,
-.light svg.embeddedIcon .icon.deviceOffline {
- fill: none;
-}
-
-.dark svg.embeddedIcon .icon.deviceOnline,
-.dark svg.embeddedIcon .icon.deviceOffline {
- fill: none;
-}
-
.light svg.embeddedIcon .icon.devIcon_SWITCH {
fill: #ccc;
}
@@ -81,55 +85,8 @@
fill: darkred;
}
.dark svg.embeddedIcon .icon.deviceOnline .glyph {
- fill: #266610;
+ fill: #308C10;
}
.dark svg.embeddedIcon .icon.deviceOffline .glyph {
- fill: #610000;
-}
-
-.light svg.embeddedIcon .icon.tableColSortAsc .glyph,
-.light svg.embeddedIcon .icon.tableColSortDesc .glyph {
- fill: black;
-}
-.dark svg.embeddedIcon .icon.tableColSortAsc .glyph,
-.dark svg.embeddedIcon .icon.tableColSortDesc .glyph {
- fill: #ccc;
-}
-
-.light svg.embeddedIcon .icon.appActive rect,
-.light svg.embeddedIcon .icon.appInactive rect,
-.dark svg.embeddedIcon .icon.appActive rect,
-.dark svg.embeddedIcon .icon.appInactive rect,
-.light svg.embeddedIcon .icon.deviceOnline rect,
-.light svg.embeddedIcon .icon.deviceOffline rect,
-.dark svg.embeddedIcon .icon.deviceOnline rect,
-.dark svg.embeddedIcon .icon.deviceOffline rect {
- stroke: none;
- fill: none;
-}
-
-svg.embeddedIcon .icon.tableColSortAsc rect,
-svg.embeddedIcon .icon.tableColSortDesc rect {
- stroke: none;
- fill: none;
-}
-
-svg.embeddedIcon .icon rect {
- stroke: black;
- stroke-width: 1px;
-}
-.dark svg.embeddedIcon .icon.deviceOnline rect
-.dark svg.embeddedIcon .icon.deviceOffline rect {
- stroke: none;
-}
-.dark svg.embeddedIcon .icon rect {
- stroke: #ccc;
-}
-.dark svg.embeddedIcon .icon.tableColSortAsc rect,
-.dark svg.embeddedIcon .icon.tableColSortDesc rect {
- stroke: none;
-}
-
-svg .svgIcon {
- fill-rule: evenodd;
+ fill: #AD2D2D;
}
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 8a8b35f..b63cf64 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -31,6 +31,10 @@
var glyphMapping = {
appActive: 'checkMark',
appInactive: 'unknown',
+ appPlus: 'plus',
+ appMinus: 'minus',
+ appPlay: 'play',
+ appStop: 'stop',
deviceOnline: 'checkMark',
deviceOffline: 'xMark',
@@ -176,14 +180,16 @@
}
function createSortIcon() {
- function sortAsc(div) {
+ function sortAsc(div) {
div.style('display', 'inline-block');
loadEmbeddedIcon(div, 'tableColSortAsc', 10);
+ div.classed('tableColSort', true);
}
function sortDesc(div) {
div.style('display', 'inline-block');
loadEmbeddedIcon(div, 'tableColSortDesc', 10);
+ div.classed('tableColSort', true);
}
function sortNone(div) {
diff --git a/web/gui/src/main/webapp/app/view/app/app.css b/web/gui/src/main/webapp/app/view/app/app.css
index b30f488..9de3e17 100644
--- a/web/gui/src/main/webapp/app/view/app/app.css
+++ b/web/gui/src/main/webapp/app/view/app/app.css
@@ -18,5 +18,40 @@
ONOS GUI -- Host View -- CSS file
*/
-#ov-app td {
+#ov-app h2 {
+ display: inline-block;
+}
+
+#ov-app div.ctrl-btns {
+ display:inline-block;
+ float: right;
+ width: 200px;
+ height: 44px;
+ margin-right: 24px;
+ margin-top: 7px;
+}
+
+div.ctrl-btns div {
+ display: inline-block;
+ padding: 4px;
+ cursor: pointer;
+}
+
+.light div.ctrl-btns div svg.embeddedIcon g.icon use {
+ fill: white;
+}
+.dark div.ctrl-btns div svg.embeddedIcon g.icon use {
+ fill: #333;
+}
+
+.light div.ctrl-btns div svg.embeddedIcon g.icon rect {
+ fill: #dde;
+}
+.dark div.ctrl-btns div svg.embeddedIcon g.icon rect {
+ fill: #556;
+}
+
+/* rows are selectable */
+table.summary-list td {
+ cursor: pointer;
}
diff --git a/web/gui/src/main/webapp/app/view/app/app.html b/web/gui/src/main/webapp/app/view/app/app.html
index c219eb8..eb3e547 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -1,6 +1,14 @@
<!-- app partial HTML -->
<div id="ov-app">
- <h2>Applications ({{ctrl.appData.length}} total)</h2>
+ <div>
+ <h2>Applications ({{ctrl.appData.length}} total)</h2>
+ <div class="ctrl-btns">
+ <div icon icon-size="36" icon-id="appPlus"></div>
+ <div icon icon-size="36" icon-id="appMinus"></div>
+ <div icon icon-size="36" icon-id="appPlay"></div>
+ <div icon icon-size="36" icon-id="appStop"></div>
+ </div>
+ </div>
<table class="summary-list"
onos-fixed-header
onos-sortable-header