Skip to content

Commit fc2397d

Browse files
siddharthkpsiddharthkp
authored
experiment: version in status bar (codesandbox#3690)
* experiment-status-bar-version * move version + skeleton * remove version from sidebar * the lengths you have to go * equal spacing on both sides
1 parent 3f2d78b commit fc2397d

File tree

4 files changed

+94
-23
lines changed

4 files changed

+94
-23
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Skeleton/elements.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,15 @@ export const SkeletonDevtoolsNavigator = styled.div`
9999
${props => props.theme.colors?.sideBar.border || 'rgba(0, 0, 0, 0.5)'};
100100
`;
101101
export const SkeletonDevtoolsIframe = styled.div`
102-
height: 100%;
102+
height: calc(100% - 22px);
103103
background-color: #fff;
104104
`;
105+
export const SkeletonStatusBar = styled.div`
106+
position: fixed;
107+
bottom: 0;
108+
right: 0;
109+
left: 0;
110+
height: 22px;
111+
background-color: ${props =>
112+
props.theme.colors?.statusBar.background || 'rgba(0, 0, 0, 0.5)'};
113+
`;

‎packages/app/src/app/pages/Sandbox/Editor/Skeleton/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
SkeletonExplorer,
1414
SkeletonTextBlock,
1515
SkeletonWrapper,
16+
SkeletonStatusBar,
1617
} from './elements';
1718

1819
export const ContentSkeleton = ({ style }) => (
@@ -36,6 +37,7 @@ export const ContentSkeleton = ({ style }) => (
3637
</SkeletonDevtoolsNavigator>
3738
<SkeletonDevtoolsIframe />
3839
</SkeletonDevtools>
40+
<SkeletonStatusBar />
3941
</SkeletonWrapper>
4042
);
4143

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Delete.tsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { MouseEvent } from 'react';
2-
import VERSION from '@codesandbox/common/lib/version';
32
import { useOvermind } from 'app/overmind';
43
import css from '@styled-system/css';
5-
import { Button, Stack, Text, Element, Link } from '@codesandbox/components';
4+
import { Button, Stack, Element, Link } from '@codesandbox/components';
65
import { SpectrumLogo, GithubIcon, TwitterIcon } from './icons';
76

87
const links = [
@@ -64,13 +63,6 @@ export const Delete = () => {
6463
</Link>
6564
))}
6665
</Stack>
67-
<Text
68-
size={1}
69-
block
70-
css={css({ color: 'sideBar.border', textAlign: 'right' })}
71-
>
72-
{VERSION}
73-
</Text>
7466
</Element>
7567
</Element>
7668
);

‎packages/app/src/app/pages/Sandbox/Editor/index.tsx

Lines changed: 81 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,19 @@ import Fullscreen from '@codesandbox/common/lib/components/flex/Fullscreen';
22
import getTemplateDefinition from '@codesandbox/common/lib/templates';
33
import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
44
import { REDESIGNED_SIDEBAR } from '@codesandbox/common/lib/utils/feature-flags';
5-
import { ThemeProvider as NewThemeProvider } from '@codesandbox/components';
5+
import {
6+
ThemeProvider as NewThemeProvider,
7+
Stack,
8+
Element,
9+
} from '@codesandbox/components';
10+
import css from '@styled-system/css';
611
import { useOvermind } from 'app/overmind';
712
import { templateColor } from 'app/utils/template-color';
813
import React, { useEffect, useRef, useState } from 'react';
914
import SplitPane from 'react-split-pane';
1015
import styled, { ThemeProvider } from 'styled-components';
16+
import VERSION from '@codesandbox/common/lib/version';
17+
import VisuallyHidden from '@reach/visually-hidden';
1118

1219
import Content from './Content';
1320
import { Container } from './elements';
@@ -188,18 +195,33 @@ const Editor = () => {
188195
) : null}
189196
</div>
190197

191-
<StatusBar
192-
style={{
193-
position: 'fixed',
194-
display: statusBar ? 'block' : 'none',
195-
bottom: 0,
196-
left: 0,
197-
right: 0,
198-
height: STATUS_BAR_SIZE,
199-
}}
200-
className="monaco-workbench mac nopanel"
201-
ref={statusbarEl}
202-
/>
198+
<NewThemeProvider theme={localState.theme.vscodeTheme}>
199+
<Stack
200+
justify="space-between"
201+
align="center"
202+
className=".monaco-workbench"
203+
css={css({
204+
backgroundColor: 'statusBar.background',
205+
color: 'statusBar.foreground',
206+
position: 'fixed',
207+
display: statusBar ? 'flex' : 'none',
208+
bottom: 0,
209+
right: 0,
210+
left: 0,
211+
width: '100%',
212+
height: STATUS_BAR_SIZE,
213+
})}
214+
>
215+
<FakeStatusBarText>
216+
Version: {VERSION.split('-').pop()}
217+
</FakeStatusBarText>
218+
<StatusBar
219+
className="monaco-workbench mac nopanel"
220+
ref={statusbarEl}
221+
style={{ width: 'calc(100% - 126px)' }}
222+
/>
223+
</Stack>
224+
</NewThemeProvider>
203225
</Fullscreen>
204226

205227
<ForkFrozenSandboxModal />
@@ -212,3 +234,49 @@ const Editor = () => {
212234
};
213235

214236
export default Editor;
237+
238+
/** To use the same styles + behavior of the vscode status bar,
239+
* we recreate the html structure outside of the status bar
240+
* the code is garbage
241+
*/
242+
/* eslint-disable */
243+
const FakeStatusBarText = props => {
244+
const [copied, setCopied] = React.useState(false);
245+
246+
const copyText = () => {
247+
const inputElement = document.querySelector('#status-bar-version');
248+
// @ts-ignore it's not even a button!
249+
inputElement.select();
250+
document.execCommand('copy');
251+
setCopied(true);
252+
window.setTimeout(() => setCopied(false), 2000);
253+
};
254+
255+
return (
256+
<Element
257+
as="span"
258+
className="part statusbar"
259+
css={css({
260+
width: 'auto !important',
261+
minWidth: '120px',
262+
color: 'statusBar.foreground',
263+
})}
264+
{...props}
265+
>
266+
<span className="statusbar-item" style={{ paddingLeft: '10px' }}>
267+
<a
268+
title="Copy version"
269+
style={{ color: 'inherit', padding: '0 5px' }}
270+
onClick={copyText}
271+
>
272+
{copied ? 'Copied!' : props.children}
273+
</a>
274+
275+
<VisuallyHidden>
276+
<input id="status-bar-version" defaultValue={props.children} />
277+
</VisuallyHidden>
278+
</span>
279+
</Element>
280+
);
281+
};
282+
/* eslint-enable */

0 commit comments

Comments
 (0)