Skip to content

Commit bb6cf19

Browse files
rchiodorchiodo
authored
Fix plot viewer button images (#6337)
* Fix issue 6336 * Add news entry * Fix linter problem
1 parent 7bcd309 commit bb6cf19

13 files changed

Lines changed: 119 additions & 99 deletions

File tree

‎news/2 Fixes/6336.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Add new plot viewer button images and fix button colors in different themes.

‎package-lock.json‎

Lines changed: 21 additions & 57 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/datascience-ui/plot/mainPanel.tsx‎

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { createDeferred } from '../../client/common/utils/async';
1111
import { RegExpValues } from '../../client/datascience/constants';
1212
import { IPlotViewerMapping, PlotViewerMessages } from '../../client/datascience/plotting/types';
1313
import { IMessageHandler, PostOffice } from '../react-common/postOffice';
14+
import { getSettings } from '../react-common/settingsReactSide';
1415
import { StyleInjector } from '../react-common/styleInjector';
1516
import { SvgList } from '../react-common/svgList';
1617
import { SvgViewer } from '../react-common/svgViewer';
@@ -40,6 +41,7 @@ interface IMainPanelState {
4041
ids: string[];
4142
currentImage: number;
4243
tool: Tool;
44+
forceDark?: boolean;
4345
}
4446

4547
const PanKeyboardSize = 10;
@@ -83,14 +85,16 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
8385
}
8486

8587
public render = () => {
88+
const baseTheme = this.computeBaseTheme();
8689
return (
8790
<div className='main-panel' role='group' ref={this.container}>
8891
<StyleInjector
8992
expectingDark={this.props.baseTheme !== 'vscode-light'}
93+
darkChanged={this.darkChanged}
9094
postOffice={this.postOffice} />
91-
{this.renderToolbar()}
92-
{this.renderThumbnails()}
93-
{this.renderPlot()}
95+
{this.renderToolbar(baseTheme)}
96+
{this.renderThumbnails(baseTheme)}
97+
{this.renderPlot(baseTheme)}
9498
</div>
9599
);
96100
}
@@ -109,6 +113,33 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
109113
return false;
110114
}
111115

116+
private darkChanged = (newDark: boolean) => {
117+
// update our base theme if allowed. Don't do this
118+
// during testing as it will mess up the expected render count.
119+
if (!this.props.testMode) {
120+
this.setState(
121+
{
122+
forceDark: newDark
123+
}
124+
);
125+
}
126+
}
127+
128+
private computeBaseTheme() : string {
129+
// If we're ignoring, always light
130+
if (getSettings && getSettings().ignoreVscodeTheme) {
131+
return 'vscode-light';
132+
}
133+
134+
// Otherwise see if the style injector has figured out
135+
// the theme is dark or not
136+
if (this.state.forceDark !== undefined) {
137+
return this.state.forceDark ? 'vscode-dark' : 'vscode-light';
138+
}
139+
140+
return this.props.baseTheme;
141+
}
142+
112143
private onKeyDown = (event: KeyboardEvent) => {
113144
if (!event.ctrlKey) {
114145
switch (event.key) {
@@ -175,19 +206,19 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
175206
});
176207
}
177208

178-
private renderThumbnails() {
209+
private renderThumbnails(_baseTheme: string) {
179210
return (
180211
<SvgList images={this.state.thumbnails} currentImage={this.state.currentImage} imageClicked={this.imageClicked}/>
181212
);
182213
}
183214

184-
private renderToolbar() {
215+
private renderToolbar(baseTheme: string) {
185216
const prev = this.state.currentImage > 0 ? this.prevClicked : undefined;
186217
const next = this.state.currentImage < this.state.images.length - 1 ? this.nextClicked : undefined;
187218
const deleteClickHandler = this.state.currentImage !== -1 ? this.deleteClicked : undefined;
188219
return (
189220
<Toolbar
190-
baseTheme={this.props.baseTheme}
221+
baseTheme={baseTheme}
191222
changeTool={this.changeTool}
192223
exportButtonClicked={this.exportCurrent}
193224
copyButtonClicked={this.copyCurrent}
@@ -196,7 +227,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
196227
deleteButtonClicked={deleteClickHandler} />
197228
);
198229
}
199-
private renderPlot() {
230+
private renderPlot(baseTheme: string) {
200231
// Render current plot
201232
const currentPlot = this.state.currentImage >= 0 ? this.state.images[this.state.currentImage] : undefined;
202233
const currentSize = this.state.currentImage >= 0 ? this.state.sizes[this.state.currentImage] : undefined;
@@ -205,7 +236,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
205236
if (currentPlot && currentSize && currentId) {
206237
return (
207238
<SvgViewer
208-
baseTheme={this.props.baseTheme}
239+
baseTheme={baseTheme}
209240
svg={currentPlot}
210241
id={currentId}
211242
size={currentSize}

‎src/datascience-ui/react-common/images/Next/next-inverse.svg‎

Lines changed: 2 additions & 4 deletions
Loading

‎src/datascience-ui/react-common/images/Next/next.svg‎

Lines changed: 2 additions & 4 deletions
Loading

‎src/datascience-ui/react-common/images/Pan/pan.svg‎

Lines changed: 3 additions & 3 deletions
Loading

‎src/datascience-ui/react-common/images/Pan/pan_inverse.svg‎

Lines changed: 3 additions & 3 deletions
Loading

‎src/datascience-ui/react-common/images/Prev/previous-inverse.svg‎

Lines changed: 2 additions & 4 deletions
Loading

‎src/datascience-ui/react-common/images/Prev/previous.svg‎

Lines changed: 2 additions & 4 deletions
Loading

‎src/datascience-ui/react-common/images/Zoom/zoom.svg‎

Lines changed: 11 additions & 3 deletions
Loading

0 commit comments

Comments
 (0)