yityu
/
playable-preview
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

polish style

master
Aaron Yu 2021-12-25 00:26:00 +08:00
parent 8af62b5566
commit ae94e98ecf
12 changed files with 90 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
public/index.html
View File

@ -1,21 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" /> <head>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="theme-color" content="#000000" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta <meta name="theme-color" content="#000000" />
name="description" <meta name="description" content="Web site created using create-react-app" />
content="Web site created using create-react-app" <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
/> <!--
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
@ -24,12 +22,13 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>React App</title>
</head> </head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript> <body>
<div id="root"></div> <noscript>You need to enable JavaScript to run this app.</noscript>
<!-- <div id="root"></div>
<!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
@ -39,5 +38,6 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
</body> </body>
</html>
</html>

1
src/App.css
View File

@ -1,6 +1,7 @@
.App { .App {
text-align: center; text-align: center;
display: flex; display: flex;
align-items: stretch;
} }
.App-logo { .App-logo {

17
src/App.js
View File

@ -38,16 +38,17 @@ class App extends React.Component {
}); });
} }
fetchData() { async fetchData() {
fetch('http://123.56.161.61:1157/home/GetServerJsonData', { var response = await fetch('http://123.56.161.61:1157/home/GetServerJsonData', {
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
}).then((response) => });
response.json() var projects = await response.json();
.then(projects => this.setState({ this.setState({
projects projects,
}))); selectedProject: projects[0]
})
} }
UpdateSetting(obj) { UpdateSetting(obj) {
@ -72,8 +73,8 @@ class App extends React.Component {
mode={mode} mode={mode}
onModeChange={(_mode) => this.setMode(_mode) } onModeChange={(_mode) => this.setMode(_mode) }
projects={projects} projects={projects}
device={device}
onProjectSelect={(project) => { onProjectSelect={(project) => {
console.log(project)
this.setSelectedProject(project) this.setSelectedProject(project)
}} }}
onDeviceChange={(_device) => this.setDevice(_device)}/> onDeviceChange={(_device) => this.setDevice(_device)}/>

10
src/Components/deviceFrame/index.css
View File

@ -0,0 +1,10 @@
.deviceFrameContainer {
width: 100%;
flex: 1 1 0%;
align-items: center;
position: relative;
display: flex;
height: 100vh;
justify-content: center;
overflow: hidden;
}

13
src/Components/deviceFrame/index.js
View File

@ -48,27 +48,22 @@ function DeviceFrame(props) {
useEffect(() => { useEffect(() => {
setConfig(configMap[props.device]) setConfig(configMap[props.device])
console.log(props.device, config)
}, [props.device, config]) }, [props.device, config])
var refresh = () => setIframeKey(Math.round(Math.random() * 10000)); var refresh = () => setIframeKey(Math.round(Math.random() * 10000));
useEffect(() => { useEffect(() => {
console.log(props.htmlUrl)
refresh() refresh()
}, [props.htmlUrl]) }, [props.htmlUrl])
return ( return (
<div style={{ <div className='deviceFrameContainer'>
width: '100%',
flex: 1,
alignItems: 'center',
position: 'relative'
}}>
<img src={refreshButtonPng} alt='refresh' onClick={() => refresh()} style={{ <img src={refreshButtonPng} alt='refresh' onClick={() => refresh()} style={{
position: 'absolute', position: 'absolute',
left: '20px', left: '30px',
bottom: '20px', bottom: '30px',
cursor: 'pointer' cursor: 'pointer'
}}/> }}/>
<div> <div>

16
src/Components/pane/index.css
View File

@ -1,8 +1,7 @@
.Pane { .Pane {
width: 25vw; width: 30vw;
min-width: 200px;
background-color: rgb(52, 90, 176); background-color: rgb(52, 90, 176);
height: 100vh; min-height: 100vh;
} }
.modeSelect { .modeSelect {
@ -17,5 +16,16 @@
} }
.deviceContent { .deviceContent {
text-align: left;
color: white; color: white;
}
.deviceButtons {
width: 160px;
display: flex;
justify-content: space-between;
}
.deviceButtons img {
cursor: pointer;
} }

27
src/Components/pane/index.js
View File

@ -6,6 +6,10 @@ import { Chip, List, ListItem } from '@mui/material';
import ipadPng from '../../images/ipad.png' import ipadPng from '../../images/ipad.png'
import iphonePng from '../../images/iphone.png' import iphonePng from '../../images/iphone.png'
import androidPng from '../../images/android.png' import androidPng from '../../images/android.png'
import horizentalChecked from '../../images/horizental-button-checked.png'
import horizentalButton from '../../images/horizental-button.png'
import verticalChecked from '../../images/vertical-button-checked.png'
import verticalButton from '../../images/vertical-button.png'
var deviceConfigs = [ var deviceConfigs = [
{ {
@ -79,21 +83,20 @@ function Pane(props) {
key={_device.name} key={_device.name}
sx={{ sx={{
display: 'flex', display: 'flex',
alignItems: 'center' textAlign: 'center'
}}> }}>
<img className='deviceIcon' src={_device.icon} alt={_device.name}/> <div style={{ width: '120px', alignItems: 'center' }}>
<img className='deviceIcon' src={_device.icon} alt={_device.name}/>
</div>
<div className='deviceContent'> <div className='deviceContent'>
<p>{_device.name}</p> <p style={{ margin: "14px 0"}}>{_device.name}</p>
<div className='deviceButtons'> <div className='deviceButtons'>
<Chip label='横屏' <img src={device === _device.horizental ? horizentalChecked : horizentalButton}
onClick={() => deviceChange(_device.horizental)} alt='horizental'
color={ device === _device.horizental ? 'success' : 'default'} onClick={() => deviceChange(_device.horizental)}/>
sx={{ <img src={device === _device.vertical ? verticalChecked : verticalButton}
marginRight: '10px' alt='vertical'
}}/> onClick={() => deviceChange(_device.vertical)}/>
<Chip label='竖屏'
onClick={() => deviceChange(_device.vertical)}
color={ device === _device.vertical ? 'success' : 'default'}/>
</div> </div>
</div> </div>
</ListItem>) </ListItem>)

29
src/Components/settingsFrame/index.js
View File

@ -23,7 +23,10 @@ function SettingFrame(props) {
<ListItem key={rowIndex}> <ListItem key={rowIndex}>
<span>{rowTitles[rowIndex]}</span> <span>{rowTitles[rowIndex]}</span>
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}> <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
{props.setting && props.setting[rowKey] && Array.from(props.setting[rowKey].split('|')).map((text, index) => ( {(props.setting && props.setting[rowKey]
? Array.from(props.setting[rowKey].split('|'))
: ['无', '无', '无'])
.map((text, index) => (
<Grid item xs={2} sm={4} md={4} key={index}> <Grid item xs={2} sm={4} md={4} key={index}>
<div style={{ <div style={{
backgroundImage: `url('${settingCardPng}')`, backgroundImage: `url('${settingCardPng}')`,
@ -62,17 +65,19 @@ function SettingFrame(props) {
cursor: 'pointer', cursor: 'pointer',
marginTop: '30px' marginTop: '30px'
}}> }}>
<img {
src={generateButtonPng} props.setting && <img
alt='generate' src={generateButtonPng}
style={{ alt='generate'
cursor: 'pointer' style={{
}} cursor: 'pointer'
onClick={() => props.generate({ }}
topType: settingArr[0]+'', onClick={() => props.generate({
centreType: settingArr[1]+'', topType: settingArr[0]+'',
middleType: settingArr[2]+'' centreType: settingArr[1]+'',
})}/> middleType: settingArr[2]+''
})}/>
}
</div> </div>
</div> </div>
) )

BIN
src/images/horizental-button-checked.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/images/horizental-button.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 622 B

BIN
src/images/vertical-button-checked.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/images/vertical-button.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 596 B