rowtype-yoga/psfp
1
0
Fork 0
mirror of https://github.com/rowtype-yoga/psfp.git synced 2024-09-11 16:25:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

No progress

Browse Source
This commit is contained in:
Mark Eibes 2020-05-13 23:01:56 +02:00
parent 7e0bbefd01
commit 2d91747c74
7 changed files with 71 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/src/Yoga/Card/Component.purs
View File

@ -32,10 +32,12 @@ styles =
\props ->
{ borderRadius: "var(--s-2)"
, overflow: "hidden"
, borderTop: "1px solid rgba(255,255,255,0.1)"
, borderBottom: "1px solid rgba(0,0,0,0.1)"
, boxShadow:
i -- bottom right
"var(--s-5) var(--s-3) var(--s-3) "
(cssStringRGBA $ withAlpha 0.13 Color.black)
(cssStringRGBA $ withAlpha 0.1 Color.black)
", calc(var(--s-5) * -1) calc(-1 * var(--s-5)) var(--s-2) "
(cssStringRGBA $ withAlpha 0.1 Color.black) ∷
String

46
components/src/Yoga/Grimoire/Component.purs
View File

@ -13,17 +13,20 @@ import Data.Nullable as Nullable
import Data.Symbol (SProxy(..))
import Data.Traversable (for, sequence)
import Data.Tuple.Nested ((/\), type (/\))
import Debug.Trace (spy)
import Effect (Effect)
import Effect.Class.Console (log)
import Justifill (justifill)
import Partial.Unsafe (unsafeCrashWith)
import React.Basic (ReactComponent)
import React.Basic.DOM (css)
import React.Basic.DOM as R
import React.Basic.Helpers (jsx)
import React.Basic.Hooks (Ref, component, element, readRef, useLayoutEffect, useRef, useState, writeRef)
import React.Basic.Hooks as React
import React.Basic.Hooks.Spring (animatedDiv, useSprings)
import React.Basic.Hooks.UseGesture (useDrag, withDragProps)
import Record (disjointUnion)
import Record as Record
import Record.Extra (pick)
import Unsafe.Coerce (unsafeCoerce)
@ -96,13 +99,13 @@ scaledCompletely = "scale3d(2.0, 2.0, 2.0)"
defaultSprings =
{ x: 0.0
, y: 0.0
, shadow: 5
, shadow: 1
, zIndex: 0
, immediate: const true
, transform: "scale3d(1.0,1.0,1.0)"
}
springsteen init windowSize rectsRef positionsRef arg mx my down tap springs = do
springsteen springs init windowSize rectsRef positionsRef { arg, movement: mx /\ my, down, tap } = do
init
rects <- readRef rectsRef
positionsBefore <- readRef positionsRef
@ -132,7 +135,7 @@ springsteen init windowSize rectsRef positionsRef arg mx my down tap springs = d
, y = my + topOffset
, zIndex = 1
, transform = scaledUp
, shadow = 20
, shadow = 10
, immediate = \n -> n == "x" || n == "y" || n == "zIndex"
}
true, Just { index, value }
@ -140,7 +143,7 @@ springsteen init windowSize rectsRef positionsRef arg mx my down tap springs = d
defaultSprings
{ x = rectDragged.left - currentRect.left + leftOffset
, y = rectDragged.top - currentRect.top + topOffset
, immediate = const false
, immediate = \n -> n == "zIndex"
}
_, _ ->
defaultSprings
@ -190,23 +193,30 @@ makeComponent = do
mempty
theme ∷ CSSTheme <- useTheme
bindDragProps <-
useDrag (justifill { filterTaps: true }) \{ arg, down, movement: mx /\ my, tap } ->
springsteen init windowSize rectsRef positionsRef arg mx my down tap springs
useDrag (justifill { filterTaps: true }) \input ->
springsteen springs init windowSize rectsRef positionsRef input
let
renderSpells =
mapWithIndex \i (spell /\ style) ->
animatedDiv
$ { style:
css
$ Record.insert (SProxy ∷ _ "boxShadow")
((unsafeCoerce (style.shadow ∷ Int)).interpolate (\s -> Interp.i "rgba(0, 0, 0, 0.15) 0px " s "px " (2 * s) "px 0px" ∷ String))
style
, className: classes.container
, ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)
, children: [ element spellComponent { spell } ]
}
`withDragProps`
bindDragProps i
R.div
{ style: css { height: "100px", overflow: "visible" }
, children:
[ animatedDiv
$ { style:
css
$ disjointUnion
{ boxShadow: ((unsafeCoerce (style.shadow ∷ Int)).interpolate \s -> Interp.i "rgba(0, 0, 0, 0.15) 0px " s "px " (2 * s) "px 0px" ∷ String)
, position: "relative"
}
style
, className: classes.container
, ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)
, children: [ element spellComponent { spell } ]
}
`withDragProps`
bindDragProps i
]
}
pure
$ jsx grid {}
$ renderSpells (spells `zip` springs.styles)

