Optimize frontend styles

Maginaaa · Jun 2, 2023 · d02dcda · d02dcda
1 parent 4a0771c
commit d02dcda
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 40 deletions.
diff --git a/web/client/public/index.html b/web/client/public/index.html
@@ -27,10 +27,6 @@
  <title>go-mitmproxy</title>
  </head>
  <body>
-
- <!-- https://tholman.com/github-corners/ -->
- <a href="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/lqqyt2423/go-mitmproxy" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0; z-index: 100;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
-
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--

diff --git a/web/client/src/App.css b/web/client/src/App.css
@@ -1,3 +1,7 @@
+body {
+ overflow: hidden;
+}
+
 .main-table-wrap {
  font-family: Menlo,Monaco;
  font-size: 0.8rem;
@@ -36,16 +40,12 @@
 
 .top-control {
  display: flex;
+ justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 10px;
 }
 
-.top-control > div {
- margin-right: 20px;
-}
-
-
 .main-table-wrap tbody tr.tr-selected {
  background-color: rgb(35, 118, 229);
  color: white;
@@ -62,10 +62,11 @@
 
 .flow-detail {
  position: fixed;
- top: 0;
+ top: 51px;
  right: 0;
 
- height: 100vh;
+ border-top: 2px solid rgb(222, 226, 230);
+ height: calc(100vh - 51px);
  background-color: #fff;
  min-width: 500px;
  width: 50%;

diff --git a/web/client/src/App.tsx b/web/client/src/App.tsx
@@ -3,6 +3,8 @@ import Table from 'react-bootstrap/Table'
 import Form from 'react-bootstrap/Form'
 import Button from 'react-bootstrap/Button'
 import './App.css'
+import GitHubLogo from './github-mark.svg'
+import Badge from 'react-bootstrap/Badge'
 
 import BreakPoint from './components/BreakPoint'
 import FlowPreview from './components/FlowPreview'
@@ -166,37 +168,46 @@ class App extends React.Component<IProps, IState> {
  return (
  <div className="main-table-wrap">
  <div className="top-control">
- <div><Button size="sm" onClick={() => {
- this.flowMgr.clear()
- this.setState({ flows: this.flowMgr.showList(), flow: null })
- }}>Clear</Button></div>
- <div>
- <Form.Control
- size="sm" placeholder="Filter"
- style={{ width: '350px' }}
- isInvalid={this.state.filterInvalid}
- onChange={(e) => {
- const value = e.target.value
- this.flowMgr.changeFilterLazy(value, (err) => {
- if (err) {
- console.log('changeFilterLazy error', err)
- }
- this.setState({
- filterInvalid: err ? true : false,
- flows: this.flowMgr.showList()
+ <div style={{ display: 'flex', alignItems: 'center' }}>
+ <div style={{ marginRight: '10px' }}><Button size="sm" onClick={() => {
+ this.flowMgr.clear()
+ this.setState({ flows: this.flowMgr.showList(), flow: null })
+ }}>Clear</Button></div>
+ <div style={{ marginRight: '10px' }}>
+ <Form.Control
+ size="sm" placeholder="Filter"
+ style={{ width: '350px' }}
+ isInvalid={this.state.filterInvalid}
+ onChange={(e) => {
+ const value = e.target.value
+ this.flowMgr.changeFilterLazy(value, (err) => {
+ if (err) {
+ console.log('changeFilterLazy error', err)
+ }
+ this.setState({
+ filterInvalid: err ? true : false,
+ flows: this.flowMgr.showList()
+ })
  })
- })
- }}
- >
- </Form.Control>
+ }}
+ >
+ </Form.Control>
+ </div>
+
+ <div style={{ marginRight: '10px' }}>
+ <BreakPoint onSave={rules => {
+ const msg = buildMessageMeta(SendMessageType.CHANGE_BREAK_POINT_RULES, rules)
+ if (this.ws) this.ws.send(msg)
+ }} />
+ </div>
+ </div>
+
+ <div style={{ display: 'flex', alignItems: 'center' }}>
+ <div style={{ marginRight: '10px' }}>
+ { this.state.wsStatus === 'open' ? <Badge pill bg="success">on</Badge> : <Badge pill bg="danger">off</Badge> }
+ </div>
+ <a href='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/lqqyt2423/go-mitmproxy' target='_blank' rel="noreferrer"><img style={{ height: '30px' }} src={GitHubLogo} alt="GitHub Logo" /></a>
  </div>
-
- <BreakPoint onSave={rules => {
- const msg = buildMessageMeta(SendMessageType.CHANGE_BREAK_POINT_RULES, rules)
- if (this.ws) this.ws.send(msg)
- }} />
-
- <span>status: {this.state.wsStatus}</span>
  </div>
 
  <div className="table-wrap-div">

diff --git a/web/client/src/github-mark.svg b/web/client/src/github-mark.svg