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

more dashboard fixes (#9937)

Browse Source 
* unify the panel styles

* min-width

* min-width

* fix issues

* fix css selector
This commit is contained in:
Alan Ren
2020-04-13 13:20:32 -07:00
committed by GitHub
parent 3aa357629d
commit 8c491d36f4
3 changed files with 30 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,7 +24,7 @@ panel {
position: relative;
}
.tabbedPanel.vertical>.title {
.tabbedPanel.vertical > .title {
flex: 0 0 auto;
flex-direction: column;
height: 100%;
@@ -41,7 +41,6 @@ panel {
margin: 0 auto;
padding: 0;
justify-content: flex-start;
line-height: 35px;
white-space: nowrap;
flex: 1;
height: 100%;
@@ -50,17 +49,19 @@ panel {
.tabbedPanel .tabList .tab {
cursor: pointer;
margin: auto;
display: flex;
flex-flow: row;
}
.tabbedPanel.horizontal .tabList .tab .tabLabel {
.tabbedPanel.horizontal > .title .tabList .tab .tabLabel {
font-size: 12px;
font-weight: normal;
max-width: 100px;
}
.tabbedPanel.vertical .tabList .tab .tabLabel {
.tabbedPanel.vertical >.title .tabList .tab .tabLabel {
font-size: 13px;
padding-bottom: 0px;
font-weight: normal;
max-width: 200px;
}
.tabbedPanel .tabList .tab .tabLabel {
@@ -69,6 +70,14 @@ panel {
font-weight: 600;
}
.tabbedPanel.horizontal > .title .tabList .tab .tabLabel,
.tabbedPanel.vertical > .title .tabList .tab .tabLabel {
text-overflow: ellipsis;
overflow: hidden;
border: 0px;
font-weight: normal;
}
.tabbedPanel .tabList .tab-header {
display: flex;
padding-left: 5px;
@@ -124,23 +133,29 @@ panel {
flex-direction: row;
}
.tabbedPanel.vertical>.title {
.tabbedPanel.vertical > .title {
flex: 0 0 auto;
flex-direction: column;
height: 100%;
}
.tabbedPanel>.tab-content {
.tabbedPanel > .tab-content {
flex: 1 1 auto;
position: relative;
}
.tabbedPanel.vertical>.title > .tabContainer .tabList {
.tabbedPanel.vertical > .title > .tabContainer .tabList {
flex-flow: column;
height: calc(100% - 35px);
overflow: auto;
line-height: 35px;
}
.tabbedPanel.horizontal > .title > .tabContainer .tabList {
flex-flow: row;
width: 100%;
overflow: auto;
line-height: 35px;
}
.tabbedPanel > .title > .tabContainer > .monaco-scrollable-element {

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

@@ -58,7 +58,7 @@ let idPool = 0;
<div *ngIf="options.layout === NavigationBarLayout.vertical" class="vertical-tab-action-container">
<button [attr.aria-expanded]="_tabExpanded" [title]="toggleTabPanelButtonAriaLabel" [attr.aria-label]="toggleTabPanelButtonAriaLabel" [ngClass]="toggleTabPanelButtonCssClass" tabindex="0" (click)="toggleTabPanel()"></button>
</div>
<div [style.display]="_tabExpanded ? 'flex': 'none'" [attr.aria-hidden]="_tabExpanded ? 'false': 'true'" class="tabList" role="tablist" scrollable [horizontalScroll]="AutoScrollbarVisibility" [verticalScroll]="HiddenScrollbarVisibility" [scrollYToX]="true" (keydown)="onKey($event)">
<div [style.display]="_tabExpanded ? 'flex': 'none'" [attr.aria-hidden]="_tabExpanded ? 'false': 'true'" class="tabList" role="tablist" (keydown)="onKey($event)">
<div role="presentation" *ngFor="let tab of _tabs">
<ng-container *ngIf="tab.type!=='group-header'">
<tab-header role="presentation" [active]="_activeTab === tab" [tab]="tab" [showIcon]="options.showIcon" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'></tab-header>

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

@@ -20,14 +20,11 @@ import { CloseTabAction } from 'sql/base/browser/ui/panel/tabActions';
selector: 'tab-header',
template: `
<div #actionHeader role="tab" [attr.aria-selected]="tab.active" [attr.aria-label]="tab.title" class="tab-header" style="flex: 0 0; flex-direction: row;" [class.active]="tab.active" tabindex="0" (click)="selectTab(tab)" (keyup)="onKey($event)">
<span class="tab" role="presentation">
<div role="presentation">
<a #tabIcon></a>
<a class="tabLabel" [class.active]="tab.active" #tabLabel>
</a>
</div>
</span>
<span #actionbar style="flex: 0 0 auto; align-self: end; margin-top: auto; margin-bottom: auto;" ></span>
<div class="tab" role="presentation">
<a #tabIcon></a>
<a class="tabLabel" [class.active]="tab.active" [title]="tab.title" #tabLabel></a>
</div>
<div #actionbar style="flex: 0 0 auto; align-self: end; margin-top: auto; margin-bottom: auto;" ></div>
</div>
`
})