GUI2 implementation of device/flow/port/group/meter/host/link/tunnel view
Review comments incorporated.
Change-Id: I45dd6570961cc3e0f4ffddb7acbf02cd7d860de5
diff --git a/web/gui2/src/main/webapp/app/fw/svg/glyph.service.ts b/web/gui2/src/main/webapp/app/fw/svg/glyph.service.ts
index 7e8adb4..0c1eff3 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/glyph.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/svg/glyph.service.ts
@@ -14,10 +14,11 @@
* limitations under the License.
*/
import { Injectable } from '@angular/core';
-import { FnService } from '../../fw/util/fn.service';
+import { FnService } from '../util/fn.service';
import { LogService } from '../../log.service';
import * as gds from './glyphdata.service';
import * as d3 from 'd3';
+import { SvgUtilService } from './svgutil.service';
// constants
const msgGS = 'GlyphService.';
@@ -31,14 +32,25 @@
export class GlyphService {
// internal state
glyphs = d3.map();
+ api: Object;
constructor(
private fs: FnService,
-// private gd: GlyphDataService,
- private log: LogService
+ // private gd: GlyphDataService,
+ private log: LogService,
+ private sus: SvgUtilService
) {
this.clear();
this.init();
+ this.api = {
+ registerGlyphs: this.registerGlyphs,
+ registerGlyphSet: this.registerGlyphSet,
+ ids: this.ids,
+ glyph: this.glyph,
+ glyphDefined: this.glyphDefined,
+ loadDefs: this.loadDefs,
+ addGlyph: this.addGlyph,
+ };
this.log.debug('GlyphService constructed');
}
@@ -121,7 +133,7 @@
}
for (const [key, value] of data.entries()) {
-// angular.forEach(data, function (value, key) {
+ // angular.forEach(data, function (value, key) {
if (key[0] !== '_') {
this.addToMap(key, value, vb, overwrite, dups);
}
@@ -167,11 +179,28 @@
}
}
defs.append('symbol')
- .attr('id', g.id)
- .attr('viewBox', g.vb)
- .append('path')
- .attr('d', g.d);
+ .attr('id', g.id)
+ .attr('viewBox', g.vb)
+ .append('path')
+ .attr('d', g.d);
}
});
}
+
+ addGlyph(elem: any, glyphId: string, size: number, overlay: any, trans: any) {
+ const sz = size || 40,
+ ovr = !!overlay,
+ xns = this.fs.isA(trans),
+ atr = {
+ width: sz,
+ height: sz,
+ 'class': 'glyph',
+ 'xlink:href': '#' + glyphId,
+ };
+
+ if (xns) {
+ atr.class = this.sus.translate(trans);
+ }
+ return elem.append('use').attr(atr).classed('overlay', ovr);
+ }
}
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon.service.ts b/web/gui2/src/main/webapp/app/fw/svg/icon.service.ts
index 813589f..de3672c 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/icon.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon.service.ts
@@ -40,6 +40,8 @@
['nonzero', 'nonzero'],
['close', 'xClose'],
+ ['m_ports', 'm_ports'],
+
['topo', 'topo'],
['refresh', 'refresh'],
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.css b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.css
index 347837a..d2d6f56 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.css
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.css
@@ -30,16 +30,58 @@
fill: none;
}
-svg.embeddedIcon g.icon rect {
- stroke: none;
- fill: none;
+.ctrl-btns div svg.embeddedIcon g.icon use {
+ fill: #e0dfd6;
}
-svg.embeddedIcon g.icon .glyph {
- stroke: none;
- fill-rule: evenodd;
+.ctrl-btns div.active svg.embeddedIcon g.icon use {
+ fill: #939598;
+}
+.ctrl-btns div.active:hover svg.embeddedIcon g.icon use {
+ fill: #ce5b58;
}
-svg.embeddedIcon .icon.appInactive .glyph {
- fill: none !important;
+.ctrl-btns div.current-view svg.embeddedIcon g.icon rect {
+ fill: #518ecc;
}
+.ctrl-btns div.current-view svg.embeddedIcon g.icon use {
+ fill: white;
+}
+
+svg.embeddedIcon .icon.active .glyph {
+ fill: #04bf34;
+}
+
+svg.embeddedIcon .icon.inactive .glyph {
+ fill: #c0242b;
+}
+
+svg.embeddedIcon .icon.active-rect .glyph {
+ fill:#939598;
+}
+
+svg.embeddedIcon .icon.active-sort .glyph {
+ fill:#333333;
+}
+
+svg.embeddedIcon g.icon.active-rect:hover use {
+ fill: #ce5b58;
+}
+
+svg.embeddedIcon g.icon.active-type .glyph {
+ fill: #3c3a3a;
+}
+
+svg.embeddedIcon g.icon.active-close:hover use {
+ fill: #ce5b58;
+}
+
+svg.embeddedIcon g.icon.active-close .glyph {
+ fill: #333333;
+}
+
+svg.embeddedIcon g.icon.details-icon .glyph {
+ fill: #0071bd;;
+}
+
+
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.html b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.html
index 5be4c19..2243dc2 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.html
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.html
@@ -13,6 +13,7 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
+<div class="tooltip">
<svg class="embeddedIcon" [attr.width]="iconSize" [attr.height]="iconSize" viewBox="0 0 50 50" (mouseover)="toolTipDisp = toolTip" (mouseout)="toolTipDisp = undefined">
<g class="icon" [ngClass]="classes">
<rect width="50" height="50" rx="5"></rect>
@@ -20,4 +21,8 @@
</g>
</svg>
<!-- I'm fixing class as light as view encapsulation changes how the hirerarchy of css is handled -->
-<p id="tooltip" class="light" *ngIf="toolTip" [ngStyle]="{ 'display': toolTipDisp ? 'inline-block':'none' }">{{ toolTipDisp }}</p>
+
+<!-- <p id="tooltip" class="light" *ngIf="toolTip" [ngStyle]="{ 'display': toolTipDisp ? 'inline-block':'none'}">{{ toolTipDisp }}</p> -->
+
+ <span class="tooltiptext" [ngStyle]="{ 'display': toolTipDisp ? 'inline-block':'none'}">{{toolTipDisp}}</span>
+</div>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.theme.css b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.theme.css
index 3e6f601..ca6e32e 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.theme.css
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.theme.css
@@ -18,28 +18,15 @@
ONOS GUI -- Icon Service (theme) -- CSS file
*/
-.light div.close-btn svg.embeddedIcon g.icon .glyph {
+div.close-btn svg.embeddedIcon g.icon .glyph {
fill: #333333;
}
/* Sortable table headers */
-.light div.tableColSort svg.embeddedIcon .icon .glyph {
+div.tableColSort svg.embeddedIcon .icon .glyph {
fill: #353333;
}
-/* active / inactive (check/xmark) icons */
-.light svg.embeddedIcon .icon.active .glyph {
- fill: #04bf34;
-}
-
-.light svg.embeddedIcon .icon.inactive .glyph {
- fill: #c0242b;
-}
-
-.light table svg.embeddedIcon .icon .glyph {
- fill: #3c3a3a;
-}
-
/* --- Control Buttons --- */
/* INACTIVE */
@@ -50,9 +37,10 @@
/* ACTIVE */
-svg.embeddedIcon g.icon.active use {
+.ctrl-btns div.active svg.embeddedIcon g.icon use {
fill: #939598;
}
+
svg.embeddedIcon g.icon.active:hover use {
fill: #ce5b58;
}
@@ -82,25 +70,25 @@
/* ========== DARK Theme ========== */
-.dark div.close-btn svg.embeddedIcon g.icon .glyph {
+ div.close-btn svg.embeddedIcon g.icon .glyph {
fill: #8d8d8d;
}
-.dark div.tableColSort svg.embeddedIcon .icon .glyph {
+ div.tableColSort svg.embeddedIcon .icon .glyph {
fill: #888888;
}
-.dark svg.embeddedIcon .icon.active .glyph {
+ /*svg.embeddedIcon .icon.active .glyph {
fill: #04bf34;
}
-
-.dark svg.embeddedIcon .icon.inactive .glyph {
+ svg.embeddedIcon .icon.inactive .glyph {
fill: #c0242b;
-}
+}*/
-.dark table svg.embeddedIcon .icon .glyph {
+ table svg.embeddedIcon .icon .glyph {
fill: #9999aa;
}
+
/*
svg.embeddedIcon g.icon .glyph {
fill: #007dc4;
@@ -109,4 +97,12 @@
svg.embeddedIcon:hover g.icon .glyph {
fill: #20b2ff;
}
-*/
\ No newline at end of file
+*/
+
+svg.embeddedIcon g.icon.devIcon_SWITCH .glyph {
+ fill: #0071bd;;
+}
+
+svg.embeddedIcon g.icon.hostIcon_endstation .glyph {
+ fill: #0071bd;;
+}
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon/tooltip.css b/web/gui2/src/main/webapp/app/fw/svg/icon/tooltip.css
index 74a5443..890f1f8 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/icon/tooltip.css
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon/tooltip.css
@@ -25,6 +25,37 @@
padding: 5px;
position: absolute;
z-index: 5000;
- display: none;
+ display: inline-block;
pointer-events: none;
+ top: 40px;
+ right: auto;
+ /* width: 240px; */
+}
+
+.tooltip {
+ position: relative;
+ display: inline-block;
+}
+
+.tooltip .tooltiptext {
+ display: inline-block;
+ visibility: hidden;
+ background-color: #dbeffc;
+ color: #3c3a3a;
+ border-color: #c7c7c0;
+ text-align: center;
+ border-radius: 6px;
+ font-size: 80%;
+ padding: 5px;
+
+ /* Position the tooltip */
+ position: absolute;
+ z-index: 5000;
+ top: 42px;
+ right: 10%;
+ white-space: nowrap;
+}
+
+.tooltip:hover .tooltiptext {
+ visibility: visible;
}
diff --git a/web/gui2/src/main/webapp/app/fw/svg/svgutil.service.ts b/web/gui2/src/main/webapp/app/fw/svg/svgutil.service.ts
index 9cba079..23759ab 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/svgutil.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/svg/svgutil.service.ts
@@ -23,7 +23,7 @@
* The SVG Util Service provides a miscellany of utility functions.
*/
@Injectable({
- providedIn: 'root',
+ providedIn: 'root',
})
export class SvgUtilService {