ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-23 17:23:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

Support icons in panel (#895)

Browse Source 
* support icons in panel

* formatting

* address Smitha comments

* address comments
This commit is contained in:
Abbie Petchtes
2018-03-13 13:48:17 -07:00
committed by GitHub
parent 383d74ceb4
commit f3c7b2416b
10 changed files with 96 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/sql/base/browser/ui/panel/media/panel.css
View File

@@ -35,6 +35,7 @@ panel {
.tabbedPanel .tabList .tab {
cursor: pointer;
margin: auto;
}
.tabbedPanel .tabList .tab .tabLabel {
@@ -43,6 +44,16 @@ panel {
padding-bottom: 4px;
}
.tabbedPanel .tabList .tab .tabLabel.icon {
background-repeat: no-repeat;
background-position: center 10px;
background-size: 25px;
line-height: 15px;
padding-top: 40px;
display: inline-block;
text-transform: none;
}
.tabbedPanel .tabList .tab-header {
padding-left: 10px;
padding-right: 10px;

6
src/sql/base/browser/ui/panel/panel.component.ts
View File

@@ -24,6 +24,7 @@ export interface IPanelOptions {
*/
showTabsWhenOne?: boolean;
layout?: NavigationBarLayout;
showIcon?: boolean;
}
export enum NavigationBarLayout {
@@ -33,7 +34,8 @@ export enum NavigationBarLayout {
const defaultOptions: IPanelOptions = {
showTabsWhenOne: true,
layout: NavigationBarLayout.horizontal
layout: NavigationBarLayout.horizontal,
showIcon: false
};
const verticalLayout = 'vertical';
@@ -49,7 +51,7 @@ let idPool = 0;
<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title" #titleContainer>
<div class="tabList" #tabList>
<div *ngFor="let tab of _tabs">
<tab-header [tab]="tab" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'> </tab-header>
<tab-header [tab]="tab" [showIcon]="options.showIcon" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'> </tab-header>
</div>
</div>
<div class="title-actions">

1
src/sql/base/browser/ui/panel/tab.component.ts
View File

@@ -23,6 +23,7 @@ export class TabComponent implements OnDestroy {
@Input() public title: string;
@Input() public canClose: boolean;
@Input() public actions: Array<Action>;
@Input() public iconClass: string;
public _active = false;
@Input() public identifier: string;
@Input() private visibilityType: 'if' | 'visibility' = 'if';

26
src/sql/base/browser/ui/panel/tabHeader.component.ts
View File

@@ -21,7 +21,7 @@ import { CloseTabAction } from './tabActions';
template: `
<div #actionHeader class="tab-header" style="display: flex; flex: 0 0; flex-direction: row;" [class.active]="tab.active" tabindex="0" (keyup)="onKey($event)">
<span class="tab" (click)="selectTab(tab)">
<a class="tabLabel" [class.active]="tab.active">
<a class="tabLabel" [class.active]="tab.active" #tabLabel>
{{tab.title}}
</a>
</span>
@@ -31,6 +31,7 @@ import { CloseTabAction } from './tabActions';
})
export class TabHeaderComponent extends Disposable implements AfterContentInit, OnDestroy {
@Input() public tab: TabComponent;
@Input() public showIcon: boolean;
@Output() public onSelectTab: EventEmitter<TabComponent> = new EventEmitter<TabComponent>();
@Output() public onCloseTab: EventEmitter<TabComponent> = new EventEmitter<TabComponent>();
@@ -38,18 +39,29 @@ export class TabHeaderComponent extends Disposable implements AfterContentInit,
@ViewChild('actionHeader', { read: ElementRef }) private _actionHeaderRef: ElementRef;
@ViewChild('actionbar', { read: ElementRef }) private _actionbarRef: ElementRef;
@ViewChild('tabLabel', { read: ElementRef }) private _tabLabelRef: ElementRef;
constructor() {
super();
}
ngAfterContentInit(): void {
this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
if (this.tab.actions) {
this._actionbar.push(this.tab.actions, { icon: true, label: false });
if (this.tab.canClose || this.tab.actions) {
this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
if (this.tab.actions) {
this._actionbar.push(this.tab.actions, { icon: true, label: false });
}
if (this.tab.canClose) {
let closeAction = this._register(new CloseTabAction(this.closeTab, this));
this._actionbar.push(closeAction, { icon: true, label: false });
}
}
if (this.tab.canClose) {
let closeAction = this._register(new CloseTabAction(this.closeTab, this));
this._actionbar.push(closeAction, { icon: true, label: false });
let tabLabelcontainer = this._tabLabelRef.nativeElement as HTMLElement;
if (this.showIcon && this.tab.iconClass) {
tabLabelcontainer.className = 'tabLabel icon';
tabLabelcontainer.classList.add(this.tab.iconClass);
} else {
tabLabelcontainer.className = 'tabLabel';
}
}