Skip to content

Commit

Permalink
Add extended tab bar preview option
Browse files Browse the repository at this point in the history
Add functionality to render more information on tab bar hover.
Also makes sure the feedback is styled be using the hoverService.
This currently applies to horizontal tab bars.
Right now the title and the caption will be rendered.
To not remove the old behavior this feature is enabled via the setting
`window.extendedTabBarPreview`.
Also added possibility to specify cssClasses to be added to a hover,
when requesting it from the HoverService.
This way special hovers, like the extended tab bar preview, can easily
be styled with CSS.

Contributed on behalf of STMicroelectronics
  • Loading branch information
sgraband committed Mar 27, 2023
1 parent 1ca8131 commit e49f09d
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 9 deletions.
6 changes: 6 additions & 0 deletions packages/core/src/browser/core-preferences.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,11 @@ export const corePreferenceSchema: PreferenceSchema = {
default: 'code',
markdownDescription: nls.localizeByDefault('Controls the dispatching logic for key presses to use either `code` (recommended) or `keyCode`.')
},
'window.extendedTabBarPreview': {
type: 'boolean',
default: false,
description: 'Controls whether more information about the tab should be displayed in horizontal tab bars.'
},
'window.menuBarVisibility': {
type: 'string',
enum: ['classic', 'visible', 'hidden', 'compact'],
Expand Down Expand Up @@ -241,6 +246,7 @@ export interface CoreConfiguration {
'breadcrumbs.enabled': boolean;
'files.encoding': string;
'keyboard.dispatch': 'code' | 'keyCode';
'window.extendedTabBarPreview': boolean;
'window.menuBarVisibility': 'classic' | 'visible' | 'hidden' | 'compact';
'window.title': string;
'window.titleSeparator': string;
Expand Down
10 changes: 9 additions & 1 deletion packages/core/src/browser/hover-service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,11 @@ export interface HoverRequest {
* if the specified content does not fit in the window next to the target element
*/
position: HoverPosition
/**
* Additional css classes that should be added to the hover box.
* Used to style certain boxes different e.g. for the extended tab preview.
*/
cssClasses?: string []
}

@injectable()
Expand Down Expand Up @@ -101,7 +106,10 @@ export class HoverService {

protected async renderHover(request: HoverRequest): Promise<void> {
const host = this.hoverHost;
const { target, content, position } = request;
const { target, content, position, cssClasses } = request;
if (cssClasses) {
host.classList.add(...cssClasses);
}
this.hoverTarget = target;
if (content instanceof HTMLElement) {
host.appendChild(content);
Expand Down
39 changes: 31 additions & 8 deletions packages/core/src/browser/shell/tab-bars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -157,9 +157,7 @@ export class TabBarRenderer extends TabBar.Renderer {
? nls.localizeByDefault('Unpin')
: nls.localizeByDefault('Close');

const hover = this.tabBar && this.tabBar.orientation === 'horizontal' ? {
title: title.caption
} : {
const hover = this.tabBar && (this.tabBar.orientation === 'horizontal' && !this.corePreferences?.['window.extendedTabBarPreview']) ? { title: title.caption } : {
onmouseenter: this.handleMouseEnterEvent
};

Expand Down Expand Up @@ -474,16 +472,41 @@ export class TabBarRenderer extends TabBar.Renderer {
return h.div({ className: baseClassName, style }, data.title.iconLabel);
}

protected renderExtendedTabBarPreview = (title: Title<Widget>) => {
const hoverBox = document.createElement('div');
hoverBox.classList.add('theia-horizontal-tabBar-hover-div');
const labelElement = document.createElement('p');
labelElement.classList.add('theia-horizontal-tabBar-hover-title');
labelElement.textContent = title.label;
hoverBox.append(labelElement);
if (title.caption) {
const captionElement = document.createElement('p');
captionElement.classList.add('theia-horizontal-tabBar-hover-caption');
captionElement.textContent = title.caption;
hoverBox.appendChild(captionElement);
}
return hoverBox;
};

protected handleMouseEnterEvent = (event: MouseEvent) => {
if (this.tabBar && this.hoverService && event.currentTarget instanceof HTMLElement) {
const id = event.currentTarget.id;
const title = this.tabBar.titles.find(t => this.createTabId(t) === id);
if (title) {
this.hoverService.requestHover({
content: title.caption,
target: event.currentTarget,
position: 'right'
});
if (this.tabBar.orientation === 'horizontal') {
this.hoverService.requestHover({
content: this.renderExtendedTabBarPreview(title),
target: event.currentTarget,
position: 'bottom',
cssClasses: ['extended-tab-preview']
});
} else {
this.hoverService.requestHover({
content: title.caption,
target: event.currentTarget,
position: 'right'
});
}
}
}
};
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/browser/style/hover-service.css
Original file line number Diff line number Diff line change
Expand Up @@ -93,3 +93,7 @@
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}

.theia-hover.extended-tab-preview {
border-radius: 10px;
}
16 changes: 16 additions & 0 deletions packages/core/src/browser/style/tabs.css
Original file line number Diff line number Diff line change
Expand Up @@ -414,3 +414,19 @@
flex-flow: row nowrap;
min-width: 100%;
}

.theia-horizontal-tabBar-hover-div {
margin: 0px 4px;
}

.theia-horizontal-tabBar-hover-title {
font-weight: bolder;
font-size: medium;
margin: 0px 0px;
}

.theia-horizontal-tabBar-hover-caption {
font-size: small;
margin: 0px 0px;
margin-top: 4px;
}

0 comments on commit e49f09d

Please sign in to comment.