3d6eb2f · rowtype-yoga/psfp

blog/src/components/PSLayout.purs−1

compare with master

unifiedsplit

@@ -215,7 +215,6 @@ mkMdxProviderComponent compiler = do

215 , pre:

216 mkFn2 \(props ∷ PreProps) other -> do

217 let

218− _ = spy "other" other

219

218

220 childrenQ = Nullable.toMaybe props.children

219 childrenQ = Nullable.toMaybe props.children

221

220

blog/static/fonts/PragmataProLiga-Regular.woffdeleted

Binary file not shown.

blog/static/fonts/PragmataProLiga-Regular.woff2deleted

Binary file not shown.

client/src/Container/Component.purs+4−4

@@ -13,6 +13,7 @@ import React.Basic.DOM as R

13import React.Basic.Hooks (ReactComponent, component, element, useRef, useState, (/\))

14import React.Basic.Hooks as React

15import Yoga.CompileEditor.Component (mkCompileEditor)

16+import Yoga.Compiler.Api (apiCompiler)

16import Yoga.Polyfill.SmoothScrolling (smoothScrollPolyfill)

17import Yoga.Polyfill.SmoothScrolling (smoothScrollPolyfill)

17import Yoga.SVG.Icon (appendIcon, applyflippedIcon, bindIcon, mapIcon)

18import Yoga.SVG.Icon (appendIcon, applyflippedIcon, bindIcon, mapIcon)

18import Yoga.Theme.Provider (mkThemeProvider)

19import Yoga.Theme.Provider (mkThemeProvider)

@@ -40,8 +41,7 @@ mkContainerContent = do

40 $ jssClasses \(theme ∷ CSSTheme) ->

41 $ jssClasses \(theme ∷ CSSTheme) ->

