ONOS-4359: New UI look and feel : table views - base table. (WIP)
Change-Id: I22142b1723a88a89e91d1557b87a36e7c8767909
(cherry picked from commit 1d82123)
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon-theme.css b/web/gui/src/main/webapp/app/fw/svg/icon-theme.css
index d4f0d6d..eee3713 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon-theme.css
+++ b/web/gui/src/main/webapp/app/fw/svg/icon-theme.css
@@ -35,10 +35,20 @@
}
.light svg.embeddedIcon .icon.active .glyph {
- fill: green;
+ fill: #04bf34;
}
.dark svg.embeddedIcon .icon.active .glyph {
- fill: #308C10;
+ /* TODO: dark theme */
+ fill: #04bf34;
+}
+
+.light svg.embeddedIcon .icon.inactive .glyph {
+ /* TODO: */
+ fill: darkred;
+}
+.dark svg.embeddedIcon .icon.inactive .glyph {
+ /* TODO: dark theme */
+ fill: darkred;
}
.light table svg.embeddedIcon {
@@ -54,16 +64,4 @@
fill: #ccc;
}
-.light svg.embeddedIcon .icon.active .glyph {
- fill: green;
-}
-.light svg.embeddedIcon .icon.inactive .glyph {
- fill: darkred;
-}
-.dark svg.embeddedIcon .icon.active .glyph {
- fill: #308C10;
-}
-.dark svg.embeddedIcon .icon.inactive .glyph {
- fill: #AD2D2D;
-}
diff --git a/web/gui/src/main/webapp/app/fw/widget/table-theme.css b/web/gui/src/main/webapp/app/fw/widget/table-theme.css
index d2ab63f..d314c9e 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table-theme.css
+++ b/web/gui/src/main/webapp/app/fw/widget/table-theme.css
@@ -17,24 +17,27 @@
/* ------ for summary-list tables (theme) ------ */
.light div.summary-list tr:nth-child(even) {
- background-color: #ddd;
+ background-color: #f4f4f4;
}
.light div.summary-list tr:nth-child(odd) {
- background-color: #eee;
+ background-color: #fbfbfb;
}
.dark div.summary-list tr:nth-child(even) {
- background-color: #333;
+ /* TODO: dark theme */
+ background-color: #f4f4f4;
}
.dark div.summary-list tr:nth-child(odd) {
- background-color: #444;
+ /* TODO: dark theme */
+ background-color: #fbfbfb;
}
.light div.summary-list tr.selected {
- background-color: deepskyblue !important;
+ background-color: #dbeffc !important;
}
.dark div.summary-list tr.selected {
- background-color: #304860;
+ /* TODO: dark theme */
+ background-color: #dbeffc;
}
/* highlighting */
@@ -46,15 +49,21 @@
}
.light div.summary-list .table-header td {
- background-color: #bbb;
+ background-color: #e5e5e6;
+ color: #3c3a3a;
}
.dark div.summary-list .table-header td {
- background-color: #222;
- color: #ccc;
+ /* TODO: dark theme */
+ background-color: #e5e5e6;
+ color: #3c3a3a;
}
+.light div.summary-list td {
+ color: #3c3a3a;
+}
.dark div.summary-list td {
- color: #ccc;
+ /* TODO: dark theme */
+ color: #3c3a3a;
}
/* Inactive */
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.css b/web/gui/src/main/webapp/app/fw/widget/table.css
index b7f8b9e..03d9e88 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.css
+++ b/web/gui/src/main/webapp/app/fw/widget/table.css
@@ -49,21 +49,26 @@
}
div.summary-list td {
- padding: 6px;
+ padding: 4px;
text-align: left;
word-wrap: break-word;
+ font-size: 12pt;
+}
+
+div.summary-list td.table-icon {
+ padding-left: 4px;
}
div.summary-list .table-header td {
+ font-weight: bold;
+ font-variant: small-caps;
+ text-transform: uppercase;
+ font-size: 11pt;
+ padding-top: 14px;
+ padding-bottom: 14px;
+
letter-spacing: 0.02em;
cursor: pointer;
- font-weight: bold;
-}
-div.summary-list .table-header td:first-child {
- border-radius: 8px 0 0 0;
-}
-div.summary-list .table-header td:last-child {
- border-radius: 0 8px 0 0;
}
/* rows are selectable */
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.js b/web/gui/src/main/webapp/app/fw/widget/table.js
index 13b223b..343f9ba 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -24,7 +24,7 @@
var $log, $window, fs, mast, is;
// constants
- var tableIconTdSize = 33,
+ var tableIconTdSize = 40,
pdg = 22,
flashTime = 1500,
colWidth = 'col-width',