2d91747 · rowtype-yoga/psfp

git.iko.soy/rowtype-yoga/psfp

on master help sign in

No progress

2d91747Mark Eibes6 years ago

components/src/Yoga/Card/Component.purs+3−1

compare with master

unifiedsplit

@@ -32,10 +32,12 @@ styles =

32 \props ->

33 { borderRadius: "var(--s-2)"

34 , overflow: "hidden"

35+ , borderTop: "1px solid rgba(255,255,255,0.1)"

36+ , borderBottom: "1px solid rgba(0,0,0,0.1)"

35 , boxShadow:

37 , boxShadow:

36 i -- bottom right

38 i -- bottom right

37 "var(--s-5) var(--s-3) var(--s-3) "

39 "var(--s-5) var(--s-3) var(--s-3) "

38− (cssStringRGBA $ withAlpha 0.13 Color.black)

40+ (cssStringRGBA $ withAlpha 0.1 Color.black)

39 ", calc(var(--s-5) * -1) calc(-1 * var(--s-5)) var(--s-2) "

41 ", calc(var(--s-5) * -1) calc(-1 * var(--s-5)) var(--s-2) "

40 (cssStringRGBA $ withAlpha 0.1 Color.black) ∷

42 (cssStringRGBA $ withAlpha 0.1 Color.black) ∷

41 String

43 String

components/src/Yoga/Grimoire/Component.purs+28−18

@@ -13,17 +13,20 @@ import Data.Nullable as Nullable

13import Data.Symbol (SProxy(..))

14import Data.Traversable (for, sequence)

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

16+import Debug.Trace (spy)

16import Effect (Effect)

17import Effect (Effect)

17import Effect.Class.Console (log)

18import Effect.Class.Console (log)

18import Justifill (justifill)

19import Justifill (justifill)

19import Partial.Unsafe (unsafeCrashWith)

20import Partial.Unsafe (unsafeCrashWith)

20import React.Basic (ReactComponent)

21import React.Basic (ReactComponent)

21import React.Basic.DOM (css)

22import React.Basic.DOM (css)

23+import React.Basic.DOM as R

22import React.Basic.Helpers (jsx)

24import React.Basic.Helpers (jsx)

23import React.Basic.Hooks (Ref, component, element, readRef, useLayoutEffect, useRef, useState, writeRef)

25import React.Basic.Hooks (Ref, component, element, readRef, useLayoutEffect, useRef, useState, writeRef)

24import React.Basic.Hooks as React

26import React.Basic.Hooks as React

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

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

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

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

29+import Record (disjointUnion)

27import Record as Record

30import Record as Record

28import Record.Extra (pick)

31import Record.Extra (pick)

29import Unsafe.Coerce (unsafeCoerce)

32import Unsafe.Coerce (unsafeCoerce)

@@ -96,13 +99,13 @@ scaledCompletely = "scale3d(2.0, 2.0, 2.0)"

96defaultSprings =

99defaultSprings =

97 { x: 0.0

100 { x: 0.0

98 , y: 0.0

101 , y: 0.0

99− , shadow: 5

102+ , shadow: 1

100 , zIndex: 0

103 , zIndex: 0

101 , immediate: const true

104 , immediate: const true

102 , transform: "scale3d(1.0,1.0,1.0)"

105 , transform: "scale3d(1.0,1.0,1.0)"

103 }

106 }

104

107

105−springsteen init windowSize rectsRef positionsRef arg mx my down tap springs = do

108+springsteen springs init windowSize rectsRef positionsRef { arg, movement: mx /\ my, down, tap } = do

106 init

109 init

107 rects <- readRef rectsRef

110 rects <- readRef rectsRef

108 positionsBefore <- readRef positionsRef

111 positionsBefore <- readRef positionsRef

@@ -132,7 +135,7 @@ springsteen init windowSize rectsRef positionsRef arg mx my down tap springs = d

132 , y = my + topOffset

135 , y = my + topOffset

133 , zIndex = 1

136 , zIndex = 1

134 , transform = scaledUp

137 , transform = scaledUp

135− , shadow = 20

138+ , shadow = 10

136 , immediate = \n -> n == "x" || n == "y" || n == "zIndex"

139 , immediate = \n -> n == "x" || n == "y" || n == "zIndex"

137 }

