홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Brian O'Connor
f3fd4ed5 1 parent b940d699

ONOS-4359: New UI look and feel : table views - base table. (WIP) 

Change-Id: I22142b1723a88a89e91d1557b87a36e7c8767909
(cherry picked from commit 1d821231)
Inline Side-by-side
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>
......
...@@ -26,6 +26,10 @@ ...@@ -26,6 +26,10 @@
26 width: 40px; 26 width: 40px;
27 } 27 }
28 28
29 +#ov-processor td.priority {
30 + text-align: center;
31 +}
32 +
29 #ov-processor td.number { 33 #ov-processor td.number {
30 text-align: right; 34 text-align: right;
31 } 35 }
......
...@@ -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>
......