yogsototh/solaryzed
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

demo working level

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2019-10-30 00:27:37 +01:00
parent 88650349c2
commit 3054a81adb
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
6 changed files with 5194 additions and 2453 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7529
ui/assets/app.js
View file

File diff suppressed because it is too large Load diff

12
ui/assets/index.html
View file

@ -3,6 +3,18 @@
<head>
<meta charset="utf-8">
<title>Solaryzed</title>
<style>
html,body {background: #000;}
#container {
width: 800px;
margin: 0 auto;
font-size: 18px;
font-weight: bold;
font-family: monospace; }
#dark { color: rgba(255,255,255,0.5); }
#light { color: rgba(0,0,0,0.5); }
div { width: 80px; margin: 10px; display: inline-block; border-radius: 3px; }
</style>
</head>
<body>
<script src="/app.js" charset="utf-8"></script>

4
ui/dev.sh
View file

@ -1,3 +1,3 @@
#!/bin/bash
spago bundle-app --main Main --to assets/app.js --watch &
parcel serve assets/index.html -o index--parelified.html --open
parcel serve assets/index.html -o index--parelified.html --open &
spago bundle-app --main Main --to assets/app.js --watch

6
ui/spago.dhall
View file

@ -6,9 +6,13 @@ You can edit this file as you like.
"solaryzed"
, dependencies =
[ "aff"
, "colors"
, "console"
, "css"
, "dom-indexed"
, "effect"
, "halogen"
, "halogen-css"
, "profunctor-lenses"
, "maybe"
, "psci-support"
@ -17,4 +21,4 @@ You can edit this file as you like.
./packages.dhall
, sources =
[ "src/**/*.purs", "test/**/*.purs" ]
}
}

4
ui/src/Main.purs
View file

@ -6,9 +6,9 @@ import Effect (Effect)
import Halogen.Aff as HA
import Halogen.VDom.Driver (runUI)
import Button as Button
import Solaryzed as Solaryzed
main :: Effect Unit
main = HA.runHalogenAff do
body <- HA.awaitBody
runUI Button.component unit body
runUI Solaryzed.component unit body

92
ui/src/Solaryzed.purs Normal file
View file

@ -0,0 +1,92 @@
module Solaryzed (component) where
import Prelude
import CSS as CSS
import CSS.Size (px)
import CSS.TextAlign (center, textAlign)
import Color (Color, lab, toHexString, fromHexString)
import DOM.HTML.Indexed.InputType (InputType(InputColor))
import Data.Maybe (fromMaybe,Maybe(..))
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.CSS as HCSS
import Halogen.HTML.Events as HE
import Halogen.HTML.Properties as HP
type State = { dark :: Color
, light :: Color
, accent :: Color }
data Action = DarkChanged Color
| LightChanged Color
| AccentChanged Color
component :: forall q i o m. H.Component HH.HTML q i o m
component =
H.mkComponent
{ initialState
, render
, eval: H.mkEval $ H.defaultEval { handleAction = handleAction }
}
solbase03 :: Color
solbase03 = lab 15.0 (-12.0) (-12.0)
solbase3 :: Color
solbase3 = lab 97.0 0.0 10.0
solyellow :: Color
solyellow = lab 60.0 10.0 65.0
initialState :: forall i. i -> State
initialState _ = { dark: solbase03
, light: solbase3
, accent: solyellow
}
render :: forall m. State -> H.ComponentHTML Action () m
render state =
HH.div
[ HP.id_ "container" ]
[ HH.div
[ HP.id_ "selectors"]
[ HH.input [ HP.type_ InputColor
, HE.onValueChange \ c -> Just $ DarkChanged (fromMaybe solbase03 (fromHexString c))
, HP.value (toHexString state.dark)
]
, HH.input [ HP.type_ InputColor
, HE.onValueChange \ c -> Just $ LightChanged (fromMaybe solbase03 (fromHexString c))
, HP.value (toHexString state.light)
]
, HH.input [ HP.type_ InputColor
, HE.onValueChange \ c -> Just $ AccentChanged (fromMaybe solbase03 (fromHexString c))
, HP.value (toHexString state.accent)
]
]
, HH.div
[ HP.id_ "colors" ]
[ HH.div
[ cssBackground state.dark
, HP.id_ "dark" ]
[ HH.text "DARK" ]
, HH.div
[ cssBackground state.light
, HP.id_ "light" ]
[ HH.text "LIGHT" ]
, HH.div
[ cssBackground state.accent
, HP.id_ "accent" ]
[ HH.text "ACCENT" ]
]]
where
cssBackground c = HCSS.style $ do
CSS.background c
CSS.height (px 80.0)
CSS.width (px 80.0)
CSS.lineHeight (px 80.0)
textAlign center
handleAction ∷ forall o m. Action → H.HalogenM State Action () o m Unit
handleAction = case _ of
DarkChanged c -> H.modify_ \st -> st { dark = c }
LightChanged c -> H.modify_ \st -> st { light = c }
AccentChanged c -> H.modify_ \st -> st { accent = c }