Skip to content

Commit f1c4e02

Browse files
pvinispvinis
authored
Merge pull request #355 from zoontek/better-app-name-ux
2 parents 191c9c2 + 19eb7c4 commit f1c4e02

File tree

11 files changed

+117
-85
lines changed

11 files changed

+117
-85
lines changed

‎src/components/common/AppNameWarning.js‎

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

‎src/components/common/CopyFileButton.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React, { useState } from 'react'
2+
import styled from '@emotion/styled'
3+
import { Button, Popover } from 'antd'
4+
import { getFileApiURL, replaceWithProvidedAppName } from '../../utils'
5+
import { CopyOutlined } from '@ant-design/icons'
6+
import copy from 'copy-to-clipboard'
7+
8+
const popoverContentOpts = {
9+
default: 'Copy raw contents',
10+
copied: 'Copied!',
11+
}
12+
13+
const CopyFileButton = styled(
14+
({ open, version, path, packageName, appName, ...props }) => {
15+
const [popoverContent, setPopoverContent] = useState(
16+
popoverContentOpts.default
17+
)
18+
19+
if (!open) {
20+
return null
21+
}
22+
23+
return (
24+
<Popover content={popoverContent} trigger="hover">
25+
<Button
26+
{...props}
27+
type="ghost"
28+
icon={<CopyOutlined />}
29+
onBlur={() => {
30+
setPopoverContent(popoverContentOpts.default)
31+
}}
32+
onClick={() => {
33+
fetch(getFileApiURL({ packageName, version, path }))
34+
.then((response) => response.json())
35+
.then((json) => window.atob(json.content))
36+
.then((content) => replaceWithProvidedAppName(content, appName))
37+
.then((content) => copy(content))
38+
.then(() => setPopoverContent(popoverContentOpts.copied))
39+
}}
40+
/>
41+
</Popover>
42+
)
43+
}
44+
)`
45+
font-size: 13px;
46+
margin-left: 5px;
47+
`
48+
49+
export default CopyFileButton

‎src/components/common/Diff/DiffHeader.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard'
1414
import DiffCommentReminder from './DiffCommentReminder'
1515
import DownloadFileButton from '../DownloadFileButton'
1616
import ViewFileButton from '../ViewFileButton'
17+
import CopyFileButton from '../CopyFileButton'
1718

