mirror of
https://github.com/rowtype-yoga/psfp.git
synced 2024-09-11 16:25:36 +03:00
No progress
This commit is contained in:
parent
7e0bbefd01
commit
2d91747c74
@ -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
|
||||
|
@ -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)
|
||||
|
@ -59,6 +59,4 @@ styles =
|
||||
color theme.grey
|
||||
fontStyle italic
|
||||
overflow Overflow.hidden
|
||||
textWhitespace whitespaceNoWrap
|
||||
textOverflow ellipsis
|
||||
}
|
||||
|
@ -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" }
|
||||
]
|
||||
|
@ -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"
|
||||
}
|
||||
]
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user