git.iko.soy/rowtype-yoga/psfp
on master help sign in
No progress
commit2d91747c7441c9744f9a2c98f986e0e88b1ded2e authorMark Eibes <mark.eibes@gmail.com> dateWed 13 May 2020, 23:01 (6 years ago) parent7e0bbef
7 files changed+71−32
components/src/Yoga/Card/Component.purs+3−1 components/src/Yoga/Grimoire/Component.purs+28−18 components/src/Yoga/Grimoire/Spell/Styles.purs−2 components/src/Yoga/Grimoire/Stories.purs+27 components/src/Yoga/InlineCode/Component.purs+4−4 components/src/Yoga/Theme.purs+6−4 components/src/Yoga/Theme/Default.purs+3−3
components/src/Yoga/Card/Component.purs+3−1
@@ -32,10 +32,12 @@ styles =
3232 \props ->
3333 { borderRadius: "var(--s-2)"
3434 , overflow: "hidden"
35+ , borderTop: "1px solid rgba(255,255,255,0.1)"
36+ , borderBottom: "1px solid rgba(0,0,0,0.1)"
3537 , boxShadow:
3638 i -- bottom right
3739 "var(--s-5) var(--s-3) var(--s-3) "
38− (cssStringRGBA $ withAlpha 0.13 Color.black)
40+ (cssStringRGBA $ withAlpha 0.1 Color.black)
3941 ", calc(var(--s-5) * -1) calc(-1 * var(--s-5)) var(--s-2) "
4042 (cssStringRGBA $ withAlpha 0.1 Color.black) ∷
4143 String
components/src/Yoga/Grimoire/Component.purs+28−18
@@ -13,17 +13,20 @@ import Data.Nullable as Nullable
1313import Data.Symbol (SProxy(..))
1414import Data.Traversable (for, sequence)
1515import Data.Tuple.Nested ((/\), type (/\))
16+import Debug.Trace (spy)
1617import Effect (Effect)
1718import Effect.Class.Console (log)
1819import Justifill (justifill)
1920import Partial.Unsafe (unsafeCrashWith)
2021import React.Basic (ReactComponent)
2122import React.Basic.DOM (css)
23+import React.Basic.DOM as R
2224import React.Basic.Helpers (jsx)
2325import React.Basic.Hooks (Ref, component, element, readRef, useLayoutEffect, useRef, useState, writeRef)
2426import React.Basic.Hooks as React
2527import React.Basic.Hooks.Spring (animatedDiv, useSprings)
2628import React.Basic.Hooks.UseGesture (useDrag, withDragProps)
29+import Record (disjointUnion)
2730import Record as Record
2831import Record.Extra (pick)
2932import Unsafe.Coerce (unsafeCoerce)
@@ -96,13 +99,13 @@ scaledCompletely = "scale3d(2.0, 2.0, 2.0)"
9699defaultSprings =
97100 { x: 0.0
98101 , y: 0.0
99− , shadow: 5
102+ , shadow: 1
100103 , zIndex: 0
101104 , immediate: const true
102105 , transform: "scale3d(1.0,1.0,1.0)"
103106 }
104107
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
106109 init
107110 rects <- readRef rectsRef
108111 positionsBefore <- readRef positionsRef
@@ -132,7 +135,7 @@ springsteen init windowSize rectsRef positionsRef arg mx my down tap springs = d
132135 , y = my + topOffset
133136 , zIndex = 1
134137 , transform = scaledUp
135− , shadow = 20
138+ , shadow = 10
136139 , immediate = \n -> n == "x" || n == "y" || n == "zIndex"
137140 }
138141 true, Just { index, value }
@@ -140,7 +143,7 @@ springsteen init windowSize rectsRef positionsRef arg mx my down tap springs = d
140143 defaultSprings
141144 { x = rectDragged.left - currentRect.left + leftOffset
142145 , y = rectDragged.top - currentRect.top + topOffset
143− , immediate = const false
146+ , immediate = \n -> n == "zIndex"
144147 }
145148 _, _ ->
146149 defaultSprings
@@ -190,23 +193,30 @@ makeComponent = do
190193 mempty
191194 theme ∷ CSSTheme <- useTheme
192195 bindDragProps <-
193− useDrag (justifill { filterTaps: true }) \{ arg, down, movement: mx /\ my, tap } ->
194− springsteen init windowSize rectsRef positionsRef arg mx my down tap springs
196+ useDrag (justifill { filterTaps: true }) \input ->
197+ springsteen springs init windowSize rectsRef positionsRef input
195198 let
196199 renderSpells =
197200 mapWithIndex \i (spell /\ style) ->
198− animatedDiv
199− $ { style:
200− css
201− $ Record.insert (SProxy ∷ _ "boxShadow")
202− ((unsafeCoerce (style.shadow ∷ Int)).interpolate (\s -> Interp.i "rgba(0, 0, 0, 0.15) 0px " s "px " (2 * s) "px 0px" ∷ String))
203− style
204− , className: classes.container
205− , ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)
206− , children: [ element spellComponent { spell } ]
207− }
208− `withDragProps`
209− bindDragProps i
201+ R.div
202+ { style: css { height: "100px", overflow: "visible" }
203+ , children:
204+ [ animatedDiv
205+ $ { style:
206+ css
207+ $ disjointUnion
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+ }
211+ style
212+ , className: classes.container
213+ , ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)
214+ , children: [ element spellComponent { spell } ]
215+ }
216+ `withDragProps`
217+ bindDragProps i
218+ ]
219+ }
210220 pure
211221 $ jsx grid {}
212222 $ renderSpells (spells `zip` springs.styles)
components/src/Yoga/Grimoire/Spell/Styles.purs−2
@@ -59,6 +59,4 @@ styles =
5959 color theme.grey
6060 fontStyle italic
6161 overflow Overflow.hidden
62− textWhitespace whitespaceNoWrap
63− textOverflow ellipsis
6462 }
components/src/Yoga/Grimoire/Stories.purs+27
@@ -22,4 +22,31 @@ spells =
2222 , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
2323 , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
2424 , { 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" }
2552 ]
components/src/Yoga/InlineCode/Component.purs+4−4
@@ -5,13 +5,14 @@ import Data.Foldable (fold, intercalate)
55import Data.Maybe (Maybe(..))
66import Data.Time.Duration (Milliseconds(..))
77import Data.Tuple.Nested ((/\))
8+import Debug.Trace (spy)
89import Effect (Effect)
910import Effect.Aff (delay)
1011import Effect.Class (liftEffect)
1112import Foreign.Object as Obj
1213import Literals.Undefined (undefined)
1314import React.Basic.DOM as R
14−import React.Basic.DOM.Events (targetValue)
15+import React.Basic.DOM.Events (preventDefault, targetValue)
1516import React.Basic.Events (handler)
1617import React.Basic.Hooks (ReactComponent, component, useState)
1718import React.Basic.Hooks as React
@@ -62,13 +63,12 @@ makeComponent = do
6263 , readOnly: props.readOnly ?|| false
6364 , disabled: props.readOnly ?|| false
6465 , spellCheck: false
66+ , onDragOver: handler preventDefault (\e -> spy "e" mempty)
6567 , autoComplete: unsafeCoerce "false"
6668 , autoCorrect: "off"
6769 , autoCapitalize: "off"
6870 , onChange:
69− handler targetValue
70− ( \v -> modifyValue $ const (v ?|| "")
71− )
71+ handler targetValue \v -> modifyValue (const (v ?|| ""))
7272 , _data: Obj.singleton "testid" "inline-code"
7373 }
7474 ]
components/src/Yoga/Theme.purs+6−4
@@ -50,9 +50,9 @@ fromTheme theme =
5050 >>> RB.insert (f ∷ _ "backgroundColourLightest")
5151 (theme.backgroundColour # lighter # lighter)
5252 >>> RB.insert (f ∷ _ "backgroundColourDarker")
53− (theme.backgroundColour # darker)
53+ (theme.backgroundColour # darkerBackground)
5454 >>> RB.insert (f ∷ _ "backgroundColourDarkest")
55− (theme.backgroundColour # darker # darker)
55+ (theme.backgroundColour # darkerBackground # darkerBackground)
5656 >>> RB.insert (f ∷ _ "interfaceColourLighter")
5757 (theme.interfaceColour # lighter)
5858 >>> RB.insert (f ∷ _ "interfaceColourLightest")
@@ -137,6 +137,8 @@ fromTheme theme =
137137 s_5 = variable "s-5" (reference s_4 !/ reference ratio)
138138 isLightTheme = isLight theme.backgroundColour
139139 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
141141 darker ∷ Color -> Color
142− darker = if isLightTheme then darken 0.01 else darken 0.01
142+ darker = darken 0.05
143+ darkerBackground ∷ Color -> Color
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)
2222
2323darkTheme ∷ Theme
2424darkTheme =
25− { backgroundColour: Color.hsl 238.0 0.18 0.30
25+ { backgroundColour: Color.hsl 238.0 0.18 0.20
2626 , textColour: Color.hsl 225.0 0.28 0.90
2727 , interfaceColour: Color.hsl 235.0 0.22 0.28
2828 , highlightColour: Color.hsl 285.0 0.88 0.72
@@ -47,8 +47,8 @@ lightTheme ∷ Theme
4747lightTheme =
4848 darkTheme
4949 { textColour = Color.hsl 220.0 0.18 0.30
50− , backgroundColour = Color.hsl 30.0 0.50 0.97
51− , interfaceColour = Color.hsl 350.0 0.40 0.97
50+ , backgroundColour = Color.hsl 20.0 0.35 0.95
51+ , interfaceColour = Color.hsl 20.0 0.20 0.975
5252 , highlightColour = Color.hsl 350.0 0.93 0.67
5353 , altHighlightColour = Color.hsl 84.0 0.617 0.631
5454 , green = Color.hsl 170.0 0.39 0.40