From 350fbca4c812f6a9c67d496c56f110c1b613e2e0 Mon Sep 17 00:00:00 2001 From: Colin Grant Date: Thu, 19 Aug 2021 19:27:49 -0600 Subject: [PATCH] Use CSS to control ViewContainerPart toolbar visibility Signed-off-by: Colin Grant --- CHANGELOG.md | 1 + .../src/browser/shell/tab-bar-toolbar.tsx | 2 + .../core/src/browser/style/view-container.css | 10 ++++ packages/core/src/browser/view-container.ts | 51 ++++--------------- 4 files changed, 23 insertions(+), 41 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b37bf69c3cb78..654c27774deba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ - [core] registering toolbar items for commands that explicitly target a `ViewContainer` rather than a child widget may not behave as expected. Such registrations should be made in the `ViewContainer` by overriding the `updateToolbarItems` method and using the `registerToolbarItem` utility. See the modifications to the `scm` and `vsx-registry` packages in the PR for examples. [#9798](https://github.com/eclipse-theia/theia/pull/9798) - [vsx-registry] `VSXExtensionsContribution` no longer implements `TabBarToolbarContribution` and is not bound as such. Extensions of the class that expect such behavior should reimplement it with caution. See caveats in PR. [#9798](https://github.com/eclipse-theia/theia/pull/9798) - [core] `handleExpansionToggleDblClickEvent` in `TreeWidget` can no longer be overridden. Instead, `doHandleExpansionToggleDblClickEvent` can be overridden. [#9877](https://github.com/eclipse-theia/theia/pull/9877) +- [core] `ViewContainerPart` methods and properties related to hiding and showing toolbar removed: `toHideToolbar`, `hideToolbar`, `showToolbar`, `toolbarHidden`. `ViewContainerPart` toolbars are now hidden or shown using CSS properties. [#9935](https://github.com/eclipse-theia/theia/pull/9935) ## v1.16.0 - 7/29/2021 diff --git a/packages/core/src/browser/shell/tab-bar-toolbar.tsx b/packages/core/src/browser/shell/tab-bar-toolbar.tsx index 52a0f1d03f5b5..0f0310ca9cd10 100644 --- a/packages/core/src/browser/shell/tab-bar-toolbar.tsx +++ b/packages/core/src/browser/shell/tab-bar-toolbar.tsx @@ -417,6 +417,8 @@ export class TabBarToolbar extends ReactWidget { renderMoreContextMenu(anchor: Anchor): any { const menuPath = ['TAB_BAR_TOOLBAR_CONTEXT_MENU']; const toDisposeOnHide = new DisposableCollection(); + this.addClass('menu-open'); + toDisposeOnHide.push(Disposable.create(() => this.removeClass('menu-open'))); for (const item of this.more.values()) { // Register a submenu for the item, if the group is in format `//.../` if (item.group?.includes('/')) { diff --git a/packages/core/src/browser/style/view-container.css b/packages/core/src/browser/style/view-container.css index 54f69957bf2ee..8d60e1db9ad38 100644 --- a/packages/core/src/browser/style/view-container.css +++ b/packages/core/src/browser/style/view-container.css @@ -128,3 +128,13 @@ background-size: var(--theia-icon-size); line-height: var(--theia-icon-size); } + +.theia-view-container-part-title { + display: none; +} + +.theia-view-container-part-title.menu-open, +.p-Widget.part:not(.collapsed):hover .header .theia-view-container-part-title, +.p-Widget.part:not(.collapsed):focus-within .header .theia-view-container-part-title { + display: flex; +} diff --git a/packages/core/src/browser/view-container.ts b/packages/core/src/browser/view-container.ts index 97d4fb257be26..b100f537dcd64 100644 --- a/packages/core/src/browser/view-container.ts +++ b/packages/core/src/browser/view-container.ts @@ -705,6 +705,8 @@ export class ViewContainerPart extends BaseWidget { protected readonly onDidFocusEmitter = new Emitter(); readonly onDidFocus = this.onDidFocusEmitter.event; + protected readonly toolbar: TabBarToolbar; + protected _collapsed: boolean; uncollapsedSize: number | undefined; @@ -735,8 +737,13 @@ export class ViewContainerPart extends BaseWidget { this.body = body; this.toNoDisposeWrapped = this.toDispose.push(wrapped); + this.toolbar = this.toolbarFactory(); + this.toolbar.addClass('theia-view-container-part-title'); + this.toDispose.pushAll([ disposable, + this.toolbar, + this.toolbarRegistry.onDidChange(() => this.toolbar.updateTarget(this.wrapped)), this.collapsedEmitter, this.contextMenuEmitter, this.onTitleChangedEmitter, @@ -766,6 +773,7 @@ export class ViewContainerPart extends BaseWidget { return; } this._collapsed = collapsed; + this.node.classList.toggle('collapsed', collapsed); if (collapsed && this.wrapped.node.contains(document.activeElement)) { this.header.focus(); } @@ -899,36 +907,6 @@ export class ViewContainerPart extends BaseWidget { }; } - protected toolbar: TabBarToolbar | undefined; - - protected readonly toHideToolbar = new DisposableCollection(); - hideToolbar(): void { - this.toHideToolbar.dispose(); - } - - showToolbar(): void { - if (this.toolbarHidden) { - return; - } - this.toDisposeOnDetach.push(this.toHideToolbar); - - const toolbar = this.toolbarFactory(); - toolbar.addClass('theia-view-container-part-title'); - this.toHideToolbar.push(toolbar); - - Widget.attach(toolbar, this.header); - this.toHideToolbar.push(Disposable.create(() => Widget.detach(toolbar))); - - this.toolbar = toolbar; - this.toHideToolbar.push(Disposable.create(() => this.toolbar = undefined)); - - this.toolbar.updateTarget(this.wrapped); - } - - get toolbarHidden(): boolean { - return !this.toHideToolbar.disposed || this.titleHidden; - } - protected onResize(msg: Widget.ResizeMessage): void { if (this.wrapped.isAttached && !this.collapsed) { MessageLoop.sendMessage(this.wrapped, Widget.ResizeMessage.UnknownSize); @@ -937,23 +915,12 @@ export class ViewContainerPart extends BaseWidget { } protected onUpdateRequest(msg: Message): void { - if (this.collapsed) { - this.hideToolbar(); - } else if (this.node.matches(':hover')) { - this.showToolbar(); - } if (this.wrapped.isAttached && !this.collapsed) { MessageLoop.sendMessage(this.wrapped, msg); } super.onUpdateRequest(msg); } - protected onBeforeAttach(msg: Message): void { - super.onBeforeAttach(msg); - this.addEventListener(this.node, 'mouseenter', () => this.showToolbar()); - this.addEventListener(this.node, 'mouseleave', () => this.hideToolbar()); - } - protected onAfterAttach(msg: Message): void { if (!this.wrapped.isAttached) { MessageLoop.sendMessage(this.wrapped, Widget.Msg.BeforeAttach); @@ -961,11 +928,13 @@ export class ViewContainerPart extends BaseWidget { this.body.insertBefore(this.wrapped.node, null); MessageLoop.sendMessage(this.wrapped, Widget.Msg.AfterAttach); } + Widget.attach(this.toolbar, this.header); super.onAfterAttach(msg); } protected onBeforeDetach(msg: Message): void { super.onBeforeDetach(msg); + Widget.detach(this.toolbar); if (this.wrapped.isAttached) { MessageLoop.sendMessage(this.wrapped, Widget.Msg.BeforeDetach); this.wrapped.node.parentNode!.removeChild(this.wrapped.node);