Implemented table building functions
Change-Id: Ie4003080b13725561df22de41ec85f8c3f31c794
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon.directive.ts b/web/gui2/src/main/webapp/app/fw/svg/icon.directive.ts
deleted file mode 100644
index a8de561..0000000
--- a/web/gui2/src/main/webapp/app/fw/svg/icon.directive.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * Copyright 2015-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { Directive, ElementRef, Input, OnInit } from '@angular/core';
-import { IconService } from './icon.service';
-import { LogService } from '../../log.service';
-import * as d3 from 'd3';
-
-/**
- * ONOS GUI -- SVG -- Icon Directive
- *
- * TODO: Deprecated - this directive may be removed altogether as it has been
- * rebuilt as IconComponent instead
- */
-@Directive({
- selector: '[onosIcon]'
-})
-export class IconDirective implements OnInit {
- @Input() iconId: string;
- @Input() iconSize = 20;
-
- constructor(
- private el: ElementRef,
- private is: IconService,
- private log: LogService
- ) {
- // Note: iconId is not available until initialization
- this.log.debug('IconDirective constructed');
- }
-
- ngOnInit() {
- const div = d3.select(this.el.nativeElement);
- div.selectAll('*').remove();
- this.is.loadEmbeddedIcon(div, this.iconId, this.iconSize);
- this.log.debug('IconDirective initialized:', this.iconId);
- }
-
-}
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 6a32d87..5be4c19 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,9 +13,11 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
-<svg class="embeddedIcon" [attr.width]="iconSize" [attr.height]="iconSize" viewBox="0 0 50 50">
- <g class="icon" [ngClass]="iconId">
+<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>
<use width="50" height="50" class="glyph" [attr.href]="iconTag()"></use>
</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>
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.ts b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.ts
index 45be81f..c851f47 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.ts
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.ts
@@ -16,7 +16,6 @@
import { Component, OnInit, Input } from '@angular/core';
import { IconService, glyphMapping } from '../icon.service';
import { LogService } from '../../../log.service';
-import * as d3 from 'd3';
/**
* Icon Component
@@ -31,11 +30,20 @@
@Component({
selector: 'onos-icon',
templateUrl: './icon.component.html',
- styleUrls: ['./icon.component.css', './icon.theme.css', './glyph.css', './glyph-theme.css']
+ styleUrls: [
+ './icon.component.css', './icon.theme.css',
+ './glyph.css', './glyph-theme.css',
+ './tooltip.css', './tooltip-theme.css'
+ ]
})
export class IconComponent implements OnInit {
@Input() iconId: string;
- @Input() iconSize = 20;
+ @Input() iconSize: number = 20;
+ @Input() toolTip: string = undefined;
+ @Input() classes: string = undefined;
+
+ // The displayed tooltip - undefined until mouse hovers over, then equals toolTip
+ toolTipDisp: string = undefined;
constructor(
private is: IconService,
@@ -47,7 +55,6 @@
ngOnInit() {
this.is.loadIconDef(this.iconId);
- this.log.debug('IconComponent initialized for ', this.iconId);
}
/**
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 59cf10f..3e6f601 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
@@ -40,6 +40,46 @@
fill: #3c3a3a;
}
+/* --- Control Buttons --- */
+
+/* INACTIVE */
+svg.embeddedIcon g.icon use {
+ fill: #e0dfd6;
+}
+/* note: no change for inactive buttons when hovered */
+
+
+/* ACTIVE */
+svg.embeddedIcon g.icon.active use {
+ fill: #939598;
+}
+svg.embeddedIcon g.icon.active:hover use {
+ fill: #ce5b58;
+}
+
+/* CURRENT-VIEW */
+svg.embeddedIcon g.icon.current-view rect {
+ fill: #518ecc;
+}
+svg.embeddedIcon g.icon.current-view use {
+ fill: white;
+}
+
+/* REFRESH */
+svg.embeddedIcon g.icon.refresh use {
+ fill: #cdeff2;
+}
+svg.embeddedIcon g.icon.refresh:hover use {
+ fill: #ce5b58;
+}
+svg.embeddedIcon g.icon.refresh.active use {
+ fill: #009fdb;
+}
+svg.embeddedIcon g.icon.refresh.active:hover use {
+ fill: #ce5b58;
+}
+
+
/* ========== DARK Theme ========== */
.dark div.close-btn svg.embeddedIcon g.icon .glyph {
@@ -61,11 +101,12 @@
.dark table svg.embeddedIcon .icon .glyph {
fill: #9999aa;
}
-
+/*
svg.embeddedIcon g.icon .glyph {
fill: #007dc4;
}
svg.embeddedIcon:hover g.icon .glyph {
fill: #20b2ff;
-}
\ No newline at end of file
+}
+*/
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon/tooltip-theme.css b/web/gui2/src/main/webapp/app/fw/svg/icon/tooltip-theme.css
new file mode 100644
index 0000000..a703d1b
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon/tooltip-theme.css
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2016-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Tooltip Service (theme) -- CSS file
+ */
+.light#tooltip {
+ background-color: #dbeffc;
+ color: #3c3a3a;
+ border-color: #c7c7c0;
+}
+
+.dark#tooltip {
+ background-color: #3a3a60;
+ border-color: #6c6a6a;
+ color: #c7c7c0;
+}
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
new file mode 100644
index 0000000..74a5443
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon/tooltip.css
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2015-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Tooltip Service (layout) -- CSS file
+ */
+
+#tooltip {
+ text-align: center;
+ font-size: 80%;
+ border: 1px solid;
+ padding: 5px;
+ position: absolute;
+ z-index: 5000;
+ display: none;
+ pointer-events: none;
+}
diff --git a/web/gui2/src/main/webapp/app/fw/svg/svg.module.ts b/web/gui2/src/main/webapp/app/fw/svg/svg.module.ts
index 9688c30..3174263 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/svg.module.ts
+++ b/web/gui2/src/main/webapp/app/fw/svg/svg.module.ts
@@ -25,7 +25,6 @@
import { SpriteService } from './sprite.service';
import { SpriteDataService } from './spritedata.service';
import { SvgUtilService } from './svgutil.service';
-import { IconDirective } from './icon.directive';
import { IconComponent } from './icon/icon.component';
/**
@@ -33,7 +32,6 @@
*/
@NgModule({
exports: [
- IconDirective,
IconComponent
],
imports: [
@@ -41,7 +39,6 @@
UtilModule
],
declarations: [
- IconDirective,
IconComponent
],
providers: [