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

Fixing tabbing logic for tab headers (#19770)

Browse Source 
* Fixing tabbing logic for tab headers

* Renaming stuff
Making null checks concise
Adding comments

* Renaming css class and interfaces from active to selected

* Renaming styling classes and objects

* Changing tabbing logic to match w3 behavior

* Fixing focus logic in tab

* Adding helper comment

* Code cleanup
This commit is contained in:
Aasim Khan
2022-06-21 13:13:10 -07:00
committed by GitHub
parent f2c4e23f99
commit 15a611d4a4
9 changed files with 120 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/sql/base/browser/ui/panel/panel.ts
View File

@@ -16,14 +16,14 @@ import { Color } from 'vs/base/common/color';
import { isUndefinedOrNull } from 'vs/base/common/types';
export interface ITabbedPanelStyles {
titleActiveForeground?: Color;
titleActiveBorder?: Color;
titleInactiveForeground?: Color;
titleSelectedForeground?: Color;
titleSelectedBorder?: Color;
titleUnSelectedForeground?: Color;
focusBorder?: Color;
outline?: Color;
activeBackgroundForVerticalLayout?: Color;
selectedBackgroundForVerticalLayout?: Color;
border?: Color;
activeTabContrastBorder?: Color;
selectedTabContrastBorder?: Color;
}
export interface IPanelOptions {
@@ -108,7 +108,7 @@ export class TabbedPanel extends Disposable {
return this.parent;
}
public get activeTabId(): string | undefined {
public get selectedTabId(): string | undefined {
return this._shownTabId;
}
@@ -209,8 +209,8 @@ export class TabbedPanel extends Disposable {
if (this._shownTabId) {
const shownTab = this._tabMap.get(this._shownTabId);
if (shownTab) {
shownTab.label.classList.remove('active');
shownTab.header.classList.remove('active');
shownTab.label.classList.remove('selected');
shownTab.header.classList.remove('selected');
shownTab.header.setAttribute('aria-selected', 'false');
shownTab.header.tabIndex = -1;
if (shownTab.body) {
@@ -239,8 +239,8 @@ export class TabbedPanel extends Disposable {
}
this.body.appendChild(tab.body);
this.body.setAttribute('aria-labelledby', tab.tab.identifier);
tab.label.classList.add('active');
tab.header.classList.add('active');
tab.label.classList.add('selected');
tab.header.classList.add('selected');
tab.header.setAttribute('aria-selected', 'true');
this._onTabChange.fire(id);
if (tab.tab.view.onShow) {
@@ -329,27 +329,27 @@ export class TabbedPanel extends Disposable {
}`);
}
if (styles.titleActiveForeground && styles.titleActiveBorder) {
if (styles.titleSelectedForeground && styles.titleSelectedBorder) {
content.push(`
.tabbedPanel > .title .tabList .tab:hover .tabLabel,
.tabbedPanel > .title .tabList .tab .tabLabel.active {
color: ${styles.titleActiveForeground};
border-bottom-color: ${styles.titleActiveBorder};
.tabbedPanel > .title .tabList .tab .tabLabel.selected {
color: ${styles.titleSelectedForeground};
border-bottom-color: ${styles.titleSelectedBorder};
border-bottom-width: 2px;
}`);
}
if (styles.titleInactiveForeground) {
if (styles.titleUnSelectedForeground) {
content.push(`
.tabbedPanel > .title .tabList .tab .tabLabel {
color: ${styles.titleInactiveForeground};
color: ${styles.titleUnSelectedForeground};
}`);
}
if (styles.focusBorder && styles.titleActiveForeground) {
if (styles.focusBorder && styles.titleSelectedForeground) {
content.push(`
.tabbedPanel > .title .tabList .tab .tabLabel:focus {
color: ${styles.titleActiveForeground};
color: ${styles.titleSelectedForeground};
border-bottom-color: ${styles.focusBorder} !important;
border-bottom: 1px solid;
outline: none;
@@ -358,7 +358,7 @@ export class TabbedPanel extends Disposable {
if (styles.outline) {
content.push(`
.tabbedPanel > .title .tabList .tab-header.active,
.tabbedPanel > .title .tabList .tab-header.selected,
.tabbedPanel > .title .tabList .tab-header:hover {
outline-color: ${styles.outline};
outline-width: 1px;
@@ -367,7 +367,7 @@ export class TabbedPanel extends Disposable {
outline-offset: -5px;
}
.tabbedPanel > .title .tabList .tab-header:hover:not(.active) {
.tabbedPanel > .title .tabList .tab-header:hover:not(.selected) {
outline-style: dashed;
}`);
}