ONOS-4359: continued work on theming UI (app details panel)
Change-Id: I0961dfd6a90785b3a1dc040d500500facc8e05ed
(cherry picked from commit bb1b7a3)
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 e7e76b9..27e7bc4 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
@@ -43,10 +43,11 @@
}
.light #application-details-panel.floatpanel {
- background-color: rgb(229, 234, 237);
+ background-color: white;
}
.dark #application-details-panel.floatpanel {
- background-color: #3A4042;
+ /* TODO: dark theme */
+ background-color: white;
}
.light .close-btn svg.embeddedIcon .icon.plus .glyph {
@@ -56,31 +57,28 @@
fill: #ccc;
}
-#application-details-panel td.label,
-#application-details-panel .app-url i {
- /* works for both light and dark themes ... */
- color: #777;
-}
-
.light #application-details-panel hr {
- opacity: .5;
- border-color: #FFF;
+ border: 1px solid #c7c7c0;
}
.dark #application-details-panel hr {
- border-color: #666;
+ /* TODO: dark theme */
+ border: 1px solid #c7c7c0;
}
.light #application-details-panel .bottom tr:nth-child(odd) {
- background-color: #f9f9f9;
+ background-color: #f4f4f4;
}
.light #application-details-panel .bottom tr:nth-child(even) {
- background-color: #EBEDF2;
+ background-color: #fbfbfb;
}
+
.dark #application-details-panel .bottom tr:nth-child(odd) {
- background-color: #333;
+ /* TODO: dark theme */
+ background-color: #f4f4f4;
}
.dark #application-details-panel .bottom tr:nth-child(even) {
- background-color: #555;
+ /* TODO: dark theme */
+ background-color: #fbfbfb;
}
.light div.dropping {
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 f36b745..5d53794 100644
--- a/web/gui/src/main/webapp/app/view/app/app.css
+++ b/web/gui/src/main/webapp/app/view/app/app.css
@@ -40,11 +40,13 @@
}
#application-details-panel.floatpanel {
- -moz-border-radius: 0;
- border-radius: 0;
z-index: 0;
+ font-size: 12pt;
}
+#application-details-panel.floatpanel a {
+ font-weight: bold;
+}
#application-details-panel .container {
padding: 0 10px;
@@ -66,14 +68,16 @@
#application-details-panel h2 {
display: inline-block;
margin: 8px 0;
- font-size: 12pt;
+ font-size: 15pt;
+ font-variant: small-caps;
+ text-transform: uppercase;
}
#application-details-panel .top .app-title {
width: 90%;
- height: 45px;
- font-size: 22pt;
- font-weight: bold;
+ height: 62px;
+ font-size: 30pt;
+ font-weight: lighter;
overflow: hidden;
white-space: nowrap;
padding: 0 12px 0 0;
@@ -81,7 +85,7 @@
#application-details-panel .top div.left {
float: left;
- padding: 0 12px 0 0;
+ padding: 12px 12px 0 4px;
}
#application-details-panel .top div.right {
display: inline-block;
@@ -91,8 +95,11 @@
#application-details-panel td.label,
#application-details-panel .app-url i {
- font-style: italic;
- padding-right: 12px;
+ font-weight: bold;
+ text-align: right;
+ font-size: 12pt;
+
+ padding-right: 6px;
}
#application-details-panel td.value-bold {
@@ -104,8 +111,12 @@
}
#application-details-panel hr {
- width: 95%;
- margin: 10px auto;
+ width: 100%;
+ margin: 6px auto;
+}
+
+#application-details-panel .container {
+ overflow-y: scroll;
}
#application-details-panel .bottom table {
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 7a7685b..56b2d98 100644
--- a/web/gui/src/main/webapp/app/view/app/app.js
+++ b/web/gui/src/main/webapp/app/view/app/app.js
@@ -38,7 +38,7 @@
var INSTALLED = 'INSTALLED',
ACTIVE = 'ACTIVE',
appMgmtReq = 'appManagementRequest',
- topPdg = 50,
+ topPdg = 70,
panelWidth = 500,
pName = 'application-details-panel',
detailsReq = 'appDetailsRequest',
@@ -136,19 +136,18 @@
}
function addProp(tbody, index, value) {
- var tr = tbody.append('tr'),
- vcls = index ? 'value' : 'value-bold';
+ var tr = tbody.append('tr');
function addCell(cls, txt) {
tr.append('td').attr('class', cls).html(txt);
}
addCell('label', friendlyProps[index] + ':');
- addCell(vcls, value);
+ addCell('value', value);
}
function urlize(u) {
- return '<i>URL:</i> <a href="' + u + '" target="_blank">' + u + '</a>';
+ return 'Url:<br/> <a href="' + u + '" target="_blank">' + u + '</a>';
}
function addIcon(elem, value) {