Committed by
Gerrit Code Review
GUI -- Formatted styling for summary-list table and Switch Icons.
Change-Id: Ifafc2f17d4338bb42734f130ba642de4a6550263
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> | ... | ... |
-
Please register or login to post a comment