140 }

138 true, Just { index, value }

141 true, Just { index, value }

@@ -140,7 +143,7 @@ springsteen init windowSize rectsRef positionsRef arg mx my down tap springs = d

140 defaultSprings

143 defaultSprings

141 { x = rectDragged.left - currentRect.left + leftOffset

144 { x = rectDragged.left - currentRect.left + leftOffset

142 , y = rectDragged.top - currentRect.top + topOffset

145 , y = rectDragged.top - currentRect.top + topOffset

143− , immediate = const false

146+ , immediate = \n -> n == "zIndex"

144 }

147 }

145 _, _ ->

148 _, _ ->

146 defaultSprings

149 defaultSprings

@@ -190,23 +193,30 @@ makeComponent = do

190 mempty

193 mempty

191 theme ∷ CSSTheme <- useTheme

194 theme ∷ CSSTheme <- useTheme

192 bindDragProps <-

195 bindDragProps <-

193− useDrag (justifill { filterTaps: true }) \{ arg, down, movement: mx /\ my, tap } ->

196+ useDrag (justifill { filterTaps: true }) \input ->

194− springsteen init windowSize rectsRef positionsRef arg mx my down tap springs

197+ springsteen springs init windowSize rectsRef positionsRef input

195 let

198 let

196 renderSpells =

199 renderSpells =

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

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

201+ R.div

202+ { style: css { height: "100px", overflow: "visible" }

203+ , children:

198− animatedDiv

204+ [ animatedDiv

199− $ { style:

205+ $ { style:

200− css

206+ css

201− $ Record.insert (SProxy ∷ _ "boxShadow")

207+ $ disjointUnion

202− ((unsafeCoerce (style.shadow ∷ Int)).interpolate (\s -> Interp.i "rgba(0, 0, 0, 0.15) 0px " s "px " (2 * s) "px 0px" ∷ String))

208+ { boxShadow: ((unsafeCoerce (style.shadow ∷ Int)).interpolate \s -> Interp.i "rgba(0, 0, 0, 0.15) 0px " s "px " (2 * s) "px 0px" ∷ String)

209+ , position: "relative"

210+ }

203− style

211+ style

204− , className: classes.container

212+ , className: classes.container

205− , ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)

213+ , ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)

206− , children: [ element spellComponent { spell } ]

214+ , children: [ element spellComponent { spell } ]

207− }

215+ }

208− `withDragProps`

216+ `withDragProps`

209− bindDragProps i

217+ bindDragProps i

218+ ]

219+ }

210 pure

220 pure

211 $ jsx grid {}

221 $ jsx grid {}

212 $ renderSpells (spells `zip` springs.styles)

222 $ renderSpells (spells `zip` springs.styles)

components/src/Yoga/Grimoire/Spell/Styles.purs−2

@@ -59,6 +59,4 @@ styles =

59 color theme.grey

60 fontStyle italic

61 overflow Overflow.hidden

62− textWhitespace whitespaceNoWrap

63− textOverflow ellipsis

64 }

62 }

components/src/Yoga/Grimoire/Stories.purs+27

@@ -22,4 +22,31 @@ spells =

22 , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

23 , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }

24 , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }

25+ , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

26+ , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

27+ , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

28+ , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

29+ , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

30+ , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

31+ , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

32+ , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

33+ , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

34+ , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }

35+ , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }

36+ , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }

37+ , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }

38+ , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }

39+ , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }

40+ , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }

41+ , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }

42+ , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }

43+ , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }

44+ , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }

45+ , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }

46+ , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }

47+ , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }

48+ , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }

49+ , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }

50+ , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }

51+ , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }

25 ]

52 ]

components/src/Yoga/InlineCode/Component.purs+4−4

@@ -5,13 +5,14 @@ import Data.Foldable (fold, intercalate)

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

6import Data.Time.Duration (Milliseconds(..))

7import Data.Tuple.Nested ((/\))

8+import Debug.Trace (spy)

8import Effect (Effect)

9import Effect (Effect)

9import Effect.Aff (delay)

