From f0d66aff65ae33a9a2f49d1daf9ae436c2294071 Mon Sep 17 00:00:00 2001
From: Aaron Yu <yityu@microsoft.com>
Date: Sun, 27 Nov 2022 17:14:56 +0800
Subject: [PATCH] support hide logo

---
 src/App.js                   |  10 +-
 src/Components/pane/index.js | 209 ++++++++++++++++++++---------------
 2 files changed, 128 insertions(+), 91 deletions(-)

diff --git a/src/App.js b/src/App.js
index e4b4c84..487f6a0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,6 +22,8 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
+import queryString from "query-string";
+
 class App extends React.Component {
   constructor() {
     super();
@@ -36,6 +38,7 @@ class App extends React.Component {
       loading: false,
       loginOpen: false,
       loginErrorMessage: "",
+      hideLogo: false,
       loginForm: {
         account: "",
         password: "",
@@ -46,6 +49,9 @@ class App extends React.Component {
   componentDidMount() {
     const loginInfo = getLoginInfo();
     var tenant = utils.getTenant();
+    const hideLogo = queryString.parseUrl(window.location.href)?.query
+      ?.hideLogo;
+    this.setState({ hideLogo: !!hideLogo });
     if (loginInfo && loginInfo.permissionPages.includes(tenant)) {
       this.fetchData();
       this.refreshQrCode();
@@ -183,6 +189,7 @@ class App extends React.Component {
       loading,
       loginOpen,
       loginForm,
+      hideLogo,
     } = this.state;
 
     return (
@@ -246,6 +253,7 @@ class App extends React.Component {
           projects={projects}
           device={device}
           loading={loading}
+          hideLogo={hideLogo}
           onProjectSelect={(project) => {
             this.setSelectedProject(project);
           }}
@@ -256,7 +264,7 @@ class App extends React.Component {
             display: "flex",
             flex: 1,
             alignItems: "center",
-            backgroundImage: `url('${waterMarkPng}')`,
+            backgroundImage: hideLogo ? "" : `url(${waterMarkPng})`,
             backgroundPositionX: "right",
             backgroundPositionY: "bottom",
             backgroundRepeat: "no-repeat",
diff --git a/src/Components/pane/index.js b/src/Components/pane/index.js
index d4129c5..e208294 100644
--- a/src/Components/pane/index.js
+++ b/src/Components/pane/index.js
@@ -1,64 +1,64 @@
-import './index.css';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem'
-import { useEffect, useState } from 'react';
-import { CircularProgress, List, ListItem } from '@mui/material';
-import ipadPng from '../../images/ipad.png'
-import iphonePng from '../../images/iphone.png'
-import androidPng from '../../images/android.png'
-import logoPanePng from '../../images/logo-pane.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'
-import modeSelectPng from '../../images/mode-select.png'
+import "./index.css";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import { useEffect, useState } from "react";
+import { CircularProgress, List, ListItem } from "@mui/material";
+import ipadPng from "../../images/ipad.png";
+import iphonePng from "../../images/iphone.png";
+import androidPng from "../../images/android.png";
+import logoPanePng from "../../images/logo-pane.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";
+import modeSelectPng from "../../images/mode-select.png";
 
 var deviceConfigs = [
   {
-    name: 'iPhone',
+    name: "iPhone",
     icon: iphonePng,
-    vertical: 'iphone-v',
-    horizental: 'iphone-h'
+    vertical: "iphone-v",
+    horizental: "iphone-h",
   },
   {
-    name: 'Android Phone',
+    name: "Android Phone",
     icon: androidPng,
-    vertical: 'android-v',
-    horizental: 'android-h'
+    vertical: "android-v",
+    horizental: "android-h",
   },
   {
-    name: 'iPad',
+    name: "iPad",
     icon: ipadPng,
-    vertical: 'ipad-v',
-    horizental: 'ipad-h'
+    vertical: "ipad-v",
+    horizental: "ipad-h",
   },
 ];
 
 function Pane(props) {
   var [mode, setMode] = useState(props.mode);
-  var [device, setDevice] = useState(props.device)
-  var [project, setProject] = useState(props.project)
-  
+  var [device, setDevice] = useState(props.device);
+  var [project, setProject] = useState(props.project);
+
   var modeChange = (e) => {
     var _mode = e.target.value;
     setMode(_mode);
-    props.onModeChange(e.target.value)
+    props.onModeChange(e.target.value);
   };
 
   var deviceChange = (_device) => {
     setDevice(_device);
-    props.onDeviceChange(_device)
+    props.onDeviceChange(_device);
   };
 
   var projectSelect = (e) => {
-    var projectName = e.target.value
-    setProject(projectName)
-    props.onProjectSelect(projectName)
-  }
+    var projectName = e.target.value;
+    setProject(projectName);
+    props.onProjectSelect(projectName);
+  };
 
   useEffect(() => {
     props.projects.length && !project && setProject(props.projects[0]);
-  }, [props.projects])
+  }, [props.projects]);
 
   return (
     <div className="Pane">
@@ -66,76 +66,105 @@ function Pane(props) {
         id="mode-select"
         value={mode}
         onChange={(e) => modeChange(e)}
-        startAdornment={<img src={modeSelectPng} height={'30px'} alt='selected'/>}
+        startAdornment={
+          <img src={modeSelectPng} height={"30px"} alt="selected" />
+        }
         sx={{
-          width: '100%',
-          border: 'none',
-          background: 'rgb(69, 115, 191)',
-          color: 'white',
-          fontWeight: 'bold'
+          width: "100%",
+          border: "none",
+          background: "rgb(69, 115, 191)",
+          color: "white",
+          fontWeight: "bold",
         }}
         MenuProps={{
           classes: {
-            paper: 'selectPager'
-          }
+            paper: "selectPager",
+          },
         }}
-        >
-        <MenuItem value={'normal'}>Normal Preview</MenuItem>
-        <MenuItem value={'dynamic'}>Dynamic Preview</MenuItem>
+      >
+        <MenuItem value={"normal"}>Normal Preview</MenuItem>
+        <MenuItem value={"dynamic"}>Dynamic Preview</MenuItem>
       </Select>
-        <List>
-        {
-          deviceConfigs.map(_device =>
-            <ListItem
-              key={_device.name}
-              sx={{
-                display: 'flex',
-                textAlign: 'center'
-            }}>
-              <div style={{ width: '120px', alignItems: 'center' }}>
-                <img className='deviceIcon' src={_device.icon} alt={_device.name}/>
+      <List>
+        {deviceConfigs.map((_device) => (
+          <ListItem
+            key={_device.name}
+            sx={{
+              display: "flex",
+              textAlign: "center",
+            }}
+          >
+            <div style={{ width: "120px", alignItems: "center" }}>
+              <img
+                className="deviceIcon"
+                src={_device.icon}
+                alt={_device.name}
+              />
+            </div>
+            <div className="deviceContent">
+              <p style={{ margin: "14px 0" }}>{_device.name}</p>
+              <div className="deviceButtons">
+                <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 className='deviceContent'>
-                <p style={{ margin: "14px 0"}}>{_device.name}</p>
-                <div className='deviceButtons'>
-                  <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>)
-        }
-        </List>
-        <div style={{
-          marginTop: '50px',
-          color: 'white'
-        }}>
-          {
-            props.loading
-            ?
-              <CircularProgress color='inherit'/>
-            :
-            project && <Select
+            </div>
+          </ListItem>
+        ))}
+      </List>
+      <div
+        style={{
+          marginTop: "50px",
+          color: "white",
+        }}
+      >
+        {props.loading ? (
+          <CircularProgress color="inherit" />
+        ) : (
+          project && (
+            <Select
               id="project-select"
               value={project}
               onChange={(e) => projectSelect(e)}
-              placeholder='选择项目'
+              placeholder="选择项目"
               sx={{
-                background: 'rgb(115, 158, 211)',
-                width: '80%',
-                color: 'white'
+                background: "rgb(115, 158, 211)",
+                width: "80%",
+                color: "white",
               }}
-              >
-              {
-                props.projects.map((pName, i) => <MenuItem key={i} value={pName}>{pName}</MenuItem>)
-              }
+            >
+              {props.projects.map((pName, i) => (
+                <MenuItem key={i} value={pName}>
+                  {pName}
+                </MenuItem>
+              ))}
             </Select>
-          }
-        </div>
-        <img src={logoPanePng} alt='logo' width={'100%'} className='bottomLogo'/>
+          )
+        )}
+      </div>
+      {!props.hideLogo && (
+        <img
+          src={logoPanePng}
+          alt="logo"
+          width={"100%"}
+          className="bottomLogo"
+        />
+      )}
     </div>
   );
 }