From c0df135876a97a54c557c2cecc6430f2d9c563fe Mon Sep 17 00:00:00 2001 From: Brian Lambert Date: Fri, 14 Jun 2024 20:06:20 -0500 Subject: [PATCH] Reworked and consolidated Data Explorer closed UI (#3549) --- .../positronDataExplorerClosed.css | 37 +++++++++++--- .../positronDataExplorerClosed.tsx | 48 +++++++----------- .../positronDataExplorer.css | 37 -------------- .../positronDataExplorer.tsx | 49 ++----------------- .../browser/positronDataExplorerEditor.css | 4 ++ .../browser/positronDataExplorerEditor.tsx | 27 +--------- 6 files changed, 60 insertions(+), 142 deletions(-) rename src/vs/workbench/{contrib/positronDataExplorerEditor/browser => browser/positronDataExplorer/components/dataExplorerClosed}/positronDataExplorerClosed.css (59%) rename src/vs/workbench/{contrib/positronDataExplorerEditor/browser => browser/positronDataExplorer/components/dataExplorerClosed}/positronDataExplorerClosed.tsx (55%) diff --git a/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerClosed.css b/src/vs/workbench/browser/positronDataExplorer/components/dataExplorerClosed/positronDataExplorerClosed.css similarity index 59% rename from src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerClosed.css rename to src/vs/workbench/browser/positronDataExplorer/components/dataExplorerClosed/positronDataExplorerClosed.css index ab4a9297fe3..a2f5dbf649f 100644 --- a/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerClosed.css +++ b/src/vs/workbench/browser/positronDataExplorer/components/dataExplorerClosed/positronDataExplorerClosed.css @@ -5,9 +5,9 @@ .positron-data-explorer-closed { top: 0; left: 0; - right: 0; - bottom: 0; z-index: 30; + width: 100%; + height: 100%; display: grid; position: absolute; background-color: transparent; @@ -20,10 +20,11 @@ color: white; display: flex; row-gap: 10px; - font-size: 16px; + font-size: 14px; cursor: pointer; padding: 25px 50px; border-radius: 6px; + text-align: center; flex-direction: column; grid-row: message / bottom-gutter; grid-column: message / right-gutter; @@ -34,7 +35,31 @@ } .positron-data-explorer-closed -.message -.message-line { - text-align: center; +.close-button { + display: flex; + font-size: 14px; + cursor: pointer; + padding: 8px 16px; + border-radius: 5px; + align-items: center; + justify-content: center; + border: 1px solid var(--vscode-positronModalDialog-buttonBorder); + color: var(--vscode-positronModalDialog-defaultButtonForeground); + background: var(--vscode-positronModalDialog-defaultButtonBackground); +} + +.positron-data-explorer-closed +.close-button:hover { + background: var(--vscode-positronModalDialog-defaultButtonHoverBackground); +} + +.positron-data-explorer-closed +.close-button:focus { + outline: none; +} + +.positron-data-explorer-closed +.close-button:focus-visible { + outline-offset: 2px; + outline: 1px solid var(--vscode-focusBorder); } diff --git a/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerClosed.tsx b/src/vs/workbench/browser/positronDataExplorer/components/dataExplorerClosed/positronDataExplorerClosed.tsx similarity index 55% rename from src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerClosed.tsx rename to src/vs/workbench/browser/positronDataExplorer/components/dataExplorerClosed/positronDataExplorerClosed.tsx index 134d2f62551..f8da21c3ee7 100644 --- a/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerClosed.tsx +++ b/src/vs/workbench/browser/positronDataExplorer/components/dataExplorerClosed/positronDataExplorerClosed.tsx @@ -11,14 +11,12 @@ import { PropsWithChildren } from 'react'; // eslint-disable-line no-duplicate-i // Other dependencies. import { localize } from 'vs/nls'; -import { PositronButton } from 'vs/base/browser/ui/positronComponents/button/positronButton'; +import { Button } from 'vs/base/browser/ui/positronComponents/button/button'; /** * PositronDataExplorerClosedProps interface. */ export interface PositronDataExplorerClosedProps { - languageName?: string; - displayName?: string; onClose: () => void; } @@ -28,38 +26,30 @@ export interface PositronDataExplorerClosedProps { * @returns The rendered component. */ export const PositronDataExplorerClosed = (props: PropsWithChildren) => { + // Constants. + const closeDataExplorer = localize( + 'positron.dataExplorerEditor.closeDataExplorer', + "Close Data Explorer" + ); + // Render. return (
- - {props.languageName && props.displayName && ( - <> -
- {(() => localize( - 'positron.dataExplorerEditor.dataDisplayName', - '{0} Data: {1}', - props.languageName, - props.displayName - ))()} -
-
- {(() => localize( - 'positron.dataExplorerEditor.isNoLongerAvailable', - 'Is no longer available' - ))()} -
- - )} -
+
+
{(() => localize( - 'positron.dataExplorerEditor.clickToClose', - "Click to close Data Explorer" + 'positron.dataExplorerEditor.thisObjectIsNoLongerAvailable', + 'This object is no longer available.' ))()}
- + +
); }; diff --git a/src/vs/workbench/browser/positronDataExplorer/positronDataExplorer.css b/src/vs/workbench/browser/positronDataExplorer/positronDataExplorer.css index 545414e45c4..84dfca05a1a 100644 --- a/src/vs/workbench/browser/positronDataExplorer/positronDataExplorer.css +++ b/src/vs/workbench/browser/positronDataExplorer/positronDataExplorer.css @@ -13,40 +13,3 @@ background-color: var(--vscode-positronDataExplorer-background); grid-template-rows: [action-bar] 32px [data-explorer-panel] 1fr [end]; } - -.positron-data-explorer-overlay { - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 30; - display: grid; - position: absolute; - background-color: transparent; - grid-template-rows: [top-gutter] 1fr [message] max-content [bottom-gutter] 1fr [end]; - grid-template-columns: [left-gutter] 1fr [message] max-content [right-gutter] 1fr [end]; -} - -.positron-data-explorer-overlay -.message { - color: white; - display: flex; - row-gap: 10px; - font-size: 16px; - cursor: pointer; - padding: 25px 50px; - border-radius: 6px; - flex-direction: column; - grid-row: message / bottom-gutter; - grid-column: message / right-gutter; - box-shadow: 0 0 8px 2px var(--vscode-widget-shadow); - color: var(--vscode-positronModalDialog-foreground); - border: 1px solid var(--vscode-positronModalDialog-border); - background-color: var(--vscode-positronModalDialog-background); -} - -.positron-data-explorer-overlay -.message -.message-line { - text-align: center; -} diff --git a/src/vs/workbench/browser/positronDataExplorer/positronDataExplorer.tsx b/src/vs/workbench/browser/positronDataExplorer/positronDataExplorer.tsx index b990788b237..f9d40006242 100644 --- a/src/vs/workbench/browser/positronDataExplorer/positronDataExplorer.tsx +++ b/src/vs/workbench/browser/positronDataExplorer/positronDataExplorer.tsx @@ -10,16 +10,15 @@ import * as React from 'react'; import { PropsWithChildren, useEffect, useState } from 'react'; // eslint-disable-line no-duplicate-imports // Other dependencies. -import { localize } from 'vs/nls'; import { DisposableStore } from 'vs/base/common/lifecycle'; import { ILayoutService } from 'vs/platform/layout/browser/layoutService'; import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService'; -import { PositronButton } from 'vs/base/browser/ui/positronComponents/button/positronButton'; import { ActionBar } from 'vs/workbench/browser/positronDataExplorer/components/actionBar/actionBar'; import { PositronActionBarServices } from 'vs/platform/positronActionBar/browser/positronActionBarState'; import { PositronDataExplorerContextProvider } from 'vs/workbench/browser/positronDataExplorer/positronDataExplorerContext'; import { DataExplorerPanel } from 'vs/workbench/browser/positronDataExplorer/components/dataExplorerPanel/dataExplorerPanel'; import { IPositronDataExplorerInstance } from 'vs/workbench/services/positronDataExplorer/browser/interfaces/positronDataExplorerInstance'; +import { PositronDataExplorerClosed } from 'vs/workbench/browser/positronDataExplorer/components/dataExplorerClosed/positronDataExplorerClosed'; /** * PositronDataExplorerServices interface. @@ -51,26 +50,16 @@ export interface PositronDataExplorerProps extends PositronDataExplorerConfigura export const PositronDataExplorer = (props: PropsWithChildren) => { // State hooks. const [closed, setClosed] = useState(false); - const [displayName, setDisplayName] = useState(''); // Main useEffect. useEffect(() => { // Create the disposable store for cleanup. const disposableStore = new DisposableStore(); - // Add the onDidUpdateBackendState event handler. - disposableStore.add( - props.instance.dataExplorerClientInstance.onDidUpdateBackendState(backendState => { - setDisplayName(backendState.display_name); - }) - ); - // Add the onDidClose event handler. - disposableStore.add( - props.instance.onDidClose(() => { - setClosed(true); - }) - ); + disposableStore.add(props.instance.onDidClose(() => { + setClosed(true); + })); // Return the cleanup function that will dispose of the event handlers. return () => disposableStore.dispose(); @@ -82,35 +71,7 @@ export const PositronDataExplorer = (props: PropsWithChildren - {closed && ( -
- -
- {(() => localize( - 'positron.dataExplorer.dataDisplayName', - '{0} Data: {1}', - props.instance.languageName, - displayName - ))()} -
-
- {(() => localize( - 'positron.dataExplorer.isNoLongerAvailable', - 'Is no longer available' - ))()} -
-
- {(() => localize( - 'positron.dataExplorer.clickToClose', - "Click to close Data Explorer" - ))()} -
- -
- )} + {closed && }
); diff --git a/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerEditor.css b/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerEditor.css index 3f502c9d1fb..f687729d8ec 100644 --- a/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerEditor.css +++ b/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerEditor.css @@ -1,3 +1,7 @@ /*--------------------------------------------------------------------------------------------- * Copyright (C) 2023-2024 Posit Software, PBC. All rights reserved. *--------------------------------------------------------------------------------------------*/ + +.positron-data-explorer-container { + position: relative; +} diff --git a/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerEditor.tsx b/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerEditor.tsx index bdd3f2ee05c..423d9c6239a 100644 --- a/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerEditor.tsx +++ b/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerEditor.tsx @@ -29,9 +29,9 @@ import { IEditorGroup } from 'vs/workbench/services/editor/common/editorGroupsSe import { PositronDataExplorer } from 'vs/workbench/browser/positronDataExplorer/positronDataExplorer'; import { IReactComponentContainer, ISize, PositronReactRenderer } from 'vs/base/browser/positronReactRenderer'; import { PositronDataExplorerUri } from 'vs/workbench/services/positronDataExplorer/common/positronDataExplorerUri'; -import { PositronDataExplorerClosed } from 'vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerClosed'; import { IPositronDataExplorerService } from 'vs/workbench/services/positronDataExplorer/browser/interfaces/positronDataExplorerService'; import { PositronDataExplorerEditorInput } from 'vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerEditorInput'; +import { PositronDataExplorerClosed } from 'vs/workbench/browser/positronDataExplorer/components/dataExplorerClosed/positronDataExplorerClosed'; /** * IPositronDataExplorerEditorOptions interface. @@ -65,16 +65,6 @@ export class PositronDataExplorerEditor extends EditorPane implements IPositronD */ private _positronReactRenderer?: PositronReactRenderer; - /** - * Gets or sets the last language name that was displayed by this PositronDataExplorerEditor. - */ - private _lastLanguageName?: string; - - /** - * Gets or sets the last display name that was displayed by this PositronDataExplorerEditor. - */ - private _lastDisplayName?: string; - /** * Gets or sets the width. This value is set in layoutBody and is used to implement the * IReactComponentContainer interface. @@ -235,7 +225,6 @@ export class PositronDataExplorerEditor extends EditorPane implements IPositronD // Create the Positron data explorer container. this._positronDataExplorerContainer = DOM.$('.positron-data-explorer-container'); - this._positronDataExplorerContainer.tabIndex = 0; } /** @@ -314,9 +303,6 @@ export class PositronDataExplorerEditor extends EditorPane implements IPositronD // If the Positron data explorer instance was found, render the PositronDataExplorer // component. Otherwise, render the PositronDataExplorerClosed component. if (positronDataExplorerInstance) { - // Set the last language name. - this._lastLanguageName = positronDataExplorerInstance.languageName; - // Render the PositronDataExplorer. this._positronReactRenderer.render( ); - // Add the onDidUpdateBackendState event handler. - this._positronReactRenderer.register( - positronDataExplorerInstance.dataExplorerClientInstance. - onDidUpdateBackendState(backendState => - // Set the last display name. - this._lastDisplayName = backendState.display_name - ) - ); - // Add the onDidRequestFocus event handler. this._positronReactRenderer.register( positronDataExplorerInstance.onDidRequestFocus(() => @@ -350,8 +327,6 @@ export class PositronDataExplorerEditor extends EditorPane implements IPositronD } else { this._positronReactRenderer.render( this._group.closeEditor(this.input)} /> );