mirror of
https://github.com/rowtype-yoga/psfp.git
synced 2024-09-11 16:25:36 +03:00
Segmented and initial letter
This commit is contained in:
parent
ef89337707
commit
60ca4cdf0a
@ -28,8 +28,8 @@ import Yoga.Block.Container.Style (colour)
|
||||
import Yoga.Compiler.Types (Compiler)
|
||||
import Yoga.Editor (getValue, mkEditor, setValue)
|
||||
|
||||
type Props
|
||||
= { initialCode ∷ String, height ∷ String, language ∷ String }
|
||||
type Props =
|
||||
{ initialCode ∷ String, height ∷ String, language ∷ String }
|
||||
|
||||
mkCompileEditor ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent Props)
|
||||
mkCompileEditor { compileAndRun } = do
|
||||
@ -47,26 +47,19 @@ mkCompileEditor { compileAndRun } = do
|
||||
compileResult /\ modifyCompileResult <- useState Nothing
|
||||
let
|
||||
showEditor = updateActiveIndex 0
|
||||
|
||||
showResult = updateActiveIndex 1
|
||||
|
||||
reset = resetCompileResult *> showEditor
|
||||
|
||||
run = compile *> showResult
|
||||
|
||||
resetCompileResult = do
|
||||
setCompileResult Nothing
|
||||
for_ maybeEditor (setValue initialCode)
|
||||
|
||||
compileResultToString ∷ Maybe (Either Error (Either CompileResult RunResult)) -> String
|
||||
compileResultToString = case _ of
|
||||
Nothing -> ""
|
||||
Just (Right (Left cr)) -> cr.result <#> _.message # intercalate "/n"
|
||||
Just (Right (Right r)) -> r.stdout
|
||||
Just (Left e) -> message e
|
||||
|
||||
setCompileResult = modifyCompileResult <<< const
|
||||
|
||||
compile = do
|
||||
for_ maybeEditor \ed -> do
|
||||
setCompileResult Nothing
|
||||
@ -74,66 +67,57 @@ mkCompileEditor { compileAndRun } = do
|
||||
launchAff_ do
|
||||
res <- try $ compileAndRun { code }
|
||||
setCompileResult (Just res) # liftEffect
|
||||
|
||||
tabs ∷ JSX
|
||||
tabs =
|
||||
Block.segmented
|
||||
</> { activeIndex
|
||||
, updateActiveIndex
|
||||
, buttonContents:
|
||||
twoOrMore
|
||||
{ id: "editor", value: "Editor" }
|
||||
{ id: "Result", value: "Result" }
|
||||
[]
|
||||
twoOrMore
|
||||
{ id: "editor", value: "Editor" }
|
||||
{ id: "Result", value: "Result" }
|
||||
[]
|
||||
}
|
||||
|
||||
editorView ∷ JSX
|
||||
editorView = editor </> { onLoad, height, language }
|
||||
|
||||
buttons ∷ Array JSX -> JSX
|
||||
buttons = Y.el Block.cluster { justify: "flex-end", space: "var(--s-1)" }
|
||||
|
||||
button =
|
||||
Y.el motionButton
|
||||
<<< M.motion
|
||||
{ transition: M.transition $ { duration: 0.2 }
|
||||
}
|
||||
|
||||
resetButton ∷ JSX
|
||||
resetButton =
|
||||
button
|
||||
{ buttonType: BT.Generic, onClick: handler_ reset }
|
||||
[ R.text "Reset" ]
|
||||
|
||||
runButton ∷ JSX
|
||||
runButton =
|
||||
button
|
||||
{ buttonType: BT.Primary, onClick: handler_ run }
|
||||
[ R.text "Run" ]
|
||||
|
||||
buttonControls ∷ Array JSX -> JSX
|
||||
buttonControls = Y.el motionBox $ M.motion { layout: M.layout true } {}
|
||||
|
||||
tabContainer ∷ Array JSX -> JSX
|
||||
tabContainer children =
|
||||
Y.styled R.div'
|
||||
{ className: "tabby"
|
||||
, css:
|
||||
E.css
|
||||
{ background: E.str colour.backgroundLayer4
|
||||
, borderTop: E.str $ "1px solid " <> colour.interfaceBackgroundHighlight
|
||||
, borderRadius: E.str "14px 14px 0 0"
|
||||
, paddingLeft: E.var "--s-1"
|
||||
, paddingRight: E.var "--s-1"
|
||||
, paddingTop: E.str "0"
|
||||
, paddingBottom: E.str "0"
|
||||
, marginBottom: E.str "0"
|
||||
, zIndex: E.str "0"
|
||||
}
|
||||
E.css
|
||||
{ background: E.str colour.backgroundLayer3
|
||||
, borderTop: E.str $ "1px solid " <> colour.interfaceBackgroundHighlight
|
||||
, borderRadius: E.str "14px 14px 0 0"
|
||||
, paddingLeft: E.var "--s-1"
|
||||
, paddingRight: E.var "--s-1"
|
||||
, paddingTop: E.str "0"
|
||||
, paddingBottom: E.str "0"
|
||||
, marginBottom: E.str "0"
|
||||
, zIndex: E.str "0"
|
||||
}
|
||||
}
|
||||
[ Y.el Block.centre { andText: true } children
|
||||
]
|
||||
|
||||
terminal ∷ Array JSX -> JSX
|
||||
terminal =
|
||||
Y.el motionBox1
|
||||
@ -141,30 +125,26 @@ mkCompileEditor { compileAndRun } = do
|
||||
{ layout: M.layout true
|
||||
}
|
||||
{ css:
|
||||
E.css
|
||||
{ background: E.str "rgb(42,42,59)"
|
||||
, boxSizing: E.str "content-box"
|
||||
, margin: E.str "0"
|
||||
, minHeight: E.str "8em"
|
||||
, padding: E.str "0"
|
||||
, display: E.str "flex"
|
||||
}
|
||||
E.css
|
||||
{ background: E.str "rgb(42,42,59)"
|
||||
, boxSizing: E.str "content-box"
|
||||
, margin: E.str "0"
|
||||
, minHeight: E.str "8em"
|
||||
, padding: E.str "0"
|
||||
, display: E.str "flex"
|
||||
}
|
||||
}
|
||||
|
||||
container =
|
||||
Y.el motionBox1
|
||||
$ M.motion { layout: M.layout true }
|
||||
{ css:
|
||||
E.css
|
||||
{ background: E.str colour.backgroundLayer4
|
||||
, borderBottom: E.str $ "1px solid " <> colour.interfaceBackgroundShadow
|
||||
, borderRadius: E.str "0 0 14px 14px"
|
||||
, paddingLeft: E.str "0"
|
||||
, paddingRight: E.str "0"
|
||||
, paddingTop: E.str "0"
|
||||
, paddingBottom: E.var "--s-1"
|
||||
, zIndex: E.str "0"
|
||||
}
|
||||
E.css
|
||||
{ background: E.str colour.backgroundLayer3
|
||||
, borderBottom: E.str $ "1px solid " <> colour.interfaceBackgroundShadow
|
||||
, borderRadius: E.str "0 0 14px 14px"
|
||||
, padding: E.str "0"
|
||||
, zIndex: E.str "0"
|
||||
}
|
||||
}
|
||||
pure
|
||||
$ Y.el Block.stack { space: E.str "0" }
|
||||
|
Loading…
Reference in New Issue
Block a user