Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f89a1d1

Browse files
SaraVieirasiddharthkp
SaraVieira
and
siddharthkp
authored
Update icons in preview header (codesandbox#3223)
* add icons * add icons * swap colors * update design * border fix * move to ts * make naming better * fork of sara's PR (codesandbox#3215) * revert some colors * revert some colors Co-authored-by: Siddharth Kshetrapal <[email protected]>
1 parent 855407d commit f89a1d1

File tree

16 files changed

+236
-172
lines changed

16 files changed

+236
-172
lines changed

‎packages/common/src/components/Preview/AddressBar/elements.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ export const Container = styled.div`
99

1010
export const InputContainer = styled.div`
1111
input {
12-
border-radius: 4px;
12+
border-radius: 2px;
1313
outline: none;
14-
/* border: 1px solid #ccc; */
1514
border: 0px solid transparent;
1615
padding: 0.2rem 0.5rem;
17-
color: black;
1816
width: 100%;
17+
height: 26px;
18+
font-size: 13px;
1919
color: ${props =>
2020
props.theme['input.foreground'] || 'rgba(255, 255, 255, 0.8)'};
2121
box-sizing: border-box;

‎packages/common/src/components/Preview/Navigator/ExternalOpen.js

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎packages/common/src/components/Preview/Navigator/HorizontalAlign.js

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎packages/common/src/components/Preview/Navigator/VerticalAlign.js

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎packages/common/src/components/Preview/Navigator/elements.js

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎packages/common/src/components/Preview/Navigator/elements.ts

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import styled, { css } from 'styled-components';
2+
3+
export const Container = styled.div`
4+
display: flex;
5+
background-color: ${props =>
6+
props.theme['editor.background'] || props.theme.background()};
7+
padding: 0.25rem;
8+
align-items: center;
9+
line-height: 1;
10+
/* box-shadow: 0 1px 3px #ddd; */
11+
height: 35px;
12+
min-height: 35px;
13+
box-sizing: border-box;
14+
z-index: 2;
15+
`;
16+
17+
export const Icons = styled.div`
18+
display: flex;
19+
`;
20+
21+
export const Icon = styled.button<{ moduleView?: boolean }>`
22+
display: inline-block;
23+
border: none;
24+
background-color: transparent;
25+
font-size: 1.5rem;
26+
line-height: 0.5;
27+
margin: 0 0.25rem;
28+
vertical-align: middle;
29+
text-align: center;
30+
padding: 0;
31+
outline: none;
32+
cursor: pointer;
33+
34+
${({ moduleView, theme }) =>
35+
!moduleView &&
36+
css`
37+
&:hover svg path,
38+
&:hover svg rect {
39+
fill: ${theme.light ? 'black' : 'white'};
40+
}
41+
`}
42+
43+
/* // TODO: Replace with new theme */
44+
${({ moduleView, theme }) =>
45+
moduleView &&
46+
css`
47+
${theme.light
48+
? css`
49+
svg rect[fill='#E6E6E6'] {
50+
fill: #343434;
51+
}
52+
svg rect[fill='#343434'] {
53+
fill: #e6e6e6;
54+
}
55+
&:hover svg rect {
56+
fill: black;
57+
}
58+
`
59+
: css`
60+
&:hover svg rect:not([fill='#E6E6E6']) {
61+
fill: #757575;
62+
}
63+
`}
64+
`}
65+
`;
66+
67+
export const IconWithBackground = styled(Icon)`
68+
border-radius: 2px;
69+
background-color: ${({ theme }) =>
70+
theme['input.background'] || theme.background()};
71+
`;
72+
73+
export const AddressBarContainer = styled.div`
74+
width: 100%;
75+
box-sizing: border-box;
76+
margin: 0 0.25rem;
77+
`;

‎packages/common/src/components/Preview/Navigator/external-open.svg

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎packages/common/src/components/Preview/Navigator/horizontal-align.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎packages/common/src/components/Preview/Navigator/index.tsx

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
import React from 'react';
2+
import { ModuleViewIcon } from '../../icons/ModuleView';
3+
import { ProjectViewIcon } from '../../icons/ProjectView';
4+
import { NewWindowIcon } from '../../icons/NewWindow';
5+
import { BackIcon } from '../../icons/Back';
6+
import { ForwardIcon } from '../../icons/Forward';
7+
import { ReloadIcon } from '../../icons/Reload';
28

3-
import LeftIcon from 'react-icons/lib/fa/angle-left';
4-
import RightIcon from 'react-icons/lib/fa/angle-right';
5-
import RefreshIcon from 'react-icons/lib/md/refresh';
6-
7-
import Switch from '../../Switch';
89
import Tooltip from '../../Tooltip';
910

1011
import AddressBar from '../AddressBar';
11-
import ExternalIcon from './ExternalOpen';
1212
import {
1313
Container,
1414
Icons,
1515
Icon,
1616
AddressBarContainer,
17-
SwitchContainer,
17+
IconWithBackground,
1818
} from './elements';
1919

2020
export interface NavigatorProps {
2121
url: string;
2222
onChange: (val: string) => void;
2323
onConfirm: () => void;
24-
isProjectView: boolean;
2524
onRefresh: () => void;
2625
toggleProjectView?: () => void;
2726
onBack?: () => void;
2827
onForward?: () => void;
2928
openNewWindow?: () => void;
3029
zenMode?: boolean;
30+
isProjectView: boolean;
3131
}
3232

3333
function Navigator({
@@ -46,13 +46,13 @@ function Navigator({
4646
<Container className="flying-container-handler" style={{ cursor: 'move' }}>
4747
<Icons>
4848
<Icon aria-label="Go Back" disabled={!onBack} onClick={onBack}>
49-
<LeftIcon />
49+
<BackIcon />
5050
</Icon>
5151
<Icon aria-label="Go Forward" disabled={!onForward} onClick={onForward}>
52-
<RightIcon />
52+
<ForwardIcon />
5353
</Icon>
5454
<Icon aria-label="Refresh" onClick={onRefresh}>
55-
<RefreshIcon />
55+
<ReloadIcon />
5656
</Icon>
5757
</Icons>
5858
<AddressBarContainer
@@ -62,32 +62,26 @@ function Navigator({
6262
>
6363
<AddressBar url={url} onChange={onChange} onConfirm={onConfirm} />
6464
</AddressBarContainer>
65-
{openNewWindow && (
66-
<Icon
67-
style={{ fontSize: 18, padding: 4, marginRight: zenMode ? 8 : 16 }}
68-
onClick={openNewWindow}
69-
>
70-
<Tooltip delay={0} content="Open In New Window">
71-
<ExternalIcon />
72-
</Tooltip>
73-
</Icon>
74-
)}
7565
{!zenMode && toggleProjectView && (
76-
<SwitchContainer>
66+
<IconWithBackground
67+
onClick={toggleProjectView}
68+
moduleView={!isProjectView}
69+
>
7770
<Tooltip
7871
delay={0}
7972
content={isProjectView ? 'Project View' : 'Current Module View'}
8073
placement="left"
8174
>
82-
<Switch
83-
offMode
84-
secondary
85-
small
86-
right={!isProjectView}
87-
onClick={toggleProjectView}
88-
/>
75+
{isProjectView ? <ProjectViewIcon /> : <ModuleViewIcon />}
76+
</Tooltip>
77+
</IconWithBackground>
78+
)}
79+
{openNewWindow && (
80+
<IconWithBackground onClick={openNewWindow}>
81+
<Tooltip delay={0} content="Open In New Window">
82+
<NewWindowIcon />
8983
</Tooltip>
90-
</SwitchContainer>
84+
</IconWithBackground>
9185
)}
9286
</Container>
9387
);

‎packages/common/src/components/Preview/Navigator/vertical-align.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎packages/common/src/components/icons/Back.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import IconBase from 'react-icons/IconBase';
3+
4+
export const BackIcon = props => (
5+
<IconBase fill="none" viewBox="0 0 24 24" {...props}>
6+
<path
7+
fill="#757575"
8+
d="M9.728 12.5l5.855-5.664L14.72 6 8 12.5l6.72 6.5.863-.886z"
9+
/>
10+
</IconBase>
11+
);

‎packages/common/src/components/icons/Forward.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import IconBase from 'react-icons/IconBase';
3+
4+
export const ForwardIcon = props => (
5+
<IconBase fill="none" viewBox="0 0 24 24" {...props}>
6+
<path
7+
fill="#757575"
8+
d="M13.855 12.5L8 18.164l.864.836 6.719-6.5L8.863 6 8 6.886z"
9+
/>
10+
</IconBase>
11+
);

0 commit comments

Comments
 (0)