홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
1d821231 1 parent aa3d598b

ONOS-4359: New UI look and feel : table views - base table. (WIP) 

Change-Id: I22142b1723a88a89e91d1557b87a36e7c8767909
Inline Side-by-side
Showing 13 changed files with 72 additions and 56 deletions
......@@ -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;
}
......
......@@ -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;
}
......
......@@ -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 */
......
......@@ -49,21 +49,26 @@ div.summary-list tr {
}
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 */
......
......@@ -24,7 +24,7 @@
var $log, $window, fs, mast, is;
// constants
var tableIconTdSize = 33,
var tableIconTdSize = 40,
pdg = 22,
flashTime = 1500,
colWidth = 'col-width',
......
......@@ -22,12 +22,14 @@ body.light {
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;
}
......
......@@ -42,6 +42,11 @@ body {
}
#view h2 {
padding-left: 12px;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin-left: 16px;
padding: 0;
font-size: 21pt;
font-weight: lighter;
}
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -26,6 +26,10 @@
width: 40px;
}
#ov-processor td.priority {
text-align: center;
}
#ov-processor td.number {
text-align: right;
}
......
......@@ -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>
......
......@@ -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>
......