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
2026-05-06 04:36:17 +02:00 · 2020-02-27 14:25:58 -08:00 · 2020-02-27 14:25:58 -08:00 · edb437a5ad
commit edb437a5ad
parent a40ecbbee1
20 changed files with 35 additions and 14 deletions
--- 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>
--- 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;
        }
--- 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;
--- 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 {
--- 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 {
--- 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 {
--- 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 {
--- 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 {
--- 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 {
--- 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 {
--- 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 {
--- 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 {
--- 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 {
--- 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 {
--- 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 {
--- 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;
--- 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 {
--- 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 {
--- 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;
--- 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 {