From ae94e98ecf256b4401c5f88f7f32ac1f09477611 Mon Sep 17 00:00:00 2001 From: Aaron Yu Date: Sat, 25 Dec 2021 00:26:00 +0800 Subject: [PATCH] polish style --- public/index.html | 42 +++++++++++------------ src/App.css | 1 + src/App.js | 17 ++++----- src/Components/deviceFrame/index.css | 10 ++++++ src/Components/deviceFrame/index.js | 13 +++---- src/Components/pane/index.css | 16 +++++++-- src/Components/pane/index.js | 27 ++++++++------- src/Components/settingsFrame/index.js | 29 +++++++++------- src/images/horizental-button-checked.png | Bin 0 -> 2037 bytes src/images/horizental-button.png | Bin 0 -> 622 bytes src/images/vertical-button-checked.png | Bin 0 -> 2046 bytes src/images/vertical-button.png | Bin 0 -> 596 bytes 12 files changed, 90 insertions(+), 65 deletions(-) create mode 100644 src/images/horizental-button-checked.png create mode 100644 src/images/horizental-button.png create mode 100644 src/images/vertical-button-checked.png create mode 100644 src/images/vertical-button.png diff --git a/public/index.html b/public/index.html index aa069f2..a25d574 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,19 @@ - - - - - - - - - - - React App - - - -
- - - + + + \ No newline at end of file diff --git a/src/App.css b/src/App.css index feb9ed9..1f0e3ee 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,7 @@ .App { text-align: center; display: flex; + align-items: stretch; } .App-logo { diff --git a/src/App.js b/src/App.js index e74b0ff..e02d78e 100644 --- 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)}/> diff --git a/src/Components/deviceFrame/index.css b/src/Components/deviceFrame/index.css index e69de29..2bd08e6 100644 --- 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; +} \ No newline at end of file diff --git a/src/Components/deviceFrame/index.js b/src/Components/deviceFrame/index.js index 26325a8..e8f37f9 100644 --- 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 ( -
+
refresh refresh()} style={{ position: 'absolute', - left: '20px', - bottom: '20px', + left: '30px', + bottom: '30px', cursor: 'pointer' }}/>
diff --git a/src/Components/pane/index.css b/src/Components/pane/index.css index ba7794b..8982645 100644 --- 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; } \ No newline at end of file diff --git a/src/Components/pane/index.js b/src/Components/pane/index.js index 7625fce..fe6aa49 100644 --- 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' }}> - {_device.name}/ +
+ {_device.name}/ +
-

{_device.name}

+

{_device.name}

