Committed by
Brian O'Connor
ONOS-4359: New UI look and feel : table views - base table. (WIP)
Change-Id: I22142b1723a88a89e91d1557b87a36e7c8767909 (cherry picked from commit 1d821231)
Showing
13 changed files
with
72 additions
and
56 deletions
... | @@ -18,13 +18,6 @@ | ... | @@ -18,13 +18,6 @@ |
18 | ONOS GUI -- common -- CSS file | 18 | ONOS GUI -- common -- CSS file |
19 | */ | 19 | */ |
20 | 20 | ||
21 | -#view h2 { | ||
22 | - margin: 0; | ||
23 | - /* separated out so that other padding doesn't get clobbered */ | ||
24 | - padding-top: 20px; | ||
25 | - padding-bottom: 20px; | ||
26 | -} | ||
27 | - | ||
28 | .clickable { | 21 | .clickable { |
29 | cursor: pointer; | 22 | cursor: pointer; |
30 | } | 23 | } | ... | ... |
... | @@ -35,10 +35,20 @@ | ... | @@ -35,10 +35,20 @@ |
35 | } | 35 | } |
36 | 36 | ||
37 | .light svg.embeddedIcon .icon.active .glyph { | 37 | .light svg.embeddedIcon .icon.active .glyph { |
38 | - fill: green; | 38 | + fill: #04bf34; |
39 | } | 39 | } |
40 | .dark svg.embeddedIcon .icon.active .glyph { | 40 | .dark svg.embeddedIcon .icon.active .glyph { |
41 | - fill: #308C10; | 41 | + /* TODO: dark theme */ |
42 | + fill: #04bf34; | ||
43 | +} | ||
44 | + | ||
45 | +.light svg.embeddedIcon .icon.inactive .glyph { | ||
46 | + /* TODO: */ | ||
47 | + fill: darkred; | ||
48 | +} | ||
49 | +.dark svg.embeddedIcon .icon.inactive .glyph { | ||
50 | + /* TODO: dark theme */ | ||
51 | + fill: darkred; | ||
42 | } | 52 | } |
43 | 53 | ||
44 | .light table svg.embeddedIcon { | 54 | .light table svg.embeddedIcon { |
... | @@ -54,16 +64,4 @@ | ... | @@ -54,16 +64,4 @@ |
54 | fill: #ccc; | 64 | fill: #ccc; |
55 | } | 65 | } |
56 | 66 | ||
57 | -.light svg.embeddedIcon .icon.active .glyph { | ||
58 | - fill: green; | ||
59 | -} | ||
60 | -.light svg.embeddedIcon .icon.inactive .glyph { | ||
61 | - fill: darkred; | ||
62 | -} | ||
63 | -.dark svg.embeddedIcon .icon.active .glyph { | ||
64 | - fill: #308C10; | ||
65 | -} | ||
66 | -.dark svg.embeddedIcon .icon.inactive .glyph { | ||
67 | - fill: #AD2D2D; | ||
68 | -} | ||
69 | 67 | ... | ... |
... | @@ -17,24 +17,27 @@ | ... | @@ -17,24 +17,27 @@ |
17 | /* ------ for summary-list tables (theme) ------ */ | 17 | /* ------ for summary-list tables (theme) ------ */ |
18 | 18 | ||
19 | .light div.summary-list tr:nth-child(even) { | 19 | .light div.summary-list tr:nth-child(even) { |
20 | - background-color: #ddd; | 20 | + background-color: #f4f4f4; |
21 | } | 21 | } |
22 | .light div.summary-list tr:nth-child(odd) { | 22 | .light div.summary-list tr:nth-child(odd) { |
23 | - background-color: #eee; | 23 | + background-color: #fbfbfb; |
24 | } | 24 | } |
25 | .dark div.summary-list tr:nth-child(even) { | 25 | .dark div.summary-list tr:nth-child(even) { |
26 | - background-color: #333; | 26 | + /* TODO: dark theme */ |
27 | + background-color: #f4f4f4; | ||
27 | } | 28 | } |
28 | .dark div.summary-list tr:nth-child(odd) { | 29 | .dark div.summary-list tr:nth-child(odd) { |
29 | - background-color: #444; | 30 | + /* TODO: dark theme */ |
31 | + background-color: #fbfbfb; | ||
30 | } | 32 | } |
31 | 33 | ||
32 | .light div.summary-list tr.selected { | 34 | .light div.summary-list tr.selected { |
33 | - background-color: deepskyblue !important; | 35 | + background-color: #dbeffc !important; |
34 | } | 36 | } |
35 | 37 | ||
36 | .dark div.summary-list tr.selected { | 38 | .dark div.summary-list tr.selected { |
37 | - background-color: #304860; | 39 | + /* TODO: dark theme */ |
40 | + background-color: #dbeffc; | ||
38 | } | 41 | } |
39 | 42 | ||
40 | /* highlighting */ | 43 | /* highlighting */ |
... | @@ -46,15 +49,21 @@ | ... | @@ -46,15 +49,21 @@ |
46 | } | 49 | } |
47 | 50 | ||
48 | .light div.summary-list .table-header td { | 51 | .light div.summary-list .table-header td { |
49 | - background-color: #bbb; | 52 | + background-color: #e5e5e6; |
53 | + color: #3c3a3a; | ||
50 | } | 54 | } |
51 | .dark div.summary-list .table-header td { | 55 | .dark div.summary-list .table-header td { |
52 | - background-color: #222; | 56 | + /* TODO: dark theme */ |
53 | - color: #ccc; | 57 | + background-color: #e5e5e6; |
58 | + color: #3c3a3a; | ||
54 | } | 59 | } |
55 | 60 | ||
61 | +.light div.summary-list td { | ||
62 | + color: #3c3a3a; | ||
63 | +} | ||
56 | .dark div.summary-list td { | 64 | .dark div.summary-list td { |
57 | - color: #ccc; | 65 | + /* TODO: dark theme */ |
66 | + color: #3c3a3a; | ||
58 | } | 67 | } |
59 | 68 | ||
60 | /* Inactive */ | 69 | /* Inactive */ | ... | ... |
... | @@ -49,21 +49,26 @@ div.summary-list tr { | ... | @@ -49,21 +49,26 @@ div.summary-list tr { |
49 | } | 49 | } |
50 | 50 | ||
51 | div.summary-list td { | 51 | div.summary-list td { |
52 | - padding: 6px; | 52 | + padding: 4px; |
53 | text-align: left; | 53 | text-align: left; |
54 | word-wrap: break-word; | 54 | word-wrap: break-word; |
55 | + font-size: 12pt; | ||
56 | +} | ||
57 | + | ||
58 | +div.summary-list td.table-icon { | ||
59 | + padding-left: 4px; | ||
55 | } | 60 | } |
56 | 61 | ||
57 | div.summary-list .table-header td { | 62 | div.summary-list .table-header td { |
63 | + font-weight: bold; | ||
64 | + font-variant: small-caps; | ||
65 | + text-transform: uppercase; | ||
66 | + font-size: 11pt; | ||
67 | + padding-top: 14px; | ||
68 | + padding-bottom: 14px; | ||
69 | + | ||
58 | letter-spacing: 0.02em; | 70 | letter-spacing: 0.02em; |
59 | cursor: pointer; | 71 | cursor: pointer; |
60 | - font-weight: bold; | ||
61 | -} | ||
62 | -div.summary-list .table-header td:first-child { | ||
63 | - border-radius: 8px 0 0 0; | ||
64 | -} | ||
65 | -div.summary-list .table-header td:last-child { | ||
66 | - border-radius: 0 8px 0 0; | ||
67 | } | 72 | } |
68 | 73 | ||
69 | /* rows are selectable */ | 74 | /* rows are selectable */ | ... | ... |
... | @@ -24,7 +24,7 @@ | ... | @@ -24,7 +24,7 @@ |
24 | var $log, $window, fs, mast, is; | 24 | var $log, $window, fs, mast, is; |
25 | 25 | ||
26 | // constants | 26 | // constants |
27 | - var tableIconTdSize = 33, | 27 | + var tableIconTdSize = 40, |
28 | pdg = 22, | 28 | pdg = 22, |
29 | flashTime = 1500, | 29 | flashTime = 1500, |
30 | colWidth = 'col-width', | 30 | colWidth = 'col-width', | ... | ... |
... | @@ -22,12 +22,14 @@ body.light { | ... | @@ -22,12 +22,14 @@ body.light { |
22 | background-color: white; | 22 | background-color: white; |
23 | } | 23 | } |
24 | body.dark { | 24 | body.dark { |
25 | + /* TODO: dark theme */ | ||
25 | background-color: #2b2b2b; | 26 | background-color: #2b2b2b; |
26 | } | 27 | } |
27 | 28 | ||
28 | .light #view h2 { | 29 | .light #view h2 { |
29 | - color: #800; | 30 | + color: #3c3a3a; |
30 | } | 31 | } |
31 | .dark #view h2 { | 32 | .dark #view h2 { |
32 | - color: #CE5650; | 33 | + /* TODO: dark theme */ |
34 | + color: #3c3a3a; | ||
33 | } | 35 | } | ... | ... |
... | @@ -42,6 +42,11 @@ body { | ... | @@ -42,6 +42,11 @@ body { |
42 | } | 42 | } |
43 | 43 | ||
44 | #view h2 { | 44 | #view h2 { |
45 | - padding-left: 12px; | 45 | + -webkit-margin-before: 0; |
46 | + -webkit-margin-after: 0; | ||
47 | + margin-left: 16px; | ||
48 | + padding: 0; | ||
49 | + font-size: 21pt; | ||
50 | + font-weight: lighter; | ||
46 | } | 51 | } |
47 | 52 | ... | ... |
... | @@ -44,9 +44,9 @@ | ... | @@ -44,9 +44,9 @@ |
44 | <td colId="state" class="table-icon" sortable></td> | 44 | <td colId="state" class="table-icon" sortable></td> |
45 | <td colId="icon" class="table-icon">Icon </td> | 45 | <td colId="icon" class="table-icon">Icon </td> |
46 | <td colId="title" sortable col-width="240px">Title </td> | 46 | <td colId="title" sortable col-width="240px">Title </td> |
47 | - <td colId="id" sortable col-width="240px">App ID </td> | 47 | + <td colId="id" sortable col-width="280px">App ID </td> |
48 | - <td colId="version" sortable col-width="120px">Version </td> | 48 | + <td colId="version" sortable col-width="128px">Version </td> |
49 | - <td colId="category" sortable col-width="100px">Category </td> | 49 | + <td colId="category" sortable col-width="136px">Category </td> |
50 | <td colId="origin" sortable>Origin </td> | 50 | <td colId="origin" sortable>Origin </td> |
51 | </tr> | 51 | </tr> |
52 | </table> | 52 | </table> | ... | ... |
... | @@ -30,8 +30,8 @@ | ... | @@ -30,8 +30,8 @@ |
30 | <div class="table-header" onos-sortable-header> | 30 | <div class="table-header" onos-sortable-header> |
31 | <table> | 31 | <table> |
32 | <tr> | 32 | <tr> |
33 | - <td colId="_iconid_state" class="table-icon" col-width="60px" sortable>Active </td> | 33 | + <td colId="_iconid_state" class="table-icon" col-width="84px" sortable>Active </td> |
34 | - <td colId="_iconid_started" class="table-icon" col-width="60px" sortable>Started </td> | 34 | + <td colId="_iconid_started" class="table-icon" col-width="90px" sortable>Started </td> |
35 | <td colId="id" sortable>ID </td> | 35 | <td colId="id" sortable>ID </td> |
36 | <td colId="ip" sortable>IP Address </td> | 36 | <td colId="ip" sortable>IP Address </td> |
37 | <td colId="tcp" sortable>TCP Port </td> | 37 | <td colId="tcp" sortable>TCP Port </td> | ... | ... |
... | @@ -43,11 +43,11 @@ | ... | @@ -43,11 +43,11 @@ |
43 | <td colId="name" sortable>Friendly Name </td> | 43 | <td colId="name" sortable>Friendly Name </td> |
44 | <td colId="id" sortable>Device ID </td> | 44 | <td colId="id" sortable>Device ID </td> |
45 | <td colId="masterid" sortable>Master Instance </td> | 45 | <td colId="masterid" sortable>Master Instance </td> |
46 | - <td colId="num_ports" col-width="60px" sortable>Ports </td> | 46 | + <td colId="num_ports" col-width="70px" sortable>Ports </td> |
47 | <td colId="mfr" sortable>Vendor </td> | 47 | <td colId="mfr" sortable>Vendor </td> |
48 | <td colId="hw" sortable>H/W Version </td> | 48 | <td colId="hw" sortable>H/W Version </td> |
49 | <td colId="sw" sortable>S/W Version </td> | 49 | <td colId="sw" sortable>S/W Version </td> |
50 | - <td colId="protocol" col-width="80px" sortable>Protocol </td> | 50 | + <td colId="protocol" col-width="100px" sortable>Protocol </td> |
51 | </tr> | 51 | </tr> |
52 | </table> | 52 | </table> |
53 | </div> | 53 | </div> | ... | ... |
... | @@ -27,7 +27,7 @@ | ... | @@ -27,7 +27,7 @@ |
27 | <div class="table-header" onos-sortable-header> | 27 | <div class="table-header" onos-sortable-header> |
28 | <table> | 28 | <table> |
29 | <tr> | 29 | <tr> |
30 | - <td class="number" colId="priority" sortable col-width="80px">Priority </td> | 30 | + <td class="priority" colId="priority" sortable col-width="80px">Priority </td> |
31 | <td colId="type" sortable col-width="80px">Type </td> | 31 | <td colId="type" sortable col-width="80px">Type </td> |
32 | <td colId="processor" sortable col-width="500px">Class </td> | 32 | <td colId="processor" sortable col-width="500px">Class </td> |
33 | <td class="number" colId="packets" sortable col-width="100px">Packets </td> | 33 | <td class="number" colId="packets" sortable col-width="100px">Packets </td> | ... | ... |
... | @@ -15,11 +15,11 @@ | ... | @@ -15,11 +15,11 @@ |
15 | <table> | 15 | <table> |
16 | <tr> | 16 | <tr> |
17 | <td colId="component" sortable col-width="300px">Component </td> | 17 | <td colId="component" sortable col-width="300px">Component </td> |
18 | - <td colId="id" sortable>Property </td> | 18 | + <td colId="id" sortable col-width="240px">Property </td> |
19 | - <td colId="type" sortable col-width="70px">Type </td> | 19 | + <td colId="type" sortable col-width="100px">Type </td> |
20 | - <td colId="value" sortable>Value </td> | 20 | + <td colId="value" sortable col-width="100px">Value </td> |
21 | - <td colId="defValue" sortable>Default </td> | 21 | + <td colId="defValue" sortable col-width="100px">Default </td> |
22 | - <td colId="desc" col-width="400px">Description </td> | 22 | + <td colId="desc">Description </td> |
23 | </tr> | 23 | </tr> |
24 | </table> | 24 | </table> |
25 | </div> | 25 | </div> | ... | ... |
-
Please register or login to post a comment