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/common.css b/web/gui/src/main/webapp/app/common.css
index 5f042e5..b8952c3 100644
--- a/web/gui/src/main/webapp/app/common.css
+++ b/web/gui/src/main/webapp/app/common.css
@@ -18,13 +18,6 @@
ONOS GUI -- common -- CSS file
*/
-#view h2 {
- margin: 0;
- /* separated out so that other padding doesn't get clobbered */
- padding-top: 20px;
- padding-bottom: 20px;
-}
-
.clickable {
cursor: pointer;
}
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',
diff --git a/web/gui/src/main/webapp/app/onos-theme.css b/web/gui/src/main/webapp/app/onos-theme.css
index 03d410a..ba9b458 100644
--- a/web/gui/src/main/webapp/app/onos-theme.css
+++ b/web/gui/src/main/webapp/app/onos-theme.css
@@ -22,12 +22,14 @@
background-color: white;
}
body.dark {
+ /* TODO: dark theme */
background-color: #2b2b2b;
}
.light #view h2 {
- color: #800;
+ color: #3c3a3a;
}
.dark #view h2 {
- color: #CE5650;
+ /* TODO: dark theme */
+ color: #3c3a3a;
}
diff --git a/web/gui/src/main/webapp/app/onos.css b/web/gui/src/main/webapp/app/onos.css
index 6a4c9c7..4185d67 100644
--- a/web/gui/src/main/webapp/app/onos.css
+++ b/web/gui/src/main/webapp/app/onos.css
@@ -42,6 +42,11 @@
}
#view h2 {
- padding-left: 12px;
+ -webkit-margin-before: 0;
+ -webkit-margin-after: 0;
+ margin-left: 16px;
+ padding: 0;
+ font-size: 21pt;
+ font-weight: lighter;
}
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 c97b441..9d50999 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -44,9 +44,9 @@
<td colId="state" class="table-icon" sortable></td>
<td colId="icon" class="table-icon">Icon </td>
<td colId="title" sortable col-width="240px">Title </td>
- <td colId="id" sortable col-width="240px">App ID </td>
- <td colId="version" sortable col-width="120px">Version </td>
- <td colId="category" sortable col-width="100px">Category </td>
+ <td colId="id" sortable col-width="280px">App ID </td>
+ <td colId="version" sortable col-width="128px">Version </td>
+ <td colId="category" sortable col-width="136px">Category </td>
<td colId="origin" sortable>Origin </td>
</tr>
</table>
diff --git a/web/gui/src/main/webapp/app/view/cluster/cluster.html b/web/gui/src/main/webapp/app/view/cluster/cluster.html
index f17d13f..9b73a01 100644
--- a/web/gui/src/main/webapp/app/view/cluster/cluster.html
+++ b/web/gui/src/main/webapp/app/view/cluster/cluster.html
@@ -30,8 +30,8 @@
<div class="table-header" onos-sortable-header>
<table>
<tr>
- <td colId="_iconid_state" class="table-icon" col-width="60px" sortable>Active </td>
- <td colId="_iconid_started" class="table-icon" col-width="60px" sortable>Started </td>
+ <td colId="_iconid_state" class="table-icon" col-width="84px" sortable>Active </td>
+ <td colId="_iconid_started" class="table-icon" col-width="90px" sortable>Started </td>
<td colId="id" sortable>ID </td>
<td colId="ip" sortable>IP Address </td>
<td colId="tcp" sortable>TCP Port </td>
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 022984b..b4d1ec0 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -43,11 +43,11 @@
<td colId="name" sortable>Friendly Name </td>
<td colId="id" sortable>Device ID </td>
<td colId="masterid" sortable>Master Instance </td>
- <td colId="num_ports" col-width="60px" sortable>Ports </td>
+ <td colId="num_ports" col-width="70px" sortable>Ports </td>
<td colId="mfr" sortable>Vendor </td>
<td colId="hw" sortable>H/W Version </td>
<td colId="sw" sortable>S/W Version </td>
- <td colId="protocol" col-width="80px" sortable>Protocol </td>
+ <td colId="protocol" col-width="100px" sortable>Protocol </td>
</tr>
</table>
</div>
diff --git a/web/gui/src/main/webapp/app/view/processor/processor.css b/web/gui/src/main/webapp/app/view/processor/processor.css
index e4f516a..6be29f8 100644
--- a/web/gui/src/main/webapp/app/view/processor/processor.css
+++ b/web/gui/src/main/webapp/app/view/processor/processor.css
@@ -26,6 +26,10 @@
width: 40px;
}
+#ov-processor td.priority {
+ text-align: center;
+}
+
#ov-processor td.number {
text-align: right;
}
diff --git a/web/gui/src/main/webapp/app/view/processor/processor.html b/web/gui/src/main/webapp/app/view/processor/processor.html
index f2594b4..2f0db44 100644
--- a/web/gui/src/main/webapp/app/view/processor/processor.html
+++ b/web/gui/src/main/webapp/app/view/processor/processor.html
@@ -27,7 +27,7 @@
<div class="table-header" onos-sortable-header>
<table>
<tr>
- <td class="number" colId="priority" sortable col-width="80px">Priority </td>
+ <td class="priority" colId="priority" sortable col-width="80px">Priority </td>
<td colId="type" sortable col-width="80px">Type </td>
<td colId="processor" sortable col-width="500px">Class </td>
<td class="number" colId="packets" sortable col-width="100px">Packets </td>
diff --git a/web/gui/src/main/webapp/app/view/settings/settings.html b/web/gui/src/main/webapp/app/view/settings/settings.html
index bc8bf5d..ad83bca 100644
--- a/web/gui/src/main/webapp/app/view/settings/settings.html
+++ b/web/gui/src/main/webapp/app/view/settings/settings.html
@@ -15,11 +15,11 @@
<table>
<tr>
<td colId="component" sortable col-width="300px">Component </td>
- <td colId="id" sortable>Property </td>
- <td colId="type" sortable col-width="70px">Type </td>
- <td colId="value" sortable>Value </td>
- <td colId="defValue" sortable>Default </td>
- <td colId="desc" col-width="400px">Description </td>
+ <td colId="id" sortable col-width="240px">Property </td>
+ <td colId="type" sortable col-width="100px">Type </td>
+ <td colId="value" sortable col-width="100px">Value </td>
+ <td colId="defValue" sortable col-width="100px">Default </td>
+ <td colId="desc">Description </td>
</tr>
</table>
</div>