ONOS-4359: continued work on theming UI

- cleaned up application confirmation dialog. Change-Id: I498ef3897f828611ed8677873bcfcbcc3b09e1cc (cherry picked from commit cf4b9a35)

ONOS-4359: continued work on theming UI
- cleaned up application confirmation dialog. Change-Id: I498ef3897f828611ed8677873bcfcbcc3b09e1cc (cherry picked from commit cf4b9a35)
Simon Hunt · Brian O'Connor
Commit 0991b34e3ea617198c721b720c71fd45b3ec3f3f 0991b34e 1 parent 1172585e
Showing 7 changed files with 63 additions and 53 deletions
web/gui/src/main/webapp/app/fw/layer/dialog-theme.css
web/gui/src/main/webapp/app/fw/layer/dialog.css
web/gui/src/main/webapp/app/fw/widget/tooltip-theme.css
web/gui/src/main/webapp/app/view/app/app-theme.css
web/gui/src/main/webapp/app/view/app/app.css
web/gui/src/main/webapp/app/view/app/app.js
web/gui/src/main/webapp/app/view/device/device.css
--- a/web/gui/src/main/webapp/app/fw/layer/dialog-theme.css
View file @0991b34
+++ b/web/gui/src/main/webapp/app/fw/layer/dialog-theme.css
View file @0991b34
@@ -18,15 +18,12 @@
  ONOS GUI -- Dialog Service (theme) -- CSS file
  */
-.light .dialog h2 {
+.light .dialog .dialog-button {
-    color: black;
+    background-color: #518ecc;
-}
+    color: white;
-.dark .dialog h2 {
-    color: #ddd;
 }
-
+.dark .dialog .dialog-button {
-.dialog .dialog-button {
+    /* TODO: dark theme */
-    /* color works for both light and dark themes */
+    background-color: #518ecc;
-    background-color: #c55;
     color: white;
 }
--- a/web/gui/src/main/webapp/app/fw/layer/dialog.css
View file @0991b34
+++ b/web/gui/src/main/webapp/app/fw/layer/dialog.css
View file @0991b34
@@ -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;
--- a/web/gui/src/main/webapp/app/fw/widget/tooltip-theme.css
View file @0991b34
+++ b/web/gui/src/main/webapp/app/fw/widget/tooltip-theme.css
View file @0991b34
@@ -20,13 +20,14 @@
 .light #tooltip {
-    background-color: #ddd;
+    background-color: #dbeffc;
-    color: #444;
+    color: #3c3a3a;
-    border-color: #ccc;
+    border-color: #c7c7c0;
 }
 .dark #tooltip {
-    background-color: #151515;
+    /* TODO: dark theme */
-    color: #B2B2B2;
+    background-color: #dbeffc;
-    border-color: #252525;
+    color: #3c3a3a;
+    border-color: #c7c7c0;
 }
--- a/web/gui/src/main/webapp/app/view/app/app-theme.css
View file @0991b34
+++ b/web/gui/src/main/webapp/app/view/app/app-theme.css
View file @0991b34
@@ -18,48 +18,51 @@
  ONOS GUI -- Applications View (theme) -- CSS file
  */
-.light #app-dialog p {
+/* -- Drag-n-Drop OAR files -- */
-    color: darkred;
+.light div.dropping {
+    border: solid 3px #0095d6;
 }
-.dark #app-dialog p {
+
-    color: #c55;
+.dark div.dropping {
+    /* TODO: dark theme */
+    border: solid 3px #0095d6;
 }
+/* -- confirmation dialog -- */
 .light #app-dialog p.strong {
-    color: red;
+    color: white;
-    background-color: #ff0;
+    background-color: #ce5b58;
 }
+
 .dark #app-dialog p.strong {
-    color: #c55;
+    /* TODO: dark theme */
-    background-color: #dd4;
+    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;
-}
--- a/web/gui/src/main/webapp/app/view/app/app.css
View file @0991b34
+++ b/web/gui/src/main/webapp/app/view/app/app.css
View file @0991b34
@@ -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 {
-
-}
-
--- a/web/gui/src/main/webapp/app/view/app/app.js
View file @0991b34
+++ b/web/gui/src/main/webapp/app/view/app/app.js
View file @0991b34
@@ -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');
--- a/web/gui/src/main/webapp/app/view/device/device.css
View file @0991b34
+++ b/web/gui/src/main/webapp/app/view/device/device.css
View file @0991b34
@@ -34,13 +34,13 @@
 #device-details-panel .container {
-    padding: 0 12px;
+    padding: 8px 12px;
 }
 #device-details-panel .close-btn {
     position: absolute;
-    right: 6px;
+    right: 12px;
-    top: 6px;
+    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;