polish style

2021-12-25 00:26:00 +08:00 · 2021-12-25 00:26:00 +08:00 · ae94e98ecf
parent 8af62b5566
commit ae94e98ecf
12 changed files with 90 additions and 65 deletions
--- a/public/index.html
+++ b/public/index.html
@ -1,14 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <!--
      manifest.json provides metadata used when your web app is installed on a
@ -25,8 +23,9 @@
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>React App</title>
-  </head>
-  <body>
+</head>
+
+<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
@ -39,5 +38,6 @@
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
-  </body>
+</body>
+
 </html>
--- a/src/App.css
+++ b/src/App.css
@ -1,6 +1,7 @@
 .App {
  text-align: center;
  display: flex;
+  align-items: stretch;
 }

 .App-logo {
--- a/src/App.js
+++ b/src/App.js
@ -38,16 +38,17 @@ class App extends React.Component {
    });
  }

-  fetchData() {
-    fetch('http://123.56.161.61:1157/home/GetServerJsonData', {
+  async fetchData() {
+    var response = await fetch('http://123.56.161.61:1157/home/GetServerJsonData', {
      headers: {
        'Content-Type': 'application/json'
      },
-    }).then((response) =>
-      response.json()
-      .then(projects => this.setState({
-        projects
-      })));
+    });
+    var projects = await response.json();
+    this.setState({
+      projects,
+      selectedProject: projects[0]
+    })
  }

  UpdateSetting(obj) {
@ -72,8 +73,8 @@ class App extends React.Component {
          mode={mode}
          onModeChange={(_mode) => this.setMode(_mode) }
          projects={projects}
+          device={device}
          onProjectSelect={(project) => {
-            console.log(project)
            this.setSelectedProject(project)
          }}
          onDeviceChange={(_device) => this.setDevice(_device)}/>
--- a/src/Components/deviceFrame/index.css
+++ b/src/Components/deviceFrame/index.css
@ -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;
+}
--- a/src/Components/deviceFrame/index.js
+++ b/src/Components/deviceFrame/index.js
@ -48,27 +48,22 @@ function DeviceFrame(props) {

    useEffect(() => {
        setConfig(configMap[props.device])
-        console.log(props.device, config)
    }, [props.device, config])

    var refresh = () => setIframeKey(Math.round(Math.random() * 10000));

    useEffect(() => {
+        console.log(props.htmlUrl)
        refresh()
    }, [props.htmlUrl])


    return (
-        <div style={{
-            width: '100%',
-            flex: 1,
-            alignItems: 'center',
-            position: 'relative'
-        }}>
+        <div className='deviceFrameContainer'>
            <img src={refreshButtonPng} alt='refresh' onClick={() => refresh()} style={{
                position: 'absolute',
-                left: '20px',
-                bottom: '20px',
+                left: '30px',
+                bottom: '30px',
                cursor: 'pointer'
            }}/>
            <div>
--- a/src/Components/pane/index.css
+++ b/src/Components/pane/index.css
@ -1,8 +1,7 @@
 .Pane {
-    width: 25vw;
-    min-width: 200px;
+    width: 30vw;
    background-color: rgb(52, 90, 176);
-    height: 100vh;
+    min-height: 100vh;
 }

 .modeSelect {
@ -17,5 +16,16 @@
 }

 .deviceContent {
+    text-align: left;
    color: white;
 }
+
+.deviceButtons {
+    width: 160px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.deviceButtons img {
+    cursor: pointer;
+}
--- a/src/Components/pane/index.js
+++ b/src/Components/pane/index.js
@ -6,6 +6,10 @@ import { Chip, List, ListItem } from '@mui/material';
 import ipadPng from '../../images/ipad.png'
 import iphonePng from '../../images/iphone.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 = [
  {
@ -79,21 +83,20 @@ function Pane(props) {
              key={_device.name}
              sx={{
                display: 'flex',
-                alignItems: 'center'
+                textAlign: 'center'
            }}>
+              <div style={{ width: '120px', alignItems: 'center' }}>
                <img className='deviceIcon' src={_device.icon} alt={_device.name}/>
+              </div>
              <div className='deviceContent'>
-                <p>{_device.name}</p>
+                <p style={{ margin: "14px 0"}}>{_device.name}</p>
                <div className='deviceButtons'>
-                  <Chip label='横屏'
-                    onClick={() => deviceChange(_device.horizental)}
-                    color={ device === _device.horizental ? 'success' : 'default'}
-                    sx={{
-                      marginRight: '10px'
-                    }}/>
-                  <Chip label='竖屏'
-                    onClick={() => deviceChange(_device.vertical)}
-                    color={ device === _device.vertical ? 'success' : 'default'}/>
+                  <img src={device === _device.horizental ? horizentalChecked : horizentalButton}
+                    alt='horizental'
+                     onClick={() => deviceChange(_device.horizental)}/>
+                  <img src={device === _device.vertical ? verticalChecked : verticalButton}
+                    alt='vertical'
+                    onClick={() => deviceChange(_device.vertical)}/>
                </div>
              </div>
            </ListItem>)
--- a/src/Components/settingsFrame/index.js
+++ b/src/Components/settingsFrame/index.js
@ -23,7 +23,10 @@ function SettingFrame(props) {
                <ListItem key={rowIndex}>
                  <span>{rowTitles[rowIndex]}</span>
                  <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}>
                            <div style={{
                              backgroundImage: `url('${settingCardPng}')`,
@ -62,7 +65,8 @@ function SettingFrame(props) {
                  cursor: 'pointer',
                  marginTop: '30px'
                }}>
-              <img
+              {
+                props.setting && <img
                  src={generateButtonPng}
                  alt='generate'
                  style={{
@ -73,6 +77,7 @@ function SettingFrame(props) {
                    centreType: settingArr[1]+'',
                    middleType: settingArr[2]+''
                  })}/>
+                }
            </div>
        </div>
    )
--- a/src/images/horizental-button-checked.png
+++ b/src/images/horizental-button-checked.png
--- a/src/images/horizental-button.png
+++ b/src/images/horizental-button.png
--- a/src/images/vertical-button-checked.png
+++ b/src/images/vertical-button-checked.png
--- a/src/images/vertical-button.png
+++ b/src/images/vertical-button.png