Minor GUI tweaks:
* Fix header margin for all table views to align with the table
* Fix margins in GUI map selector
* Removed node drop-shadow in the GUI topology by reducing blur to 0
* Adjusted device label sizing to favour more white-space than to clip and squeeze text
Change-Id: I9ef3eee30714a5aaa9337582d6b1a2e2fb2b302c
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
index c4f5621..3114a51 100644
--- a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
@@ -23,8 +23,8 @@
original target object
-->
<svg:filter id="drop-shadow" x="-25%" y="-25%" width="200%" height="200%">
- <svg:feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
- <svg:feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+ <svg:feGaussianBlur in="SourceAlpha" stdDeviation="0" result="blur" />
+ <svg:feOffset in="blur" dx="0" dy="0" result="offsetBlur"/>
<svg:feMerge >
<svg:feMergeNode in="offsetBlur" />
<svg:feMergeNode in="SourceGraphic" />
@@ -87,10 +87,10 @@
in gently
line 5) The text will be one of 3 values - blank, the id or the name
-->
+ <!-- [attr.textLength]= "labelTextLen()"-->
+ <!-- lengthAdjust= "spacing"-->
<svg:text
text-anchor="start" y="0.3em" x="22"
- [attr.textLength]= "labelTextLen()"
- lengthAdjust= "spacing"
[@deviceLabelToggleTxt]="labelToggle">
{{ labelToggle == 0 ? '': labelToggle == 1 ? device.id:device.props.name }}
</svg:text>
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
index 47791dd..a41804c 100644
--- a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
@@ -139,10 +139,10 @@
*/
labelTextLen() {
if (this.labelToggle === 1) {
- return this.device.id.length * 8;
+ return this.device.id.length * 12;
} else if (this.labelToggle === 2 && this.device &&
this.device.props.name && this.device.props.name.trim().length > 0) {
- return this.device.props.name.length * 8;
+ return this.device.props.name.length * 12;
} else {
return 0;
}
diff --git a/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.css b/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.css
index 59c0d78..3462a46 100644
--- a/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.css
+++ b/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.css
@@ -18,13 +18,17 @@
* ONOS GUI -- Topology Map Selector -- CSS file
*/
.dialog h2 {
- margin: 0;
+ margin: 8px;
word-wrap: break-word;
display: inline-block;
width: 210px;
vertical-align: middle;
}
+.dialog select {
+ margin: 8px;
+}
+
.dialog .dialog-button {
display: inline-block;
cursor: pointer;
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.css b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.css
index 636fb0c..817027f 100644
--- a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.css
+++ b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.css
@@ -23,6 +23,7 @@
#ov-app h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-app div.ctrl-btns {
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps/apps.theme.css b/web/gui2/src/main/webapp/app/view/apps/apps/apps.theme.css
index a705d45..d55f7d6 100644
--- a/web/gui2/src/main/webapp/app/view/apps/apps/apps.theme.css
+++ b/web/gui2/src/main/webapp/app/view/apps/apps/apps.theme.css
@@ -44,6 +44,7 @@
}
#ov-app h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-app, div.ctrl-btns {
diff --git a/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.css b/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.css
index 61e4135..28a8e1f 100644
--- a/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.css
+++ b/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.css
@@ -19,6 +19,7 @@
*/
#ov-cluster h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-cluster div.ctrl-btns {
diff --git a/web/gui2/src/main/webapp/app/view/device/device/device.component.css b/web/gui2/src/main/webapp/app/view/device/device/device.component.css
index 5ed16e8..e1bced4 100644
--- a/web/gui2/src/main/webapp/app/view/device/device/device.component.css
+++ b/web/gui2/src/main/webapp/app/view/device/device/device.component.css
@@ -23,6 +23,7 @@
#ov-device h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-device, div.ctrl-btns {
diff --git a/web/gui2/src/main/webapp/app/view/device/device/device.theme.css b/web/gui2/src/main/webapp/app/view/device/device/device.theme.css
index d9b2c07..d61756c 100644
--- a/web/gui2/src/main/webapp/app/view/device/device/device.theme.css
+++ b/web/gui2/src/main/webapp/app/view/device/device/device.theme.css
@@ -49,6 +49,7 @@
}
#ov-device h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-device, div.ctrl-btns {
diff --git a/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.css b/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.css
index 3ed4d16..dd40001 100644
--- a/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.css
+++ b/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.css
@@ -19,6 +19,7 @@
#ov-flow h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-flow div.ctrl-btns {
diff --git a/web/gui2/src/main/webapp/app/view/group/group/group.component.css b/web/gui2/src/main/webapp/app/view/group/group/group.component.css
index fbf19de..d4479fe 100644
--- a/web/gui2/src/main/webapp/app/view/group/group/group.component.css
+++ b/web/gui2/src/main/webapp/app/view/group/group/group.component.css
@@ -19,6 +19,7 @@
#ov-group h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-group div.ctrl-btns {
diff --git a/web/gui2/src/main/webapp/app/view/host/host/host.component.css b/web/gui2/src/main/webapp/app/view/host/host/host.component.css
index d306a23..d371de1 100644
--- a/web/gui2/src/main/webapp/app/view/host/host/host.component.css
+++ b/web/gui2/src/main/webapp/app/view/host/host/host.component.css
@@ -35,6 +35,7 @@
#ov-host h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-host th, td {
diff --git a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.css b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.css
index 3b94c9b..b1abd00 100644
--- a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.css
+++ b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.css
@@ -34,6 +34,7 @@
#ov-intent h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-intent th, td {
diff --git a/web/gui2/src/main/webapp/app/view/link/link/link.component.css b/web/gui2/src/main/webapp/app/view/link/link/link.component.css
index a7c04e2..8aa9110 100644
--- a/web/gui2/src/main/webapp/app/view/link/link/link.component.css
+++ b/web/gui2/src/main/webapp/app/view/link/link/link.component.css
@@ -31,6 +31,7 @@
#ov-link h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-link th, td {
diff --git a/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.css b/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.css
index 809ab49..083d40f 100644
--- a/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.css
+++ b/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.css
@@ -20,6 +20,7 @@
#ov-meter h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-meter div.ctrl-btns {
diff --git a/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.css b/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.css
index e6a654b..435e3c1 100644
--- a/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.css
+++ b/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.css
@@ -23,6 +23,7 @@
#ov-partition h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-partition div.summary-list .table-header td {
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.css b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.css
index 0057ac8..a46d15c 100644
--- a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.css
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.css
@@ -16,6 +16,11 @@
/* Base */
+#ov-pipeconf h2 {
+ display: inline-block;
+ margin-left: 10px;
+}
+
#pipeconf-info h2 {
display: inline-block;
margin: 10px 0 10px 0;
@@ -135,10 +140,6 @@
}
/* Widgets */
-#ov-pipeconf h2 {
- display: inline-block;
-}
-
.collapse-btn {
cursor: pointer;
display: inline-block;
diff --git a/web/gui2/src/main/webapp/app/view/port/port/port.component.css b/web/gui2/src/main/webapp/app/view/port/port/port.component.css
index 015d475..681cf67 100644
--- a/web/gui2/src/main/webapp/app/view/port/port/port.component.css
+++ b/web/gui2/src/main/webapp/app/view/port/port/port.component.css
@@ -23,6 +23,7 @@
#ov-port h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-port div.ctrl-btns {
diff --git a/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.css b/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.css
index ff9163e..f16f3c4 100644
--- a/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.css
+++ b/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.css
@@ -17,12 +17,13 @@
/*
ONOS GUI -- Processor View (layout) -- CSS file
*/
- #ov-processor .tabular-header {
+#ov-processor .tabular-header {
text-align: left;
}
#ov-processor h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-processor div.summary-list .table-header td {
diff --git a/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.css b/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.css
index c2c5621..0d6b662 100644
--- a/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.css
+++ b/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.css
@@ -19,11 +19,12 @@
*/
#ov-settings .tabular-header {
text-align: left;
- }
+}
#ov-settings h2 {
display: inline-block;
- }
+ margin-left: 10px;
+}
#ov-settings div.summary-list .table-header td {
font-weight: bold;
diff --git a/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.css b/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.css
index 73472ff..8f9b971 100644
--- a/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.css
+++ b/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.css
@@ -31,6 +31,7 @@
#ov-tunnel h2 {
display: inline-block;
+ margin-left: 10px;
}
#ov-tunnel th, td {