GUI2 Framework as a standalone NPM Library
There are a few changes going on here
1) The fw part of GUI has been moved out in to its own project
a) several files are renamed (files 21-83)
b) the project has its own BUILD file (file 5)
c) there are a few files created by Angular CLI here - mostly script generated (files 7-20)
d) package-lock.json is a big generated file that has to be versioned (file 13)
2) The view in the main GUI2 project now refer to this library (see BUILD file 110)
a) some useless files were removed (files 115 - 139)
b) several files are changed to update references (files 140-202)
c) this breaks the BUCK build so I've removed the BUCK file and references to it (file 109)
Change-Id: I48bc3253edfcf5947f1582731ba739a1296012f5
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/glyph-theme.css b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/glyph-theme.css
new file mode 100644
index 0000000..12cdf30
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/glyph-theme.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2018-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 -- Glyph Service (theme) -- CSS file
+ */
+
+.light svg .glyph,
+.dark svg .glyph.overlay {
+ fill: blue;
+}
+
+/*
+* NOTE: Keeping the theme black while we
+* wait for the mockup theme designs to be made
+*/
+.dark svg .glyph,
+.light svg .glyph.overlay {
+ fill: blue;
+}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/glyph.css b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/glyph.css
new file mode 100644
index 0000000..0743ff2
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/glyph.css
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2018-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 -- Glyph Service (layout) -- CSS file
+ */
+
+svg .glyph {
+ stroke: none;
+ fill-rule: evenodd;
+}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.css b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.css
new file mode 100644
index 0000000..8350a75
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.css
@@ -0,0 +1,87 @@
+/*
+ * Copyright 2018-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 -- Icon Service (layout) -- CSS file
+ */
+
+svg#IconLibDefs {
+ display: none;
+}
+
+svg .svgIcon {
+ fill-rule: evenodd;
+}
+
+svg.embeddedIcon g.icon {
+ fill: none;
+}
+
+.ctrl-btns div svg.embeddedIcon g.icon use {
+ fill: #e0dfd6;
+}
+
+.ctrl-btns div.active svg.embeddedIcon g.icon use {
+ fill: #939598;
+}
+.ctrl-btns div.active:hover svg.embeddedIcon g.icon use {
+ fill: #ce5b58;
+}
+
+.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-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.html b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.html
new file mode 100644
index 0000000..a301c3c
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.html
@@ -0,0 +1,28 @@
+<!--
+~ Copyright 2018-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.
+-->
+<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>
+ <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> -->
+
+ <span class="tooltiptext" [ngStyle]="{ 'display': toolTipDisp ? 'inline-block':'none'}">{{toolTipDisp}}</span>
+</div>
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.ts
new file mode 100644
index 0000000..5267aef
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.ts
@@ -0,0 +1,79 @@
+/*
+ * Copyright 2018-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 { Component, OnInit, OnChanges, Input } from '@angular/core';
+import { IconService, glyphMapping } from '../icon.service';
+import { LogService } from '../../log.service';
+
+/**
+ * Icon Component
+ *
+ * Note: This is an alternative to the Icon Directive from ONOS 1.0.0
+ * It has been implemented as a Component because it was inadvertently adding
+ * in a template through d3 DOM manipulations - it's better to make it a Comp
+ * and build a template the Angular 6 way
+ *
+ * Remember: The CSS files applied here only apply to this component
+ */
+@Component({
+ selector: 'onos-icon',
+ templateUrl: './icon.component.html',
+ styleUrls: [
+ './icon.component.css', './icon.theme.css',
+ './glyph.css', './glyph-theme.css',
+ './tooltip.css', './tooltip-theme.css'
+ ]
+})
+export class IconComponent implements OnInit, OnChanges {
+ @Input() iconId: string;
+ @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,
+ private log: LogService
+ ) {
+ // Note: iconId is not available until initialization
+ this.log.debug('IconComponent constructed');
+ }
+
+ /**
+ * Icons are loaded in to the DOM under iconDefs
+ * TODO: Change this to use more standard Angular 6 mechanism
+ */
+ ngOnInit() {
+ this.is.loadIconDef(this.iconId);
+ }
+
+ /**
+ * This is needed in case the iconId changes while icon component
+ * is displayed on screen.
+ */
+ ngOnChanges() {
+ this.is.loadIconDef(this.iconId);
+ }
+
+ /**
+ * Get the corresponding iconTag from the glyphMapping in the iconService
+ * @returns The iconTag corresponding to the iconId of this instance
+ */
+ iconTag(): string {
+ return '#' + glyphMapping.get(this.iconId);
+ }
+}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.theme.css b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.theme.css
new file mode 100644
index 0000000..f267b10
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.theme.css
@@ -0,0 +1,108 @@
+/*
+ * Copyright 2018-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 -- Icon Service (theme) -- CSS file
+ */
+
+div.close-btn svg.embeddedIcon g.icon .glyph {
+ fill: #333333;
+}
+
+/* Sortable table headers */
+div.tableColSort svg.embeddedIcon .icon .glyph {
+ fill: #353333;
+}
+
+/* --- Control Buttons --- */
+
+/* INACTIVE */
+svg.embeddedIcon g.icon use {
+ fill: #e0dfd6;
+}
+/* note: no change for inactive buttons when hovered */
+
+
+/* ACTIVE */
+.ctrl-btns div.active svg.embeddedIcon g.icon 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 ========== */
+
+ div.close-btn svg.embeddedIcon g.icon .glyph {
+ fill: #8d8d8d;
+}
+
+ div.tableColSort svg.embeddedIcon .icon .glyph {
+ fill: #888888;
+}
+
+ /*svg.embeddedIcon .icon.active .glyph {
+ fill: #04bf34;
+}
+ svg.embeddedIcon .icon.inactive .glyph {
+ fill: #c0242b;
+}*/
+
+ table svg.embeddedIcon .icon .glyph {
+ fill: #9999aa;
+}
+
+/*
+svg.embeddedIcon g.icon .glyph {
+ fill: #007dc4;
+}
+
+svg.embeddedIcon:hover g.icon .glyph {
+ fill: #20b2ff;
+}
+*/
+
+svg.embeddedIcon g.icon.devIcon_SWITCH .glyph {
+ fill: #0071bd;;
+}
+
+svg.embeddedIcon g.icon.hostIcon_endstation .glyph {
+ fill: #0071bd;;
+}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/tooltip-theme.css b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/tooltip-theme.css
new file mode 100644
index 0000000..bcdcd55
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/tooltip-theme.css
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2018-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-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/tooltip.css b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/tooltip.css
new file mode 100644
index 0000000..eda38d9
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/tooltip.css
@@ -0,0 +1,61 @@
+/*
+ * Copyright 2018-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: 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;
+}