aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/shared/tabs
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
committerMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
commited64b5edff15e702493df21aa3230b81593e6133 (patch)
treea4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/src/app/ng2/shared/tabs
parent280f8015d06af1f41a3ef12e8300801c7a5e0d54 (diff)
[SDC-29] catalog 1707 rebase commit.
Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1 Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/shared/tabs')
-rw-r--r--catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts18
-rw-r--r--catalog-ui/src/app/ng2/shared/tabs/tabs.component.html9
-rw-r--r--catalog-ui/src/app/ng2/shared/tabs/tabs.component.less85
-rw-r--r--catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts58
-rw-r--r--catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts35
5 files changed, 205 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts b/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts
new file mode 100644
index 0000000000..06dcfa0b16
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { ViewEncapsulation } from '@angular/core';
+
+@Component({
+ selector: 'tab',
+ template: `
+ <div *ngIf="active" class="tab-content">
+ <ng-content></ng-content>
+ </div>
+ `,
+ encapsulation: ViewEncapsulation.None
+})
+export class Tab {
+ @Input('tabTitle') title: string;
+ @Input() active:boolean = false;
+ @Input() indication?: number;
+
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html
new file mode 100644
index 0000000000..3e263a3862
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html
@@ -0,0 +1,9 @@
+<div class="tabs {{tabStyle}}">
+ <div class="tab" *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active">
+ {{tab.title}}
+ <div class="tab-indication" *ngIf="tab.indication" [@indicatorAnimation]="tab.indication">{{tab.indication}}</div>
+ </div>
+</div>
+<div class="tab-content-container">
+ <ng-content></ng-content>
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less
new file mode 100644
index 0000000000..aa59428a64
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less
@@ -0,0 +1,85 @@
+@import '../../../../assets/styles/variables';
+
+.tabs {
+ display:flex;
+ flex: 0 0 auto;
+ flex-direction:row;
+}
+
+.tab {
+ flex: 1 0 auto;
+ cursor: pointer;
+ padding: .5em;
+}
+
+.tab-content-container {
+ flex: 1;
+ height: 100%;
+ overflow: hidden;
+ width:100%;
+}
+
+.tab-content {
+ height:100%;
+}
+
+/*Tab styles*/
+.tabs{
+ &.round-tabs .tab{
+ background-color: #f8f8f8;
+ color: #959595;
+ border: solid 1px #d2d2d2;
+ border-bottom:none;
+ border-left:none;
+ position:relative;
+
+ &:first-child {
+ border-top-left-radius: 8px;
+ border-left:solid 1px #d2d2d2;
+ }
+ &:last-child {
+ border-top-right-radius: 8px;
+ }
+
+ &.active {
+ background-color:#009fdb;
+ color:#e9e9e9;
+ border-color:#009fdb;
+ }
+
+ .tab-indication {
+ position: absolute;
+ top: -10px;
+ background-color: #009fdb;
+ right: 10px;
+ padding: 2px 0;
+ border-radius: 15px;
+ border: solid 1px #d2d2d2;
+ color:white;
+ width: 25px;
+ height: 25px;
+ text-align: center;
+
+ }
+ }
+
+ &.simple-tabs .tab {
+ font-size: 12px;
+ color: @main_color_n;
+
+ &:after {
+ display:block;
+ content: '';
+ border-bottom: 2px solid @main_color_a;
+ transform: scaleX(0);
+ transition: transform 200ms ease-in-out;
+ }
+
+ &.active {
+ color: @main_color_a;
+ &:after {
+ transform: scaleX(1);
+ }
+ }
+ }
+}
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts
new file mode 100644
index 0000000000..dc5616c6cb
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts
@@ -0,0 +1,58 @@
+import { Component, ContentChildren, QueryList, AfterContentInit, Input, Output, EventEmitter } from '@angular/core';
+import { Tab } from './tab/tab.component';
+import { ViewEncapsulation } from '@angular/core';
+import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
+
+@Component({
+ selector: 'tabs',
+ templateUrl: './tabs.component.html',
+ styleUrls: ['./tabs.component.less'],
+ encapsulation: ViewEncapsulation.None,
+ animations: [
+ trigger('indicatorAnimation', [
+ transition(':enter', [style({ transform: 'translateY(-50%)', opacity: 0 }), animate('250ms', style({ transform: 'translateY(0)', opacity: 1 })) ]),
+ transition(':leave', [style({ opacity: 1 }), animate('500ms', style({ opacity: 0 })) ])
+ ])
+ ]
+})
+export class Tabs implements AfterContentInit {
+
+ @Input() tabStyle: string;
+ @Input() hideIndicationOnTabChange?: boolean = false;
+ @ContentChildren(Tab) tabs: QueryList<Tab>;
+ @Output() tabChanged: EventEmitter<Tab> = new EventEmitter<Tab>();
+
+
+ ngAfterContentInit() {
+ //after contentChildren are set, determine active tab. If no active tab set, activate the first one
+ let activeTabs = this.tabs.filter((tab) => tab.active);
+
+ if (activeTabs.length === 0) {
+ this.selectTab(this.tabs.first);
+ }
+ }
+
+ selectTab(tab: Tab) {
+ //activate the tab the user clicked.
+ this.tabs.toArray().forEach(tab => {
+ tab.active = false;
+ if (this.hideIndicationOnTabChange && tab.indication) {
+ tab.indication = null;
+ }
+ });
+ tab.active = true;
+ this.tabChanged.emit(tab);
+ }
+
+ triggerTabChange(tabTitle) {
+ this.tabs.toArray().forEach(tab => {
+ tab.active = (tab.title == tabTitle) ? true : false;
+ });
+ }
+
+ setTabIndication(tabTitle:string, indication?:number) {
+ let selectedTab: Tab = this.tabs.toArray().find(tab => tab.title == tabTitle);
+ selectedTab.indication = indication || null;
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts b/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts
new file mode 100644
index 0000000000..36c7335fde
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts
@@ -0,0 +1,35 @@
+import { Component, NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+
+import { Tabs } from './tabs.component';
+import { Tab } from './tab/tab.component';
+
+
+@NgModule({
+ imports: [BrowserModule],
+ declarations: [Tabs, Tab],
+ bootstrap: [],
+ exports: [Tabs, Tab]
+})
+export class TabModule { }
+
+/** README: **/
+
+/** USAGE Example:
+ *In page.module.ts: import TabModule
+ *In HTML:
+ *<tabs tabStyle="class-goes-here" (tabChanged)="tabChangedEvent($event) [hideIndicationOnTabChange]="optional-boolean">
+ * <tab [tabTitle]="'Tab 1'">Content of tab 1</tab>
+ * <tab tabTitle="Tab 2" >Content of tab 2</tab>
+ * ...
+ *</tabs>
+ */
+
+/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized)
+ * Existing options:
+ * tabStyle="round-tabs" will provide generic rounded tab look
+ *
+ * To create or override styles:
+ * Parent div has class ".tabs". Each tab has class ".tab". Active tab has class ".active".
+ * Use /deep/ or >>> prefix to override styles via other components stylesheets
+ */ \ No newline at end of file