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

support hide logo

master
Aaron Yu 2022-11-27 17:14:56 +08:00
parent a4f813c440
commit f0d66aff65
2 changed files with 128 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.js
View File

@ -22,6 +22,8 @@ import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle"; import DialogTitle from "@mui/material/DialogTitle";
import Checkbox from "@mui/material/Checkbox"; import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel"; import FormControlLabel from "@mui/material/FormControlLabel";
import queryString from "query-string";
class App extends React.Component { class App extends React.Component {
constructor() { constructor() {
super(); super();
@ -36,6 +38,7 @@ class App extends React.Component {
loading: false, loading: false,
loginOpen: false, loginOpen: false,
loginErrorMessage: "", loginErrorMessage: "",
hideLogo: false,
loginForm: { loginForm: {
account: "", account: "",
password: "", password: "",
@ -46,6 +49,9 @@ class App extends React.Component {
componentDidMount() { componentDidMount() {
const loginInfo = getLoginInfo(); const loginInfo = getLoginInfo();
var tenant = utils.getTenant(); var tenant = utils.getTenant();
const hideLogo = queryString.parseUrl(window.location.href)?.query
?.hideLogo;
this.setState({ hideLogo: !!hideLogo });
if (loginInfo && loginInfo.permissionPages.includes(tenant)) { if (loginInfo && loginInfo.permissionPages.includes(tenant)) {
this.fetchData(); this.fetchData();
this.refreshQrCode(); this.refreshQrCode();
@ -183,6 +189,7 @@ class App extends React.Component {
loading, loading,
loginOpen, loginOpen,
loginForm, loginForm,
hideLogo,
} = this.state; } = this.state;
return ( return (
@ -246,6 +253,7 @@ class App extends React.Component {
projects={projects} projects={projects}
device={device} device={device}
loading={loading} loading={loading}
hideLogo={hideLogo}
onProjectSelect={(project) => { onProjectSelect={(project) => {
this.setSelectedProject(project); this.setSelectedProject(project);
}} }}
@ -256,7 +264,7 @@ class App extends React.Component {
display: "flex", display: "flex",
flex: 1, flex: 1,
alignItems: "center", alignItems: "center",
backgroundImage: `url('${waterMarkPng}')`, backgroundImage: hideLogo ? "" : `url(${waterMarkPng})`,
backgroundPositionX: "right", backgroundPositionX: "right",
backgroundPositionY: "bottom", backgroundPositionY: "bottom",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",

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

@ -1,64 +1,64 @@
import './index.css'; import "./index.css";
import Select from '@mui/material/Select'; import Select from "@mui/material/Select";
import MenuItem from '@mui/material/MenuItem' import MenuItem from "@mui/material/MenuItem";
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { CircularProgress, List, ListItem } from '@mui/material'; import { CircularProgress, 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 logoPanePng from '../../images/logo-pane.png' import logoPanePng from "../../images/logo-pane.png";
import horizentalChecked from '../../images/horizental-button-checked.png' import horizentalChecked from "../../images/horizental-button-checked.png";
import horizentalButton from '../../images/horizental-button.png' import horizentalButton from "../../images/horizental-button.png";
import verticalChecked from '../../images/vertical-button-checked.png' import verticalChecked from "../../images/vertical-button-checked.png";
import verticalButton from '../../images/vertical-button.png' import verticalButton from "../../images/vertical-button.png";
import modeSelectPng from '../../images/mode-select.png' import modeSelectPng from "../../images/mode-select.png";
var deviceConfigs = [ var deviceConfigs = [
{ {
name: 'iPhone', name: "iPhone",
icon: iphonePng, icon: iphonePng,
vertical: 'iphone-v', vertical: "iphone-v",
horizental: 'iphone-h' horizental: "iphone-h",
}, },
{ {
name: 'Android Phone', name: "Android Phone",
icon: androidPng, icon: androidPng,
vertical: 'android-v', vertical: "android-v",
horizental: 'android-h' horizental: "android-h",
}, },
{ {
name: 'iPad', name: "iPad",
icon: ipadPng, icon: ipadPng,
vertical: 'ipad-v', vertical: "ipad-v",
horizental: 'ipad-h' horizental: "ipad-h",
}, },
]; ];
function Pane(props) { function Pane(props) {
var [mode, setMode] = useState(props.mode); var [mode, setMode] = useState(props.mode);
var [device, setDevice] = useState(props.device) var [device, setDevice] = useState(props.device);
var [project, setProject] = useState(props.project) var [project, setProject] = useState(props.project);
var modeChange = (e) => { var modeChange = (e) => {
var _mode = e.target.value; var _mode = e.target.value;
setMode(_mode); setMode(_mode);
props.onModeChange(e.target.value) props.onModeChange(e.target.value);
}; };
var deviceChange = (_device) => { var deviceChange = (_device) => {
setDevice(_device); setDevice(_device);
props.onDeviceChange(_device) props.onDeviceChange(_device);
}; };
var projectSelect = (e) => { var projectSelect = (e) => {
var projectName = e.target.value var projectName = e.target.value;
setProject(projectName) setProject(projectName);
props.onProjectSelect(projectName) props.onProjectSelect(projectName);
} };
useEffect(() => { useEffect(() => {
props.projects.length && !project && setProject(props.projects[0]); props.projects.length && !project && setProject(props.projects[0]);
}, [props.projects]) }, [props.projects]);
return ( return (
<div className="Pane"> <div className="Pane">
@ -66,76 +66,105 @@ function Pane(props) {
id="mode-select" id="mode-select"
value={mode} value={mode}
onChange={(e) => modeChange(e)} onChange={(e) => modeChange(e)}
startAdornment={<img src={modeSelectPng} height={'30px'} alt='selected'/>} startAdornment={
<img src={modeSelectPng} height={"30px"} alt="selected" />
}
sx={{ sx={{
width: '100%', width: "100%",
border: 'none', border: "none",
background: 'rgb(69, 115, 191)', background: "rgb(69, 115, 191)",
color: 'white', color: "white",
fontWeight: 'bold' fontWeight: "bold",
}} }}
MenuProps={{ MenuProps={{
classes: { classes: {
paper: 'selectPager' paper: "selectPager",
} },
}} }}
> >
<MenuItem value={'normal'}>Normal Preview</MenuItem> <MenuItem value={"normal"}>Normal Preview</MenuItem>
<MenuItem value={'dynamic'}>Dynamic Preview</MenuItem> <MenuItem value={"dynamic"}>Dynamic Preview</MenuItem>
</Select> </Select>
<List> <List>
{ {deviceConfigs.map((_device) => (
deviceConfigs.map(_device =>
<ListItem <ListItem
key={_device.name} key={_device.name}
sx={{ sx={{
display: 'flex', display: "flex",
textAlign: 'center' textAlign: "center",
}}> }}
<div style={{ width: '120px', alignItems: '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>
<div className='deviceContent'> <div className="deviceContent">
<p style={{ margin: "14px 0" }}>{_device.name}</p> <p style={{ margin: "14px 0" }}>{_device.name}</p>
<div className='deviceButtons'> <div className="deviceButtons">
<img src={device === _device.horizental ? horizentalChecked : horizentalButton} <img
alt='horizental' src={
onClick={() => deviceChange(_device.horizental)}/> device === _device.horizental
<img src={device === _device.vertical ? verticalChecked : verticalButton} ? horizentalChecked
alt='vertical' : horizentalButton
onClick={() => deviceChange(_device.vertical)}/>
</div>
</div>
</ListItem>)
} }
alt="horizental"
onClick={() => deviceChange(_device.horizental)}
/>
<img
src={
device === _device.vertical
? verticalChecked
: verticalButton
}
alt="vertical"
onClick={() => deviceChange(_device.vertical)}
/>
</div>
</div>
</ListItem>
))}
</List> </List>
<div style={{ <div
marginTop: '50px', style={{
color: 'white' marginTop: "50px",
}}> color: "white",
{ }}
props.loading >
? {props.loading ? (
<CircularProgress color='inherit'/> <CircularProgress color="inherit" />
: ) : (
project && <Select project && (
<Select
id="project-select" id="project-select"
value={project} value={project}
onChange={(e) => projectSelect(e)} onChange={(e) => projectSelect(e)}
placeholder='选择项目' placeholder="选择项目"
sx={{ sx={{
background: 'rgb(115, 158, 211)', background: "rgb(115, 158, 211)",
width: '80%', width: "80%",
color: 'white' color: "white",
}} }}
> >
{ {props.projects.map((pName, i) => (
props.projects.map((pName, i) => <MenuItem key={i} value={pName}>{pName}</MenuItem>) <MenuItem key={i} value={pName}>
} {pName}
</MenuItem>
))}
</Select> </Select>
} )
)}
</div> </div>
<img src={logoPanePng} alt='logo' width={'100%'} className='bottomLogo'/> {!props.hideLogo && (
<img
src={logoPanePng}
alt="logo"
width={"100%"}
className="bottomLogo"
/>
)}
</div> </div>
); );
} }