- deviceChange(_device.horizental)} - color={ device === _device.horizental ? 'success' : 'default'} - sx={{ - marginRight: '10px' - }}/> - deviceChange(_device.vertical)} - color={ device === _device.vertical ? 'success' : 'default'}/> + horizental deviceChange(_device.horizental)}/> + vertical deviceChange(_device.vertical)}/>
) diff --git a/src/Components/settingsFrame/index.js b/src/Components/settingsFrame/index.js index efbb02e..44a0536 100644 --- a/src/Components/settingsFrame/index.js +++ b/src/Components/settingsFrame/index.js @@ -23,7 +23,10 @@ function SettingFrame(props) { {rowTitles[rowIndex]} - {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) => (
- generate props.generate({ - topType: settingArr[0]+'', - centreType: settingArr[1]+'', - middleType: settingArr[2]+'' - })}/> + { + props.setting && generate props.generate({ + topType: settingArr[0]+'', + centreType: settingArr[1]+'', + middleType: settingArr[2]+'' + })}/> + }
) diff --git a/src/images/horizental-button-checked.png b/src/images/horizental-button-checked.png new file mode 100644 index 0000000000000000000000000000000000000000..13ed2b1109acc402e9d8cfe29ddc46cfa93a1e2e GIT binary patch literal 2037 zcmV001Ni1^@s6!R*In000NPNkl z`^?upTC*^1S&V8>T^cpOGJhB_!sL(qgQ*yM%^V#o9#xIEnjoffqSd6Azwm({d{yHY z4)B0W1T6FAzEe#3nCo6Zz?p0tP7zZ+T};_bt65gFUjf3$Onl)FpZN7agA07%L~3fX zNBrLtMGDAvTsl`w$$T-z3mq+f1!y6{7yj_6;5^X=A2`|6%~XuO7ZFV~fIOYhVbKyX zh0Cp0h$&d*((0F?R;loVFZ|&Xzxc*~M3j|}z7Hp04fI45luH(fLgGjA*NO?Rv)Ujg zwDILGeBcLP_)}>3#=j@R;AGQaGDste21QG4Co3ID0NNxbZ>yNxZC2ZBRGbeo^)Gzj z2VeNZCw}pbe~mC@11E(=*fD1bMF`Un@(O8(n4FzrvUgkUsZsG(NjZC@k)vcQ@`(LL zQAByXr!Q?6tMoUuFR$={AABh^{Nfw`aDWF~ys)?$5Pr;ELK4z+z!{)Zejsa~)d4Y? z2WwPv)jy5y>)vujH^ZRrCwwsNXjR=f@qr(F z;SZnq#W()p01vo$VG(i~RjUb2h`T@m>5!O=BaQ+d#alJc3P`)`fCS6GBtJRxFIide z0qLF-K+-oiAaAbtvi$tqKV(bsdu41WfXK_|j{iaiy zBaTzfKJ{tW#k)(>d?_&e;v4@OU2t*3Vj&~sxQs?d)eZ%vfS!4cRZ6vL zl#wFsvr?shPKp441e{TMDS{@4Qsg)1{w1UjR((~L6r>0u72l{7$_M49N~i1;K|O6h ze>(pJWwjRVXx}O`MG`YSW5tJpQ(*XYMHf8a0v{Kw3EZGLQ*Z@ySEGth7cZDCMYxV z-Y)O1{F*#q4)A~re2l`H;luQ8*$eC}>JvkhT=lE>?M9 zF*eVb@qr(F;SZnq#W()p01vppCw5qYm|@Kgy=X$q^>30O>J#uNjrKwV+2t~0Fm8IPi3S$>dd<&GeLv5ycCbvn9_1A1%Whk)gd zEc(!XX!Gw&Pm)*BA18=DmWG2u`)-*m4RwXJx_)61@(hwS$|jv&hf3Zq-#hh7_Ejfu zpV76-ef;kio@A|3SjCaBkVfg3Py9g0zrO54Lb~JT(Sh?3J8*6q$;S$7W+)xm#rlI0)2+6NXH#G?ws_xe zN_}|T;gN#JoqpN+xTDX2%L`J074tMCqR=-^{X$4Y>N_hxWr2Pb>6-YlV_!ua)5s#v z69gx1Y50ST$>+x%A0MQ70OpzQ*RE&7`T36?m{%932&P%j*aC5P$y)>%n52A>tvB1& zM?4UdfJR-)zj)$%3XpygZFn{$u|F=9q7TuG$=?TQpI*@+r6sFUg*g z_sS2>{9caTKCKZ%erh-%lwWWbajs~OUCyGuh4&pjHZwmU=smVBc|@Jjp@5+A;edi= zpI0>PoYyl+zQ3aJ@8usa?|7M~u-;Pn1wkZWefP}oWI^HUWKig!^vydc{jElX56Xv* zeM^dNRA?LOP@jG%Cl6FWQI~eza-S3ZXj}Gq0oYhy`uYFz&zINA@m9RnZJE1AI_2$= z9-%$b%c@U!kL)e`kgz4+)vBE>r(SDUUCLLNyiKS>ezKi; zB)#IZdYsqF#^=|{zJ9QXvr5j}E{&|3g|5@! literal 0 HcmV?d00001 diff --git a/src/images/horizental-button.png b/src/images/horizental-button.png new file mode 100644 index 0000000000000000000000000000000000000000..67cd8ace93c55dcc285fe8739af3fa00dbb59c5e GIT binary patch literal 622 zcmV-!0+IcRP)001Ni0{{R3_A)nD0001lP)t-sM{rE< z@bdrw0PgVf0002)@bi+LvH$=8@$vBh008mv@tml>QdwgF005h&y;WFd?(g#M@A93e zy`87NGcz;G%+7Okb?@-=qNAnV-rSktVt*)?`nVP}E#J9M* z)!E~Kfr9Jo@apXFtF*|fw8);R!0YYtDPf0z0000KbW%=J0P!d93$3~-Cmbd8N*3}< z^7QldWZH|90004nNklc-342Drgk?hFXy8HmRYPGYp@BeWz z$M{GuRtg!GhzE%yq5+m-=IxHoju9A6l(Q2K;BIE-9{&8*80(nCAapsF1<+fZE%3^? zg%0c&e!kc;@UUTo2tkV^D}a}gW1TR9jQ;e}9_gYvd#~-=uAbk1wE#!dgU-WTYLWTJ zGGImu`m6s?v}RaG1fR~8Wr?`aNoPr7j9FxYP4AUsnV|;;A&+3qgdjp8n6Fuce&{4N zF{tacbUsXyWu;u&H<3l{%nCTlvhpi$Jr$yUN9$O~I!5c|xd`?AvRBoQ*W>nUJ{@0w zR;u0oD$}l2_2WYk>fy0g>i%wbyIH#3-QBBL-B$apRc)=*AK1V5#s&wx5dZ)H07*qo IM6N<$f(rjS4*&oF literal 0 HcmV?d00001 diff --git a/src/images/vertical-button-checked.png b/src/images/vertical-button-checked.png new file mode 100644 index 0000000000000000000000000000000000000000..752bb6f3c3934872a942828f25e5851ee8f8e15c GIT binary patch literal 2046 zcmV001Ni1^@s6!R*In000NYNkl0VFHdCyd;l62mu zzNC}%s9C}JmAXw;q*5g;_0OIIRpy|7s-j_MRp~JCsAPoJNKwV3v_?Pt!Uulv6~!+c z-~ksGEcKmkV^!hMb6!Be8KWzX6;(JvRKX-mQyu|LLioZTKJn{;1{e6iiBwM|4}8HB zMK&NB&YvbKZ-%JcS(fHJ0-A;Jg+F{6aGq#`51e#ruZo6Tb43#spiUz+m@`*Y_5!Vi zqOuk{wB#X_=|6t(g+F}a7vK1IM;UzJq*E_XL_rziHY7eIbD5}&6QTQ=guc1@YCPZvU--i(e({Ze z6J2m|!eSyLu=TadsIcMLBy}k`sK@Ie~_GWCGwX1FUy#8zmW3I z7t0S0{(-+Sm3_WMw&s47Hjs2o4#>Zcz09*a7WJs#BodGsZ+QBP4+9Q=_{6U>y5Ip9 z_&8vVWJ0rs;6lD7OjHr7ya5C1wSZR8qw22*>6mm*4$1EiKO>}%7JpA>X9a|mf1yNv ze(;ZS@%kkp73jP}=Ki}1zlTXAeNzLHs{uO8=cDsc{x&SuAA}-fm`Tu%Dg!Dc>Q%35ycVWo(la?Me>zeQ>(eFQmnB&t zV|Gn;NS-!r99~SlqSaht9 z1J>s?tW{ZI2duE{&ijCz&`@+FX-Ho~CaOMJ{CyX!5vgIKMo9lY_RQ_d!0P9M%(EML5^FwHf<3?O8upC9~_%*qHGSlyEyuqu#%MH@}upl`Q= z<*O*HB^84eV;C|-oUj1JP$atS#5ED|j)JcNi>RU znD@dO@~6oXsSI-yp+tJ!*TYiv)dvd}9pWuAg!nczbC44jrVd;>?1~B^k1}5?`=z{i zGDRY%bBHSD8z(FxiZ&2!*l@@j*!(3=ov)Yu>A{9Y$LJtt$E1aYH@qk_%+SCraEwvF zF)VpLUyHKi(})P>E9Sn~u$;>e?>#T9#1F$bCwNrLF%(&p(&>DyXr_Qhp67_N)Y+Ny zHR=Nk;6zJ|VHo=!@Q0;^%$$|@2|m811EN!Oj!wpag}nEiuvo!UA6P`1oro+V6xq?q zb+miTmG3Y7K64*0FVRbf_!p&Bv}{;}Kf`HidPttOzWG=huyACNiWq_zBhvU5V;Hgs zWe0$$zcugEuHkm4={JX;Hn6J3zbH-Ib_dmYqkJ#MRt4iTGXwJZ((jqccX!_VZCHRa z(ZDu{Z4pDKXG%~I*Wcg&M;^0OV3n`oeh=C0(Kh0qX^TADEVfPaGCsx2OYn9l&W&^x zEjFw6M!IW?UxugqWk#l7R%H8i7~^-bF1_>B5&l(QPwn6HpZ;-}X%`!Gf%R3ZxnppK4dc=L6 zbIoTV=Vv0WxpxKB`Yvqru z@Uda_Qm+iS8vEz_%AfBwpKEXeR(tim9xs^as{F?gx8MRFIO$YR&2Kta{h-G=^~ylu zVdcLZS&-lX7x=)*`d6BkiW{Hl{9pCeuIJR(y2;}%IKTrg@Nxe$8{`Nz#wL?lrQpyW cE;ge#0ip6$z3Sg%a{vGU07*qoM6N<$f|C30h5!Hn literal 0 HcmV?d00001 diff --git a/src/images/vertical-button.png b/src/images/vertical-button.png new file mode 100644 index 0000000000000000000000000000000000000000..74c7b192d647ca2e0a1396819fae6853601d8038 GIT binary patch literal 596 zcmV-a0;~OrP)001Ni0{{R3_A)nD0001lP)t-sM{rE< z@bdrw0PgVf0002)@bi+LvH$=8@$vBh008mv@tml>QdwgF005h&y;WFd?(g#M@A93e zy`87NGcz;q@bhzYb)uuC%goNy)!0TxM^{%^-QMB1xVmO$XPB9q=I83c!o+}qg4NmM zjg61%?C`Cwu&T7ktF*}K?C_qc!0YYtv<86p0000KbW%=J0P!d93$3~-Cmbd8N*3}< z^7QldWZH|90004NNkl&<&Qjj$J}?v&j|ALD@?HF~AS=x#?wlaf^}w0000