GUI -- Formatted styling for summary-list table and Switch Icons.
Change-Id: Ifafc2f17d4338bb42734f130ba642de4a6550263
diff --git a/web/gui/src/main/webapp/app/common.css b/web/gui/src/main/webapp/app/common.css
index f288b07..34f880d 100644
--- a/web/gui/src/main/webapp/app/common.css
+++ b/web/gui/src/main/webapp/app/common.css
@@ -21,7 +21,7 @@
/* ------ for summary-list tables ------ */
table.summary-list {
- margin: 0px 50px 50px 50px;
+ margin: 0 50px 50px 50px;
font-size: 10pt;
border-spacing: 0;
}
@@ -46,6 +46,7 @@
table.summary-list th {
padding: 10px;
letter-spacing: 0.02em;
+ text-align: left;
}
table.summary-list th:first-child {
border-radius: 8px 0 0 0;
@@ -62,9 +63,10 @@
}
table.summary-list td {
- padding: 10px;
- text-align: center;
+ padding: 6px 10px 6px 10px;
+ text-align: left;
}
+
.dark table.summary-list td {
color: #ccc;
}
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 ff8cb8e..ad4d4c9 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.css
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.css
@@ -32,23 +32,41 @@
display: inline-block;
}
-.light svg.embeddedIcon .icon.deviceOnline {
- fill: green;
-}
+.light svg.embeddedIcon .icon.deviceOnline,
.light svg.embeddedIcon .icon.deviceOffline {
- fill: darkred;
+ fill: none;
}
.dark svg.embeddedIcon .icon.deviceOnline,
.dark svg.embeddedIcon .icon.deviceOffline {
+ fill: none;
+}
+
+.light svg.embeddedIcon .icon.devIcon_SWITCH {
fill: #ccc;
}
-.dark svg.embeddedIcon .icon.deviceOnline .glyph {
+.dark svg.embeddedIcon .icon.devIcon_SWITCH {
+ fill: #222;
+}
+.light svg.embeddedIcon .icon.devIcon_SWITCH .glyph {
+ fill: #333;
+}
+.dark svg.embeddedIcon .icon.devIcon_SWITCH .glyph {
+ fill: #ccc;
+}
+
+.light svg.embeddedIcon .icon.deviceOnline .glyph {
fill: green;
}
-.dark svg.embeddedIcon .icon.deviceOffline .glyph {
+.light svg.embeddedIcon .icon.deviceOffline .glyph {
fill: darkred;
}
+.dark svg.embeddedIcon .icon.deviceOnline .glyph {
+ fill: #266610;
+}
+.dark svg.embeddedIcon .icon.deviceOffline .glyph {
+ fill: #610000;
+}
.light svg.embeddedIcon .icon.tableColSortAsc .glyph,
.light svg.embeddedIcon .icon.tableColSortDesc .glyph {
@@ -59,6 +77,14 @@
fill: #ccc;
}
+.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;
@@ -69,6 +95,10 @@
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;
}
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 3d950b8..d799946 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -24,6 +24,7 @@
div,
currCol = {},
prevCol = {},
+ tableIconTdSize = 30,
bottomMargin = 200;
@@ -80,15 +81,10 @@
tdElement = t.select('td:nth-of-type(' + (index + 1) + ')');
- // if the header has no text in it,
- // then make the column the width of the td element.
- // (This looks good for icons)
- if (!(thElement.text().length)) {
- var tdSize = tdElement.style('width');
- thElement.style('width', tdSize + 'px');
- tdElement.style('width', tdSize + 'px');
- }
- else {
+ if (tdElement.classed('table-icon')) {
+ thElement.style('width', tableIconTdSize + 'px');
+ tdElement.style('width', tableIconTdSize + 'px');
+ } else {
thElement.style('width', colWidth + 'px');
tdElement.style('width', colWidth + 'px');
}
@@ -161,7 +157,6 @@
};
}])
- // TODO: fix header alignment spacing
.directive('onosFixedHeader', ['$window', '$timeout',
'MastService', 'FnService',
function (_$window_, $timeout, mast, _fs_) {
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 5eb1d32..5f7f5cc 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -8,8 +8,8 @@
sort-callback="sortCallback(urlSuffix)">
<thead>
<tr>
- <th colId="available">.</th>
- <th colId="type">.</th>
+ <th colId="available"></th>
+ <th colId="type"></th>
<th colId="id" sortable>Device ID </th>
<th colId="mfr" sortable>Vendor </th>
<th colId="hw" sortable>H/W Version </th>
@@ -23,8 +23,12 @@
<tbody>
<tr ng-repeat="dev in ctrl.deviceData"
ng-repeat-done>
- <td><div icon icon-id="{{dev._iconid_available}}"></div></td>
- <td><div icon icon-id="{{dev._iconid_type}}"></div></td>
+ <td class="table-icon">
+ <div icon icon-id="{{dev._iconid_available}}"></div>
+ </td>
+ <td class="table-icon">
+ <div icon icon-id="{{dev._iconid_type}}"></div>
+ </td>
<td>{{dev.id}}</td>
<td>{{dev.mfr}}</td>
<td>{{dev.hw}}</td>