From 84d5c470ddf19efebfa81ff8c035265798c7fb11 Mon Sep 17 00:00:00 2001 From: Samuel Fang Date: Tue, 22 Jun 2021 16:29:09 +0800 Subject: [PATCH 1/3] Fix share links not working in sicp --- .../controlBar/ControlBarShareButton.tsx | 14 ++++++-- src/commons/utils/Constants.ts | 1 + src/features/sicp/parser/ParseJson.tsx | 2 +- src/pages/playground/Playground.tsx | 32 +++++++++++-------- src/pages/sicp/subcomponents/CodeSnippet.tsx | 5 +-- 5 files changed, 36 insertions(+), 18 deletions(-) diff --git a/src/commons/controlBar/ControlBarShareButton.tsx b/src/commons/controlBar/ControlBarShareButton.tsx index b1c1db0a11..b7afc3b596 100644 --- a/src/commons/controlBar/ControlBarShareButton.tsx +++ b/src/commons/controlBar/ControlBarShareButton.tsx @@ -1,4 +1,4 @@ -import { NonIdealState, Position, Spinner, Text } from '@blueprintjs/core'; +import { NonIdealState, Position, Spinner, SpinnerSize, Text } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; import { Popover2, Tooltip2 } from '@blueprintjs/popover2'; import * as React from 'react'; @@ -19,6 +19,7 @@ type StateProps = { queryString?: string; shortURL?: string; key: string; + isSicp?: boolean; }; type State = { @@ -51,6 +52,15 @@ export class ControlBarShareButton extends React.PureComponent + ) : this.props.isSicp ? ( +
+ + + + {controlButton('', IconNames.DUPLICATE, this.selectShareInputText)} + + +
) : ( <> {!this.props.shortURL || this.props.shortURL === 'ERROR' ? ( @@ -71,7 +81,7 @@ export class ControlBarShareButton extends React.PureComponent } + icon={} /> ) diff --git a/src/commons/utils/Constants.ts b/src/commons/utils/Constants.ts index 4af409aa82..2c271f6560 100644 --- a/src/commons/utils/Constants.ts +++ b/src/commons/utils/Constants.ts @@ -81,6 +81,7 @@ export enum Links { techSVC = 'mailto:techsvc@comp.nus.edu.sg', techSVCNumber = '6516 2736', textbook = 'https://source-academy.github.io/interactive-sicp/', + playground = 'https://source-academy.github.io/playground', textbookChapter2_2 = 'https://source-academy.github.io/interactive-sicp/2.2', textbookChapter3_2 = 'https://source-academy.github.io/interactive-sicp/3.2', diff --git a/src/features/sicp/parser/ParseJson.tsx b/src/features/sicp/parser/ParseJson.tsx index c46d48752f..b3e7c5cd5a 100644 --- a/src/features/sicp/parser/ParseJson.tsx +++ b/src/features/sicp/parser/ParseJson.tsx @@ -105,7 +105,7 @@ const handleSnippet = (obj: JsonType) => { body: obj['body']!, id: obj['id']!, initialEditorValueHash: obj['withoutPrepend']!, - initialFullProgramHash: obj['program']!, + initialFullProgramHash: obj['program']! || obj['withoutPrepend']!, initialPrependHash: obj['prepend']!, output: obj['output']! }; diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx index 0af9c8afc4..52ebdd2a41 100644 --- a/src/pages/playground/Playground.tsx +++ b/src/pages/playground/Playground.tsx @@ -44,7 +44,7 @@ import SideContentRemoteExecution from '../../commons/sideContent/SideContentRem import SideContentSubstVisualizer from '../../commons/sideContent/SideContentSubstVisualizer'; import { SideContentTab, SideContentType } from '../../commons/sideContent/SideContentTypes'; import SideContentVideoDisplay from '../../commons/sideContent/SideContentVideoDisplay'; -import Constants from '../../commons/utils/Constants'; +import Constants, { Links } from '../../commons/utils/Constants'; import { generateSourceIntroduction } from '../../commons/utils/IntroductionHelper'; import { stringParamToInt } from '../../commons/utils/ParamParseHelper'; import { parseQuery } from '../../commons/utils/QueryHelper'; @@ -64,6 +64,7 @@ export type OwnProps = { isSicpEditor?: boolean; initialEditorValueHash?: string; initialPrependHash?: string | undefined; + initialFullProgramHash?: string; handleCloseEditor?: () => void; }; @@ -551,25 +552,30 @@ const Playground: React.FC = props => { /> ); - const shareButton = React.useMemo( - () => ( + const shareButton = React.useMemo(() => { + const queryString = isSicpEditor + ? Links.playground + '#' + props.initialFullProgramHash + : props.queryString; + return ( - ), - [ - props.handleGenerateLz, - props.handleShortenURL, - props.handleUpdateShortURL, - props.queryString, - props.shortURL - ] - ); + ); + }, [ + isSicpEditor, + props.handleGenerateLz, + props.handleShortenURL, + props.handleUpdateShortURL, + props.initialFullProgramHash, + props.queryString, + props.shortURL + ]); const playgroundIntroductionTab: SideContentTab = React.useMemo( () => ({ diff --git a/src/pages/sicp/subcomponents/CodeSnippet.tsx b/src/pages/sicp/subcomponents/CodeSnippet.tsx index 9bfc01e147..d9bf964ce6 100644 --- a/src/pages/sicp/subcomponents/CodeSnippet.tsx +++ b/src/pages/sicp/subcomponents/CodeSnippet.tsx @@ -19,8 +19,8 @@ type OwnProps = { output: string; id: string; initialEditorValueHash: string; - initialPrependHash?: string | undefined; - initialFullProgramHash?: string | undefined; + initialPrependHash: string | undefined; + initialFullProgramHash: string | undefined; }; const resizableProps = { @@ -65,6 +65,7 @@ const CodeSnippet: React.FC = props => { ? props.initialFullProgramHash : props.initialEditorValueHash, initialPrependHash: showPrepend ? undefined : props.initialPrependHash, + initialFullProgramHash: props.initialFullProgramHash, isSicpEditor: true, handleCloseEditor: handleClose From 3136ae6aaf95a7cee1457bf9f0eaeee60b794d82 Mon Sep 17 00:00:00 2001 From: Samuel Fang Date: Tue, 22 Jun 2021 23:02:33 +0800 Subject: [PATCH 2/3] Increase width of sicp playground --- .../__snapshots__/ParseJson.tsx.snap | 6 +-- src/pages/sicp/subcomponents/CodeSnippet.tsx | 14 +++--- src/styles/_sicp.scss | 43 +++++++++++++++++-- 3 files changed, 51 insertions(+), 12 deletions(-) diff --git a/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap b/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap index 1c5ea40bb2..ad006b0bca 100644 --- a/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap +++ b/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap @@ -160,7 +160,7 @@ exports[`Parse figures FIGURE with image successful 1`] = ` exports[`Parse figures FIGURE with snippet successful 1`] = ` "
- +
name @@ -425,13 +425,13 @@ exports[`Parse snippet SNIPPET with prepend successful 1`] = ` `; exports[`Parse snippet SNIPPET without prepend successful 1`] = ` -"
+"
Code Snippet
" `; exports[`Parse snippet SNIPPET without prepend with output successful 1`] = ` -"
+"
Code Snippet
" `; diff --git a/src/pages/sicp/subcomponents/CodeSnippet.tsx b/src/pages/sicp/subcomponents/CodeSnippet.tsx index d9bf964ce6..a4ad6b15a7 100644 --- a/src/pages/sicp/subcomponents/CodeSnippet.tsx +++ b/src/pages/sicp/subcomponents/CodeSnippet.tsx @@ -36,7 +36,7 @@ const resizableProps = { }, defaultSize: { width: '100%', - height: '400px' + height: '500px' }, minHeight: '250px', maxHeight: '2000px' @@ -106,11 +106,13 @@ const CodeSnippet: React.FC = props => {
) : ( - -
- -
- +
+ +
+ +
+ +
)}
) : ( diff --git a/src/styles/_sicp.scss b/src/styles/_sicp.scss index 5678f5cefb..5e7962fb15 100644 --- a/src/styles/_sicp.scss +++ b/src/styles/_sicp.scss @@ -1,6 +1,16 @@ $sicp-text-color: #333333; $sicp-background-color: #ffffff; +$sicp-max-width: 1050px; +$sicp-code-snippet-width: 90vw; +$sicp-code-snippet-max-width: 1500px; +$sicp-content-lr-padding: 6em; + +// Override Sass min() +@function min($numbers...) { + @return m#{i}n(#{$numbers}); +} + .Sicp { width: 100%; color: $sicp-text-color; @@ -50,8 +60,8 @@ $sicp-background-color: #ffffff; .sicp-content { margin: 1em auto; - padding: 0 6em; - max-width: 1050px; + padding: 0 $sicp-content-lr-padding; + max-width: $sicp-max-width; height: fit-content; background-color: $sicp-background-color; @@ -159,15 +169,39 @@ $sicp-background-color: #ffffff; margin: 10px 0; .sicp-code-snippet-open { + width: 100vw; + margin: 25px 0; + transform: translateX( + min( + -$sicp-content-lr-padding, + calc(#{$sicp-max-width} / 2 - 50vw - #{$sicp-content-lr-padding}) + ) + ); + display: flex; + flex-flow: column nowrap; + align-items: center; + > .ControlBar { display: flex; background-color: $cadet-color-1; color: white; padding: 5px; + width: $sicp-code-snippet-width; + max-width: $sicp-code-snippet-max-width; .ControlBar_flow { flex-grow: 1; } + + @media only screen and (max-width: 768px) { + width: 100%; + max-width: unset; + } + } + + .sicp-code-snippet-desktop-open { + width: $sicp-code-snippet-width; + max-width: $sicp-code-snippet-max-width; } .sicp-workspace-container-container { @@ -183,11 +217,14 @@ $sicp-background-color: #ffffff; } @media only screen and (max-width: 768px) { + display: block; position: fixed; + margin: 0; + transform: none; z-index: 20; top: 0; left: 0; - height: calc(100% - 40px); + height: calc(100% - 40px); // minus size of control bar width: 100vw; } } From 000c6f2552ec507460c10caabcaa400e6bd220f6 Mon Sep 17 00:00:00 2001 From: Samuel Fang Date: Tue, 22 Jun 2021 23:09:16 +0800 Subject: [PATCH 3/3] Fix spacing in control bar --- src/styles/_sicp.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/_sicp.scss b/src/styles/_sicp.scss index 5e7962fb15..9ba2c3f7b4 100644 --- a/src/styles/_sicp.scss +++ b/src/styles/_sicp.scss @@ -167,6 +167,7 @@ $sicp-content-lr-padding: 6em; .sicp-code-snippet { margin: 10px 0; + line-height: 1; .sicp-code-snippet-open { width: 100vw;