41 { container:

42 { container:

42 jss

43 jss

43− { fontFamily: theme.textFontFamily

44− , color: theme.textColour

44+ { color: theme.textColour

45 , display: "flex"

46 , flexDirection: "column"

47 , width: "100%"

@@ -55,13 +55,13 @@ mkContainerContent = do

55 , paddingLeft: "100px"

56 , zIndex: 0

57 }

58− , icon: jss { fill: "theme.textColour" }

58+ , icon: jss { fill: theme.textColour }

59 }

60 landingPage <- mkLandingPage

61 sidebar <- mkSidebar

62 header <- mkHeader

63 sidebarLink <- mkSidebarLink

64− editor <- mkCompileEditor windowFetch

64+ editor <- mkCompileEditor (apiCompiler windowFetch)

65 component "ContainerContent" \{ kids } -> React.do

66 classes <- useStyles {}

67 collapsed /\ modifyCollapsed <- useState true

client/src/Container/Header.purs+2−1

@@ -1,6 +1,7 @@

1module Container.Header where

2

3import Prelude

4+import Data.Foldable (intercalate)

4import Data.Int (toNumber)

5import Data.Int (toNumber)

5import Data.Maybe (Maybe(..))

6import Data.Maybe (Maybe(..))

6import Data.Monoid (guard)

7import Data.Monoid (guard)

@@ -34,7 +35,7 @@ mkHeader = do

34 jss

35 jss

35 { backgroundColor: theme.interfaceColour

36 { backgroundColor: theme.interfaceColour

36 , borderBottom: "0"

37 , borderBottom: "0"

37− , fontFamily: theme.headingFontFamily

38+ , fontFamily: intercalate ", " theme.headingFontFamily

38 , gridArea: "header"

39 , gridArea: "header"

39 , display: "flex"

40 , display: "flex"

40 , alignItems: "center"

41 , alignItems: "center"

client/src/Container/Landing.purs+12−12

@@ -8,6 +8,7 @@ import Effect.Uncurried (runEffectFn1)

8import JSS (jss, jssClasses)

9import React.Basic.DOM as R

10import React.Basic.Events (handler_)

11+import React.Basic.Helpers (jsx)

11import React.Basic.Hooks (ReactComponent, component, element, readRefMaybe, useRef)

12import React.Basic.Hooks (ReactComponent, component, element, readRefMaybe, useRef)

12import React.Basic.Hooks as React

13import React.Basic.Hooks as React

13import Unsafe.Coerce (unsafeCoerce)

14import Unsafe.Coerce (unsafeCoerce)

@@ -82,6 +83,7 @@ mkLandingPage = do

82 , landingImage:

83 , landingImage:

83 jss

84 jss

84 { position: "absolute"

85 { position: "absolute"

86+ , maxWidth: "none"

85 , width: "100%"

87 , width: "100%"

86 , height: "100%"

88 , height: "100%"

87 }

89 }

@@ -112,21 +114,19 @@ mkLandingPage = do

112 , R.div

114 , R.div

113 { className: classes.actionButton

115 { className: classes.actionButton

114 , children:

116 , children:

115− [ element button

117+ [ jsx button

116− { buttonProps:

117− { onClick:

118+ { onClick:

118− handler_ do

119+ handler_ do

119− maybeNode <- readRefMaybe ref

120+ maybeNode <- readRefMaybe ref

120− for_ (maybeNode >>= HTMLElement.fromNode) \n -> do

121+ for_ (maybeNode >>= HTMLElement.fromNode) \n -> do

121− height <- getBoundingClientRect n <#> _.height

122+ height <- getBoundingClientRect n <#> _.height

122− win <- window

123+ win <- window

123− runEffectFn1 ((unsafeCoerce win).scrollTo)

124+ runEffectFn1 ((unsafeCoerce win).scrollTo)

124− { top: height, left: 0, behavior: "smooth" }

125+ { top: height, left: 0, behavior: "smooth" }

125− }

126 , buttonType: HighlightedButton

127− , kids: [ R.text buttonText ]

128 , className: classes.actualActionButton

127 , className: classes.actualActionButton

129 }

128 }

129+ [ R.text buttonText ]

130 ]

131 }

132 ]

client/src/Container/Sidebar.purs+5−4

@@ -1,6 +1,7 @@

1module Container.Sidebar where

2

3import Prelude

4+import Data.Foldable (intercalate)

4import Data.Monoid (guard)

5import Data.Monoid (guard)

5import Effect (Effect)

6import Effect (Effect)

6import JSS (jss, jssClasses)

7import JSS (jss, jssClasses)

@@ -28,7 +29,7 @@ mkSidebar = do

28 { sidebar:

29 { sidebar:

29 jss

30 jss

30 { background: theme.interfaceColourLighter

31 { background: theme.interfaceColourLighter

31− , fontFamily: theme.textFontFamily

32+ , fontFamily: intercalate ", " theme.textFontFamily

32 , borderRadius: "0 12px 12px 0"

33 , borderRadius: "0 12px 12px 0"

33 , color: theme.textColour

34 , color: theme.textColour

34 , position: "absolute"

35 , position: "absolute"

@@ -86,7 +87,7 @@ mkSidebarLink = do

86 $ jssClasses \(theme ∷ CSSTheme) ->

87 $ jssClasses \(theme ∷ CSSTheme) ->

87 { sidebarEntry:

88 { sidebarEntry:

88 jss

89 jss

89− { fontFamily: theme.headingFontFamily

90+ { fontFamily: intercalate ", " theme.headingFontFamily

90 , alignSelf: "flex-end"

91 , alignSelf: "flex-end"

91 , justifyContent: "space-between"

92 , justifyContent: "space-between"

92 , alignContent: "stretch"

93 , alignContent: "stretch"

@@ -106,7 +107,7 @@ mkSidebarLink = do

106 }

107 }

107 , label:

108 , label:

108 jss

109 jss

109− { fontFamily: theme.textFontFamily

110+ { fontFamily: intercalate ", " theme.textFontFamily

110 , color: theme.textColour

111 , color: theme.textColour

111 , paddingLeft: "20px"

112 , paddingLeft: "20px"

112 , textTransform: "uppercase"

113 , textTransform: "uppercase"

@@ -121,7 +122,7 @@ mkSidebarLink = do

121 , transition: "0.2s ease-in-out"

122 , transition: "0.2s ease-in-out"

122 , transitionDelay: "0.1s"

123 , transitionDelay: "0.1s"

123 , alignSelf: "flex-end"

124 , alignSelf: "flex-end"

124− , fill: theme.textColour <> " !important"

125+ , fill: theme.textColour

125 }

126 }

127 }

127 component "SidebarLink" \{ name, icon, collapsed } -> React.do

128 component "SidebarLink" \{ name, icon, collapsed } -> React.do

client/src/Container/Stories.purs+1−1

@@ -2,10 +2,10 @@ module Container.Stories where

2

3import Prelude hiding (add)

4import Container.Component (mkContainer)

5−import Decorator.FullScreen (fullScreenDecorator)

6import Effect (Effect)

5import Effect (Effect)

7import React.Basic.Hooks (component, element)

6import React.Basic.Hooks (component, element)

8import React.Basic.Hooks as React

7import React.Basic.Hooks as React

8+import Storybook.Decorator.FullScreen (fullScreenDecorator)

9import Storybook.React (Storybook, add, addDecorator, storiesOf)

10import Yoga.Theme.Styles (useTheme)

11

client/src/Decorator/FullScreen.pursdeleted−119

@@ -1,119 +0,0 @@

1−module Decorator.FullScreen where

2−

3−import Prelude

4−import Data.Array (find)

5−import Data.Map (Map)

6−import Data.Maybe (Maybe, fromMaybe)

7−import Data.Traversable (traverse_)

8−import Effect (Effect)

9−import JSS (jss, jssClasses)

10−import React.Basic (JSX)

11−import React.Basic.DOM (css)

12−import React.Basic.DOM as R

13−import React.Basic.DOM.Events (targetValue)

14−import React.Basic.Events (handler)

15−import React.Basic.Hooks (ReactComponent, component, element, useState, (/\))

16−import React.Basic.Hooks as React

17−import Simple.JSON (readJSON_, writeJSON)

18−import Web.HTML (window)

19−import Web.HTML.Window (localStorage)

20−import Web.Storage.Storage (getItem, setItem)

21−import Yoga.Font.Rubik as Rubik

22−import Yoga.Font.VictorMono as VictorMono

23−import Yoga.Theme (fromTheme)

24−import Yoga.Theme.Default (darkTheme, lightTheme)

25−import Yoga.Theme.Provider (mkThemeProvider)

26−import Yoga.Theme.Styles (makeStylesJSS)

27−import Yoga.Theme.Types (CSSTheme)

28−

29−fullScreenDecorator ∷ Effect JSX -> Effect JSX

30−fullScreenDecorator mkChild = do

31− let

32− dark = fromTheme darkTheme

33−

34− light = fromTheme lightTheme

35− child <- mkChild

36− themeSwitcher <- mkThemeSwitcher

37− pure

38− $ R.div

39− { style:

40− css

41− { minWidth: "100vw"

42− , height: "100vh"

43− }

44− , children:

45− [ element themeSwitcher

46− { kids: [ child ]

47− , defaultTheme: { name: "Dark", theme: dark }

48− , themes:

49− [ { name: "Dark", theme: dark }

50− , { name: "Light", theme: light }

51− ]

52− }

53− ]

54− }

55−

56−type ThemesWithNames

57− = Map String CSSTheme

58−

59−type DefaultTheme

60− = { name ∷ String, theme ∷ CSSTheme }

61−

62−mkThemeSwitcher ∷

63− Effect

64− ( ReactComponent { defaultTheme ∷ DefaultTheme, themes ∷ Array DefaultTheme, kids ∷ Array JSX }

65− )

66−mkThemeSwitcher = do

67− themeProvider <- mkThemeProvider

68− useStyles <-

69− makeStylesJSS

70− $ jssClasses \_ ->

71− { selector:

72− jss

73− { position: "fixed"

74− , zIndex: 20

75− , top: 10

76− , right: 10

77− }

78− , "@font-face": jss $ Rubik.fontFamilies <> VictorMono.fontFamilies

79− }

80− storage <- window >>= localStorage

81− saved ∷ (Maybe DefaultTheme) <- getItem "theme" storage <#> (_ >>= readJSON_)

82− component "ThemeSwitcher" \{ defaultTheme, themes, kids } -> React.do

83− classes <- useStyles {}

84− { theme, name } /\ modTheme <- useState $ fromMaybe defaultTheme saved

85− let

86− setTheme newTheme = do

87− setItem "theme" (writeJSON newTheme) storage

88− modTheme (const newTheme)

89− let

90− handleClicked maybeValue =

91− traverse_ setTheme do

92− value <- maybeValue

93− themes # find \x -> x.name == value

94− let

95− themeSelect =

96− R.select

97− { onChange: handler targetValue handleClicked

98− , value: name

99− , className: classes.selector

100− , children:

101− themes

102− <#> \x ->

103− R.option

104− { value: x.name

105− , key: x.name

106− , children: [ R.text x.name ]

107− }

108− }

109− pure

110− $ element themeProvider

111− { theme

112− , children:

113− [ R.div

114− { style: css { backgroundColor: theme.backgroundColour, width: "100%", height: "100%" }

115− , children:

116− [ themeSelect ] <> kids

117− }

118− ]

119− }

components/src/React/Basic/Hooks/Spring.js+1−1

@@ -1,13 +1,13 @@

1"use strict";

2Object.defineProperty(exports, "__esModule", { value: true });

3var react_spring_1 = require("react-spring");

4+exports.interpolateImpl = react_spring_1.interpolate;

4exports.useSpringImpl = function (mkStyles) { return function () {

5exports.useSpringImpl = function (mkStyles) { return function () {

5 var result = react_spring_1.useSpring(mkStyles);

6 var result = react_spring_1.useSpring(mkStyles);

6 return { style: result[0], set: result[1], stop: result[2] };

7 return { style: result[0], set: result[1], stop: result[2] };

7}; };

8}; };

8exports.useSpringsImpl = function (n) { return function (fn) { return function () {

9exports.useSpringsImpl = function (n) { return function (fn) { return function () {

9 var result = react_spring_1.useSprings(n, fn);

10 var result = react_spring_1.useSprings(n, fn);

10− console.log("REEEEEEEEESLUT", result);

11 return { styles: result[0], set: result[1], stop: result[2] };

12}; }; };

13exports.useTransitionImpl = react_spring_1.useTransition;

components/src/Yoga/Grimoire/Component.purs+48−11

@@ -6,18 +6,19 @@ import Data.Array as Array

6import Data.FoldableWithIndex (findWithIndex)

7import Data.Lens (set)

8import Data.Lens.Index (ix)

9−import Data.Maybe (Maybe(..), fromMaybe, isJust)

9+import Data.Maybe (Maybe(..), fromMaybe)

10import Data.Nullable (Nullable)

11import Data.Nullable as Nullable

12import Data.Traversable (for, sequence)

13import Data.Tuple.Nested ((/\), type (/\))

14import Debug.Trace (spy)

15import Effect (Effect)

16+import Effect.Aff (Milliseconds(..), delay, launchAff_)

16import Justifill (justifill)

17import Justifill (justifill)

17import React.Basic (ReactComponent)

18import React.Basic (ReactComponent)

18import React.Basic.DOM (css)

19import React.Basic.DOM (css)

19import React.Basic.Helpers (jsx)

20import React.Basic.Helpers (jsx)

20−import React.Basic.Hooks (Ref, component, element, readRef, useLayoutEffect, useRef, writeRef)

21+import React.Basic.Hooks (Ref, component, element, readRef, useEffect, useRef, writeRef)

21import React.Basic.Hooks as React

22import React.Basic.Hooks as React

22import React.Basic.Hooks.Spring (animatedDiv, useSprings)

23import React.Basic.Hooks.Spring (animatedDiv, useSprings)

23import React.Basic.Hooks.UseGesture (useDrag, withDragProps)

24import React.Basic.Hooks.UseGesture (useDrag, withDragProps)

@@ -30,6 +31,7 @@ import Yoga.Grid.Component as Grid

30import Yoga.Grimoire.Spell.Component as GrimoireSpell

31import Yoga.Grimoire.Spell.Component as GrimoireSpell

31import Yoga.Grimoire.Styles (styles)

32import Yoga.Grimoire.Styles (styles)

32import Yoga.Helpers ((?||))

33import Yoga.Helpers ((?||))

34+import Yoga.Resize.Hook (useResize)

33import Yoga.Spell.Types (Spell)

35import Yoga.Spell.Types (Spell)

34import Yoga.Theme.Styles (makeStylesJSS, useTheme)

36import Yoga.Theme.Styles (makeStylesJSS, useTheme)

35import Yoga.Theme.Types (CSSTheme)

37import Yoga.Theme.Types (CSSTheme)

@@ -83,14 +85,28 @@ makeComponent = do

83 nodeRefs <- useRef (props.spells $> (Nullable.null ∷ (_ Node)))

85 nodeRefs <- useRef (props.spells $> (Nullable.null ∷ (_ Node)))

84 positionsRef <- useRef ([] ∷ _ DOMRect)

86 positionsRef <- useRef ([] ∷ _ DOMRect)

85 originalPositionsRef <- useRef ([] ∷ _ DOMRect)

87 originalPositionsRef <- useRef ([] ∷ _ DOMRect)

86− useLayoutEffect unit do

88+ initialisedRef <- useRef false

89+ windowSize <- useResize

90+ let

91+ init = do

92+ initialised <- readRef initialisedRef

93+ unless initialised do

87− rects <- getRects nodeRefs

94+ rects <- getRects nodeRefs

88− writeRef positionsRef (rects <#> fromMaybe emptyDomRect)

95+ writeRef positionsRef (rects <#> fromMaybe emptyDomRect)

89− writeRef originalPositionsRef (rects <#> fromMaybe emptyDomRect)

96+ writeRef originalPositionsRef (rects <#> fromMaybe emptyDomRect)

97+ writeRef initialisedRef true

98+ useEffect windowSize do

99+ writeRef initialisedRef false

100+ positions <- readRef positionsRef

101+ let

102+ newOriginalPositions = positions

103+ writeRef positionsRef newOriginalPositions

104+ init

90 mempty

105 mempty

91 theme ∷ CSSTheme <- useTheme

106 theme ∷ CSSTheme <- useTheme

92 bindDragProps <-

107 bindDragProps <-

93− useDrag (justifill {}) \{ arg, down, movement: mx /\ my, xy: x /\ y } -> do

108+ useDrag (justifill {}) \{ arg, down, movement: mx /\ my } -> do

109+ init

94 rects <- getRects nodeRefs

110 rects <- getRects nodeRefs

95 originalPositions <- readRef originalPositionsRef

111 originalPositions <- readRef originalPositionsRef

96 positionsBefore <- readRef positionsRef

112 positionsBefore <- readRef positionsRef

@@ -101,7 +117,10 @@ makeComponent = do

101

117

102 overlapsOtherBefore = positionsBefore # findWithIndex \i' pos -> i' /= arg && overlaps currentPosDraggedBefore pos

118 overlapsOtherBefore = positionsBefore # findWithIndex \i' pos -> i' /= arg && overlaps currentPosDraggedBefore pos

103 case down, overlapsOtherBefore of

119 case down, overlapsOtherBefore of

120+ false, Just { index, value } -> do

121+ let

104− false, Just { index, value } -> writeRef positionsRef (swap arg index positionsBefore ?|| positionsBefore)

122+ swapped = swap arg index positionsBefore ?|| positionsBefore

123+ writeRef positionsRef swapped

105 _, _ -> mempty

124 _, _ -> mempty

106 positions <- readRef positionsRef

125 positions <- readRef positionsRef

107 let

126 let

@@ -121,9 +140,27 @@ makeComponent = do

121 topOffset = if iPos == origIPos then 0.0 else iPos.top - origIPos.top

140 topOffset = if iPos == origIPos then 0.0 else iPos.top - origIPos.top

122 case i == arg, down, overlapsOther of

141 case i == arg, down, overlapsOther of

123 false, true, Just { index, value }

142 false, true, Just { index, value }

143+ | index == i ->

124− | index == i -> { x: originalPosDragged.left - value.left + leftOffset, y: originalPosDragged.top - value.top + topOffset, zIndex: 0, transform: "scale3d(1.0, 1.0, 1.0)", immediate: const false }

144+ { x: originalPosDragged.left - value.left + leftOffset

145+ , y: originalPosDragged.top - value.top + topOffset

146+ , zIndex: 0

147+ , transform: "scale3d(1.0, 1.0, 1.0)"

148+ , immediate: const false

149+ }

150+ true, true, _ ->

151+ { x: mx + leftOffset

152+ , y: my + topOffset

153+ , zIndex: 1

125− true, true, _ -> { x: mx + leftOffset, y: my + topOffset, zIndex: 1, transform: "scale3d(1.1, 1.1, 1.1)", immediate: \n -> n == "x" || n == "y" || n == "zIndex" }

154+ , transform: "scale3d(1.1, 1.1, 1.1)"

155+ , immediate: \n -> n == "x" || n == "y" || n == "zIndex"

156+ }

157+ _, _, _ ->

158+ { x: leftOffset

159+ , y: topOffset

160+ , zIndex: 0

126− _, _, _ -> { x: leftOffset, y: topOffset, zIndex: 0, transform: "scale3d(1.0, 1.0, 1.0)", immediate: const false }

161+ , transform: "scale3d(1.0, 1.0, 1.0)"

162+ , immediate: const false

163+ }

127 let

164 let

128 renderSpells =

165 renderSpells =

129 mapWithIndex \i (spell /\ style) ->

166 mapWithIndex \i (spell /\ style) ->

components/src/Yoga/Grimoire/Spell/Component.purs+1−1

@@ -56,7 +56,7 @@ makeComponent = do

56 ]

57 ]

58 pure

59− $ jsx card { divRef: props.cardRef }

59+ $ jsx card { divRef: props.cardRef, className: style.card }

60 [ jsx box { className: style.container, padding: "var(--s-1)" }

61 [ jsx stack { space: "var(--s-3)" }

62 [ headerCluster

components/src/Yoga/Grimoire/Spell/Spec.purs+1−1

@@ -1,4 +1,4 @@

1−module Yoga.Grimoire.Spell.Spec where

1+module Yoga.Spell.Spec where

2

3import Prelude

4import Justifill (justifill)

components/src/Yoga/Grimoire/Spell/Styles.purs+7−3

@@ -1,11 +1,10 @@

1module Yoga.Grimoire.Spell.Styles where

2

3import Prelude hiding (top)

4−import CSS (ColorSpace(..), backgroundColor, border, borderRadius, color, fontFamily, fontSize, fontStyle, height, mix, pct, sansSerif, solid, width)

4+import CSS (backgroundColor, color, fontFamily, fontSize, fontStyle, height, pct, sansSerif, width)

5import CSS.FontStyle (italic)

6import CSS.TextAlign (rightTextAlign, textAlign)

7import Data.Array (fromFoldable)

8−import Data.NonEmpty (NonEmpty(..))

9import Data.NonEmpty as NonEmpty

8import Data.NonEmpty as NonEmpty

10import JSS (JSSClasses, JSSElem, jss, jssClasses)

9import JSS (JSSClasses, JSSElem, jss, jssClasses)

11import Yoga.Theme.Types (YogaTheme)

10import Yoga.Theme.Types (YogaTheme)

@@ -20,13 +19,18 @@ type Classes a

20 = ( container ∷ a

19 = ( container ∷ a

21 , signature ∷ a

20 , signature ∷ a

22 , description ∷ a

21 , description ∷ a

22+ , card ∷ a

23 , name ∷ a

24 )

25

26styles ∷ JSSClasses YogaTheme Props (Classes (JSSElem Props))

27styles =

28 jssClasses \theme@{ s0, s1, s4, s5, s_5 } ->

29+ { card:

30+ do

31+ width (100.0 # pct)

32+ height (100.0 # pct)

29− { container:

33+ , container:

30 jss { userSelect: "none" }

34 jss { userSelect: "none" }

31 <> jss do

35 <> jss do

32 backgroundColor theme.backgroundColourLighter

36 backgroundColor theme.backgroundColourLighter

components/src/Yoga/Resize/Hook.pursnew file+39

@@ -0,0 +1,39 @@

1+module Yoga.Resize.Hook where

2+

3+import Prelude

4+import Data.Int (toNumber)

5+import Data.Newtype (class Newtype)

6+import Effect (Effect)

7+import React.Basic.Hooks (Hook, UseLayoutEffect, UseState, coerceHook, useLayoutEffect, useState, (/\))

8+import React.Basic.Hooks as React

9+import Web.Event.EventTarget (EventListener, eventListener)

10+import Web.HTML (window)

11+import Web.HTML.Window (innerHeight, innerWidth)

12+import Yoga.Resize.Listener as Resize

13+

14+newtype UseResize hooks

15+ = UseResize (UseLayoutEffect Unit (UseState { width ∷ Number, height ∷ Number } hooks))

16+

17+derive instance ntUseResize ∷ Newtype (UseResize hooks) _

18+useResize ∷ Hook UseResize { width ∷ Number, height ∷ Number }

19+useResize =

20+ coerceHook React.do

21+ size /\ updateSize <- useState { width: 0.0, height: 0.0 }

22+ let

23+ setSize = updateSize <<< const

24+ useLayoutEffect unit do

25+ setSizeFromWindow setSize

26+ listener <- makeListener setSize

27+ Resize.registerListener listener

28+ pure size

29+

30+setSizeFromWindow setSize = do

31+ win <- window

32+ width <- innerWidth win <#> toNumber

33+ height <- innerHeight win <#> toNumber

34+ setSize { width, height }

35+

36+makeListener ∷ ({ height ∷ Number, width ∷ Number } -> Effect Unit) -> Effect EventListener

37+makeListener setSize = do

38+ eventListener

39+ $ const (setSizeFromWindow setSize)

components/src/Yoga/Resize/Listener.pursnew file+17

@@ -0,0 +1,17 @@

1+module Yoga.Resize.Listener (registerListener) where

2+

3+import Prelude

4+import Effect (Effect)

5+import Web.Event.Event (EventType(..))

6+import Web.Event.EventTarget (EventListener, addEventListener, removeEventListener)

7+import Web.HTML (window)

8+import Web.HTML.Window (toEventTarget)

9+

10+eventType ∷ EventType

11+eventType = EventType "resize"

12+

13+registerListener ∷ EventListener -> Effect (Effect Unit)

14+registerListener listener = do

15+ target <- window <#> toEventTarget

16+ addEventListener eventType listener false target

17+ pure $ removeEventListener eventType listener false target

components/src/Yoga/Theme/Default.purs+1−1

@@ -49,7 +49,7 @@ lightTheme =

49 { textColour = Color.hsl 220.0 0.18 0.30

50 , backgroundColour = Color.hsl 30.0 0.50 0.96

51 , interfaceColour = Color.hsl 210.0 0.10 0.89

52− , highlightColour = Color.hsl 350.0 0.93 0.62

52+ , highlightColour = Color.hsl 350.0 0.93 0.67

53 , altHighlightColour = Color.hsl 84.0 0.617 0.631

54 , green = Color.hsl 170.0 0.39 0.40

55 , purple = Color.hsl 284.0 0.64 0.60