Added portal-FE-common - angular upgrade code

[portal.git] / portal-FE-common / src / app / layout / components / tabbar / tabbar.component.html

diff --git a/portal-FE-common/src/app/layout/components/tabbar/tabbar.component.html b/portal-FE-common/src/app/layout/components/tabbar/tabbar.component.html
new file mode 100644 (file)
index 0000000..31bb197
--- /dev/null
+++ b/portal-FE-common/src/app/layout/components/tabbar/tabbar.component.html
@@ -0,0 +1,97 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2017-2018 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software 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.
+
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+
+              https://creativecommons.org/licenses/by/4.0/
+
+  Unless required by applicable law or agreed to in writing, documentation
+  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.
+
+  ============LICENSE_END============================================
+
+  -->
+
+  <div style="display: flex; flex-direction:column">
+
+      <mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)"
+        (selectedTabChange)="tabChanged($event)">
+        <mat-tab [label]="mainTab">
+          <!--
+            <mat-grid-list cols="5">
+              <mat-grid-tile [colspan]="1" [rowspan]="3">
+                <app-sidebar (collapsedEvent)="receiveCollapsed($event)"></app-sidebar>
+                <app-userbar></app-userbar>
+              </mat-grid-tile>
+              <mat-grid-tile [colspan]="4"  style="height: calc(100vh - 24px);overflow-y: hidden">
+                <div class="container">
+                  <router-outlet></router-outlet>
+                </div>
+              </mat-grid-tile>
+            </mat-grid-list>
+          -->
+
+
+          <div style="display: flex; flex-direction:column; overflow-y: scroll; height: calc(100vh - 100px)">
+            <div style="display: flex; flex-direction:row;">
+              <app-sidebar (collapsedEvent)="receiveCollapsed($event)"></app-sidebar>
+              <app-userbar></app-userbar>
+              <div class="container" style="margin-left: 370px;">
+                <router-outlet></router-outlet>
+              </div>
+            </div>
+            <app-footer></app-footer>
+          </div>
+
+        </mat-tab>
+
+        <mat-tab *ngFor="let tab of tabs; let index = index">
+          <ng-template mat-tab-label>
+            {{tab.label | elipsis: 13}} &nbsp;
+            <i class="icon ion-md-close-circle" (click)="removeTab(index)"></i>
+          </ng-template>
+
+
+        </mat-tab>
+
+      </mat-tab-group>
+
+
+
+
+
+        <div *ngFor="let tab of tabs; let index = index"
+          [style.display]='tab.active? "inline" : "none"'
+          [style.position]='tab.active? "static" : "absolute"'
+          [style.height]='tab.active? "calc(100vh)" : "calc(0vh)"'>
+
+          <iframe id="tabframe-{{tab.label.split(' ').join('-')}}" scrolling='yes' frameBorder='0' width='100%'
+            scrolling='yes' frameBorder='0' width='100%' height='90%' [src]='tab.url'></iframe>
+
+        </div>
+
+
+    </div>