홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Gerrit Code Review
a565d9d6 1 parent 3803369b

ONOS-4359: continued work on theming UI 

- cleaning up flow, group, intent, meter, and port views.

Change-Id: I4bbc483f1e63a0fb045dee3e90a293798820f7f6
Inline Side-by-side
Showing 5 changed files with 45 additions and 79 deletions
...@@ -19,39 +19,28 @@ ...@@ -19,39 +19,28 @@
19 */ 19 */
20 20
21 21
22 -.light #ov-flow .current-view use { 22 +/* a "logical" row is made up of 3 "physical" rows -- color as such */
23 - fill: white;
24 -}
25 -.dark #ov-flow .current-view use {
26 - fill: #304860;
27 -}
28 -
29 -.light #ov-flow .current-view rect {
30 - fill: deepskyblue;
31 -}
32 -.dark #ov-flow .current-view rect {
33 - fill: #eee;
34 -}
35 -
36 .light #ov-flow tr:nth-child(6n + 1), 23 .light #ov-flow tr:nth-child(6n + 1),
37 .light #ov-flow tr:nth-child(6n + 2), 24 .light #ov-flow tr:nth-child(6n + 2),
38 .light #ov-flow tr:nth-child(6n + 3) { 25 .light #ov-flow tr:nth-child(6n + 3) {
39 - background-color: #eee; 26 + background-color: #fbfbfb;
40 } 27 }
41 .light #ov-flow tr:nth-child(6n + 4), 28 .light #ov-flow tr:nth-child(6n + 4),
42 .light #ov-flow tr:nth-child(6n + 5), 29 .light #ov-flow tr:nth-child(6n + 5),
43 .light #ov-flow tr:nth-child(6n) { 30 .light #ov-flow tr:nth-child(6n) {
44 - background-color: #ddd; 31 + background-color: #f4f4f4;
45 } 32 }
46 .dark #ov-flow tr:nth-child(6n + 1), 33 .dark #ov-flow tr:nth-child(6n + 1),
47 .dark #ov-flow tr:nth-child(6n + 2), 34 .dark #ov-flow tr:nth-child(6n + 2),
48 .dark #ov-flow tr:nth-child(6n + 3) { 35 .dark #ov-flow tr:nth-child(6n + 3) {
49 - background-color: #444; 36 + /* TODO: dark theme */
37 + background-color: #fbfbfb;
50 } 38 }
51 .dark #ov-flow tr:nth-child(6n + 4), 39 .dark #ov-flow tr:nth-child(6n + 4),
52 .dark #ov-flow tr:nth-child(6n + 5), 40 .dark #ov-flow tr:nth-child(6n + 5),
53 .dark #ov-flow tr:nth-child(6n) { 41 .dark #ov-flow tr:nth-child(6n) {
54 - background-color: #333; 42 + /* TODO: dark theme */
43 + background-color: #f4f4f4;
55 } 44 }
56 45
57 /* highlighted color */ 46 /* highlighted color */
...@@ -61,7 +50,8 @@ ...@@ -61,7 +50,8 @@
61 .light #ov-flow tr:nth-child(6n + 4).data-change, 50 .light #ov-flow tr:nth-child(6n + 4).data-change,
62 .light #ov-flow tr:nth-child(6n + 5).data-change, 51 .light #ov-flow tr:nth-child(6n + 5).data-change,
63 .light #ov-flow tr:nth-child(6n).data-change { 52 .light #ov-flow tr:nth-child(6n).data-change {
64 - background-color: #FDFFDC; 53 + /* TODO: theme */
54 + background-color: #fdffdc;
65 } 55 }
66 .dark #ov-flow tr:nth-child(6n + 1).data-change, 56 .dark #ov-flow tr:nth-child(6n + 1).data-change,
67 .dark #ov-flow tr:nth-child(6n + 2).data-change, 57 .dark #ov-flow tr:nth-child(6n + 2).data-change,
...@@ -69,7 +59,8 @@ ...@@ -69,7 +59,8 @@
69 .dark #ov-flow tr:nth-child(6n + 4).data-change, 59 .dark #ov-flow tr:nth-child(6n + 4).data-change,
70 .dark #ov-flow tr:nth-child(6n + 5).data-change, 60 .dark #ov-flow tr:nth-child(6n + 5).data-change,
71 .dark #ov-flow tr:nth-child(6n).data-change { 61 .dark #ov-flow tr:nth-child(6n).data-change {
72 - background-color: #5A5600; 62 + /* TODO: dark theme */
63 + background-color: #fdffdc;
73 } 64 }
74 65
75 #ov-flow td.selector, 66 #ov-flow td.selector,
......
...@@ -18,35 +18,25 @@ ...@@ -18,35 +18,25 @@
18 ONOS GUI -- Group View (theme) -- CSS file 18 ONOS GUI -- Group View (theme) -- CSS file
19 */ 19 */
20 20
21 -.light #ov-group .current-view use { 21 +/* a "logical" row is made up of 2 "physical" rows -- color as such */
22 - fill: white;
23 -}
24 -.dark #ov-group .current-view use {
25 - fill: #304860;
26 -}
27 -
28 -.light #ov-group .current-view rect {
29 - fill: deepskyblue;
30 -}
31 -.dark #ov-group .current-view rect {
32 - fill: #eee;
33 -}
34 -
35 .light #ov-group tr:nth-child(4n + 1), 22 .light #ov-group tr:nth-child(4n + 1),
36 .light #ov-group tr:nth-child(4n + 2) { 23 .light #ov-group tr:nth-child(4n + 2) {
37 - background-color: #eee; 24 + background-color: #fbfbfb;
38 } 25 }
39 .light #ov-group tr:nth-child(4n + 3), 26 .light #ov-group tr:nth-child(4n + 3),
40 .light #ov-group tr:nth-child(4n) { 27 .light #ov-group tr:nth-child(4n) {
41 - background-color: #ddd; 28 + background-color: #f4f4f4;
42 } 29 }
30 +
43 .dark #ov-group tr:nth-child(4n + 1), 31 .dark #ov-group tr:nth-child(4n + 1),
44 .dark #ov-group tr:nth-child(4n + 2) { 32 .dark #ov-group tr:nth-child(4n + 2) {
45 - background-color: #444; 33 + /* TODO: dark theme */
34 + background-color: #fbfbfb;
46 } 35 }
47 .dark #ov-group tr:nth-child(4n + 3), 36 .dark #ov-group tr:nth-child(4n + 3),
48 .dark #ov-group tr:nth-child(4n) { 37 .dark #ov-group tr:nth-child(4n) {
49 - background-color: #333; 38 + /* TODO: dark theme */
39 + background-color: #f4f4f4;
50 } 40 }
51 41
52 /* highlighted color */ 42 /* highlighted color */
...@@ -54,11 +44,13 @@ ...@@ -54,11 +44,13 @@
54 .light #ov-group tr:nth-child(4n + 2).data-change, 44 .light #ov-group tr:nth-child(4n + 2).data-change,
55 .light #ov-group tr:nth-child(4n + 3).data-change, 45 .light #ov-group tr:nth-child(4n + 3).data-change,
56 .light #ov-group tr:nth-child(4n).data-change { 46 .light #ov-group tr:nth-child(4n).data-change {
57 - background-color: #FDFFDC; 47 + /* TODO: theme */
48 + background-color: #fdffdc;
58 } 49 }
59 .dark #ov-group tr:nth-child(4n + 1).data-change, 50 .dark #ov-group tr:nth-child(4n + 1).data-change,
60 .dark #ov-group tr:nth-child(4n + 2).data-change, 51 .dark #ov-group tr:nth-child(4n + 2).data-change,
61 .dark #ov-group tr:nth-child(4n + 3).data-change, 52 .dark #ov-group tr:nth-child(4n + 3).data-change,
62 .dark #ov-group tr:nth-child(4n).data-change { 53 .dark #ov-group tr:nth-child(4n).data-change {
63 - background-color: #5A5600; 54 + /* TODO: dark theme */
55 + background-color: #fdffdc;
64 } 56 }
......
...@@ -18,25 +18,28 @@ ...@@ -18,25 +18,28 @@
18 ONOS GUI -- Intent View (theme) -- CSS file 18 ONOS GUI -- Intent View (theme) -- CSS file
19 */ 19 */
20 20
21 +/* a "logical" row is made up of 3 "physical" rows -- color as such */
21 .light #ov-intent tr:nth-child(6n + 1), 22 .light #ov-intent tr:nth-child(6n + 1),
22 .light #ov-intent tr:nth-child(6n + 2), 23 .light #ov-intent tr:nth-child(6n + 2),
23 .light #ov-intent tr:nth-child(6n + 3) { 24 .light #ov-intent tr:nth-child(6n + 3) {
24 - background-color: #eee; 25 + background-color: #fbfbfb;
25 } 26 }
26 .light #ov-intent tr:nth-child(6n + 4), 27 .light #ov-intent tr:nth-child(6n + 4),
27 .light #ov-intent tr:nth-child(6n + 5), 28 .light #ov-intent tr:nth-child(6n + 5),
28 .light #ov-intent tr:nth-child(6n) { 29 .light #ov-intent tr:nth-child(6n) {
29 - background-color: #ddd; 30 + background-color: #f4f4f4;
30 } 31 }
31 .dark #ov-intent tr:nth-child(6n + 1), 32 .dark #ov-intent tr:nth-child(6n + 1),
32 .dark #ov-intent tr:nth-child(6n + 2), 33 .dark #ov-intent tr:nth-child(6n + 2),
33 .dark #ov-intent tr:nth-child(6n + 3) { 34 .dark #ov-intent tr:nth-child(6n + 3) {
34 - background-color: #444; 35 + /* TODO: dark theme */
36 + background-color: #fbfbfb;
35 } 37 }
36 .dark #ov-intent tr:nth-child(6n + 4), 38 .dark #ov-intent tr:nth-child(6n + 4),
37 .dark #ov-intent tr:nth-child(6n + 5), 39 .dark #ov-intent tr:nth-child(6n + 5),
38 .dark #ov-intent tr:nth-child(6n) { 40 .dark #ov-intent tr:nth-child(6n) {
39 - background-color: #333; 41 + /* TODO: dark theme */
42 + background-color: #f4f4f4;
40 } 43 }
41 44
42 .light #ov-intent tr:nth-child(6n + 1).data-change, 45 .light #ov-intent tr:nth-child(6n + 1).data-change,
...@@ -45,7 +48,8 @@ ...@@ -45,7 +48,8 @@
45 .light #ov-intent tr:nth-child(6n + 4).data-change, 48 .light #ov-intent tr:nth-child(6n + 4).data-change,
46 .light #ov-intent tr:nth-child(6n + 5).data-change, 49 .light #ov-intent tr:nth-child(6n + 5).data-change,
47 .light #ov-intent tr:nth-child(6n).data-change { 50 .light #ov-intent tr:nth-child(6n).data-change {
48 - background-color: #FDFFDC; 51 + /* TODO: theme */
52 + background-color: #fdffdc;
49 } 53 }
50 .dark #ov-intent tr:nth-child(6n + 1).data-change, 54 .dark #ov-intent tr:nth-child(6n + 1).data-change,
51 .dark #ov-intent tr:nth-child(6n + 2).data-change, 55 .dark #ov-intent tr:nth-child(6n + 2).data-change,
...@@ -53,7 +57,8 @@ ...@@ -53,7 +57,8 @@
53 .dark #ov-intent tr:nth-child(6n + 4).data-change, 57 .dark #ov-intent tr:nth-child(6n + 4).data-change,
54 .dark #ov-intent tr:nth-child(6n + 5).data-change, 58 .dark #ov-intent tr:nth-child(6n + 5).data-change,
55 .dark #ov-intent tr:nth-child(6n).data-change { 59 .dark #ov-intent tr:nth-child(6n).data-change {
56 - background-color: #5A5600; 60 + /* TODO: dark theme */
61 + background-color: #fdffdc;
57 } 62 }
58 63
59 #ov-intent td.resources, 64 #ov-intent td.resources,
......
...@@ -18,35 +18,24 @@ ...@@ -18,35 +18,24 @@
18 ONOS GUI -- Meter View (theme) -- CSS file 18 ONOS GUI -- Meter View (theme) -- CSS file
19 */ 19 */
20 20
21 -.light #ov-meter .current-view use { 21 +/* a "logical" row is made up of 2 "physical" rows -- color as such */
22 - fill: white;
23 -}
24 -.dark #ov-meter .current-view use {
25 - fill: #304860;
26 -}
27 -
28 -.light #ov-meter .current-view rect {
29 - fill: deepskyblue;
30 -}
31 -.dark #ov-meter .current-view rect {
32 - fill: #eee;
33 -}
34 -
35 .light #ov-meter tr:nth-child(4n + 1), 22 .light #ov-meter tr:nth-child(4n + 1),
36 .light #ov-meter tr:nth-child(4n + 2) { 23 .light #ov-meter tr:nth-child(4n + 2) {
37 - background-color: #eee; 24 + background-color: #fbfbfb;
38 } 25 }
39 .light #ov-meter tr:nth-child(4n + 3), 26 .light #ov-meter tr:nth-child(4n + 3),
40 .light #ov-meter tr:nth-child(4n) { 27 .light #ov-meter tr:nth-child(4n) {
41 - background-color: #ddd; 28 + background-color: #f4f4f4;
42 } 29 }
43 .dark #ov-meter tr:nth-child(4n + 1), 30 .dark #ov-meter tr:nth-child(4n + 1),
44 .dark #ov-meter tr:nth-child(4n + 2) { 31 .dark #ov-meter tr:nth-child(4n + 2) {
45 - background-color: #444; 32 + /* TODO: dark theme */
33 + background-color: #fbfbfb;
46 } 34 }
47 .dark #ov-meter tr:nth-child(4n + 3), 35 .dark #ov-meter tr:nth-child(4n + 3),
48 .dark #ov-meter tr:nth-child(4n) { 36 .dark #ov-meter tr:nth-child(4n) {
49 - background-color: #333; 37 + /* TODO: dark theme */
38 + background-color: #f4f4f4;
50 } 39 }
51 40
52 /* highlighted color */ 41 /* highlighted color */
...@@ -54,11 +43,13 @@ ...@@ -54,11 +43,13 @@
54 .light #ov-meter tr:nth-child(4n + 2).data-change, 43 .light #ov-meter tr:nth-child(4n + 2).data-change,
55 .light #ov-meter tr:nth-child(4n + 3).data-change, 44 .light #ov-meter tr:nth-child(4n + 3).data-change,
56 .light #ov-meter tr:nth-child(4n).data-change { 45 .light #ov-meter tr:nth-child(4n).data-change {
57 - background-color: #FDFFDC; 46 + /* TODO: theme */
47 + background-color: #fdffdc;
58 } 48 }
59 .dark #ov-meter tr:nth-child(4n + 1).data-change, 49 .dark #ov-meter tr:nth-child(4n + 1).data-change,
60 .dark #ov-meter tr:nth-child(4n + 2).data-change, 50 .dark #ov-meter tr:nth-child(4n + 2).data-change,
61 .dark #ov-meter tr:nth-child(4n + 3).data-change, 51 .dark #ov-meter tr:nth-child(4n + 3).data-change,
62 .dark #ov-meter tr:nth-child(4n).data-change { 52 .dark #ov-meter tr:nth-child(4n).data-change {
63 - background-color: #5A5600; 53 + /* TODO: dark theme */
54 + background-color: #fdffdc;
64 } 55 }
......
...@@ -18,16 +18,3 @@ ...@@ -18,16 +18,3 @@
18 ONOS GUI -- Port View (theme) -- CSS file 18 ONOS GUI -- Port View (theme) -- CSS file
19 */ 19 */
20 20
21 -.light #ov-port .current-view use {
22 - fill: white;
23 -}
24 -.dark #ov-port .current-view use {
25 - fill: #304860;
26 -}
27 -
28 -.light #ov-port .current-view rect {
29 - fill: deepskyblue;
30 -}
31 -.dark #ov-port .current-view rect {
32 - fill: #eee;
33 -}
......