From f486127919c28d4db0efe3f116b6de98e2167d12 Mon Sep 17 00:00:00 2001 From: shmck Date: Tue, 29 Oct 2019 21:33:54 -0700 Subject: [PATCH 1/3] setup Step styles --- .../Level/{StepDescription => Step}/index.tsx | 40 ++++++++++--------- .../Tutorial/LevelPage/Level/index.tsx | 33 ++++++--------- 2 files changed, 34 insertions(+), 39 deletions(-) rename web-app/src/containers/Tutorial/LevelPage/Level/{StepDescription => Step}/index.tsx (50%) diff --git a/web-app/src/containers/Tutorial/LevelPage/Level/StepDescription/index.tsx b/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx similarity index 50% rename from web-app/src/containers/Tutorial/LevelPage/Level/StepDescription/index.tsx rename to web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx index 9870a21b..ad4fb585 100644 --- a/web-app/src/containers/Tutorial/LevelPage/Level/StepDescription/index.tsx +++ b/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx @@ -1,43 +1,47 @@ import * as React from 'react' +import * as T from 'typings' +import { Button, Checkbox } from '@alifd/next' + import Markdown from '../../../../../components/Markdown' -import { Button } from '@alifd/next' + +interface Props { + order: number + content: string + status: T.ProgressStatus + onLoadSolution(): void +} const styles = { - // active: { - // backgroundColor: '#e6f7ff', - // }, card: { + display: 'grid', + padding: '0 1rem 1rem 0.5rem', }, } -interface Props { - text?: string | null - mode: 'INCOMPLETE' | 'ACTIVE' | 'COMPLETE' - onLoadSolution(): void -} - -const StepDescription = ({ text, mode, onLoadSolution }: Props) => { +const Step = (props: Props) => { const [loadedSolution, setLoadedSolution] = React.useState() const onClickHandler = () => { if (!loadedSolution) { setLoadedSolution(true) - onLoadSolution() + props.onLoadSolution() } } - if (mode === 'INCOMPLETE') { - return null - } + const showLoadSolution = status === 'ACTIVE' && !loadedSolution - const showLoadSolution = mode === 'ACTIVE' && !loadedSolution return (
- {text || ''} + + {props.content || ''} {showLoadSolution && }
) } -export default StepDescription +export default Step diff --git a/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx b/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx index 17c113e0..efcf733d 100644 --- a/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx +++ b/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx @@ -1,10 +1,10 @@ -import { Button, Step } from '@alifd/next' +import { Button } from '@alifd/next' import * as React from 'react' import * as G from 'typings/graphql' import * as T from 'typings' +import Step from './Step' import Markdown from '../../../../components/Markdown' -import StepDescription from './StepDescription' const styles = { card: { @@ -56,11 +56,6 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => { throw new Error('No Stage steps found') } - // grab the active step - const activeIndex: number = level.steps.findIndex((step: G.Step & { status: T.ProgressStatus } | null) => { - return step && step.status === 'ACTIVE' - }) - return (
@@ -76,20 +71,16 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
Tasks
- - {level.steps.map((step: G.Step & { status: T.ProgressStatus } | null, index: number) => { - if (!step) { - return null - } - return ( - } - /> - ) - })} - + {level.steps.map((step: G.Step & { status: T.ProgressStatus } | null, index: number) => { + if (!step) { + return null + } + return + })}
From f56ad565193f856178be0178f7f68962973d3ae0 Mon Sep 17 00:00:00 2001 From: shmck Date: Tue, 29 Oct 2019 21:53:58 -0700 Subject: [PATCH 2/3] style step checkbox --- web-app/.storybook/addons.ts | 3 +- web-app/src/App.tsx | 1 + .../Tutorial/LevelPage/Level/Step/index.tsx | 37 ++++++++++++------- web-app/src/styles/index.css | 6 +-- web-app/stories/Step.stories.tsx | 18 +++++---- 5 files changed, 38 insertions(+), 27 deletions(-) diff --git a/web-app/.storybook/addons.ts b/web-app/.storybook/addons.ts index 7e5cdab9..514e2dbe 100644 --- a/web-app/.storybook/addons.ts +++ b/web-app/.storybook/addons.ts @@ -1,4 +1,3 @@ import '@storybook/addon-actions/register' import '@storybook/addon-knobs/register' -import '@storybook/addon-links/register' -import '@storybook/addon-viewport/register' \ No newline at end of file +import '@storybook/addon-links/register' \ No newline at end of file diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx index d8c9e71a..75deebf9 100644 --- a/web-app/src/App.tsx +++ b/web-app/src/App.tsx @@ -5,6 +5,7 @@ import ErrorBoundary from './components/ErrorBoundary' import client from './services/apollo' import Routes from './Routes' + const App = () => ( diff --git a/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx b/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx index ad4fb585..b99b63f5 100644 --- a/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx +++ b/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx @@ -13,33 +13,42 @@ interface Props { const styles = { card: { - display: 'grid', - - padding: '0 1rem 1rem 0.5rem', - }, + display: 'grid', + gridTemplateColumns: '25px 1fr', + padding: '1rem 1rem 1rem 0.5rem', + }, + content: { + margin: 0 + } } const Step = (props: Props) => { + // TODO: extract or replace load solution const [loadedSolution, setLoadedSolution] = React.useState() - const onClickHandler = () => { if (!loadedSolution) { setLoadedSolution(true) props.onLoadSolution() } } - - const showLoadSolution = status === 'ACTIVE' && !loadedSolution + const showLoadSolution = props.status === 'ACTIVE' && !loadedSolution return (
- - {props.content || ''} - {showLoadSolution && } +
+ { + /* do nothing */ + }} + /> +
+
+ {props.content || ''} +
+
{showLoadSolution && }
) } diff --git a/web-app/src/styles/index.css b/web-app/src/styles/index.css index 25961324..3820d1aa 100644 --- a/web-app/src/styles/index.css +++ b/web-app/src/styles/index.css @@ -10,6 +10,6 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } -.hover-select:hover { - cursor: pointer; -} +p { + margin: 0 +} \ No newline at end of file diff --git a/web-app/stories/Step.stories.tsx b/web-app/stories/Step.stories.tsx index 522c23be..91407222 100644 --- a/web-app/stories/Step.stories.tsx +++ b/web-app/stories/Step.stories.tsx @@ -5,7 +5,7 @@ import { select, text, withKnobs } from '@storybook/addon-knobs' import { storiesOf } from '@storybook/react' import SideBarDecorator from './utils/SideBarDecorator' -import StepDescription from '../src/containers/Tutorial/LevelPage/Level/StepDescription' +import Step from '../src/containers/Tutorial/LevelPage/Level/Step' const stepText = 'This is a long paragraph of step text intended to wrap around the side after a short period of writing to demonstrate text wrap among other things' @@ -33,17 +33,19 @@ const paragraphText = `Markdown included \`code\`, *bold*, & _italics_. storiesOf('Level', module) .addDecorator(SideBarDecorator) .addDecorator(withKnobs) - .add('Step Description', () => ( - ( + )) .add('Step Markdown', () => ( - )) From 626aa0d7a949d5efaeba994547905aeb463022cb Mon Sep 17 00:00:00 2001 From: shmck Date: Tue, 29 Oct 2019 22:13:39 -0700 Subject: [PATCH 3/3] working load checks --- .../Tutorial/LevelPage/Level/Step/index.tsx | 14 +++++++------- .../containers/Tutorial/LevelPage/Level/index.tsx | 1 + 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx b/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx index b99b63f5..41178f8f 100644 --- a/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx +++ b/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx @@ -15,11 +15,11 @@ const styles = { card: { display: 'grid', gridTemplateColumns: '25px 1fr', - padding: '1rem 1rem 1rem 0.5rem', - }, - content: { - margin: 0 - } + padding: '1rem 1rem 1rem 0.2rem', + }, + content: { + margin: 0, + }, } const Step = (props: Props) => { @@ -39,13 +39,13 @@ const Step = (props: Props) => { { /* do nothing */ }} />
-
+
{props.content || ''}
{showLoadSolution && }
diff --git a/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx b/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx index efcf733d..586f1681 100644 --- a/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx +++ b/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx @@ -79,6 +79,7 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => { order={index + 1} status={step.status} content={step.content} + onLoadSolution={onLoadSolution} /> })}