vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add support for horizontal tabs into cor-tabs

Browse source
This commit is contained in:
Joseph Schorr 2017-05-08 16:46:46 -04:00
parent 191e5d94d4
commit ea13469d9d
13 changed files with 116 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/js/directives/ui/cor-tabs/cor-tab-panel.component.html
View file

@ -1,3 +1,3 @@
<div class="co-main-content-panel co-tab-panel co-fx-box-shadow-heavy">
<div class="co-tab-container" ng-transclude></div>
<div class="co-tab-container" ng-class="$ctrl.isVertical() ? 'vertical': 'horizontal'" ng-transclude></div>
</div>

10
static/js/directives/ui/cor-tabs/cor-tab-panel.component.ts
View file

@ -18,6 +18,9 @@ export class CorTabPanelComponent implements OnDestroy {
// If 'true', the currently selected tab will be remembered via a cookie and not the page URL.
@Input('@') public rememberCookie: string;
// If 'true', the tabs will be displayed vertically, as opposed to horizontally.
@Input('@') public verticalTabs: string;
// The tabs under this tabs component.
private tabs: CorTabComponent[] = [];
@ -45,6 +48,13 @@ export class CorTabPanelComponent implements OnDestroy {
}
}
/**
* isVertical returns true if the tabs in this panel are displayed vertically.
*/
public isVertical(): boolean {
return this.verticalTabs == 'true';
}
public tabClicked(tab: CorTabComponent): void {
this.setActiveTab(tab);
}

7
static/js/directives/ui/cor-tabs/cor-tab.component.html
View file

@ -1,10 +1,11 @@
<li ng-class="{'active': $ctrl.isActive}">
<li class="cor-tab-itself" ng-class="{'active': $ctrl.isActive, 'co-top-tab': !$ctrl.parent.isVertical()}">
<a ng-click="$ctrl.tabClicked()">
<span data-title="{{ ::$ctrl.tabTitle }}"
<span class="cor-tab-icon"
data-title="{{ ::($ctrl.parent.isVertical() ? $ctrl.tabTitle : '') }}"
data-placement="right"
data-container="body"
style="display: inline-block"
bs-tooltip><span ng-transclude/></span><span class="visible-xs-inline xs-label">{{ ::$ctrl.tabTitle }}</span>
bs-tooltip><span ng-transclude/></span><span class="horizontal-label">{{ ::$ctrl.tabTitle }}</span>
</span>
</a>
</li>

2
static/js/directives/ui/cor-tabs/cor-tabs.component.html
View file

@ -1,4 +1,4 @@
<span class="co-tab-element" ng-class="$ctrl.isClosed ? 'closed' : 'open'">
<span class="xs-toggle" ng-click="$ctrl.toggleClosed($event)"></span>
<ul class="co-tabs col-md-1" ng-transclude></ul>
<ul ng-class="$ctrl.parent.isVertical() ? 'co-tabs col-md-1' : 'co-top-tab-bar'" ng-transclude></ul>
</span>

6
static/js/directives/ui/cor-tabs/cor-tabs.component.ts
View file

@ -1,5 +1,6 @@
import { Component, Host, Inject } from 'ng-metadata/core';
import { Component, Input, Output, Inject, EventEmitter, Host } from 'ng-metadata/core';
import { CorTabComponent } from './cor-tab.component';
import { CorTabPanelComponent } from './cor-tab-panel.component';
/**
@ -16,6 +17,9 @@ export class CorTabsComponent {
// If true, the tabs are in a closed state. Only applies in the mobile view.
private isClosed: boolean = true;
constructor(@Host() @Inject(CorTabPanelComponent) private parent: CorTabPanelComponent) {
}
private toggleClosed(e): void {
this.isClosed = !this.isClosed;
}