Fixing tabbing logic for tab headers (#19770)

* 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

View File

@@ -1118,8 +1118,8 @@ export class Designer extends Disposable implements IThemable {
private saveUIState(): void {
if (this._input) {
this._input.designerUIState = {
activeContentTabId: this._contentTabbedPanel.activeTabId,
activeScriptTabId: this._scriptTabbedPannel.activeTabId
activeContentTabId: this._contentTabbedPanel.selectedTabId,
activeScriptTabId: this._scriptTabbedPannel.selectedTabId
};
}
}

View File

@@ -45,14 +45,14 @@ export function attachPanelStyler(widget: IThemable, themeService: IThemeService
export function attachTabbedPanelStyler(widget: IThemable, themeService: IThemeService) {
return attachStyler(themeService, {
titleActiveForeground: PANEL_ACTIVE_TITLE_FOREGROUND,
titleActiveBorder: PANEL_ACTIVE_TITLE_BORDER,
titleInactiveForeground: PANEL_INACTIVE_TITLE_FOREGROUND,
titleSelectedForeground: PANEL_ACTIVE_TITLE_FOREGROUND,
titleSelectedBorder: PANEL_ACTIVE_TITLE_BORDER,
titleUnSelectedForeground: PANEL_INACTIVE_TITLE_FOREGROUND,
focusBorder: cr.focusBorder,
outline: cr.activeContrastBorder,
activeBackgroundForVerticalLayout: VERTICAL_TAB_ACTIVE_BACKGROUND,
selectedBackgroundForVerticalLayout: VERTICAL_TAB_ACTIVE_BACKGROUND,
border: DASHBOARD_BORDER,
activeTabContrastBorder: cr.activeContrastBorder
selectedTabContrastBorder: cr.activeContrastBorder
}, widget);
}

View File

@@ -149,8 +149,8 @@ export class DashboardNavSection extends DashboardTab implements OnDestroy, OnCh
public layout() {
if (this._tabs) {
const activeTabId = this._panel.getActiveTab;
const localtab = this._tabs.find(i => i.id === activeTabId);
const selectedTabId = this._panel.getSelectedTab;
const localtab = this._tabs.find(i => i.id === selectedTabId);
this._cd.detectChanges();
localtab.layout();
}