From ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 11:23:16 -0800 Subject: feat: have basic code syntax highlighting working --- packages/website/ts/pages/instant/code_demo.tsx | 45 +++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 packages/website/ts/pages/instant/code_demo.tsx (limited to 'packages/website/ts/pages/instant/code_demo.tsx') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx new file mode 100644 index 000000000..9764227a1 --- /dev/null +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +import SyntaxHighlighter from 'react-syntax-highlighter'; +import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs'; +import { styled } from 'ts/style/theme'; + +import { Container } from 'ts/components/ui/container'; + +const CustomPre = styled.pre` + code { + background-color: inherit !important; + border-radius: 0px; + font-family: 'Roboto Mono', sans-serif; + border: none; + } +`; + +export interface CodeDemoProps {} + +export const CodeDemo: React.StatelessComponent = props => { + const codeString = ` + + + + +`; + return ( + + {codeString} + + ); +}; -- cgit v1.2.3 From 6f394128d46420b336fb50a07f638b12bbb55eec Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 13:01:41 -0800 Subject: feat: improve styling of code demo component --- packages/website/ts/pages/instant/code_demo.tsx | 131 ++++++++++++++++++++++-- 1 file changed, 123 insertions(+), 8 deletions(-) (limited to 'packages/website/ts/pages/instant/code_demo.tsx') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 9764227a1..b029cc368 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -1,24 +1,145 @@ import * as React from 'react'; import SyntaxHighlighter from 'react-syntax-highlighter'; import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs'; +import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; import { Container } from 'ts/components/ui/container'; const CustomPre = styled.pre` + margin: 0px; + line-height: 24px; code { background-color: inherit !important; border-radius: 0px; font-family: 'Roboto Mono', sans-serif; border: none; } + .lsl { + background-color: #2a2a2a !important; + color: #999; + height: 100%; + text-align: center; + padding-right: 5px !important; + padding-left: 5px; + margin-right: 5px; + line-height: 25px; + padding-top: 10px; + } + .xml { + position: relative; + top: 10px; + } `; +const customStyle = { + 'hljs-comment': { + color: '#7e7887', + }, + 'hljs-quote': { + color: '#7e7887', + }, + 'hljs-variable': { + color: '#be4678', + }, + 'hljs-template-variable': { + color: '#be4678', + }, + 'hljs-attribute': { + color: '#be4678', + }, + 'hljs-regexp': { + color: '#be4678', + }, + 'hljs-link': { + color: '#be4678', + }, + 'hljs-tag': { + color: '#61f5ff', + }, + 'hljs-name': { + color: '#61f5ff', + }, + 'hljs-selector-id': { + color: '#be4678', + }, + 'hljs-selector-class': { + color: '#be4678', + }, + 'hljs-number': { + color: '#c994ff', + }, + 'hljs-meta': { + color: '#aa573c', + }, + 'hljs-built_in': { + color: '#aa573c', + }, + 'hljs-builtin-name': { + color: '#aa573c', + }, + 'hljs-literal': { + color: '#aa573c', + }, + 'hljs-type': { + color: '#aa573c', + }, + 'hljs-params': { + color: '#aa573c', + }, + 'hljs-string': { + color: '#bcff88', + }, + 'hljs-symbol': { + color: '#2a9292', + }, + 'hljs-bullet': { + color: '#2a9292', + }, + 'hljs-title': { + color: '#576ddb', + }, + 'hljs-section': { + color: '#576ddb', + }, + 'hljs-keyword': { + color: '#955ae7', + }, + 'hljs-selector-tag': { + color: '#955ae7', + }, + 'hljs-deletion': { + color: '#19171c', + display: 'inline-block', + width: '100%', + backgroundColor: '#be4678', + }, + 'hljs-addition': { + color: '#19171c', + display: 'inline-block', + width: '100%', + backgroundColor: '#2a9292', + }, + hljs: { + display: 'block', + overflowX: 'auto', + background: colors.instantSecondaryBackground, + color: 'white', + fontSize: '12px', + }, + 'hljs-emphasis': { + fontStyle: 'italic', + }, + 'hljs-strong': { + fontWeight: 'bold', + }, +}; + export interface CodeDemoProps {} export const CodeDemo: React.StatelessComponent = props => { const codeString = ` - + `; return ( - + {codeString} ); -- cgit v1.2.3 From a41dfa9ae0924a342324e49d9a3eba22fb255667 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 13:45:40 -0800 Subject: feat: implement configurator layout --- packages/website/ts/pages/instant/code_demo.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/pages/instant/code_demo.tsx') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index b029cc368..4f44a6160 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -9,6 +9,10 @@ import { Container } from 'ts/components/ui/container'; const CustomPre = styled.pre` margin: 0px; line-height: 24px; + overflow: hidden; + width: 600px; + height: 500px; + border-radius: 4px; code { background-color: inherit !important; border-radius: 0px; @@ -22,7 +26,7 @@ const CustomPre = styled.pre` text-align: center; padding-right: 5px !important; padding-left: 5px; - margin-right: 5px; + margin-right: 15px; line-height: 25px; padding-top: 10px; } -- cgit v1.2.3 From f80768cae0c2fdb71237bbdddecc67aec1c1f67f Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 15:57:35 -0800 Subject: feat: add Select component and use for configurator --- packages/website/ts/pages/instant/code_demo.tsx | 3 --- 1 file changed, 3 deletions(-) (limited to 'packages/website/ts/pages/instant/code_demo.tsx') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 4f44a6160..e9ecad40d 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -1,11 +1,8 @@ import * as React from 'react'; import SyntaxHighlighter from 'react-syntax-highlighter'; -import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; -import { Container } from 'ts/components/ui/container'; - const CustomPre = styled.pre` margin: 0px; line-height: 24px; -- cgit v1.2.3 From 9e69257b0db8ce959c0209d4389f9e3a753839bd Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 30 Nov 2018 11:08:49 -0800 Subject: feat: implement code generation --- packages/website/ts/pages/instant/code_demo.tsx | 34 ++++++++----------------- 1 file changed, 10 insertions(+), 24 deletions(-) (limited to 'packages/website/ts/pages/instant/code_demo.tsx') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index e9ecad40d..fa0cebc62 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -6,7 +6,7 @@ import { styled } from 'ts/style/theme'; const CustomPre = styled.pre` margin: 0px; line-height: 24px; - overflow: hidden; + overflow: scroll; width: 600px; height: 500px; border-radius: 4px; @@ -123,7 +123,7 @@ const customStyle = { }, hljs: { display: 'block', - overflowX: 'auto', + overflowX: 'hidden', background: colors.instantSecondaryBackground, color: 'white', fontSize: '12px', @@ -136,26 +136,12 @@ const customStyle = { }, }; -export interface CodeDemoProps {} +export interface CodeDemoProps { + children: string; +} -export const CodeDemo: React.StatelessComponent = props => { - const codeString = ` - - - - -`; - return ( - - {codeString} - - ); -}; +export const CodeDemo: React.StatelessComponent = props => ( + + {props.children} + +); -- cgit v1.2.3 From 4b6ac96a8db908b02a352357592dfef986e23fdc Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 30 Nov 2018 16:01:16 -0800 Subject: fix: use correct styles even when syntax highlighter component removes classnames on second render --- packages/website/ts/pages/instant/code_demo.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/pages/instant/code_demo.tsx') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index fa0cebc62..20eb6b8d1 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -8,7 +8,8 @@ const CustomPre = styled.pre` line-height: 24px; overflow: scroll; width: 600px; - height: 500px; + height: 100%; + max-height: 800px; border-radius: 4px; code { background-color: inherit !important; @@ -16,7 +17,7 @@ const CustomPre = styled.pre` font-family: 'Roboto Mono', sans-serif; border: none; } - .lsl { + code:first-of-type { background-color: #2a2a2a !important; color: #999; height: 100%; @@ -27,7 +28,7 @@ const CustomPre = styled.pre` line-height: 25px; padding-top: 10px; } - .xml { + code:last-of-type { position: relative; top: 10px; } -- cgit v1.2.3 From 50bfbda79a312651581f03614c1b4f4cbbe49cf1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 14:30:38 -0800 Subject: feat: add fee percentage slider --- packages/website/ts/pages/instant/code_demo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/pages/instant/code_demo.tsx') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 20eb6b8d1..e57e39dff 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -20,7 +20,7 @@ const CustomPre = styled.pre` code:first-of-type { background-color: #2a2a2a !important; color: #999; - height: 100%; + min-height: 100%; text-align: center; padding-right: 5px !important; padding-left: 5px; -- cgit v1.2.3 From 3e4b77757e3db5e79fc589475170d49a90c8375e Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 12:49:37 -0800 Subject: hack: make min-height of line-number container 98% to prevent scrollbar from appearing in code demo --- packages/website/ts/pages/instant/code_demo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/pages/instant/code_demo.tsx') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index e57e39dff..4fe1928f5 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -20,7 +20,7 @@ const CustomPre = styled.pre` code:first-of-type { background-color: #2a2a2a !important; color: #999; - min-height: 100%; + min-height: 98%; text-align: center; padding-right: 5px !important; padding-left: 5px; -- cgit v1.2.3 From ce013489ecf86ac7ad51e2f2cd435b18d6054993 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 14:30:31 -0800 Subject: feat: add copy code feature --- packages/website/ts/pages/instant/code_demo.tsx | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/pages/instant/code_demo.tsx') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 4fe1928f5..9a04fceed 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -1,5 +1,10 @@ import * as React from 'react'; +import * as CopyToClipboard from 'react-copy-to-clipboard'; import SyntaxHighlighter from 'react-syntax-highlighter'; + +import { Button } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; @@ -142,7 +147,16 @@ export interface CodeDemoProps { } export const CodeDemo: React.StatelessComponent = props => ( - - {props.children} - + + + + + + + + {props.children} + + ); -- cgit v1.2.3 From 5c29b918df4ac8b0f7914e8da10fa1ae530ff4e8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 15:45:23 -0800 Subject: chore: run linter --- packages/website/ts/pages/instant/code_demo.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/website/ts/pages/instant/code_demo.tsx') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 9a04fceed..c5e565d61 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -4,7 +4,6 @@ import SyntaxHighlighter from 'react-syntax-highlighter'; import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; -- cgit v1.2.3 From fb221e4ca9eec6a66130e3f8230457a1fcee20f8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 5 Dec 2018 12:41:57 -0800 Subject: feat: notify user they've copied to clipboard on copy --- packages/website/ts/pages/instant/code_demo.tsx | 43 +++++++++++++++++-------- 1 file changed, 29 insertions(+), 14 deletions(-) (limited to 'packages/website/ts/pages/instant/code_demo.tsx') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index c5e565d61..b7a9f5b17 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -145,17 +145,32 @@ export interface CodeDemoProps { children: string; } -export const CodeDemo: React.StatelessComponent = props => ( - - - - - - - - {props.children} - - -); +export interface CodeDemoState { + didCopyCode: boolean; +} + +export class CodeDemo extends React.Component { + public state: CodeDemoState = { + didCopyCode: false, + }; + public render(): React.ReactNode { + const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy'; + return ( + + + + + + + + {this.props.children} + + + ); + } + private readonly _handleCopyClick = () => { + this.setState({ didCopyCode: true }); + }; +} -- cgit v1.2.3 From b7603bef192dac4a3e87a365f77dc87c61dbd4f8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 5 Dec 2018 12:44:23 -0800 Subject: fix: ensure copy button is above code --- packages/website/ts/pages/instant/code_demo.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/pages/instant/code_demo.tsx') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index b7a9f5b17..1bc1980e7 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -6,6 +6,7 @@ import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; +import { zIndex } from 'ts/style/z_index'; const CustomPre = styled.pre` margin: 0px; @@ -157,7 +158,7 @@ export class CodeDemo extends React.Component { const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy'; return ( - + + {copyButtonText} @@ -175,3 +174,10 @@ export class CodeDemo extends React.Component { this.setState({ didCopyCode: true }); }; } + +const StyledButton = styled(Button)` + border-radius: 4px; + font-size: 15px; + font-weight: 400; + padding: 9px 21px 7px; +`; -- cgit v1.2.3 From a67b34700e48cdf9a54c601af4ec9b9112fe4803 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 20 Dec 2018 16:03:06 -0800 Subject: feat: remove @next directory from all imports --- packages/website/ts/pages/instant/code_demo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/pages/instant/code_demo.tsx') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 4a3022df5..c59f148b8 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; import SyntaxHighlighter from 'react-syntax-highlighter'; -import { Button } from 'ts/@next/components/button'; +import { Button } from 'ts/components/button'; import { Container } from 'ts/components/ui/container'; import { styled } from 'ts/style/theme'; import { zIndex } from 'ts/style/z_index'; -- cgit v1.2.3