ONOS-4359: continued work on theming UI
- cleaned up application confirmation dialog.
Change-Id: I498ef3897f828611ed8677873bcfcbcc3b09e1cc
(cherry picked from commit cf4b9a3)
diff --git a/web/gui/src/main/webapp/app/fw/layer/dialog-theme.css b/web/gui/src/main/webapp/app/fw/layer/dialog-theme.css
index bda182e..213b7fa 100644
--- a/web/gui/src/main/webapp/app/fw/layer/dialog-theme.css
+++ b/web/gui/src/main/webapp/app/fw/layer/dialog-theme.css
@@ -18,15 +18,12 @@
ONOS GUI -- Dialog Service (theme) -- CSS file
*/
-.light .dialog h2 {
- color: black;
+.light .dialog .dialog-button {
+ background-color: #518ecc;
+ color: white;
}
-.dark .dialog h2 {
- color: #ddd;
-}
-
-.dialog .dialog-button {
- /* color works for both light and dark themes */
- background-color: #c55;
+.dark .dialog .dialog-button {
+ /* TODO: dark theme */
+ background-color: #518ecc;
color: white;
}
diff --git a/web/gui/src/main/webapp/app/fw/layer/dialog.css b/web/gui/src/main/webapp/app/fw/layer/dialog.css
index 423e3e4..cd21953 100644
--- a/web/gui/src/main/webapp/app/fw/layer/dialog.css
+++ b/web/gui/src/main/webapp/app/fw/layer/dialog.css
@@ -19,7 +19,6 @@
*/
.dialog h2 {
- padding: 0 4px;
margin: 0;
word-wrap: break-word;
display: inline-block;
@@ -28,7 +27,6 @@
}
.dialog .dialog-button {
- border-radius: 3px;
display: inline-block;
cursor: pointer;
height: 20px;
diff --git a/web/gui/src/main/webapp/app/fw/widget/tooltip-theme.css b/web/gui/src/main/webapp/app/fw/widget/tooltip-theme.css
index 2f44feb..3055083 100644
--- a/web/gui/src/main/webapp/app/fw/widget/tooltip-theme.css
+++ b/web/gui/src/main/webapp/app/fw/widget/tooltip-theme.css
@@ -20,13 +20,14 @@
.light #tooltip {
- background-color: #ddd;
- color: #444;
- border-color: #ccc;
+ background-color: #dbeffc;
+ color: #3c3a3a;
+ border-color: #c7c7c0;
}
.dark #tooltip {
- background-color: #151515;
- color: #B2B2B2;
- border-color: #252525;
+ /* TODO: dark theme */
+ background-color: #dbeffc;
+ color: #3c3a3a;
+ border-color: #c7c7c0;
}
diff --git a/web/gui/src/main/webapp/app/view/app/app-theme.css b/web/gui/src/main/webapp/app/view/app/app-theme.css
index 27e7bc4..45cc07c 100644
--- a/web/gui/src/main/webapp/app/view/app/app-theme.css
+++ b/web/gui/src/main/webapp/app/view/app/app-theme.css
@@ -18,48 +18,51 @@
ONOS GUI -- Applications View (theme) -- CSS file
*/
-.light #app-dialog p {
- color: darkred;
-}
-.dark #app-dialog p {
- color: #c55;
+/* -- Drag-n-Drop OAR files -- */
+.light div.dropping {
+ border: solid 3px #0095d6;
}
+.dark div.dropping {
+ /* TODO: dark theme */
+ border: solid 3px #0095d6;
+}
+
+/* -- confirmation dialog -- */
.light #app-dialog p.strong {
- color: red;
- background-color: #ff0;
-}
-.dark #app-dialog p.strong {
- color: #c55;
- background-color: #dd4;
+ color: white;
+ background-color: #ce5b58;
}
+.dark #app-dialog p.strong {
+ /* TODO: dark theme */
+ color: white;
+ background-color: #ce5b58;
+}
.light #app-dialog.floatpanel.dialog {
background-color: #fff;
}
+
.dark #app-dialog.floatpanel.dialog {
- background-color: #444;
+ /* TODO: dark theme */
+ background-color: #fff;
}
+/* -- details panel -- */
.light #application-details-panel.floatpanel {
background-color: white;
}
+
.dark #application-details-panel.floatpanel {
/* TODO: dark theme */
background-color: white;
}
-.light .close-btn svg.embeddedIcon .icon.plus .glyph {
- fill: #aaa;
-}
-.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
- fill: #ccc;
-}
-
.light #application-details-panel hr {
border: 1px solid #c7c7c0;
}
+
.dark #application-details-panel hr {
/* TODO: dark theme */
border: 1px solid #c7c7c0;
@@ -68,6 +71,7 @@
.light #application-details-panel .bottom tr:nth-child(odd) {
background-color: #f4f4f4;
}
+
.light #application-details-panel .bottom tr:nth-child(even) {
background-color: #fbfbfb;
}
@@ -76,15 +80,9 @@
/* TODO: dark theme */
background-color: #f4f4f4;
}
+
.dark #application-details-panel .bottom tr:nth-child(even) {
/* TODO: dark theme */
background-color: #fbfbfb;
}
-.light div.dropping {
- border: solid 3px deepskyblue;
-}
-
-.dark div.dropping {
- border: solid 3px deepskyblue;
-}
diff --git a/web/gui/src/main/webapp/app/view/app/app.css b/web/gui/src/main/webapp/app/view/app/app.css
index 5957d8e..59a857b 100644
--- a/web/gui/src/main/webapp/app/view/app/app.css
+++ b/web/gui/src/main/webapp/app/view/app/app.css
@@ -26,19 +26,33 @@
width: 250px;
}
+/* -- Drag-n-Drop oar file upload -- */
#ov-app form#inputFileForm,
#ov-app input#uploadFile {
display: none;
}
+.dropping {
+
+}
+
+/* -- Confirmation Dialog -- */
+#app-dialog {
+ top: 140px;
+ padding: 12px;
+}
+
#app-dialog p {
font-size: 12pt;
}
#app-dialog p.strong {
font-weight: bold;
+ padding: 8px;
+ text-align: center;
}
+/* -- Details Panel -- */
#application-details-panel.floatpanel {
z-index: 0;
font-size: 12pt;
@@ -74,7 +88,6 @@
text-transform: uppercase;
}
-
#application-details-panel .top .app-title {
width: 90%;
height: 62px;
@@ -91,6 +104,7 @@
float: left;
padding: 12px 12px 0 3px;
}
+
#application-details-panel .top div.right {
display: inline-block;
overflow: hidden;
@@ -112,6 +126,7 @@
#application-details-panel .app-url {
padding: 10px 6px 6px;
+ overflow: hidden;
}
#application-details-panel hr {
@@ -138,8 +153,3 @@
text-align: left;
}
-
-.dropping {
-
-}
-
diff --git a/web/gui/src/main/webapp/app/view/app/app.js b/web/gui/src/main/webapp/app/view/app/app.js
index be72230..048a78c 100644
--- a/web/gui/src/main/webapp/app/view/app/app.js
+++ b/web/gui/src/main/webapp/app/view/app/app.js
@@ -49,13 +49,14 @@
iconUrlSuffix = '/icon',
dialogId = 'app-dialog',
dialogOpts = {
- edge: 'right'
+ edge: 'right',
+ width: 400
},
strongWarning = {
'org.onosproject.drivers': true
},
discouragement = 'Deactivating or uninstalling this component can' +
- ' have serious negative consequences! Do so at your own risk!!',
+ ' have serious negative consequences! <br> = DO SO AT YOUR OWN RISK =',
propOrder = ['id', 'state', 'category', 'version', 'origin', 'role'],
friendlyProps = ['App ID', 'State', 'Category', 'Version', 'Origin', 'Role'];
// note: url is handled separately
@@ -287,7 +288,7 @@
var content = ds.createDiv();
content.append('p').text(fs.cap(action) + ' ' + itemId);
if (strongWarning[itemId]) {
- content.append('p').text(discouragement).classed('strong', true);
+ content.append('p').html(discouragement).classed('strong', true);
}
return content;
}
@@ -359,6 +360,7 @@
$scope.$on('$destroy', function () {
ks.unbindKeys();
wss.unbindHandlers(handlers);
+ ds.closeDialog();
});
$log.log('OvAppCtrl has been created');
diff --git a/web/gui/src/main/webapp/app/view/device/device.css b/web/gui/src/main/webapp/app/view/device/device.css
index fe3c47e..ec15954 100644
--- a/web/gui/src/main/webapp/app/view/device/device.css
+++ b/web/gui/src/main/webapp/app/view/device/device.css
@@ -34,13 +34,13 @@
#device-details-panel .container {
- padding: 0 12px;
+ padding: 8px 12px;
}
#device-details-panel .close-btn {
position: absolute;
- right: 6px;
- top: 6px;
+ right: 12px;
+ top: 12px;
cursor: pointer;
}
@@ -61,6 +61,10 @@
width: 106%;
}
+#device-details-panel .top-tables {
+ font-size: 12pt;
+}
+
#device-details-panel .top div.left {
float: left;
padding: 0 18px 0 0;