clean up server monitor buttons

- get them all on one line
- use icons and tooltips so as not to take up too much space
This commit is contained in:
Jonathan Lipps
2017-08-24 16:39:08 -07:00
parent b2f2f096e7
commit b46cf261cc
3 changed files with 45 additions and 23 deletions
@@ -65,12 +65,6 @@
border-color: #a0a0a0 !important;
}
.getRawLogsButton {
position: absolute;
right: 0;
margin: 0 1em 0 0;
}
.term {
white-space: pre-wrap;
width: 100%;
@@ -1,5 +1,5 @@
import React, { Component, PropTypes } from 'react';
import { Button } from 'antd';
import { Button, Tooltip } from 'antd';
import { STATUS_RUNNING, STATUS_STOPPING,
STATUS_STOPPED } from '../../reducers/ServerMonitor';
import styles from './ServerMonitor.css';
@@ -31,15 +31,23 @@ class StopButton extends Component {
render () {
const {serverStatus, stopServer, closeMonitor} = this.props;
let btn = <Button icon="pause-circle-o" className={styles.serverButton}
onClick={stopServer}>Stop Server</Button>;
let btn = <Tooltip title="Stop Server"
placement="bottomLeft">
<Button icon="pause" className={styles.serverButton}
onClick={stopServer} />
</Tooltip>;
if (serverStatus === STATUS_STOPPED) {
btn = <Button className={styles.serverButton}
icon="close-circle-o"
onClick={closeMonitor}>Close Logs</Button>;
btn = <Tooltip title="Close Logs" placement="bottomLeft">
<Button className={styles.serverButton}
icon="close"
onClick={closeMonitor} />
</Tooltip>;
} else if (serverStatus === STATUS_STOPPING) {
btn = <Button icon="pause-circle-o"
className={styles.serverButton} type="disabled">Stopping...</Button>;
btn = <Tooltip title="Stopping..." visible={true}
placement="bottomLeft">
<Button icon="pause"
className={styles.serverButton} type="disabled" />
</Tooltip>;
}
return btn;
}
@@ -54,9 +62,11 @@ class StartSessionButton extends Component {
render () {
const {serverStatus, startSession} = this.props;
if (serverStatus !== STATUS_STOPPED && serverStatus !== STATUS_STOPPING) {
return <Button className={styles.serverButton} id='startNewSessionBtn'
icon="play-circle-o"
onClick={startSession}>Start New Session</Button>;
return <Tooltip title="Start Inspector Session">
<Button className={styles.serverButton} id='startNewSessionBtn'
icon="search"
onClick={startSession} />
</Tooltip>;
} else {
return null;
}
@@ -65,9 +75,11 @@ class StartSessionButton extends Component {
class GetRawLogsButton extends Component {
render () {
return <Button className={`${styles.getRawLogsButton} ${styles.serverButton}`}
icon="file-text"
onClick={() => this.props.getRawLogs()}>Get raw logs</Button>;
return <Tooltip title="Get Raw Logs">
<Button className={styles.serverButton}
icon="download"
onClick={() => this.props.getRawLogs()} />
</Tooltip>;
}
}
@@ -153,11 +165,11 @@ export default class ServerMonitor extends Component {
</div>
<div className={`${styles['button-container']}`}>
<StartSessionButton {...this.props} />
<GetRawLogsButton {...this.props} />
<StopButton {...this.props} />
</div>
</div>
<div className={termClass} ref={(c) => this._term = c}>
<GetRawLogsButton {...this.props} />
{logLineSection}
{lastSection}
</div>
+18 -2
View File
@@ -1,6 +1,6 @@
{
"name": "appium-desktop",
"version": "1.2.0-beta.1",
"version": "1.2.0-beta.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -16,9 +16,18 @@
"integrity": "sha512-jgBTCcJ0gQedE9o8Jw+H/Gyq//EnQxmVpha7CdprIwzRSC81Uj37inHvPzv6jaZgZwkCcfho52rAaIFBrdbO7w==",
"dev": true,
"requires": {
"7zip-bin-mac": "1.0.1"
"7zip-bin-linux": "1.1.0",
"7zip-bin-mac": "1.0.1",
"7zip-bin-win": "2.1.0"
}
},
"7zip-bin-linux": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/7zip-bin-linux/-/7zip-bin-linux-1.1.0.tgz",
"integrity": "sha512-BfW7XsUWNV/j723el3gGbiNWdmvLrnTB9VD0BondfCinxCwz4RQ60W4c3UxRpfHn1Q4Cn1o/DxYFmLMgHTEKqg==",
"dev": true,
"optional": true
},
"7zip-bin-mac": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/7zip-bin-mac/-/7zip-bin-mac-1.0.1.tgz",
@@ -26,6 +35,13 @@
"dev": true,
"optional": true
},
"7zip-bin-win": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/7zip-bin-win/-/7zip-bin-win-2.1.0.tgz",
"integrity": "sha512-7t8V+cGvZ0xUAuTLH1iDkrl+XVYWxlS3hHCvA6yELTcx2VwgMDNe4FdQlyKJRjO0PExn0sit8wD3PGaPKBpt2A==",
"dev": true,
"optional": true
},
"abab": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/abab/-/abab-1.0.3.tgz",