1819
export const testIDs = {
1920
collapseClickableArea: 'collapseClickableArea',
@@ -98,12 +99,6 @@ const BinaryBadge = ({ open, ...props }) =>
9899

99100
const defaultIconButtonStyle = `
100101
font-size: 13px;
101-
line-height: 0;
102-
border-width: 0px;
103-
width: 22px;
104-
height: 22px;
105-
margin: 5px 0;
106-
border-radius: 50%;
107102
`
108103

109104
const CompleteDiffButton = styled(({ open, onClick, ...props }) =>
@@ -307,6 +302,13 @@ const DiffHeader = ({
307302
path={newPath}
308303
packageName={packageName}
309304
/>
305+
<CopyFileButton
306+
open={hasDiff && type !== 'delete'}
307+
version={toVersion}
308+
path={newPath}
309+
packageName={packageName}
310+
appName={appName}
311+
/>
310312
<DownloadFileButton
311313
open={!hasDiff && type !== 'delete'}
312314
version={toVersion}

‎src/components/common/DownloadFileButton.js‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,19 @@
11
import React from 'react'
2-
import styled from '@emotion/styled'
32
import { Button } from 'antd'
43
import { DownloadOutlined } from '@ant-design/icons'
54
import { getBinaryFileURL } from '../../utils'
65

7-
const DownloadFileButton = styled(
8-
({ open, version, path, packageName, ...props }) => {
9-
return open ? (
10-
<Button
11-
{...props}
12-
type="ghost"
13-
shape="circle"
14-
icon={<DownloadOutlined />}
15-
target="_blank"
16-
href={getBinaryFileURL({ packageName, version, path })}
17-
/>
18-
) : null
19-
}
20-
)`
21-
color: #24292e;
22-
font-size: 12px;
23-
border-width: 0;
24-
&:hover,
25-
&:focus {
26-
color: #24292e;
27-
}
28-
`
6+
const DownloadFileButton = ({ open, version, path, packageName, ...props }) => {
7+
return open ? (
8+
<Button
9+
{...props}
10+
type="ghost"
11+
shape="circle"
12+
icon={<DownloadOutlined />}
13+
target="_blank"
14+
href={getBinaryFileURL({ packageName, version, path })}
15+
/>
16+
) : null
17+
}
2918

3019
export default DownloadFileButton

‎src/components/common/Select.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import styled from '@emotion/styled'
3-
import { Select as AntdSelect } from 'antd'
3+
import { Select as AntdSelect, Typography } from 'antd'
44

55
const { Option } = AntdSelect
66

@@ -13,7 +13,7 @@ const SelectBox = styled(AntdSelect)`
1313

1414
const Select = ({ title, options, ...props }) => (
1515
<SelectBoxContainer>
16-
<h4>{title}</h4>
16+
<Typography.Title level={5}>{title}</Typography.Title>
1717

1818
<SelectBox size="large" {...props}>
1919
{options.map((option) => (

‎src/components/common/Settings.js‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import React, { useState } from 'react'
2-
import { Popover, Button, Checkbox, Input, Radio } from 'antd'
2+
import { Popover, Button, Checkbox, Radio, Typography } from 'antd'
33
import { SHOW_LATEST_RCS } from '../../utils'
44
import styled from '@emotion/styled'
55
import { WindowsFilled } from '@ant-design/icons'
66
import { PACKAGE_NAMES, LANGUAGE_NAMES } from '../../constants'
77

8-
const InputContainer = styled.div({
9-
marginTop: '16px',
10-
})
11-
128
const SettingsButton = styled(Button)`
139
color: initial;
1410
`
@@ -35,21 +31,14 @@ const Settings = ({
3531
packageName,
3632
language,
3733
onChangePackageNameAndLanguage,
38-
appName,
39-
onChangeAppName,
4034
}) => {
4135
const [popoverVisibility, setVisibility] = useState(false)
42-
const [newAppName, setNewAppName] = useState(appName)
4336
const [newPackageName, setNewPackageName] = useState(packageName)
4437
const [newLanguage, setNewLanguage] = useState(language)
4538

4639
const handleClickChange = (visibility) => {
4740
setVisibility(visibility)
4841

49-
if (newAppName !== appName) {
50-
onChangeAppName(newAppName)
51-
}
52-
5342
const processedNewLanguage =
5443
newLanguage !== language && newPackageName === PACKAGE_NAMES.RNW
5544
? newLanguage
@@ -80,14 +69,6 @@ const Settings = ({
8069
<Checkbox value={SHOW_LATEST_RCS}>{SHOW_LATEST_RCS}</Checkbox>
8170
</div>
8271
</Checkbox.Group>
83-
<InputContainer>
84-
<h4>What's your app name?</h4>
85-
<Input
86-
value={newAppName}
87-
onChange={({ target }) => setNewAppName(target.value)}
88-
placeholder="MyAwesomeApp"
89-
/>
90-
</InputContainer>
9172
<PlatformsContainer>
9273
<h5>Upgrading another platform?</h5>
9374
<Radio.Group
@@ -109,10 +90,10 @@ const Settings = ({
10990
setNewLanguage(e.target.value)
11091
}}
11192
>
112-
<span style={{ marginRight: 10 }}>
93+
<Typography.Text style={{ marginRight: 10 }}>
11394
react-native-windows
11495
<WindowsFilled style={{ margin: 5 }} />
115-
</span>
96+
</Typography.Text>
11697
<Radio.Button value="cpp">C++</Radio.Button>
11798
<Radio.Button value="cs">C#</Radio.Button>
11899
</Radio.Group>

‎src/components/common/UpgradeButton.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Container = styled.div`
1111
justify-content: center;
1212
height: auto;
1313
overflow: hidden;
14-
margin-top: 25px;
14+
margin-top: 28px;
1515
`
1616

1717
const Button = styled(AntdButton)`

‎src/components/common/UsefulContentSection.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
getTransitionDuration,
1111
} from '../../utils'
1212
import UpgradeSupportAlert from './UpgradeSupportAlert'
13-
import AppNameWarning from './AppNameWarning'
1413
import UsefulLinks from './UsefulLinks'
1514
import AlignDepsAlert from './AlignDepsAlert'
1615

@@ -217,10 +216,6 @@ class UsefulContentSection extends Component {
217216
<Separator />
218217

219218
<UpgradeSupportAlert />
220-
221-
<Separator />
222-
223-
<AppNameWarning />
224219
</ContentContainer>
225220
</InnerContainer>
226221
</Container>

‎src/components/common/ViewFileButton.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ const ViewFileButton = styled(
1212
return (
1313
<Button
1414
{...props}
15-
type="link"
1615
target="_blank"
16+
size="small"
1717
href={getBinaryFileURL({ packageName, version, path })}
1818
>
19-
View file
19+
Raw
2020
</Button>
2121
)
2222
}

‎src/components/pages/Home.js‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect } from 'react'
22
import styled from '@emotion/styled'
3-
import { Card } from 'antd'
3+
import { Card, Input, Typography } from 'antd'
44
import GitHubButton from 'react-github-btn'
55
import ReactGA from 'react-ga'
66
import VersionSelector from '../common/VersionSelector'
@@ -10,7 +10,7 @@ import logo from '../../assets/logo.svg'
1010
import { SHOW_LATEST_RCS } from '../../utils'
1111
import { useGetLanguageFromURL } from '../../hooks/get-language-from-url'
1212
import { useGetPackageNameFromURL } from '../../hooks/get-package-name-from-url'
13-
import { PACKAGE_NAMES } from '../../constants'
13+
import { DEFAULT_APP_NAME, PACKAGE_NAMES } from '../../constants'
1414
import { TroubleshootingGuidesButton } from '../common/TroubleshootingGuidesButton'
1515
import { updateURL } from '../../utils/update-url'
1616
import { deviceSizes } from '../../utils/device-sizes'
@@ -90,7 +90,11 @@ const Home = () => {
9090
const [settings, setSettings] = useState({
9191
[`${SHOW_LATEST_RCS}`]: false,
9292
})
93-
const [appName, setAppName] = useState('')
93+
94+
const [appName, setAppName] = useState({
95+
input: '',
96+
diff: DEFAULT_APP_NAME,
97+
})
9498

9599
const homepageUrl = process.env.PUBLIC_URL
96100

@@ -106,6 +110,11 @@ const Home = () => {
106110
return
107111
}
108112

113+
setAppName(({ input }) => ({
114+
input: '',
115+
diff: input || DEFAULT_APP_NAME,
116+
}))
117+
109118
setFromVersion(fromVersion)
110119
setToVersion(toVersion)
111120
setShouldShowDiff(true)
@@ -172,17 +181,26 @@ const Home = () => {
172181
)}
173182
<Settings
174183
handleSettingsChange={handleSettingsChange}
175-
appName={appName}
176184
packageName={packageName}
177185
onChangePackageNameAndLanguage={
178186
handlePackageNameAndLanguageChange
179187
}
180188
language={language}
181-
onChangeAppName={setAppName}
182189
/>
183190
</SettingsContainer>
184191
</HeaderContainer>
185192

193+
<Typography.Title level={5}>What's your app name?</Typography.Title>
194+
195+
<Input
196+
size="large"
197+
placeholder={DEFAULT_APP_NAME}
198+
value={appName.input}
199+
onChange={({ target }) =>
200+
setAppName(({ diff }) => ({ input: target.value, diff }))
201+
}
202+
/>
203+
186204
<VersionSelector
187205
key={packageName}
188206
showDiff={handleShowDiff}
@@ -196,7 +214,7 @@ const Home = () => {
196214
shouldShowDiff={shouldShowDiff}
197215
fromVersion={fromVersion}
198216
toVersion={toVersion}
199-
appName={appName}
217+
appName={appName.diff}
200218
packageName={packageName}
201219
language={language}
202220
/>

0 commit comments

Comments
 (0)