From edb437a5ad3bd638207fc3adcd3a2fecf6e338fe Mon Sep 17 00:00:00 2001
From: Thomas Vachuska <tom@opennetworking.org>
Date: Thu, 27 Feb 2020 14:25:58 -0800
Subject: [PATCH] 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
---
 .../visuals/devicenodesvg/devicenodesvg.component.html   | 8 ++++----
 .../visuals/devicenodesvg/devicenodesvg.component.ts     | 4 ++--
 .../lib/panel/mapselector/mapselector.component.css      | 6 +++++-
 .../main/webapp/app/view/apps/apps/apps.component.css    | 1 +
 .../src/main/webapp/app/view/apps/apps/apps.theme.css    | 1 +
 .../app/view/cluster/cluster/cluster.component.css       | 1 +
 .../webapp/app/view/device/device/device.component.css   | 1 +
 .../main/webapp/app/view/device/device/device.theme.css  | 1 +
 .../main/webapp/app/view/flow/flow/flow.component.css    | 1 +
 .../main/webapp/app/view/group/group/group.component.css | 1 +
 .../main/webapp/app/view/host/host/host.component.css    | 1 +
 .../webapp/app/view/intent/intent/intent.component.css   | 1 +
 .../main/webapp/app/view/link/link/link.component.css    | 1 +
 .../main/webapp/app/view/meter/meter/meter.component.css | 1 +
 .../app/view/partition/partition/partition.component.css | 1 +
 .../app/view/pipeconf/pipeconf/pipeconf.component.css    | 9 +++++----
 .../main/webapp/app/view/port/port/port.component.css    | 1 +
 .../app/view/processor/processor/processor.component.css | 3 ++-
 .../app/view/settings/settings/settings.component.css    | 5 +++--
 .../webapp/app/view/tunnel/tunnel/tunnel.component.css   | 1 +
 20 files changed, 35 insertions(+), 14 deletions(-)

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 c4f562194c..3114a51585 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 47791dd66c..a41804ce41 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 @@ export class DeviceNodeSvgComponent extends NodeVisual implements OnInit, OnChan
      */
     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 59c0d78d7a..3462a46b8f 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 636fb0c7cf..817027fdac 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 a705d45c63..d55f7d683f 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 @@ div.dropping {
 }
 #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 61e4135ac8..28a8e1f78b 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 5ed16e8219..e1bced488b 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 d9b2c07228..d61756c339 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 3ed4d1678a..dd40001ebf 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 fbf19def5b..d4479fedda 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 d306a231d7..d371de1f6d 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 3b94c9bc89..b1abd00d1e 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 a7c04e2475..8aa9110ca7 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 809ab49385..083d40f5a6 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 e6a654b592..435e3c1b03 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 0057ac8ad2..a46d15c271 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 015d47596f..681cf67899 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 ff9163e5fe..f16f3c483c 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 c2c56215ca..0d6b66237a 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 73472ffd3b..8f9b971bb3 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 {