fix the UI for nav bar (#937)

This commit is contained in:
Abbie Petchtes
2018-03-19 20:38:04 -07:00
committed by GitHub
parent 3c3d8417e9
commit fe496ab03b
2 changed files with 20 additions and 7 deletions

View File

@@ -44,14 +44,26 @@ panel {
padding-bottom: 4px;
}
.tabbedPanel .tabList .tab-header {
display: flex;
}
.tabbedPanel.vertical .tabList .tab-header {
display: block;
text-transform: none;
text-overflow: ellipsis;
overflow: hidden;
width: 63px;
height: 50px;
line-height: 45px;
}
.tabbedPanel .tabList .tab .tabLabel.icon {
background-repeat: no-repeat;
background-position: center 10px;
background-position: center center;
background-size: 25px;
line-height: 15px;
padding-top: 40px;
display: inline-block;
text-transform: none;
padding: 20px 20px;
line-height: 50px;
}
.tabbedPanel .tabList .tab-header {

View File

@@ -19,10 +19,9 @@ import { CloseTabAction } from './tabActions';
@Component({
selector: 'tab-header',
template: `
<div #actionHeader class="tab-header" style="display: flex; flex: 0 0; flex-direction: row;" [class.active]="tab.active" tabindex="0" (keyup)="onKey($event)">
<div #actionHeader class="tab-header" style="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" #tabLabel>
{{tab.title}}
</a>
</span>
<span #actionbar style="flex: 0 0 auto; align-self: end; margin-top: auto; margin-bottom: auto;" ></span>
@@ -62,7 +61,9 @@ export class TabHeaderComponent extends Disposable implements AfterContentInit,
tabLabelcontainer.classList.add(this.tab.iconClass);
} else {
tabLabelcontainer.className = 'tabLabel';
tabLabelcontainer.innerHTML = this.tab.title;
}
tabLabelcontainer.title = this.tab.title;
}
ngOnDestroy() {