aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages
diff options
context:
space:
mode:
authorMegan Pearson <megan.e.pearson@gmail.com>2018-10-24 20:31:07 +0800
committerAugust Skare <post@augustskare.no>2018-10-25 19:13:00 +0800
commit9cf055c1596d8abce854fea8f4e209573d6df7c8 (patch)
tree7b8caf48a0c578358d0f8fe464e836ce5c69b389 /packages/dev-tools-pages
parent16b515707823f7f60f641665a3a96b3092d881ee (diff)
downloaddexon-sol-tools-9cf055c1596d8abce854fea8f4e209573d6df7c8.tar
dexon-sol-tools-9cf055c1596d8abce854fea8f4e209573d6df7c8.tar.gz
dexon-sol-tools-9cf055c1596d8abce854fea8f4e209573d6df7c8.tar.bz2
dexon-sol-tools-9cf055c1596d8abce854fea8f4e209573d6df7c8.tar.lz
dexon-sol-tools-9cf055c1596d8abce854fea8f4e209573d6df7c8.tar.xz
dexon-sol-tools-9cf055c1596d8abce854fea8f4e209573d6df7c8.tar.zst
dexon-sol-tools-9cf055c1596d8abce854fea8f4e209573d6df7c8.zip
Add highlighter.js; basic styling for .diff classes; Start of code block in cov
Diffstat (limited to 'packages/dev-tools-pages')
-rw-r--r--packages/dev-tools-pages/package.json1
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx32
-rw-r--r--packages/dev-tools-pages/ts/globals.d.ts1
-rw-r--r--packages/dev-tools-pages/ts/pages/Cov.tsx18
4 files changed, 41 insertions, 11 deletions
diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json
index eb34e3715..c85ff44a6 100644
--- a/packages/dev-tools-pages/package.json
+++ b/packages/dev-tools-pages/package.json
@@ -18,6 +18,7 @@
"dependencies": {
"@0xproject/react-shared": "^1.0.15",
"highlight.js": "^9.13.1",
+ "highlighter": "^0.1.0",
"less": "^2.7.2",
"polished": "^1.9.2",
"react": "^16.5.2",
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 88cfba7f8..5a03e79ac 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -4,6 +4,8 @@ import styled from 'styled-components';
import { colors } from 'ts/variables';
import BaseButton from './Button';
+var highlight = require('highlighter')();
+
interface CodeProps {
children: React.ReactNode;
language?: string;
@@ -28,11 +30,11 @@ const Button = styled(BaseButton)`
const Base =
styled.div <
- CodeProps >
- `
+ CodeProps >
+ `
color: ${props => (props.language === undefined ? colors.white : 'inherit')};
background-color: ${props =>
- props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : colors.lightGray};
+ props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : colors.lightGray};
white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
position: relative;
&:hover ${Button} {
@@ -41,10 +43,25 @@ const Base =
`;
const StyledCode = styled.code`
- padding: 1.5rem;
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
display: block;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
+
+
+ .diff-addition {
+ background-color: #d2e9e0;
+ padding: 0.3125rem;
+ display: inline-block;
+ width: 100%;
+ }
+ .diff-deletion {
+ background-color: #ebdcdc;
+ padding: 0.3125rem;
+ display: inline-block;
+ width: 100%;
+ }
`;
const StyledPre = styled.pre`
@@ -75,7 +92,8 @@ class Code extends React.Component<CodeProps, CodeState> {
if (language !== undefined) {
const { default: hljs } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
- const { value: hlCode } = hljs.highlight(language, children as string);
+
+ const hlCode = hljs(children as string, language);
this.setState({ hlCode });
}
}
@@ -105,8 +123,8 @@ class Code extends React.Component<CodeProps, CodeState> {
{this.state.hlCode !== undefined ? (
<StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} />
) : (
- <StyledCode>{this.props.children}</StyledCode>
- )}
+ <StyledCode>{this.props.children}</StyledCode>
+ )}
</StyledPre>
{navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null}
{!('clipboard' in navigator) ? (
diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts
index 07871a74b..5c7cbe54c 100644
--- a/packages/dev-tools-pages/ts/globals.d.ts
+++ b/packages/dev-tools-pages/ts/globals.d.ts
@@ -1,5 +1,6 @@
declare module 'whatwg-fetch';
declare module 'react-document-title';
+declare module 'highlighter';
declare var System: any;
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 8fd1ace43..01966537c 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -22,11 +22,21 @@ function Cov() {
coverage.
</IntroLead>
<IntroAside>
- <Code language="js">
- {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+ <Code language="js.diff">
+ {`+function executeTransaction(uint transactionId)
+ public
++notExecuted(transactionId)
++pastTimeLock(transactionId)
+{
++Transaction storage tx = transactions[transactionId]
++tx.executed = true
++if (tx.destination.call.value(tx.value)(tx.data))
++Execution(transactionId)
+else {
+-ExecutionFailure(transactionId)
-// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
-const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+ }
+}`}
</Code>
</IntroAside>
</Intro>