diff --git a/news/2 Fixes/8423.md b/news/2 Fixes/8423.md new file mode 100644 index 000000000000..8879d8ae89ad --- /dev/null +++ b/news/2 Fixes/8423.md @@ -0,0 +1 @@ +Add a white backtground for most non-text mimetypes. This lets stuff like Atlair look good in dark mode. \ No newline at end of file diff --git a/news/2 Fixes/8424.md b/news/2 Fixes/8424.md new file mode 100644 index 000000000000..735307663e6d --- /dev/null +++ b/news/2 Fixes/8424.md @@ -0,0 +1 @@ +Export to python button is blue in native editor. \ No newline at end of file diff --git a/src/datascience-ui/interactive-common/cellOutput.tsx b/src/datascience-ui/interactive-common/cellOutput.tsx index 71306f9f39d7..0b8167dc4874 100644 --- a/src/datascience-ui/interactive-common/cellOutput.tsx +++ b/src/datascience-ui/interactive-common/cellOutput.tsx @@ -249,71 +249,72 @@ export class CellOutput extends React.Component { const mimeBundle = copy.data as nbformat.IMimeBundle; let data: nbformat.MultilineString | JSONObject = mimeBundle[mimeType]; - switch (mimeType) { - case 'text/plain': - case 'text/html': - return { - mimeType, - data: concatMultilineStringOutput(data as nbformat.MultilineString), - isText, - isError, - renderWithScrollbars: true, - extraButton, - doubleClick: noop + // Text based mimeTypes don't get a white background + if (/^text\//.test(mimeType)) { + return { + mimeType, + data: concatMultilineStringOutput(data as nbformat.MultilineString), + isText, + isError, + renderWithScrollbars: true, + extraButton, + doubleClick: noop + }; + } else if (mimeType === 'image/svg+xml' || mimeType === 'image/png') { + // If we have a png or svg enable the plot viewer button + // There should be two mime bundles. Well if enablePlotViewer is turned on. See if we have both + const svg = mimeBundle['image/svg+xml']; + const png = mimeBundle['image/png']; + const buttonTheme = this.props.themeMatplotlibPlots ? this.props.baseTheme : 'vscode-light'; + let doubleClick: () => void = noop; + if (svg && png) { + // Save the svg in the extra button. + const openClick = () => { + this.props.expandImage(svg.toString()); }; + extraButton = ( +
+ + + +
+ ); - case 'image/svg+xml': - case 'image/png': - // There should be two mime bundles. Well if enablePlotViewer is turned on. See if we have both - const svg = mimeBundle['image/svg+xml']; - const png = mimeBundle['image/png']; - const buttonTheme = this.props.themeMatplotlibPlots ? this.props.baseTheme : 'vscode-light'; - let doubleClick: () => void = noop; - if (svg && png) { - // Save the svg in the extra button. - const openClick = () => { - this.props.expandImage(svg.toString()); - }; - extraButton = ( -
- - - -
- ); - - // Switch the data to the png - data = png; - mimeType = 'image/png'; - - // Switch double click to do the same thing as the extra button - doubleClick = openClick; - } - - // return the image - // If not theming plots then wrap in a span - return { - mimeType, - data, - isText, - isError, - renderWithScrollbars, - extraButton, - doubleClick, - outputSpanClassName: this.props.themeMatplotlibPlots ? undefined : 'cell-output-plot-background' - }; + // Switch the data to the png + data = png; + mimeType = 'image/png'; - default: - return { - mimeType, - data, - isText, - isError, - renderWithScrollbars, - extraButton, - doubleClick: noop - }; + // Switch double click to do the same thing as the extra button + doubleClick = openClick; + } + + // return the image + // If not theming plots then wrap in a span + return { + mimeType, + data, + isText, + isError, + renderWithScrollbars, + extraButton, + doubleClick, + outputSpanClassName: this.props.themeMatplotlibPlots ? undefined : 'cell-output-plot-background' + }; + } else { + // For anything else just return it with a white plot background. This lets stuff like vega look good in + // dark mode + return { + mimeType, + data, + isText, + isError, + renderWithScrollbars, + extraButton, + doubleClick: noop, + outputSpanClassName: this.props.themeMatplotlibPlots ? undefined : 'cell-output-plot-background' + }; } + } catch (e) { return { data: e.toString(), diff --git a/src/datascience-ui/native-editor/nativeEditor.less b/src/datascience-ui/native-editor/nativeEditor.less index b7cb646ca774..f279b457301e 100644 --- a/src/datascience-ui/native-editor/nativeEditor.less +++ b/src/datascience-ui/native-editor/nativeEditor.less @@ -302,15 +302,6 @@ color: var(--override-foreground, var(--vscode-editor-foreground)); } -.save-button { - background: var(--vscode-button-background); - color: var(--vscode-button-foreground); - padding: 2px; - border: none; - cursor: pointer; - margin:2px 4px; -} - .native-button { margin-top: 3px; } diff --git a/src/datascience-ui/native-editor/nativeEditor.tsx b/src/datascience-ui/native-editor/nativeEditor.tsx index c86362942562..804382da9c1d 100644 --- a/src/datascience-ui/native-editor/nativeEditor.tsx +++ b/src/datascience-ui/native-editor/nativeEditor.tsx @@ -249,7 +249,7 @@ export class NativeEditor extends React.Component - + diff --git a/src/test/datascience/manualTestFiles/manualTestFile.py b/src/test/datascience/manualTestFiles/manualTestFile.py index 393deee6a965..feac6e1c2a8c 100644 --- a/src/test/datascience/manualTestFiles/manualTestFile.py +++ b/src/test/datascience/manualTestFiles/manualTestFile.py @@ -1,4 +1,4 @@ -# To run this file either conda or pip install the following: jupyter, numpy, matplotlib, pandas, tqdm, bokeh +# To run this file either conda or pip install the following: jupyter, numpy, matplotlib, pandas, tqdm, bokeh, vega_datasets, altair, vega # %% Basic Imports import numpy as np @@ -18,13 +18,13 @@ p.circle([1,2,3,4,5], [6,7,2,4,5], size=15, line_color="navy", fill_color="orange", fill_alpha=0.5) show(p) -#%% Progress bar +# %% Progress bar from tqdm import trange import time for i in trange(100): time.sleep(0.01) -#%% [markdown] +# %% [markdown] # # Heading # ## Sub-heading # *bold*,_italic_,`monospace` @@ -39,20 +39,32 @@ # # [Link](http://www.microsoft.com) -#%% Magics +# %% Magics %whos -#%% Some extra variable types for the variable explorer +# %% Some extra variable types for the variable explorer myNparray = np.array([['Bob', 1, 2, 3], ['Alice', 4, 5, 6], ['Gina', 7, 8, 9]]) myDataFrame = pd.DataFrame(myNparray, columns=['name', 'b', 'c', 'd']) mySeries = myDataFrame['name'] myList = [x ** 2 for x in range(0, 100000)] myString = 'testing testing testing' -#%% +# %% Latex %%latex \begin{align} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{align} + +# %% Altair (vega) +import altair as alt +from vega_datasets import data + +iris = data.iris() + +alt.Chart(iris).mark_point().encode( + x='petalLength', + y='petalWidth', + color='species' +)