홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
357f7fdc 1 parent 36fc15c8

GUI -- Formatted styling for summary-list table and Switch Icons. 

Change-Id: Ifafc2f17d4338bb42734f130ba642de4a6550263
Inline Side-by-side
Showing 4 changed files with 54 additions and 23 deletions
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 /* ------ for summary-list tables ------ */ 21 /* ------ for summary-list tables ------ */
22 22
23 table.summary-list { 23 table.summary-list {
24 - margin: 0px 50px 50px 50px; 24 + margin: 0 50px 50px 50px;
25 font-size: 10pt; 25 font-size: 10pt;
26 border-spacing: 0; 26 border-spacing: 0;
27 } 27 }
...@@ -46,6 +46,7 @@ table.summary-list tbody { ...@@ -46,6 +46,7 @@ table.summary-list tbody {
46 table.summary-list th { 46 table.summary-list th {
47 padding: 10px; 47 padding: 10px;
48 letter-spacing: 0.02em; 48 letter-spacing: 0.02em;
49 + text-align: left;
49 } 50 }
50 table.summary-list th:first-child { 51 table.summary-list th:first-child {
51 border-radius: 8px 0 0 0; 52 border-radius: 8px 0 0 0;
...@@ -62,9 +63,10 @@ table.summary-list th:last-child { ...@@ -62,9 +63,10 @@ table.summary-list th:last-child {
62 } 63 }
63 64
64 table.summary-list td { 65 table.summary-list td {
65 - padding: 10px; 66 + padding: 6px 10px 6px 10px;
66 - text-align: center; 67 + text-align: left;
67 } 68 }
69 +
68 .dark table.summary-list td { 70 .dark table.summary-list td {
69 color: #ccc; 71 color: #ccc;
70 } 72 }
......
...@@ -32,23 +32,41 @@ div.inline-icon { ...@@ -32,23 +32,41 @@ div.inline-icon {
32 display: inline-block; 32 display: inline-block;
33 } 33 }
34 34
35 -.light svg.embeddedIcon .icon.deviceOnline { 35 +.light svg.embeddedIcon .icon.deviceOnline,
36 - fill: green;
37 -}
38 .light svg.embeddedIcon .icon.deviceOffline { 36 .light svg.embeddedIcon .icon.deviceOffline {
39 - fill: darkred; 37 + fill: none;
40 } 38 }
41 39
42 .dark svg.embeddedIcon .icon.deviceOnline, 40 .dark svg.embeddedIcon .icon.deviceOnline,
43 .dark svg.embeddedIcon .icon.deviceOffline { 41 .dark svg.embeddedIcon .icon.deviceOffline {
42 + fill: none;
43 +}
44 +
45 +.light svg.embeddedIcon .icon.devIcon_SWITCH {
44 fill: #ccc; 46 fill: #ccc;
45 } 47 }
46 -.dark svg.embeddedIcon .icon.deviceOnline .glyph { 48 +.dark svg.embeddedIcon .icon.devIcon_SWITCH {
49 + fill: #222;
50 +}
51 +.light svg.embeddedIcon .icon.devIcon_SWITCH .glyph {
52 + fill: #333;
53 +}
54 +.dark svg.embeddedIcon .icon.devIcon_SWITCH .glyph {
55 + fill: #ccc;
56 +}
57 +
58 +.light svg.embeddedIcon .icon.deviceOnline .glyph {
47 fill: green; 59 fill: green;
48 } 60 }
49 -.dark svg.embeddedIcon .icon.deviceOffline .glyph { 61 +.light svg.embeddedIcon .icon.deviceOffline .glyph {
50 fill: darkred; 62 fill: darkred;
51 } 63 }
64 +.dark svg.embeddedIcon .icon.deviceOnline .glyph {
65 + fill: #266610;
66 +}
67 +.dark svg.embeddedIcon .icon.deviceOffline .glyph {
68 + fill: #610000;
69 +}
52 70
53 .light svg.embeddedIcon .icon.tableColSortAsc .glyph, 71 .light svg.embeddedIcon .icon.tableColSortAsc .glyph,
54 .light svg.embeddedIcon .icon.tableColSortDesc .glyph { 72 .light svg.embeddedIcon .icon.tableColSortDesc .glyph {
...@@ -59,6 +77,14 @@ div.inline-icon { ...@@ -59,6 +77,14 @@ div.inline-icon {
59 fill: #ccc; 77 fill: #ccc;
60 } 78 }
61 79
80 +.light svg.embeddedIcon .icon.deviceOnline rect,
81 +.light svg.embeddedIcon .icon.deviceOffline rect,
82 +.dark svg.embeddedIcon .icon.deviceOnline rect,
83 +.dark svg.embeddedIcon .icon.deviceOffline rect {
84 + stroke: none;
85 + fill: none;
86 +}
87 +
62 svg.embeddedIcon .icon.tableColSortAsc rect, 88 svg.embeddedIcon .icon.tableColSortAsc rect,
63 svg.embeddedIcon .icon.tableColSortDesc rect { 89 svg.embeddedIcon .icon.tableColSortDesc rect {
64 stroke: none; 90 stroke: none;
...@@ -69,6 +95,10 @@ svg.embeddedIcon .icon rect { ...@@ -69,6 +95,10 @@ svg.embeddedIcon .icon rect {
69 stroke: black; 95 stroke: black;
70 stroke-width: 1px; 96 stroke-width: 1px;
71 } 97 }
98 +.dark svg.embeddedIcon .icon.deviceOnline rect
99 +.dark svg.embeddedIcon .icon.deviceOffline rect {
100 + stroke: none;
101 +}
72 .dark svg.embeddedIcon .icon rect { 102 .dark svg.embeddedIcon .icon rect {
73 stroke: #ccc; 103 stroke: #ccc;
74 } 104 }
......
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
24 div, 24 div,
25 currCol = {}, 25 currCol = {},
26 prevCol = {}, 26 prevCol = {},
27 + tableIconTdSize = 30,
27 bottomMargin = 200; 28 bottomMargin = 200;
28 29
29 30
...@@ -80,15 +81,10 @@ ...@@ -80,15 +81,10 @@
80 81
81 tdElement = t.select('td:nth-of-type(' + (index + 1) + ')'); 82 tdElement = t.select('td:nth-of-type(' + (index + 1) + ')');
82 83
83 - // if the header has no text in it, 84 + if (tdElement.classed('table-icon')) {
84 - // then make the column the width of the td element. 85 + thElement.style('width', tableIconTdSize + 'px');
85 - // (This looks good for icons) 86 + tdElement.style('width', tableIconTdSize + 'px');
86 - if (!(thElement.text().length)) { 87 + } else {
87 - var tdSize = tdElement.style('width');
88 - thElement.style('width', tdSize + 'px');
89 - tdElement.style('width', tdSize + 'px');
90 - }
91 - else {
92 thElement.style('width', colWidth + 'px'); 88 thElement.style('width', colWidth + 'px');
93 tdElement.style('width', colWidth + 'px'); 89 tdElement.style('width', colWidth + 'px');
94 } 90 }
...@@ -161,7 +157,6 @@ ...@@ -161,7 +157,6 @@
161 }; 157 };
162 }]) 158 }])
163 159
164 - // TODO: fix header alignment spacing
165 .directive('onosFixedHeader', ['$window', '$timeout', 160 .directive('onosFixedHeader', ['$window', '$timeout',
166 'MastService', 'FnService', 161 'MastService', 'FnService',
167 function (_$window_, $timeout, mast, _fs_) { 162 function (_$window_, $timeout, mast, _fs_) {
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 sort-callback="sortCallback(urlSuffix)"> 8 sort-callback="sortCallback(urlSuffix)">
9 <thead> 9 <thead>
10 <tr> 10 <tr>
11 - <th colId="available">.</th> 11 + <th colId="available"></th>
12 - <th colId="type">.</th> 12 + <th colId="type"></th>
13 <th colId="id" sortable>Device ID </th> 13 <th colId="id" sortable>Device ID </th>
14 <th colId="mfr" sortable>Vendor </th> 14 <th colId="mfr" sortable>Vendor </th>
15 <th colId="hw" sortable>H/W Version </th> 15 <th colId="hw" sortable>H/W Version </th>
...@@ -23,8 +23,12 @@ ...@@ -23,8 +23,12 @@
23 <tbody> 23 <tbody>
24 <tr ng-repeat="dev in ctrl.deviceData" 24 <tr ng-repeat="dev in ctrl.deviceData"
25 ng-repeat-done> 25 ng-repeat-done>
26 - <td><div icon icon-id="{{dev._iconid_available}}"></div></td> 26 + <td class="table-icon">
27 - <td><div icon icon-id="{{dev._iconid_type}}"></div></td> 27 + <div icon icon-id="{{dev._iconid_available}}"></div>
28 + </td>
29 + <td class="table-icon">
30 + <div icon icon-id="{{dev._iconid_type}}"></div>
31 + </td>
28 <td>{{dev.id}}</td> 32 <td>{{dev.id}}</td>
29 <td>{{dev.mfr}}</td> 33 <td>{{dev.mfr}}</td>
30 <td>{{dev.hw}}</td> 34 <td>{{dev.hw}}</td>
......