홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Gerrit Code Review
cf4b9a35 1 parent dac59bdb

ONOS-4359: continued work on theming UI 

- cleaned up application confirmation dialog.

Change-Id: I498ef3897f828611ed8677873bcfcbcc3b09e1cc
Inline Side-by-side
Showing 7 changed files with 63 additions and 53 deletions
...@@ -18,15 +18,12 @@ ...@@ -18,15 +18,12 @@
18 ONOS GUI -- Dialog Service (theme) -- CSS file 18 ONOS GUI -- Dialog Service (theme) -- CSS file
19 */ 19 */
20 20
21 -.light .dialog h2 { 21 +.light .dialog .dialog-button {
22 - color: black; 22 + background-color: #518ecc;
23 -} 23 + color: white;
24 -.dark .dialog h2 {
25 - color: #ddd;
26 } 24 }
27 - 25 +.dark .dialog .dialog-button {
28 -.dialog .dialog-button { 26 + /* TODO: dark theme */
29 - /* color works for both light and dark themes */ 27 + background-color: #518ecc;
30 - background-color: #c55;
31 color: white; 28 color: white;
32 } 29 }
......
...@@ -19,7 +19,6 @@ ...@@ -19,7 +19,6 @@
19 */ 19 */
20 20
21 .dialog h2 { 21 .dialog h2 {
22 - padding: 0 4px;
23 margin: 0; 22 margin: 0;
24 word-wrap: break-word; 23 word-wrap: break-word;
25 display: inline-block; 24 display: inline-block;
...@@ -28,7 +27,6 @@ ...@@ -28,7 +27,6 @@
28 } 27 }
29 28
30 .dialog .dialog-button { 29 .dialog .dialog-button {
31 - border-radius: 3px;
32 display: inline-block; 30 display: inline-block;
33 cursor: pointer; 31 cursor: pointer;
34 height: 20px; 32 height: 20px;
......
...@@ -20,13 +20,14 @@ ...@@ -20,13 +20,14 @@
20 20
21 21
22 .light #tooltip { 22 .light #tooltip {
23 - background-color: #ddd; 23 + background-color: #dbeffc;
24 - color: #444; 24 + color: #3c3a3a;
25 - border-color: #ccc; 25 + border-color: #c7c7c0;
26 } 26 }
27 27
28 .dark #tooltip { 28 .dark #tooltip {
29 - background-color: #151515; 29 + /* TODO: dark theme */
30 - color: #B2B2B2; 30 + background-color: #dbeffc;
31 - border-color: #252525; 31 + color: #3c3a3a;
32 + border-color: #c7c7c0;
32 } 33 }
......
...@@ -18,48 +18,51 @@ ...@@ -18,48 +18,51 @@
18 ONOS GUI -- Applications View (theme) -- CSS file 18 ONOS GUI -- Applications View (theme) -- CSS file
19 */ 19 */
20 20
21 -.light #app-dialog p { 21 +/* -- Drag-n-Drop OAR files -- */
22 - color: darkred; 22 +.light div.dropping {
23 + border: solid 3px #0095d6;
23 } 24 }
24 -.dark #app-dialog p { 25 +
25 - color: #c55; 26 +.dark div.dropping {
27 + /* TODO: dark theme */
28 + border: solid 3px #0095d6;
26 } 29 }
27 30
31 +/* -- confirmation dialog -- */
28 .light #app-dialog p.strong { 32 .light #app-dialog p.strong {
29 - color: red; 33 + color: white;
30 - background-color: #ff0; 34 + background-color: #ce5b58;
31 } 35 }
36 +
32 .dark #app-dialog p.strong { 37 .dark #app-dialog p.strong {
33 - color: #c55; 38 + /* TODO: dark theme */
34 - background-color: #dd4; 39 + color: white;
40 + background-color: #ce5b58;
35 } 41 }
36 42
37 -
38 .light #app-dialog.floatpanel.dialog { 43 .light #app-dialog.floatpanel.dialog {
39 background-color: #fff; 44 background-color: #fff;
40 } 45 }
46 +
41 .dark #app-dialog.floatpanel.dialog { 47 .dark #app-dialog.floatpanel.dialog {
42 - background-color: #444; 48 + /* TODO: dark theme */
49 + background-color: #fff;
43 } 50 }
44 51
52 +/* -- details panel -- */
45 .light #application-details-panel.floatpanel { 53 .light #application-details-panel.floatpanel {
46 background-color: white; 54 background-color: white;
47 } 55 }
56 +
48 .dark #application-details-panel.floatpanel { 57 .dark #application-details-panel.floatpanel {
49 /* TODO: dark theme */ 58 /* TODO: dark theme */
50 background-color: white; 59 background-color: white;
51 } 60 }
52 61
53 -.light .close-btn svg.embeddedIcon .icon.plus .glyph {
54 - fill: #aaa;
55 -}
56 -.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
57 - fill: #ccc;
58 -}
59 -
60 .light #application-details-panel hr { 62 .light #application-details-panel hr {
61 border: 1px solid #c7c7c0; 63 border: 1px solid #c7c7c0;
62 } 64 }
65 +
63 .dark #application-details-panel hr { 66 .dark #application-details-panel hr {
64 /* TODO: dark theme */ 67 /* TODO: dark theme */
65 border: 1px solid #c7c7c0; 68 border: 1px solid #c7c7c0;
...@@ -68,6 +71,7 @@ ...@@ -68,6 +71,7 @@
68 .light #application-details-panel .bottom tr:nth-child(odd) { 71 .light #application-details-panel .bottom tr:nth-child(odd) {
69 background-color: #f4f4f4; 72 background-color: #f4f4f4;
70 } 73 }
74 +
71 .light #application-details-panel .bottom tr:nth-child(even) { 75 .light #application-details-panel .bottom tr:nth-child(even) {
72 background-color: #fbfbfb; 76 background-color: #fbfbfb;
73 } 77 }
...@@ -76,15 +80,9 @@ ...@@ -76,15 +80,9 @@
76 /* TODO: dark theme */ 80 /* TODO: dark theme */
77 background-color: #f4f4f4; 81 background-color: #f4f4f4;
78 } 82 }
83 +
79 .dark #application-details-panel .bottom tr:nth-child(even) { 84 .dark #application-details-panel .bottom tr:nth-child(even) {
80 /* TODO: dark theme */ 85 /* TODO: dark theme */
81 background-color: #fbfbfb; 86 background-color: #fbfbfb;
82 } 87 }
83 88
84 -.light div.dropping {
85 - border: solid 3px deepskyblue;
86 -}
87 -
88 -.dark div.dropping {
89 - border: solid 3px deepskyblue;
90 -}
......
...@@ -26,19 +26,33 @@ ...@@ -26,19 +26,33 @@
26 width: 250px; 26 width: 250px;
27 } 27 }
28 28
29 +/* -- Drag-n-Drop oar file upload -- */
29 #ov-app form#inputFileForm, 30 #ov-app form#inputFileForm,
30 #ov-app input#uploadFile { 31 #ov-app input#uploadFile {
31 display: none; 32 display: none;
32 } 33 }
33 34
35 +.dropping {
36 +
37 +}
38 +
39 +/* -- Confirmation Dialog -- */
40 +#app-dialog {
41 + top: 140px;
42 + padding: 12px;
43 +}
44 +
34 #app-dialog p { 45 #app-dialog p {
35 font-size: 12pt; 46 font-size: 12pt;
36 } 47 }
37 48
38 #app-dialog p.strong { 49 #app-dialog p.strong {
39 font-weight: bold; 50 font-weight: bold;
51 + padding: 8px;
52 + text-align: center;
40 } 53 }
41 54
55 +/* -- Details Panel -- */
42 #application-details-panel.floatpanel { 56 #application-details-panel.floatpanel {
43 z-index: 0; 57 z-index: 0;
44 font-size: 12pt; 58 font-size: 12pt;
...@@ -74,7 +88,6 @@ ...@@ -74,7 +88,6 @@
74 text-transform: uppercase; 88 text-transform: uppercase;
75 } 89 }
76 90
77 -
78 #application-details-panel .top .app-title { 91 #application-details-panel .top .app-title {
79 width: 90%; 92 width: 90%;
80 height: 62px; 93 height: 62px;
...@@ -91,6 +104,7 @@ ...@@ -91,6 +104,7 @@
91 float: left; 104 float: left;
92 padding: 12px 12px 0 3px; 105 padding: 12px 12px 0 3px;
93 } 106 }
107 +
94 #application-details-panel .top div.right { 108 #application-details-panel .top div.right {
95 display: inline-block; 109 display: inline-block;
96 overflow: hidden; 110 overflow: hidden;
...@@ -112,6 +126,7 @@ ...@@ -112,6 +126,7 @@
112 126
113 #application-details-panel .app-url { 127 #application-details-panel .app-url {
114 padding: 10px 6px 6px; 128 padding: 10px 6px 6px;
129 + overflow: hidden;
115 } 130 }
116 131
117 #application-details-panel hr { 132 #application-details-panel hr {
...@@ -138,8 +153,3 @@ ...@@ -138,8 +153,3 @@
138 text-align: left; 153 text-align: left;
139 } 154 }
140 155
141 -
142 -.dropping {
143 -
144 -}
145 -
......
...@@ -49,13 +49,14 @@ ...@@ -49,13 +49,14 @@
49 iconUrlSuffix = '/icon', 49 iconUrlSuffix = '/icon',
50 dialogId = 'app-dialog', 50 dialogId = 'app-dialog',
51 dialogOpts = { 51 dialogOpts = {
52 - edge: 'right' 52 + edge: 'right',
53 + width: 400
53 }, 54 },
54 strongWarning = { 55 strongWarning = {
55 'org.onosproject.drivers': true 56 'org.onosproject.drivers': true
56 }, 57 },
57 discouragement = 'Deactivating or uninstalling this component can' + 58 discouragement = 'Deactivating or uninstalling this component can' +
58 - ' have serious negative consequences! Do so at your own risk!!', 59 + ' have serious negative consequences! <br> = DO SO AT YOUR OWN RISK =',
59 propOrder = ['id', 'state', 'category', 'version', 'origin', 'role'], 60 propOrder = ['id', 'state', 'category', 'version', 'origin', 'role'],
60 friendlyProps = ['App ID', 'State', 'Category', 'Version', 'Origin', 'Role']; 61 friendlyProps = ['App ID', 'State', 'Category', 'Version', 'Origin', 'Role'];
61 // note: url is handled separately 62 // note: url is handled separately
...@@ -287,7 +288,7 @@ ...@@ -287,7 +288,7 @@
287 var content = ds.createDiv(); 288 var content = ds.createDiv();
288 content.append('p').text(fs.cap(action) + ' ' + itemId); 289 content.append('p').text(fs.cap(action) + ' ' + itemId);
289 if (strongWarning[itemId]) { 290 if (strongWarning[itemId]) {
290 - content.append('p').text(discouragement).classed('strong', true); 291 + content.append('p').html(discouragement).classed('strong', true);
291 } 292 }
292 return content; 293 return content;
293 } 294 }
...@@ -359,6 +360,7 @@ ...@@ -359,6 +360,7 @@
359 $scope.$on('$destroy', function () { 360 $scope.$on('$destroy', function () {
360 ks.unbindKeys(); 361 ks.unbindKeys();
361 wss.unbindHandlers(handlers); 362 wss.unbindHandlers(handlers);
363 + ds.closeDialog();
362 }); 364 });
363 365
364 $log.log('OvAppCtrl has been created'); 366 $log.log('OvAppCtrl has been created');
......
...@@ -34,13 +34,13 @@ ...@@ -34,13 +34,13 @@
34 34
35 35
36 #device-details-panel .container { 36 #device-details-panel .container {
37 - padding: 0 12px; 37 + padding: 8px 12px;
38 } 38 }
39 39
40 #device-details-panel .close-btn { 40 #device-details-panel .close-btn {
41 position: absolute; 41 position: absolute;
42 - right: 6px; 42 + right: 12px;
43 - top: 6px; 43 + top: 12px;
44 cursor: pointer; 44 cursor: pointer;
45 } 45 }
46 46
...@@ -61,6 +61,10 @@ ...@@ -61,6 +61,10 @@
61 width: 106%; 61 width: 106%;
62 } 62 }
63 63
64 +#device-details-panel .top-tables {
65 + font-size: 12pt;
66 +}
67 +
64 #device-details-panel .top div.left { 68 #device-details-panel .top div.left {
65 float: left; 69 float: left;
66 padding: 0 18px 0 0; 70 padding: 0 18px 0 0;
......