Skip to content
This repository has been archived by the owner on Apr 25, 2023. It is now read-only.

Commit

Permalink
Adapt CSS to work with ANTD v3 (#772)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpgraham
dpgraham committed Dec 17, 2018
1 parent fa6599c commit f9f5ced
Show file tree
Hide file tree
Showing 23 changed files with 583 additions and 277 deletions.
2 changes: 1 addition & 1 deletion app/renderer/actions/Session.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ export function setLocalServerParams () {
dispatch({type: SET_SERVER_PARAM, serverType: ServerTypes.local, name: 'port', value: undefined});
dispatch({type: SET_SERVER_PARAM, serverType: ServerTypes.local, name: 'hostname', value: undefined});
if (getState().session.serverType === 'local') {
changeServerType('remote')(dispatch);
changeServerType('remote')(dispatch, getState);
}
}
};
Expand Down
1 change: 0 additions & 1 deletion app/renderer/components/Inspector/HighlighterRect.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import InspectorCSS from './Inspector.css';
import { parseCoordinates } from './shared';

Expand Down
1 change: 1 addition & 0 deletions app/renderer/components/Inspector/Inspector.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,3 +283,4 @@
.action-controls {
margin-right: 20px;
}

30 changes: 2 additions & 28 deletions app/renderer/components/ServerMonitor/ServerMonitor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
color: orange;
}

.status span {
.status i {
margin-right: 10px;
}

Expand Down Expand Up @@ -95,41 +95,15 @@
-webkit-user-select: text;
}