2
components/src/Yoga/Grimoire/Spell/Styles.purs
View File

@ -59,6 +59,4 @@ styles =
color theme.grey
fontStyle italic
overflow Overflow.hidden
textWhitespace whitespaceNoWrap
textOverflow ellipsis
}

27
components/src/Yoga/Grimoire/Stories.purs
View File

@ -22,4 +22,31 @@ spells =
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
, { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
, { 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" }
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
, { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
, { 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" }
, { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
, { 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" }
, { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
, { 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" }
, { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
, { 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" }
, { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
, { 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" }
, { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
, { 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" }
, { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
, { 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" }
, { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
, { 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" }
, { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
, { 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" }
]

8
components/src/Yoga/InlineCode/Component.purs
View File

@ -5,13 +5,14 @@ import Data.Foldable (fold, intercalate)
import Data.Maybe (Maybe(..))
import Data.Time.Duration (Milliseconds(..))
import Data.Tuple.Nested ((/\))
import Debug.Trace (spy)
import Effect (Effect)
import Effect.Aff (delay)
import Effect.Class (liftEffect)
import Foreign.Object as Obj
import Literals.Undefined (undefined)
import React.Basic.DOM as R
import React.Basic.DOM.Events (targetValue)
import React.Basic.DOM.Events (preventDefault, targetValue)
import React.Basic.Events (handler)
import React.Basic.Hooks (ReactComponent, component, useState)
import React.Basic.Hooks as React
@ -62,13 +63,12 @@ makeComponent = do
, readOnly: props.readOnly ?|| false
, disabled: props.readOnly ?|| false
, spellCheck: false
, onDragOver: handler preventDefault (\e -> spy "e" mempty)
, autoComplete: unsafeCoerce "false"
, autoCorrect: "off"
, autoCapitalize: "off"
, onChange:
handler targetValue
( \v -> modifyValue $ const (v ?|| "")
)
handler targetValue \v -> modifyValue (const (v ?|| ""))
, _data: Obj.singleton "testid" "inline-code"
}
]

10
components/src/Yoga/Theme.purs
View File

@ -50,9 +50,9 @@ fromTheme theme =
>>> RB.insert (f ∷ _ "backgroundColourLightest")
(theme.backgroundColour # lighter # lighter)
>>> RB.insert (f ∷ _ "backgroundColourDarker")
(theme.backgroundColour # darker)
(theme.backgroundColour # darkerBackground)
>>> RB.insert (f ∷ _ "backgroundColourDarkest")
(theme.backgroundColour # darker # darker)
(theme.backgroundColour # darkerBackground # darkerBackground)
>>> RB.insert (f ∷ _ "interfaceColourLighter")
(theme.interfaceColour # lighter)
>>> RB.insert (f ∷ _ "interfaceColourLightest")
@ -137,6 +137,8 @@ fromTheme theme =
s_5 = variable "s-5" (reference s_4 !/ reference ratio)
isLightTheme = isLight theme.backgroundColour
lighter ∷ Color -> Color
lighter = if isLightTheme then lighten 0.04 else lighten 0.02
lighter = if isLightTheme then lighten 0.04 else lighten 0.04
darker ∷ Color -> Color
darker = if isLightTheme then darken 0.01 else darken 0.01
darker = darken 0.05
darkerBackground ∷ Color -> Color
darkerBackground = if isLightTheme then desaturate (0.05) <<< darken 0.03 else darken 0.05

6
components/src/Yoga/Theme/Default.purs
View File

@ -22,7 +22,7 @@ fontFaces = jss (Rubik.fontFamilies <> VictorMono.fontFamilies)
darkTheme ∷ Theme
darkTheme =
{ backgroundColour: Color.hsl 238.0 0.18 0.30
{ backgroundColour: Color.hsl 238.0 0.18 0.20
, textColour: Color.hsl 225.0 0.28 0.90
, interfaceColour: Color.hsl 235.0 0.22 0.28
, highlightColour: Color.hsl 285.0 0.88 0.72
@ -47,8 +47,8 @@ lightTheme ∷ Theme
lightTheme =
darkTheme
{ textColour = Color.hsl 220.0 0.18 0.30
, backgroundColour = Color.hsl 30.0 0.50 0.97
, interfaceColour = Color.hsl 350.0 0.40 0.97
, backgroundColour = Color.hsl 20.0 0.35 0.95
, interfaceColour = Color.hsl 20.0 0.20 0.975
, highlightColour = Color.hsl 350.0 0.93 0.67
, altHighlightColour = Color.hsl 84.0 0.617 0.631
, green = Color.hsl 170.0 0.39 0.40