GUI -- Adjusted height of tables in tabular views, added new and removed columns in Device View. Removed rounded bottom corners of tabular views, created table.css instead of using common.css
Change-Id: I77ff4c3abe051e1e4e566eb805e4b4a695f011ba
diff --git a/web/gui/src/main/webapp/app/common.css b/web/gui/src/main/webapp/app/common.css
index ff727a3..b188930 100644
--- a/web/gui/src/main/webapp/app/common.css
+++ b/web/gui/src/main/webapp/app/common.css
@@ -18,75 +18,3 @@
ONOS GUI -- common -- CSS file
*/
-/* ------ for summary-list tables ------ */
-
-table.summary-list {
- margin: 0 20px 16px 12px;
- font-size: 10pt;
- border-spacing: 0;
-}
-
-table.summary-list tbody {
- border-radius: 0 0 8px 8px;
-}
-
-table.summary-list td.nodata {
- text-align: center;
- font-style: italic;
-}
-
-.light table.summary-list tr:nth-child(even) {
- background-color: #ddd;
-}
-.light table.summary-list tr:nth-child(odd) {
- background-color: #eee;
-}
-.dark table.summary-list tr:nth-child(even) {
- background-color: #333;
-}
-.dark table.summary-list tr:nth-child(odd) {
- background-color: #444;
-}
-
-.light table.summary-list tr.selected {
- background-color: deepskyblue;
-}
-
-.dark table.summary-list tr.selected {
- background-color: #304860;
-}
-
-table.summary-list td,th {
- padding: 6px 6px 6px 6px;
- text-align: left;
-}
-
-table.summary-list th {
- letter-spacing: 0.02em;
- cursor: pointer;
-}
-table.summary-list th:first-child {
- border-radius: 8px 0 0 0;
-}
-table.summary-list th:last-child {
- border-radius: 0 8px 0 0;
-}
-
-.light table.summary-list th {
- background-color: #bbb;
-}
-.dark table.summary-list th {
- background-color: #222;
- color: #ccc;
-}
-
-/* rows are selectable */
-table.summary-list td {
- cursor: pointer;
-}
-
-.dark table.summary-list td {
- color: #ccc;
-}
-
-/* ------------------------------------ */
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.css b/web/gui/src/main/webapp/app/fw/widget/table.css
new file mode 100644
index 0000000..d7db019
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/widget/table.css
@@ -0,0 +1,83 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* ------ for summary-list tables ------ */
+
+table.summary-list {
+ margin: 0 20px 16px 12px;
+ font-size: 10pt;
+ border-spacing: 0;
+}
+
+table.summary-list td.nodata {
+ text-align: center;
+ font-style: italic;
+}
+
+.light table.summary-list tr:nth-child(even) {
+ background-color: #ddd;
+}
+.light table.summary-list tr:nth-child(odd) {
+ background-color: #eee;
+}
+.dark table.summary-list tr:nth-child(even) {
+ background-color: #333;
+}
+.dark table.summary-list tr:nth-child(odd) {
+ background-color: #444;
+}
+
+.light table.summary-list tr.selected {
+ background-color: deepskyblue;
+}
+
+.dark table.summary-list tr.selected {
+ background-color: #304860;
+}
+
+table.summary-list td,
+table.summary-list th {
+ padding: 6px;
+ text-align: left;
+}
+
+table.summary-list th {
+ letter-spacing: 0.02em;
+ cursor: pointer;
+}
+table.summary-list th:first-child {
+ border-radius: 8px 0 0 0;
+}
+table.summary-list th:last-child {
+ border-radius: 0 8px 0 0;
+}
+
+.light table.summary-list th {
+ background-color: #bbb;
+}
+.dark table.summary-list th {
+ background-color: #222;
+ color: #ccc;
+}
+
+/* rows are selectable */
+table.summary-list td {
+ cursor: pointer;
+}
+
+.dark table.summary-list td {
+ color: #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 b3b0476..699aad1 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -21,11 +21,14 @@
'use strict';
// injected refs
- var $log, $window, fs, is;
+ var $log, $window, fs, mast, is;
// constants
var tableIconTdSize = 33,
- bottomMargin = 200,
+ mastPdg = 8,
+ h2Pdg = 40,
+ thPdg = 12,
+ tbodyPdg = 5,
colWidth = 'col-width',
tableIcon = 'table-icon';
@@ -49,7 +52,8 @@
// - icon width,
// - and default width
// assumes assigned width is not given to icons
- // returns the width of all columns that are not icons have an assigned width
+ // returns the width of all columns that are not icons
+ // or have an assigned width
function getDefaultWidth(headers) {
var winWidth = fs.windowSize().width,
iconCols = 0,
@@ -92,12 +96,17 @@
});
}
+ // get the size of the window and then subtract the extra space at the top
+ // to get the height of the table
function setTableHeight(thead, tbody) {
- var winHeight = fs.windowSize().height;
+ var titleHeight = h2Pdg + fs.noPxStyle(d3.select('h2'), 'height'),
+ thHeight = thPdg + fs.noPxStyle(d3.select('th'), 'height'),
+ totalHeight = titleHeight + thHeight + tbodyPdg + mastPdg,
+ tableHeight = fs.windowSize(mast.mastHeight() + totalHeight).height;
thead.style('display', 'block');
tbody.style({'display': 'block',
- 'height': ((winHeight - bottomMargin) + 'px'),
+ 'height': (tableHeight + 'px'),
'overflow': 'auto'
});
}
@@ -150,11 +159,13 @@
}
angular.module('onosWidget')
- .directive('onosFixedHeader', ['$window', 'FnService',
- function (_$window_, _fs_) {
+ .directive('onosFixedHeader', ['$window', 'FnService', 'MastService',
+ function (_$window_, _fs_, _mast_) {
return function (scope, element) {
$window = _$window_;
fs = _fs_;
+ mast = _mast_;
+
var w = angular.element($window),
table = d3.select(element[0]),
thead = table.select('thead'),
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 f9a07d2..ffd7b81 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -10,13 +10,12 @@
<th colId="available" class="table-icon" sortable></th>
<th colId="type" class="table-icon" sortable></th>
<th colId="id" sortable>Device ID </th>
+ <th colId="masterid" sortable>Master Instance </th>
+ <th colId="num_ports" sortable>Ports </th>
<th colId="mfr" sortable>Vendor </th>
<th colId="hw" sortable>H/W Version </th>
<th colId="sw" sortable>S/W Version </th>
- <th colId="chassisid" sortable>Chassis ID </th>
- <th colId="serial" sortable>Serial # </th>
<th colId="protocol" sortable>Protocol </th>
- <th colId="masterid" sortable>Master Instance </th>
</tr>
</thead>
@@ -36,13 +35,12 @@
<div icon icon-id="{{dev._iconid_type}}"></div>
</td>
<td>{{dev.id}}</td>
+ <td>{{dev.masterid}}</td>
+ <td>{{dev.num_ports}}</td>
<td>{{dev.mfr}}</td>
<td>{{dev.hw}}</td>
<td>{{dev.sw}}</td>
- <td>{{dev.chassisid}}</td>
- <td>{{dev.serial}}</td>
<td>{{dev.protocol}}</td>
- <td>{{dev.masterid}}</td>
</tr>
</tbody>
</table>
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index 40d3bd4..de19409 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -90,6 +90,7 @@
<link rel="stylesheet" href="app/fw/widget/button.css">
<link rel="stylesheet" href="app/fw/widget/toolbar.css">
<link rel="stylesheet" href="app/fw/widget/tooltip.css">
+ <link rel="stylesheet" href="app/fw/widget/table.css">
<!-- This is where contributed javascript will get injected -->
<!-- {INJECTED-JAVASCRIPT-START} -->