10import Effect.Aff (delay)

10import Effect.Class (liftEffect)

11import Effect.Class (liftEffect)

11import Foreign.Object as Obj

12import Foreign.Object as Obj

12import Literals.Undefined (undefined)

13import Literals.Undefined (undefined)

13import React.Basic.DOM as R

14import React.Basic.DOM as R

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

15+import React.Basic.DOM.Events (preventDefault, targetValue)

15import React.Basic.Events (handler)

16import React.Basic.Events (handler)

16import React.Basic.Hooks (ReactComponent, component, useState)

17import React.Basic.Hooks (ReactComponent, component, useState)

17import React.Basic.Hooks as React

18import React.Basic.Hooks as React

@@ -62,13 +63,12 @@ makeComponent = do

62 , readOnly: props.readOnly ?|| false

63 , readOnly: props.readOnly ?|| false

63 , disabled: props.readOnly ?|| false

64 , disabled: props.readOnly ?|| false

64 , spellCheck: false

65 , spellCheck: false

66+ , onDragOver: handler preventDefault (\e -> spy "e" mempty)

65 , autoComplete: unsafeCoerce "false"

67 , autoComplete: unsafeCoerce "false"

66 , autoCorrect: "off"

68 , autoCorrect: "off"

67 , autoCapitalize: "off"

69 , autoCapitalize: "off"

68 , onChange:

70 , onChange:

69− handler targetValue

71+ handler targetValue \v -> modifyValue (const (v ?|| ""))

70− ( \v -> modifyValue $ const (v ?|| "")

71− )

72 , _data: Obj.singleton "testid" "inline-code"

73 }

74 ]

components/src/Yoga/Theme.purs+6−4

@@ -50,9 +50,9 @@ fromTheme theme =

50 >>> RB.insert (f ∷ _ "backgroundColourLightest")

51 (theme.backgroundColour # lighter # lighter)

52 >>> RB.insert (f ∷ _ "backgroundColourDarker")

53− (theme.backgroundColour # darker)

53+ (theme.backgroundColour # darkerBackground)

54 >>> RB.insert (f ∷ _ "backgroundColourDarkest")

55− (theme.backgroundColour # darker # darker)

55+ (theme.backgroundColour # darkerBackground # darkerBackground)

56 >>> RB.insert (f ∷ _ "interfaceColourLighter")

57 (theme.interfaceColour # lighter)

58 >>> RB.insert (f ∷ _ "interfaceColourLightest")

@@ -137,6 +137,8 @@ fromTheme theme =

137 s_5 = variable "s-5" (reference s_4 !/ reference ratio)

138 isLightTheme = isLight theme.backgroundColour

139 lighter ∷ Color -> Color

140− lighter = if isLightTheme then lighten 0.04 else lighten 0.02

140+ lighter = if isLightTheme then lighten 0.04 else lighten 0.04

141 darker ∷ Color -> Color

142+ darker = darken 0.05

143+ darkerBackground ∷ Color -> Color

142− darker = if isLightTheme then darken 0.01 else darken 0.01

144+ darkerBackground = if isLightTheme then desaturate (0.05) <<< darken 0.03 else darken 0.05

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

@@ -22,7 +22,7 @@ fontFaces = jss (Rubik.fontFamilies <> VictorMono.fontFamilies)

23darkTheme ∷ Theme

24darkTheme =

25− { backgroundColour: Color.hsl 238.0 0.18 0.30

25+ { backgroundColour: Color.hsl 238.0 0.18 0.20

26 , textColour: Color.hsl 225.0 0.28 0.90

27 , interfaceColour: Color.hsl 235.0 0.22 0.28

28 , highlightColour: Color.hsl 285.0 0.88 0.72

@@ -47,8 +47,8 @@ lightTheme ∷ Theme

47lightTheme =

48 darkTheme

49 { textColour = Color.hsl 220.0 0.18 0.30

50− , backgroundColour = Color.hsl 30.0 0.50 0.97

50+ , backgroundColour = Color.hsl 20.0 0.35 0.95

51− , interfaceColour = Color.hsl 350.0 0.40 0.97

51+ , interfaceColour = Color.hsl 20.0 0.20 0.975

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