.term span.icon {
.term i {
margin-right: 8px;
font-size: 0.9em;
display: inline-block;
width: 10px;
}

.term :global(span.anticon-info-circle:before) {
color: #5252bf;
}

.term :global(span.anticon-exclamation-circle:before) {
color: yellow;
}

.term :global(span.anticon-close-circle:before) {
color: red;
}

.term :global(span.anticon-message:before) {
color: #999;
}

.term .last {
border-bottom: 1px dashed #a0a0a0;
margin-top: 10px;
}

.button-container button {
padding: 8px;
margin-right: 8px;
height: auto;
}

.term .timestamp {
color: #666;
margin-right: 0.6em;
}
13 changes: 7 additions & 6 deletions app/renderer/components/ServerMonitor/ServerMonitor.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Button, Tooltip } from 'antd';
import { Button, Tooltip, Icon } from 'antd';
import { STATUS_RUNNING, STATUS_STOPPING,
STATUS_STOPPED } from '../../reducers/ServerMonitor';
import styles from './ServerMonitor.css';
Expand Down Expand Up @@ -126,15 +126,15 @@ export default class ServerMonitor extends Component {
let statusIcon, statusMsg;
switch (serverStatus) {
case STATUS_RUNNING:
statusIcon = "anticon-retweet";
statusIcon = "play-circle";
statusMsg = "The server is running";
break;
case STATUS_STOPPED:
statusIcon = "anticon-pause-circle";
statusIcon = "pause-circle";
statusMsg = "The server is stopped";
break;
case STATUS_STOPPING:
statusIcon = "anticon-loading";
statusIcon = "loading";
statusMsg = "The server is waiting for all connections to close";
break;
default:
Expand All @@ -143,9 +143,10 @@ export default class ServerMonitor extends Component {

let logLineSection = logLines.slice(logLines.length - MAX_LOGS_RENDERED).map((line, i) => {
let icn = leveler(line.level);

return (
<div key={i}>
<span className={`${styles.icon} anticon anticon-${icn}`} />
<Icon type={icn} theme="filled" />
{
serverArgs.logTimestamp &&
<span className={styles.timestamp}>
Expand Down Expand Up @@ -173,7 +174,7 @@ export default class ServerMonitor extends Component {
<div className={`${styles.bar} ${styles['bar-' + serverStatus]}`}>
<img src={AppiumSmallMagenta} className={styles.logo} />
<div className={`${styles.status} ${styles[serverStatus]}`}>
<span className={`icon anticon ${statusIcon}`} />
<Icon type={statusIcon} theme="filled" />
{statusMsg}
</div>
<div className={`${styles['button-container']}`}>
Expand Down
47 changes: 27 additions & 20 deletions app/renderer/components/Session/AdvancedServerParams.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { Component } from 'react';
import { Collapse, Form, Checkbox, Col, Input } from 'antd';
import { Collapse, Form, Row, Col, Checkbox, Input } from 'antd';
import styles from './Session.css';

const {Panel} = Collapse;
const FormItem = Form.Item;
Expand All @@ -10,24 +11,30 @@ export default class AdvancedServerParams extends Component {
render () {
const {server, setServerParam} = this.props;

return <Collapse bordered={true}>
<Panel header="Advanced Settings">
<Col span={6}>
<FormItem>
<Checkbox checked={!!server.advanced.allowUnauthorized} onChange={(e) => setServerParam('allowUnauthorized', e.target.checked, 'advanced')}>Allow Unauthorized Certificates</Checkbox>
</FormItem>
</Col>
<Col span={4}>
<FormItem>
<Checkbox checked={!!server.advanced.useProxy} onChange={(e) => setServerParam('useProxy', e.target.checked, 'advanced')}>Use Proxy</Checkbox>
</FormItem>
</Col>
<Col span={6}>
<FormItem>
<Input disabled={!server.advanced.useProxy} onChange={(e) => setServerParam('proxy', e.target.value, 'advanced')} placeholder="Proxy URL" value={server.advanced.proxy} />
</FormItem>
</Col>
</Panel>
</Collapse>;
return <Row gutter={8}>
<Col>
<div className={styles.advancedSettingsContainer}>
<Collapse bordered={true}>
<Panel header="Advanced Settings">
<Col span={6}>
<FormItem>
<Checkbox checked={!!server.advanced.allowUnauthorized} onChange={(e) => setServerParam('allowUnauthorized', e.target.checked, 'advanced')}>Allow Unauthorized Certificates</Checkbox>
</FormItem>
</Col>
<Col span={4}>
<FormItem>
<Checkbox checked={!!server.advanced.useProxy} onChange={(e) => setServerParam('useProxy', e.target.checked, 'advanced')}>Use Proxy</Checkbox>
</FormItem>
</Col>
<Col span={6}>
<FormItem>
<Input disabled={!server.advanced.useProxy} onChange={(e) => setServerParam('proxy', e.target.value, 'advanced')} placeholder="Proxy URL" value={server.advanced.proxy} />
</FormItem>
</Col>
</Panel>
</Collapse>
</div>
</Col>
</Row>;
}
}
35 changes: 21 additions & 14 deletions app/renderer/components/Session/AttachToSession.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { Form, Card, Select, Button } from 'antd';
import { Form, Card, Select, Button, Row, Col } from 'antd';
import SessionCSS from './Session.css';

const FormItem = Form.Item;
Expand All @@ -16,26 +16,33 @@ export default class AttachToSession extends Component {

render () {
let {attachSessId, setAttachSessId, runningAppiumSessions, getRunningSessions} = this.props;
attachSessId = attachSessId || "";
return (<Form>
<FormItem>
<Card>
<p className={SessionCSS.localDesc}>If you have an already-running session of the above server type, you can attach an inspector to it directly.<br/>Select the Session ID in the dropdown below.</p>
</Card>
</FormItem>
<FormItem>
<Select showSearch
mode='combobox'
notFoundContent='None found'
placeholder='Enter your session ID here'
value={attachSessId}
onChange={(value) => setAttachSessId(value)}>
{runningAppiumSessions.map((session) => <Select.Option key={session.id} value={session.id}>
<div>{session.id} -- {formatCaps(session.capabilities)}</div>
</Select.Option>)}
</Select>
<div className='inner-button'>
<Button onClick={getRunningSessions} icon='reload' />
</div>
<Row>
<Col span={23}>
<Select showSearch
mode='combobox'
notFoundContent='None found'
placeholder='Enter your session ID here'
value={attachSessId}
onChange={(value) => setAttachSessId(value)}>
{runningAppiumSessions.map((session) => <Select.Option key={session.id} value={session.id}>
<div>{session.id} -- {formatCaps(session.capabilities)}</div>
</Select.Option>)}
</Select>
</Col>
<Col span={1}>
<div className={SessionCSS.btnReload}>
<Button onClick={getRunningSessions} icon='reload' />
</div>
</Col>
</Row>
</FormItem>
</Form>);
}
Expand Down
43 changes: 22 additions & 21 deletions app/renderer/components/Session/FormattedCaps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,26 +13,27 @@ export default class NewSessionForm extends Component {
render () {
const {caps, title, isEditingDesiredCaps, startDesiredCapsEditor, abortDesiredCapsEditor, saveRawDesiredCaps, setRawDesiredCaps, rawDesiredCaps,
isValidCapsJson, invalidCapsJsonReason} = this.props;
return caps && <Card title={title || "JSON Representation"}
className={SessionCSS['formatted-caps']}>
<div className={SessionCSS.capsEditorControls}>
{isEditingDesiredCaps && <Tooltip title='Cancel'>
<Button onClick={abortDesiredCapsEditor} icon='close' className={SessionCSS.capsEditorButton} />
</Tooltip> }
{isEditingDesiredCaps && <Tooltip title='Save'>
<Button onClick={saveRawDesiredCaps} icon='save' className={SessionCSS.capsEditorButton} />
</Tooltip>}
{!isEditingDesiredCaps && <Tooltip title='Edit Raw JSON' placement="topRight" >
<Button onClick={startDesiredCapsEditor} icon='edit' />
</Tooltip> }
</div>
{isEditingDesiredCaps && <div>
<textarea rows='9' onChange={(e) => setRawDesiredCaps(e.target.value)} value={rawDesiredCaps} className={SessionCSS.capsEditor} />
{!isValidCapsJson && <Alert message={invalidCapsJsonReason} type="error" />}
</div>}
{!isEditingDesiredCaps && <div>
<pre>{this.getFormattedJSON(caps)}</pre>
</div>}
</Card>;
return caps && <div>
<Card title={title || "JSON Representation"} className={SessionCSS.formattedCaps}>
<div className={SessionCSS.capsEditorControls}>
{isEditingDesiredCaps && <Tooltip title='Cancel'>
<Button onClick={abortDesiredCapsEditor} icon='close' className={SessionCSS.capsEditorButton} />
</Tooltip> }
{isEditingDesiredCaps && <Tooltip title='Save'>
<Button onClick={saveRawDesiredCaps} icon='save' className={SessionCSS.capsEditorButton} />
</Tooltip>}
{!isEditingDesiredCaps && <Tooltip title='Edit Raw JSON' placement="topRight" >
<Button onClick={startDesiredCapsEditor} icon='edit' />
</Tooltip> }
</div>
{isEditingDesiredCaps && <div>
<textarea rows='9' onChange={(e) => setRawDesiredCaps(e.target.value)} value={rawDesiredCaps} className={SessionCSS.capsEditor} />
{!isValidCapsJson && <Alert message={invalidCapsJsonReason} type="error" />}
</div>}
{!isEditingDesiredCaps && <div>
<pre>{this.getFormattedJSON(caps)}</pre>
</div>}
</Card>
</div>;
}
}
77 changes: 45 additions & 32 deletions app/renderer/components/Session/NewSessionForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,17 @@ export default class NewSessionForm extends Component {
onClick={() => this.getLocalFilePath((filepath) => setCapabilityParam(index, 'value', filepath[0]))} />;

switch (cap.type) {
case 'text': return <Input disabled={isEditingDesiredCaps} id={`desiredCapabilityValue_${index}`} placeholder='Value' value={cap.value} onChange={(e) => setCapabilityParam(index, 'value', e.target.value)} size="large"/>;
case 'text': return <Input disabled={isEditingDesiredCaps} id={`desiredCapabilityValue_${index}`} placeholder='Value' value={cap.value} onChange={(e) => setCapabilityParam(index, 'value', e.target.value)} />;
case 'boolean': return <Switch disabled={isEditingDesiredCaps} id={`desiredCapabilityValue_${index}`} checkedChildren={'true'} unCheckedChildren={'false'}
placeholder='Value' checked={cap.value} onChange={(value) => setCapabilityParam(index, 'value', value)} />;
case 'number': return <Input disabled={isEditingDesiredCaps} id={`desiredCapabilityValue_${index}`} placeholder='Value' value={cap.value}
onChange={(e) => !isNaN(parseInt(e.target.value, 10)) ? setCapabilityParam(index, 'value', parseInt(e.target.value, 10)) : setCapabilityParam(index, 'value', undefined)} size="large"/>;
onChange={(e) => !isNaN(parseInt(e.target.value, 10)) ? setCapabilityParam(index, 'value', parseInt(e.target.value, 10)) : setCapabilityParam(index, 'value', undefined)} />;
case 'object':
case 'json_object':
return <Input disabled={isEditingDesiredCaps} id={`desiredCapabilityValue_${index}`} type='textarea' rows={4} placeholder='Value' value={cap.value}
onChange={(e) => setCapabilityParam(index, 'value', e.target.value)} size="large"/>;
onChange={(e) => setCapabilityParam(index, 'value', e.target.value)} />;
case 'file': return <div className={SessionStyles.fileControlWrapper}>
<Input disabled={isEditingDesiredCaps} id={`desiredCapabilityValue_${index}`} placeholder='Value' value={cap.value} addonAfter={buttonAfter} size="large"/>
<Input disabled={isEditingDesiredCaps} id={`desiredCapabilityValue_${index}`} placeholder='Value' value={cap.value} addonAfter={buttonAfter} />
</div>;

default:
Expand Down Expand Up @@ -87,39 +87,52 @@ export default class NewSessionForm extends Component {

return <div>
<Row type="flex" align="top" justify="start" className={SessionStyles.capsFormRow}>
<Col order={1} className={`${SessionStyles.capsFormCol} ${isEditingDesiredCaps ? SessionStyles.capsFormDisabled : ''}`}>
<Form inline>
<Col order={1} span={12} className={`${SessionStyles.capsFormCol} ${isEditingDesiredCaps ? SessionStyles.capsFormDisabled : ''}`}>
<Form>
{caps.map((cap, index) => {
return <div key={index} className={SessionStyles['desired-capabilities-form-container']}>
<FormItem>
<Input disabled={isEditingDesiredCaps} id={`desiredCapabilityName_${index}`} placeholder='Name' value={cap.name} onChange={(e) => setCapabilityParam(index, 'name', e.target.value)}/>
</FormItem>
<FormItem>
<Select disabled={isEditingDesiredCaps} onChange={(val) => this.handleSetType(index, val)} defaultValue={cap.type} size="large" style={{width: 120}}>
<Option value='text'>text</Option>
<Option value='boolean'>boolean</Option>
<Option value='number'>number</Option>
<Option value='object'>JSON object</Option>
<Option value='file'>filepath</Option>
</Select>
</FormItem>
<FormItem className={SessionStyles.capsValueControl}>
{this.getCapsControl(cap, index)}
</FormItem>
<FormItem>
<Button {...{disabled: caps.length <= 1 || isEditingDesiredCaps}} icon='delete' onClick={() => removeCapability(index)}/>
</FormItem>
return <div key={index}>
<Row gutter={8}>
<Col span={7}>
<FormItem>
<Input disabled={isEditingDesiredCaps} id={`desiredCapabilityName_${index}`} placeholder='Name' value={cap.name} onChange={(e) => setCapabilityParam(index, 'name', e.target.value)}/>
</FormItem>
</Col>
<Col span={8}>
<FormItem>
<Select disabled={isEditingDesiredCaps} onChange={(val) => this.handleSetType(index, val)} defaultValue={cap.type}>
<Option value='text'>text</Option>
<Option value='boolean'>boolean</Option>
<Option value='number'>number</Option>
<Option value='object'>JSON object</Option>
<Option value='file'>filepath</Option>
</Select>
</FormItem>
</Col>
<Col span={7}>
<FormItem>
{this.getCapsControl(cap, index)}
</FormItem>
</Col>
<Col span={2}>
<div className={SessionStyles.btnDeleteCap}>
<FormItem>
<Button {...{disabled: caps.length <= 1 || isEditingDesiredCaps}} icon='delete' onClick={() => removeCapability(index)}/>
</FormItem>
</div>
</Col>
</Row>
</div>;
})}
<div className={SessionStyles.capsFormLastRow}>
<FormItem>
<Button disabled={isEditingDesiredCaps} id='btnAddDesiredCapability' icon='plus' onClick={addCapability} className={SessionStyles['add-desired-capability-button']} />
</FormItem>
</div>
<Row>
<Col span={24}>
<FormItem>
<Button disabled={isEditingDesiredCaps} id='btnAddDesiredCapability' icon='plus' onClick={addCapability} className={SessionStyles['add-desired-capability-button']} />
</FormItem>
</Col>
</Row>
</Form>
</Col>

<Col order={2} className={SessionStyles.capsFormattedCol}>
<Col order={2} span={12} className={SessionStyles.capsFormattedCol}>
<FormattedCaps {...this.props} />
<Modal visible={showSaveAsModal}
title='Save Capability Set As...'
Expand Down
Loading

0 comments on commit f9f5ced

Please sign in to comment.