diff options
| author | August Skare <post@augustskare.no> | 2018-10-26 14:50:20 +0800 |
|---|---|---|
| committer | August Skare <post@augustskare.no> | 2018-10-26 14:50:20 +0800 |
| commit | f17c7e4a22c4a11056251598a11b0ffb31804b73 (patch) | |
| tree | 3098c59af55138692fd77b4c47d4fd6a83bd819a | |
| parent | 5fe98c816db02e44bf8f6744ca934f862f435898 (diff) | |
| download | dexon-sol-tools-f17c7e4a22c4a11056251598a11b0ffb31804b73.tar.gz dexon-sol-tools-f17c7e4a22c4a11056251598a11b0ffb31804b73.tar.zst dexon-sol-tools-f17c7e4a22c4a11056251598a11b0ffb31804b73.zip | |
fix button position in code component
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Code.tsx | 39 |
1 files changed, 22 insertions, 17 deletions
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx index ffa4441d4..753965568 100644 --- a/packages/dev-tools-pages/ts/components/Code.tsx +++ b/packages/dev-tools-pages/ts/components/Code.tsx @@ -29,6 +29,13 @@ const Button = styled(BaseButton)` } `; +const Container = styled.div` + position: relative; + &:hover ${Button} { + opacity: 1; + } +`; + const Base = styled.div < CodeProps > @@ -54,10 +61,6 @@ const Base = overflow-x: auto; -webkit-overflow-scrolling: touch; - - &:hover ${Button} { - opacity: 1; - } `; const StyledCodeDiff = @@ -162,20 +165,22 @@ class Code extends React.Component<CodeProps, CodeState> { const Code = diff ? StyledCodeDiff : 'code'; return ( - <Base language={language} diff={diff} light={light}> - <StyledPre> - <Code - gutterLength={gutterLength} - dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null} - > - {hlCode === undefined ? children : null} - </Code> - </StyledPre> + <Container> + <Base language={language} diff={diff} light={light}> + <StyledPre> + <Code + gutterLength={gutterLength} + dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null} + > + {hlCode === undefined ? children : null} + </Code> + </StyledPre> + {!('clipboard' in navigator) ? ( + <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} /> + ) : null} + </Base> {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null} - {!('clipboard' in navigator) ? ( - <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} /> - ) : null} - </Base> + </Container> ); } } |