홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Gerrit Code Review
bb1b7a3b 1 parent 84cc6709

ONOS-4359: continued work on theming UI (app details panel) 

Change-Id: I0961dfd6a90785b3a1dc040d500500facc8e05ed
Inline Side-by-side
Showing 7 changed files with 61 additions and 42 deletions
...@@ -19,12 +19,13 @@ ...@@ -19,12 +19,13 @@
19 */ 19 */
20 20
21 .light .floatpanel { 21 .light .floatpanel {
22 - background-color: rgba(255,255,255,0.8); 22 + background-color: white;
23 - color: black; 23 + color: #3c3a3a;
24 - box-shadow: 0 2px 12px #777; 24 + border: 1px solid #c7c7c0;
25 } 25 }
26 .dark .floatpanel { 26 .dark .floatpanel {
27 - background-color: rgba(50,50,50,0.8); 27 + /* TODO: dark theme */
28 - color: #ccc; 28 + background-color: white;
29 - box-shadow: 0 2px 12px #000; 29 + color: #3c3a3a;
30 + border: 1px solid #c7c7c0;
30 } 31 }
......
...@@ -27,11 +27,8 @@ ...@@ -27,11 +27,8 @@
27 right: -220px; 27 right: -220px;
28 opacity: 0; 28 opacity: 0;
29 29
30 - padding: 10px; 30 + padding: 2px;
31 font-size: 10pt; 31 font-size: 10pt;
32 -
33 - -moz-border-radius: 6px;
34 - border-radius: 6px;
35 } 32 }
36 33
37 .floatpanel.dialog { 34 .floatpanel.dialog {
......
...@@ -50,3 +50,16 @@ body { ...@@ -50,3 +50,16 @@ body {
50 font-weight: lighter; 50 font-weight: lighter;
51 } 51 }
52 52
53 +
54 +/* TODO: dark versions for links */
55 +a {
56 + color: #009fdb;
57 + text-decoration: none;
58 +}
59 +a:hover {
60 + text-decoration: underline;
61 +}
62 +a:visited {
63 + color: #7fabdb;
64 + text-decoration: none;
65 +}
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -43,10 +43,11 @@ ...@@ -43,10 +43,11 @@
43 } 43 }
44 44
45 .light #application-details-panel.floatpanel { 45 .light #application-details-panel.floatpanel {
46 - background-color: rgb(229, 234, 237); 46 + background-color: white;
47 } 47 }
48 .dark #application-details-panel.floatpanel { 48 .dark #application-details-panel.floatpanel {
49 - background-color: #3A4042; 49 + /* TODO: dark theme */
50 + background-color: white;
50 } 51 }
51 52
52 .light .close-btn svg.embeddedIcon .icon.plus .glyph { 53 .light .close-btn svg.embeddedIcon .icon.plus .glyph {
...@@ -56,31 +57,28 @@ ...@@ -56,31 +57,28 @@
56 fill: #ccc; 57 fill: #ccc;
57 } 58 }
58 59
59 -#application-details-panel td.label,
60 -#application-details-panel .app-url i {
61 - /* works for both light and dark themes ... */
62 - color: #777;
63 -}
64 -
65 .light #application-details-panel hr { 60 .light #application-details-panel hr {
66 - opacity: .5; 61 + border: 1px solid #c7c7c0;
67 - border-color: #FFF;
68 } 62 }
69 .dark #application-details-panel hr { 63 .dark #application-details-panel hr {
70 - border-color: #666; 64 + /* TODO: dark theme */
65 + border: 1px solid #c7c7c0;
71 } 66 }
72 67
73 .light #application-details-panel .bottom tr:nth-child(odd) { 68 .light #application-details-panel .bottom tr:nth-child(odd) {
74 - background-color: #f9f9f9; 69 + background-color: #f4f4f4;
75 } 70 }
76 .light #application-details-panel .bottom tr:nth-child(even) { 71 .light #application-details-panel .bottom tr:nth-child(even) {
77 - background-color: #EBEDF2; 72 + background-color: #fbfbfb;
78 } 73 }
74 +
79 .dark #application-details-panel .bottom tr:nth-child(odd) { 75 .dark #application-details-panel .bottom tr:nth-child(odd) {
80 - background-color: #333; 76 + /* TODO: dark theme */
77 + background-color: #f4f4f4;
81 } 78 }
82 .dark #application-details-panel .bottom tr:nth-child(even) { 79 .dark #application-details-panel .bottom tr:nth-child(even) {
83 - background-color: #555; 80 + /* TODO: dark theme */
81 + background-color: #fbfbfb;
84 } 82 }
85 83
86 .light div.dropping { 84 .light div.dropping {
......
...@@ -40,11 +40,13 @@ ...@@ -40,11 +40,13 @@
40 } 40 }
41 41
42 #application-details-panel.floatpanel { 42 #application-details-panel.floatpanel {
43 - -moz-border-radius: 0;
44 - border-radius: 0;
45 z-index: 0; 43 z-index: 0;
44 + font-size: 12pt;
46 } 45 }
47 46
47 +#application-details-panel.floatpanel a {
48 + font-weight: bold;
49 +}
48 50
49 #application-details-panel .container { 51 #application-details-panel .container {
50 padding: 0 10px; 52 padding: 0 10px;
...@@ -66,14 +68,16 @@ ...@@ -66,14 +68,16 @@
66 #application-details-panel h2 { 68 #application-details-panel h2 {
67 display: inline-block; 69 display: inline-block;
68 margin: 8px 0; 70 margin: 8px 0;
69 - font-size: 12pt; 71 + font-size: 15pt;
72 + font-variant: small-caps;
73 + text-transform: uppercase;
70 } 74 }
71 75
72 #application-details-panel .top .app-title { 76 #application-details-panel .top .app-title {
73 width: 90%; 77 width: 90%;
74 - height: 45px; 78 + height: 62px;
75 - font-size: 22pt; 79 + font-size: 30pt;
76 - font-weight: bold; 80 + font-weight: lighter;
77 overflow: hidden; 81 overflow: hidden;
78 white-space: nowrap; 82 white-space: nowrap;
79 padding: 0 12px 0 0; 83 padding: 0 12px 0 0;
...@@ -81,7 +85,7 @@ ...@@ -81,7 +85,7 @@
81 85
82 #application-details-panel .top div.left { 86 #application-details-panel .top div.left {
83 float: left; 87 float: left;
84 - padding: 0 12px 0 0; 88 + padding: 12px 12px 0 4px;
85 } 89 }
86 #application-details-panel .top div.right { 90 #application-details-panel .top div.right {
87 display: inline-block; 91 display: inline-block;
...@@ -91,8 +95,11 @@ ...@@ -91,8 +95,11 @@
91 95
92 #application-details-panel td.label, 96 #application-details-panel td.label,
93 #application-details-panel .app-url i { 97 #application-details-panel .app-url i {
94 - font-style: italic; 98 + font-weight: bold;
95 - padding-right: 12px; 99 + text-align: right;
100 + font-size: 12pt;
101 +
102 + padding-right: 6px;
96 } 103 }
97 104
98 #application-details-panel td.value-bold { 105 #application-details-panel td.value-bold {
...@@ -104,8 +111,12 @@ ...@@ -104,8 +111,12 @@
104 } 111 }
105 112
106 #application-details-panel hr { 113 #application-details-panel hr {
107 - width: 95%; 114 + width: 100%;
108 - margin: 10px auto; 115 + margin: 6px auto;
116 +}
117 +
118 +#application-details-panel .container {
119 + overflow-y: scroll;
109 } 120 }
110 121
111 #application-details-panel .bottom table { 122 #application-details-panel .bottom table {
......
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
38 var INSTALLED = 'INSTALLED', 38 var INSTALLED = 'INSTALLED',
39 ACTIVE = 'ACTIVE', 39 ACTIVE = 'ACTIVE',
40 appMgmtReq = 'appManagementRequest', 40 appMgmtReq = 'appManagementRequest',
41 - topPdg = 50, 41 + topPdg = 70,
42 panelWidth = 500, 42 panelWidth = 500,
43 pName = 'application-details-panel', 43 pName = 'application-details-panel',
44 detailsReq = 'appDetailsRequest', 44 detailsReq = 'appDetailsRequest',
...@@ -136,19 +136,18 @@ ...@@ -136,19 +136,18 @@
136 } 136 }
137 137
138 function addProp(tbody, index, value) { 138 function addProp(tbody, index, value) {
139 - var tr = tbody.append('tr'), 139 + var tr = tbody.append('tr');
140 - vcls = index ? 'value' : 'value-bold';
141 140
142 function addCell(cls, txt) { 141 function addCell(cls, txt) {
143 tr.append('td').attr('class', cls).html(txt); 142 tr.append('td').attr('class', cls).html(txt);
144 } 143 }
145 144
146 addCell('label', friendlyProps[index] + ':'); 145 addCell('label', friendlyProps[index] + ':');
147 - addCell(vcls, value); 146 + addCell('value', value);
148 } 147 }
149 148
150 function urlize(u) { 149 function urlize(u) {
151 - return '<i>URL:</i> <a href="' + u + '" target="_blank">' + u + '</a>'; 150 + return 'Url:<br/> <a href="' + u + '" target="_blank">' + u + '</a>';
152 } 151 }
153 152
154 function addIcon(elem, value) { 153 function addIcon(elem, value) {
......
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
46 46
47 <tr ng-repeat="processor in tableData track by $index" 47 <tr ng-repeat="processor in tableData track by $index"
48 ng-repeat-complete row-id="{{processor.id}}"> 48 ng-repeat-complete row-id="{{processor.id}}">
49 - <td class="number">{{processor.priority}}</td> 49 + <td class="priority">{{processor.priority}}</td>
50 <td>{{processor.type}}</td> 50 <td>{{processor.type}}</td>
51 <td>{{processor.processor}}</td> 51 <td>{{processor.processor}}</td>
52 <td class="number">{{processor.packets}}</td> 52 <td class="number">{{processor.packets}}</td>
......