Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Align tabbar styling to vscode #10908

Merged
merged 6 commits into from
Apr 11, 2022
Merged

Align tabbar styling to vscode #10908

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9eda175
Align tabbar styling to vscode
msujew Mar 9, 2022
0d02ba9
Add `tab-activeBorderTop` back
msujew Mar 28, 2022
49bb6bd
Support "active" tabbars in main and bottom area
msujew Apr 5, 2022
12dd01a
Replace `border-top` with `box-shadow`
msujew Apr 8, 2022
235ec55
Use `unfocusedActiveBorder` color
msujew Apr 8, 2022
aeb6c00
Use `tab.hoverBackground` and `tab.hoverBorder` colors
msujew Apr 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions packages/core/src/browser/common-frontend-contribution.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1474,10 +1474,6 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
},
{
id: 'tab.activeBorderTop',
defaults: {
dark: 'focusBorder',
light: 'focusBorder'
},
description: 'Border to the top of an active tab. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.'
},
{
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/browser/shell/application-shell.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -690,6 +690,7 @@ export class ApplicationShell extends Widget {
this.collapseBottomPanel();
}
const widgets = toArray(this.bottomPanel.widgets());
this.bottomPanel.markActiveTabBar(widgets[0]?.title);
if (bottomPanel.pinned && bottomPanel.pinned.length === widgets.length) {
widgets.forEach((a, i) => {
if (bottomPanel.pinned![i]) {
Expand All @@ -706,6 +707,9 @@ export class ApplicationShell extends Widget {
this.mainPanel.restoreLayout(mainPanel);
this.registerWithFocusTracker(mainPanel.main);
const widgets = toArray(this.mainPanel.widgets());
// We don't store information about the last active tabbar
// So we simply mark the first as being active
this.mainPanel.markActiveTabBar(widgets[0]?.title);
if (mainPanelPinned && mainPanelPinned.length === widgets.length) {
widgets.forEach((a, i) => {
if (mainPanelPinned[i]) {
Expand Down
16 changes: 16 additions & 0 deletions packages/core/src/browser/shell/theia-dock-panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { inject } from 'inversify';
import { Emitter, environment } from '../../common';

export const MAXIMIZED_CLASS = 'theia-maximized';
export const ACTIVE_TABBAR_CLASS = 'theia-tabBar-active';
const VISIBLE_MENU_MAXIMIZED_CLASS = 'theia-visible-menu-maximized';

export const MAIN_AREA_ID = 'theia-main-content-panel';
Expand Down Expand Up @@ -106,6 +107,7 @@ export class TheiaDockPanel extends DockPanel {
markAsCurrent(title: Title<Widget> | undefined): void {
this.toDisposeOnMarkAsCurrent.dispose();
this._currentTitle = title;
this.markActiveTabBar(title);
if (title) {
const resetCurrent = () => this.markAsCurrent(undefined);
title.owner.disposed.connect(resetCurrent);
Expand All @@ -115,17 +117,31 @@ export class TheiaDockPanel extends DockPanel {
}
}

markActiveTabBar(title?: Title<Widget>): void {
const tabBars = toArray(this.tabBars());
tabBars.forEach(tabBar => tabBar.removeClass(ACTIVE_TABBAR_CLASS));
const activeTabBar = title && this.findTabBar(title);
if (activeTabBar) {
activeTabBar.addClass(ACTIVE_TABBAR_CLASS);
} else if (tabBars.length > 0) {
// At least one tabbar needs to be active
tabBars[0].addClass(ACTIVE_TABBAR_CLASS);
}
}

override addWidget(widget: Widget, options?: DockPanel.IAddOptions): void {
if (this.mode === 'single-document' && widget.parent === this) {
return;
}
super.addWidget(widget, options);
this.widgetAdded.emit(widget);
this.markActiveTabBar(widget.title);
}

override activateWidget(widget: Widget): void {
super.activateWidget(widget);
this.widgetActivated.emit(widget);
this.markActiveTabBar(widget.title);
}

protected override onChildRemoved(msg: Widget.ChildMessage): void {
Expand Down
18 changes: 7 additions & 11 deletions packages/core/src/browser/style/sidepanel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,19 +90,11 @@
border-top-color: transparent;
}

.p-TabBar.theia-app-left .p-TabBar-tab.p-mod-current.theia-mod-active {
border-left: var(--theia-panel-border-width) solid var(--theia-focusBorder);
}

.p-TabBar.theia-app-right .p-TabBar-tab.p-mod-current {
border-right: var(--theia-panel-border-width) solid var(--theia-activityBar-activeBorder);
border-top-color: transparent;
}

.p-TabBar.theia-app-right .p-TabBar-tab.p-mod-current.theia-mod-active {
border-right: var(--theia-panel-border-width) solid var(--theia-focusBorder);
}

.p-TabBar.theia-app-sides .p-TabBar-tabLabel,
.p-TabBar.theia-app-sides .p-TabBar-tabCloseIcon {
display: none;
Expand Down Expand Up @@ -285,16 +277,20 @@

#theia-bottom-content-panel .p-TabBar-tab:not(.p-mod-current) {
color: var(--theia-panelTitle-inactiveForeground);
border-top: var(--theia-border-width) solid var(--theia-panel-background);
border-top: var(--theia-border-width) solid transparent;
msujew marked this conversation as resolved.
Show resolved Hide resolved
}

#theia-bottom-content-panel .p-TabBar-tab.p-mod-current {
color: var(--theia-panelTitle-activeForeground);
border-top: var(--theia-border-width) solid var(--theia-panelTitle-activeBorder);
}

#theia-bottom-content-panel .p-TabBar-tab.p-mod-current.theia-mod-active {
border-top-color: var(--theia-focusBorder);
#theia-bottom-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab .theia-tab-icon-label {
color: var(--theia-tab-unfocusedInactiveForeground);
}

#theia-bottom-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab.p-mod-current .theia-tab-icon-label {
color: var(--theia-tab-unfocusedActiveForeground);
}

/*-----------------------------------------------------------------------------
Expand Down
57 changes: 7 additions & 50 deletions packages/core/src/browser/style/tabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,65 +80,22 @@

#theia-main-content-panel .p-TabBar .p-TabBar-tab {
border-right: 1px solid var(--theia-tab-border);
background: var(--theia-tab-inactiveBackground);
color: var(--theia-tab-inactiveForeground);
}

#theia-main-content-panel .p-TabBar .p-TabBar-tab:hover.theia-mod-active {
background: var(--theia-tab-hoverBackground) !important;
box-shadow: var(--theia-tab-hoverBorder) 0 -1px inset !important;
}

#theia-main-content-panel .p-TabBar .p-TabBar-tab:hover:not(.theia-mod-active) {
background: var(--theia-tab-unfocusedHoverBackground) !important;
box-shadow: var(--theia-tab-unfocusedHoverBorder) 0 -1px inset !important;
}

/* active tab in an active group */
body.theia-editor-highlightModifiedTabs
#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current.theia-mod-active.theia-mod-dirty {
border-top: 1px solid var(--theia-tab-activeModifiedBorder);
}

#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current.theia-mod-active {
#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current {
background: var(--theia-tab-activeBackground);
color: var(--theia-tab-activeForeground);
border-top: 1px solid var(--theia-tab-activeBorderTop);
border-bottom: 1px solid var(--theia-tab-activeBorder);
}

/* inactive tab in an active group */
body.theia-editor-highlightModifiedTabs
#theia-main-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current).theia-mod-active.theia-mod-dirty {
border-top: 1px solid var(--theia-tab-inactiveModifiedBorder);
box-shadow: 0 1px 0 var(--theia-tab-activeBorderTop) inset, 0 -1px 0 var(--theia-tab-activeBorder) inset;
}

#theia-main-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current).theia-mod-active {
background: var(--theia-tab-inactiveBackground);
color: var(--theia-tab-inactiveForeground);
#theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab .p-TabBar-tabLabel {
color: var(--theia-tab-unfocusedInactiveForeground);
}

/* active tab in an unfocused group */
body.theia-editor-highlightModifiedTabs
#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current:not(.theia-mod-active).theia-mod-dirty {
border-top: 1px solid var(--theia-tab-unfocusedActiveModifiedBorder);
}

#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current:not(.theia-mod-active) {
background: var(--theia-tab-unfocusedActiveBackground);
#theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab.p-mod-current .p-TabBar-tabLabel {
color: var(--theia-tab-unfocusedActiveForeground);
border-top: 1px solid var(--theia-tab-unfocusedActiveBorderTop);
border-bottom: 1px solid var(--theia-tab-unfocusedActiveBorder);
}

/* inactive tab in an unfocused group */
body.theia-editor-highlightModifiedTabs
#theia-main-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current):not(.theia-mod-active).theia-mod-dirty {
border-top: 1px solid var(--theia-tab-unfocusedInactiveModifiedBorder);
}

#theia-main-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current):not(.theia-mod-active) {
background: var(--theia-tab-inactiveBackground);
color: var(--theia-tab-inactiveForeground);
border-top: 1px solid var(--theia-tab-inactiveBackground);
}

.p-TabBar.theia-app-centers {
Expand Down