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/fw/layer/panel-theme.css b/web/gui/src/main/webapp/app/fw/layer/panel-theme.css
index 5246690..3e966ae 100644
--- a/web/gui/src/main/webapp/app/fw/layer/panel-theme.css
+++ b/web/gui/src/main/webapp/app/fw/layer/panel-theme.css
@@ -19,12 +19,13 @@
*/
.light .floatpanel {
- background-color: rgba(255,255,255,0.8);
- color: black;
- box-shadow: 0 2px 12px #777;
+ background-color: white;
+ color: #3c3a3a;
+ border: 1px solid #c7c7c0;
}
.dark .floatpanel {
- background-color: rgba(50,50,50,0.8);
- color: #ccc;
- box-shadow: 0 2px 12px #000;
+ /* TODO: dark theme */
+ background-color: white;
+ color: #3c3a3a;
+ border: 1px solid #c7c7c0;
}
diff --git a/web/gui/src/main/webapp/app/fw/layer/panel.css b/web/gui/src/main/webapp/app/fw/layer/panel.css
index 6f0232d..17c5559 100644
--- a/web/gui/src/main/webapp/app/fw/layer/panel.css
+++ b/web/gui/src/main/webapp/app/fw/layer/panel.css
@@ -27,11 +27,8 @@
right: -220px;
opacity: 0;
- padding: 10px;
+ padding: 2px;
font-size: 10pt;
-
- -moz-border-radius: 6px;
- border-radius: 6px;
}
.floatpanel.dialog {
diff --git a/web/gui/src/main/webapp/app/onos.css b/web/gui/src/main/webapp/app/onos.css
index 4185d67..bc11801 100644
--- a/web/gui/src/main/webapp/app/onos.css
+++ b/web/gui/src/main/webapp/app/onos.css
@@ -50,3 +50,16 @@
font-weight: lighter;
}
+
+/* TODO: dark versions for links */
+a {
+ color: #009fdb;
+ text-decoration: none;
+}
+a:hover {
+ text-decoration: underline;
+}
+a:visited {
+ color: #7fabdb;
+ text-decoration: none;
+}
\ No newline at end of file
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) {
diff --git a/web/gui/src/main/webapp/app/view/processor/processor.html b/web/gui/src/main/webapp/app/view/processor/processor.html
index 2f0db44..b28f3e5 100644
--- a/web/gui/src/main/webapp/app/view/processor/processor.html
+++ b/web/gui/src/main/webapp/app/view/processor/processor.html
@@ -46,7 +46,7 @@
<tr ng-repeat="processor in tableData track by $index"
ng-repeat-complete row-id="{{processor.id}}">
- <td class="number">{{processor.priority}}</td>
+ <td class="priority">{{processor.priority}}</td>
<td>{{processor.type}}</td>
<td>{{processor.processor}}</td>
<td class="number">{{processor.packets}}</td>