embarklabs
/
embark
mirror of https://github.com/embarklabs/embark.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(cockpit): fix converter inputs and copy-button position

This commit is contained in:
Jonathan Rainville 2019-03-08 10:32:43 -05:00
parent 359c28f5b5
commit 35648eefa0
2 changed files with 5 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/embark-ui/src/components/Converter.js
View File

@ -1,7 +1,6 @@
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import React from 'react'; import React from 'react';
import { import {
InputGroup,
Card, Card,
CardBody, CardBody,
CardHeader, CardHeader,
@ -9,7 +8,6 @@ import {
FormGroup, FormGroup,
Input, Input,
Row, Row,
InputGroupAddon,
Label Label
} from 'reactstrap'; } from 'reactstrap';
import CopyButton from './CopyButton'; import CopyButton from './CopyButton';
@ -62,12 +60,10 @@ class Converter extends React.Component {
this.state.etherConversions.map(unit => ( this.state.etherConversions.map(unit => (
<FormGroup key={unit.key}> <FormGroup key={unit.key}>
<Label htmlFor={unit.name}>{unit.name}</Label> <Label htmlFor={unit.name}>{unit.name}</Label>
<InputGroup> <div className="position-relative">
<Input id={unit.name} placeholder={unit.name} value={unit.value} onChange={e => this.handleOnChange(e, unit.key)} /> <Input id={unit.name} placeholder={unit.name} value={unit.value} onChange={e => this.handleOnChange(e, unit.key)} />
<InputGroupAddon addonType="append"> <CopyButton text={unit.value} title="Copy value to clipboard" size={2}/>
<CopyButton text={unit.value} title="Copy value to clipboard" size={2}/> </div>
</InputGroupAddon>
</InputGroup>
</FormGroup> </FormGroup>
)) ))
} }

4
packages/embark-ui/src/components/CopyButton.css
View File

@ -1,7 +1,7 @@
#root .copy-to-clipboard { #root .copy-to-clipboard {
position: absolute; position: absolute;
right: 0; right: 1px;
top: 0; top: 0.5px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
cursor: pointer; cursor: pointer;