mirror of
https://github.com/rowtype-yoga/psfp.git
synced 2024-09-11 16:25:36 +03:00
Fix some stuff
This commit is contained in:
parent
c8302a6470
commit
3d6eb2fd95
@ -215,7 +215,6 @@ mkMdxProviderComponent compiler = do
|
||||
, pre:
|
||||
mkFn2 \(props ∷ PreProps) other -> do
|
||||
let
|
||||
_ = spy "other" other
|
||||
|
||||
childrenQ = Nullable.toMaybe props.children
|
||||
|
||||
|
Binary file not shown.
Binary file not shown.
@ -13,6 +13,7 @@ import React.Basic.DOM as R
|
||||
import React.Basic.Hooks (ReactComponent, component, element, useRef, useState, (/\))
|
||||
import React.Basic.Hooks as React
|
||||
import Yoga.CompileEditor.Component (mkCompileEditor)
|
||||
import Yoga.Compiler.Api (apiCompiler)
|
||||
import Yoga.Polyfill.SmoothScrolling (smoothScrollPolyfill)
|
||||
import Yoga.SVG.Icon (appendIcon, applyflippedIcon, bindIcon, mapIcon)
|
||||
import Yoga.Theme.Provider (mkThemeProvider)
|
||||
@ -40,8 +41,7 @@ mkContainerContent = do
|
||||
$ jssClasses \(theme ∷ CSSTheme) ->
|
||||
{ container:
|
||||
jss
|
||||
{ fontFamily: theme.textFontFamily
|
||||
, color: theme.textColour
|
||||
{ color: theme.textColour
|
||||
, display: "flex"
|
||||
, flexDirection: "column"
|
||||
, width: "100%"
|
||||
@ -55,13 +55,13 @@ mkContainerContent = do
|
||||
, paddingLeft: "100px"
|
||||
, zIndex: 0
|
||||
}
|
||||
, icon: jss { fill: "theme.textColour" }
|
||||
, icon: jss { fill: theme.textColour }
|
||||
}
|
||||
landingPage <- mkLandingPage
|
||||
sidebar <- mkSidebar
|
||||
header <- mkHeader
|
||||
sidebarLink <- mkSidebarLink
|
||||
editor <- mkCompileEditor windowFetch
|
||||
editor <- mkCompileEditor (apiCompiler windowFetch)
|
||||
component "ContainerContent" \{ kids } -> React.do
|
||||
classes <- useStyles {}
|
||||
collapsed /\ modifyCollapsed <- useState true
|
||||
|
@ -1,6 +1,7 @@
|
||||
module Container.Header where
|
||||
|
||||
import Prelude
|
||||
import Data.Foldable (intercalate)
|
||||
import Data.Int (toNumber)
|
||||
import Data.Maybe (Maybe(..))
|
||||
import Data.Monoid (guard)
|
||||
@ -34,7 +35,7 @@ mkHeader = do
|
||||
jss
|
||||
{ backgroundColor: theme.interfaceColour
|
||||
, borderBottom: "0"
|
||||
, fontFamily: theme.headingFontFamily
|
||||
, fontFamily: intercalate ", " theme.headingFontFamily
|
||||
, gridArea: "header"
|
||||
, display: "flex"
|
||||
, alignItems: "center"
|
||||
|
@ -8,6 +8,7 @@ import Effect.Uncurried (runEffectFn1)
|
||||
import JSS (jss, jssClasses)
|
||||
import React.Basic.DOM as R
|
||||
import React.Basic.Events (handler_)
|
||||
import React.Basic.Helpers (jsx)
|
||||
import React.Basic.Hooks (ReactComponent, component, element, readRefMaybe, useRef)
|
||||
import React.Basic.Hooks as React
|
||||
import Unsafe.Coerce (unsafeCoerce)
|
||||
@ -82,6 +83,7 @@ mkLandingPage = do
|
||||
, landingImage:
|
||||
jss
|
||||
{ position: "absolute"
|
||||
, maxWidth: "none"
|
||||
, width: "100%"
|
||||
, height: "100%"
|
||||
}
|
||||
@ -112,21 +114,19 @@ mkLandingPage = do
|
||||
, R.div
|
||||
{ className: classes.actionButton
|
||||
, children:
|
||||
[ element button
|
||||
{ buttonProps:
|
||||
{ onClick:
|
||||
handler_ do
|
||||
maybeNode <- readRefMaybe ref
|
||||
for_ (maybeNode >>= HTMLElement.fromNode) \n -> do
|
||||
height <- getBoundingClientRect n <#> _.height
|
||||
win <- window
|
||||
runEffectFn1 ((unsafeCoerce win).scrollTo)
|
||||
{ top: height, left: 0, behavior: "smooth" }
|
||||
}
|
||||
[ jsx button
|
||||
{ onClick:
|
||||
handler_ do
|
||||
maybeNode <- readRefMaybe ref
|
||||
for_ (maybeNode >>= HTMLElement.fromNode) \n -> do
|
||||
height <- getBoundingClientRect n <#> _.height
|
||||
win <- window
|
||||
runEffectFn1 ((unsafeCoerce win).scrollTo)
|
||||
{ top: height, left: 0, behavior: "smooth" }
|
||||
, buttonType: HighlightedButton
|
||||
, kids: [ R.text buttonText ]
|
||||
, className: classes.actualActionButton
|
||||
}
|
||||
[ R.text buttonText ]
|
||||
]
|
||||
}
|
||||
]
|
||||
|
@ -1,6 +1,7 @@
|
||||
module Container.Sidebar where
|
||||
|
||||
import Prelude
|
||||
import Data.Foldable (intercalate)
|
||||
import Data.Monoid (guard)
|
||||
import Effect (Effect)
|
||||
import JSS (jss, jssClasses)
|
||||
@ -28,7 +29,7 @@ mkSidebar = do
|
||||
{ sidebar:
|
||||
jss
|
||||
{ background: theme.interfaceColourLighter
|
||||
, fontFamily: theme.textFontFamily
|
||||
, fontFamily: intercalate ", " theme.textFontFamily
|
||||
, borderRadius: "0 12px 12px 0"
|
||||
, color: theme.textColour
|
||||
, position: "absolute"
|
||||
@ -86,7 +87,7 @@ mkSidebarLink = do
|
||||
$ jssClasses \(theme ∷ CSSTheme) ->
|
||||
{ sidebarEntry:
|
||||
jss
|
||||
{ fontFamily: theme.headingFontFamily
|
||||
{ fontFamily: intercalate ", " theme.headingFontFamily
|
||||
, alignSelf: "flex-end"
|
||||
, justifyContent: "space-between"
|
||||
, alignContent: "stretch"
|
||||
@ -106,7 +107,7 @@ mkSidebarLink = do
|
||||
}
|
||||
, label:
|
||||
jss
|
||||
{ fontFamily: theme.textFontFamily
|
||||
{ fontFamily: intercalate ", " theme.textFontFamily
|
||||
, color: theme.textColour
|
||||
, paddingLeft: "20px"
|
||||
, textTransform: "uppercase"
|
||||
@ -121,7 +122,7 @@ mkSidebarLink = do
|
||||
, transition: "0.2s ease-in-out"
|
||||
, transitionDelay: "0.1s"
|
||||
, alignSelf: "flex-end"
|
||||
, fill: theme.textColour <> " !important"
|
||||
, fill: theme.textColour
|
||||
}
|
||||
}
|
||||
component "SidebarLink" \{ name, icon, collapsed } -> React.do
|
||||
|
@ -2,10 +2,10 @@ module Container.Stories where
|
||||
|
||||
import Prelude hiding (add)
|
||||
import Container.Component (mkContainer)
|
||||
import Decorator.FullScreen (fullScreenDecorator)
|
||||
import Effect (Effect)
|
||||
import React.Basic.Hooks (component, element)
|
||||
import React.Basic.Hooks as React
|
||||
import Storybook.Decorator.FullScreen (fullScreenDecorator)
|
||||
import Storybook.React (Storybook, add, addDecorator, storiesOf)
|
||||
import Yoga.Theme.Styles (useTheme)
|
||||
|
||||
|
@ -1,119 +0,0 @@
|
||||
module Decorator.FullScreen where
|
||||
|
||||
import Prelude
|
||||
import Data.Array (find)
|
||||
import Data.Map (Map)
|
||||
import Data.Maybe (Maybe, fromMaybe)
|
||||
import Data.Traversable (traverse_)
|
||||
import Effect (Effect)
|
||||
import JSS (jss, jssClasses)
|
||||
import React.Basic (JSX)
|
||||
import React.Basic.DOM (css)
|
||||
import React.Basic.DOM as R
|
||||
import React.Basic.DOM.Events (targetValue)
|
||||
import React.Basic.Events (handler)
|
||||
import React.Basic.Hooks (ReactComponent, component, element, useState, (/\))
|
||||
import React.Basic.Hooks as React
|
||||
import Simple.JSON (readJSON_, writeJSON)
|
||||
import Web.HTML (window)
|
||||
import Web.HTML.Window (localStorage)
|
||||
import Web.Storage.Storage (getItem, setItem)
|
||||
import Yoga.Font.Rubik as Rubik
|
||||
import Yoga.Font.VictorMono as VictorMono
|
||||
import Yoga.Theme (fromTheme)
|
||||
import Yoga.Theme.Default (darkTheme, lightTheme)
|
||||
import Yoga.Theme.Provider (mkThemeProvider)
|
||||
import Yoga.Theme.Styles (makeStylesJSS)
|
||||
import Yoga.Theme.Types (CSSTheme)
|
||||
|
||||
fullScreenDecorator ∷ Effect JSX -> Effect JSX
|
||||
fullScreenDecorator mkChild = do
|
||||
let
|
||||
dark = fromTheme darkTheme
|
||||
|
||||
light = fromTheme lightTheme
|
||||
child <- mkChild
|
||||
themeSwitcher <- mkThemeSwitcher
|
||||
pure
|
||||
$ R.div
|
||||
{ style:
|
||||
css
|
||||
{ minWidth: "100vw"
|
||||
, height: "100vh"
|
||||
}
|
||||
, children:
|
||||
[ element themeSwitcher
|
||||
{ kids: [ child ]
|
||||
, defaultTheme: { name: "Dark", theme: dark }
|
||||
, themes:
|
||||
[ { name: "Dark", theme: dark }
|
||||
, { name: "Light", theme: light }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
type ThemesWithNames
|
||||
= Map String CSSTheme
|
||||
|
||||
type DefaultTheme
|
||||
= { name ∷ String, theme ∷ CSSTheme }
|
||||
|
||||
mkThemeSwitcher ∷
|
||||
Effect
|
||||
( ReactComponent { defaultTheme ∷ DefaultTheme, themes ∷ Array DefaultTheme, kids ∷ Array JSX }
|
||||
)
|
||||
mkThemeSwitcher = do
|
||||
themeProvider <- mkThemeProvider
|
||||
useStyles <-
|
||||
makeStylesJSS
|
||||
$ jssClasses \_ ->
|
||||
{ selector:
|
||||
jss
|
||||
{ position: "fixed"
|
||||
, zIndex: 20
|
||||
, top: 10
|
||||
, right: 10
|
||||
}
|
||||
, "@font-face": jss $ Rubik.fontFamilies <> VictorMono.fontFamilies
|
||||
}
|
||||
storage <- window >>= localStorage
|
||||
saved ∷ (Maybe DefaultTheme) <- getItem "theme" storage <#> (_ >>= readJSON_)
|
||||
component "ThemeSwitcher" \{ defaultTheme, themes, kids } -> React.do
|
||||
classes <- useStyles {}
|
||||
{ theme, name } /\ modTheme <- useState $ fromMaybe defaultTheme saved
|
||||
let
|
||||
setTheme newTheme = do
|
||||
setItem "theme" (writeJSON newTheme) storage
|
||||
modTheme (const newTheme)
|
||||
let
|
||||
handleClicked maybeValue =
|
||||
traverse_ setTheme do
|
||||
value <- maybeValue
|
||||
themes # find \x -> x.name == value
|
||||
let
|
||||
themeSelect =
|
||||
R.select
|
||||
{ onChange: handler targetValue handleClicked
|
||||
, value: name
|
||||
, className: classes.selector
|
||||
, children:
|
||||
themes
|
||||
<#> \x ->
|
||||
R.option
|
||||
{ value: x.name
|
||||
, key: x.name
|
||||
, children: [ R.text x.name ]
|
||||
}
|
||||
}
|
||||
pure
|
||||
$ element themeProvider
|
||||
{ theme
|
||||
, children:
|
||||
[ R.div
|
||||
{ style: css { backgroundColor: theme.backgroundColour, width: "100%", height: "100%" }
|
||||
, children:
|
||||
[ themeSelect ] <> kids
|
||||
}
|
||||
]
|
||||
}
|
@ -1,13 +1,13 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var react_spring_1 = require("react-spring");
|
||||
exports.interpolateImpl = react_spring_1.interpolate;
|
||||
exports.useSpringImpl = function (mkStyles) { return function () {
|
||||
var result = react_spring_1.useSpring(mkStyles);
|
||||
return { style: result[0], set: result[1], stop: result[2] };
|
||||
}; };
|
||||
exports.useSpringsImpl = function (n) { return function (fn) { return function () {
|
||||
var result = react_spring_1.useSprings(n, fn);
|
||||
console.log("REEEEEEEEESLUT", result);
|
||||
return { styles: result[0], set: result[1], stop: result[2] };
|
||||
}; }; };
|
||||
exports.useTransitionImpl = react_spring_1.useTransition;
|
||||
|
@ -6,18 +6,19 @@ import Data.Array as Array
|
||||
import Data.FoldableWithIndex (findWithIndex)
|
||||
import Data.Lens (set)
|
||||
import Data.Lens.Index (ix)
|
||||
import Data.Maybe (Maybe(..), fromMaybe, isJust)
|
||||
import Data.Maybe (Maybe(..), fromMaybe)
|
||||
import Data.Nullable (Nullable)
|
||||
import Data.Nullable as Nullable
|
||||
import Data.Traversable (for, sequence)
|
||||
import Data.Tuple.Nested ((/\), type (/\))
|
||||
import Debug.Trace (spy)
|
||||
import Effect (Effect)
|
||||
import Effect.Aff (Milliseconds(..), delay, launchAff_)
|
||||
import Justifill (justifill)
|
||||
import React.Basic (ReactComponent)
|
||||
import React.Basic.DOM (css)
|
||||
import React.Basic.Helpers (jsx)
|
||||
import React.Basic.Hooks (Ref, component, element, readRef, useLayoutEffect, useRef, writeRef)
|
||||
import React.Basic.Hooks (Ref, component, element, readRef, useEffect, useRef, writeRef)
|
||||
import React.Basic.Hooks as React
|
||||
import React.Basic.Hooks.Spring (animatedDiv, useSprings)
|
||||
import React.Basic.Hooks.UseGesture (useDrag, withDragProps)
|
||||
@ -30,6 +31,7 @@ import Yoga.Grid.Component as Grid
|
||||
import Yoga.Grimoire.Spell.Component as GrimoireSpell
|
||||
import Yoga.Grimoire.Styles (styles)
|
||||
import Yoga.Helpers ((?||))
|
||||
import Yoga.Resize.Hook (useResize)
|
||||
import Yoga.Spell.Types (Spell)
|
||||
import Yoga.Theme.Styles (makeStylesJSS, useTheme)
|
||||
import Yoga.Theme.Types (CSSTheme)
|
||||
@ -83,14 +85,28 @@ makeComponent = do
|
||||
nodeRefs <- useRef (props.spells $> (Nullable.null ∷ (_ Node)))
|
||||
positionsRef <- useRef ([] ∷ _ DOMRect)
|
||||
originalPositionsRef <- useRef ([] ∷ _ DOMRect)
|
||||
useLayoutEffect unit do
|
||||
rects <- getRects nodeRefs
|
||||
writeRef positionsRef (rects <#> fromMaybe emptyDomRect)
|
||||
writeRef originalPositionsRef (rects <#> fromMaybe emptyDomRect)
|
||||
initialisedRef <- useRef false
|
||||
windowSize <- useResize
|
||||
let
|
||||
init = do
|
||||
initialised <- readRef initialisedRef
|
||||
unless initialised do
|
||||
rects <- getRects nodeRefs
|
||||
writeRef positionsRef (rects <#> fromMaybe emptyDomRect)
|
||||
writeRef originalPositionsRef (rects <#> fromMaybe emptyDomRect)
|
||||
writeRef initialisedRef true
|
||||
useEffect windowSize do
|
||||
writeRef initialisedRef false
|
||||
positions <- readRef positionsRef
|
||||
let
|
||||
newOriginalPositions = positions
|
||||
writeRef positionsRef newOriginalPositions
|
||||
init
|
||||
mempty
|
||||
theme ∷ CSSTheme <- useTheme
|
||||
bindDragProps <-
|
||||
useDrag (justifill {}) \{ arg, down, movement: mx /\ my, xy: x /\ y } -> do
|
||||
useDrag (justifill {}) \{ arg, down, movement: mx /\ my } -> do
|
||||
init
|
||||
rects <- getRects nodeRefs
|
||||
originalPositions <- readRef originalPositionsRef
|
||||
positionsBefore <- readRef positionsRef
|
||||
@ -101,7 +117,10 @@ makeComponent = do
|
||||
|
||||
overlapsOtherBefore = positionsBefore # findWithIndex \i' pos -> i' /= arg && overlaps currentPosDraggedBefore pos
|
||||
case down, overlapsOtherBefore of
|
||||
false, Just { index, value } -> writeRef positionsRef (swap arg index positionsBefore ?|| positionsBefore)
|
||||
false, Just { index, value } -> do
|
||||
let
|
||||
swapped = swap arg index positionsBefore ?|| positionsBefore
|
||||
writeRef positionsRef swapped
|
||||
_, _ -> mempty
|
||||
positions <- readRef positionsRef
|
||||
let
|
||||
@ -121,9 +140,27 @@ makeComponent = do
|
||||
topOffset = if iPos == origIPos then 0.0 else iPos.top - origIPos.top
|
||||
case i == arg, down, overlapsOther of
|
||||
false, true, Just { index, value }
|
||||
| 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 }
|
||||
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" }
|
||||
_, _, _ -> { x: leftOffset, y: topOffset, zIndex: 0, transform: "scale3d(1.0, 1.0, 1.0)", immediate: const false }
|
||||
| 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
|
||||
}
|
||||
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"
|
||||
}
|
||||
_, _, _ ->
|
||||
{ x: leftOffset
|
||||
, y: topOffset
|
||||
, zIndex: 0
|
||||
, transform: "scale3d(1.0, 1.0, 1.0)"
|
||||
, immediate: const false
|
||||
}
|
||||
let
|
||||
renderSpells =
|
||||
mapWithIndex \i (spell /\ style) ->
|
||||
|
@ -56,7 +56,7 @@ makeComponent = do
|
||||
]
|
||||
]
|
||||
pure
|
||||
$ jsx card { divRef: props.cardRef }
|
||||
$ jsx card { divRef: props.cardRef, className: style.card }
|
||||
[ jsx box { className: style.container, padding: "var(--s-1)" }
|
||||
[ jsx stack { space: "var(--s-3)" }
|
||||
[ headerCluster
|
||||
|
@ -1,4 +1,4 @@
|
||||
module Yoga.Grimoire.Spell.Spec where
|
||||
module Yoga.Spell.Spec where
|
||||
|
||||
import Prelude
|
||||
import Justifill (justifill)
|
||||
|
@ -1,11 +1,10 @@
|
||||
module Yoga.Grimoire.Spell.Styles where
|
||||
|
||||
import Prelude hiding (top)
|
||||
import CSS (ColorSpace(..), backgroundColor, border, borderRadius, color, fontFamily, fontSize, fontStyle, height, mix, pct, sansSerif, solid, width)
|
||||
import CSS (backgroundColor, color, fontFamily, fontSize, fontStyle, height, pct, sansSerif, width)
|
||||
import CSS.FontStyle (italic)
|
||||
import CSS.TextAlign (rightTextAlign, textAlign)
|
||||
import Data.Array (fromFoldable)
|
||||
import Data.NonEmpty (NonEmpty(..))
|
||||
import Data.NonEmpty as NonEmpty
|
||||
import JSS (JSSClasses, JSSElem, jss, jssClasses)
|
||||
import Yoga.Theme.Types (YogaTheme)
|
||||
@ -20,13 +19,18 @@ type Classes a
|
||||
= ( container ∷ a
|
||||
, signature ∷ a
|
||||
, description ∷ a
|
||||
, card ∷ a
|
||||
, name ∷ a
|
||||
)
|
||||
|
||||
styles ∷ JSSClasses YogaTheme Props (Classes (JSSElem Props))
|
||||
styles =
|
||||
jssClasses \theme@{ s0, s1, s4, s5, s_5 } ->
|
||||
{ container:
|
||||
{ card:
|
||||
do
|
||||
width (100.0 # pct)
|
||||
height (100.0 # pct)
|
||||
, container:
|
||||
jss { userSelect: "none" }
|
||||
<> jss do
|
||||
backgroundColor theme.backgroundColourLighter
|
||||
|
39
components/src/Yoga/Resize/Hook.purs
Normal file
39
components/src/Yoga/Resize/Hook.purs
Normal file
@ -0,0 +1,39 @@
|
||||
module Yoga.Resize.Hook where
|
||||
|
||||
import Prelude
|
||||
import Data.Int (toNumber)
|
||||
import Data.Newtype (class Newtype)
|
||||
import Effect (Effect)
|
||||
import React.Basic.Hooks (Hook, UseLayoutEffect, UseState, coerceHook, useLayoutEffect, useState, (/\))
|
||||
import React.Basic.Hooks as React
|
||||
import Web.Event.EventTarget (EventListener, eventListener)
|
||||
import Web.HTML (window)
|
||||
import Web.HTML.Window (innerHeight, innerWidth)
|
||||
import Yoga.Resize.Listener as Resize
|
||||
|
||||
newtype UseResize hooks
|
||||
= UseResize (UseLayoutEffect Unit (UseState { width ∷ Number, height ∷ Number } hooks))
|
||||
|
||||
derive instance ntUseResize ∷ Newtype (UseResize hooks) _
|
||||
useResize ∷ Hook UseResize { width ∷ Number, height ∷ Number }
|
||||
useResize =
|
||||
coerceHook React.do
|
||||
size /\ updateSize <- useState { width: 0.0, height: 0.0 }
|
||||
let
|
||||
setSize = updateSize <<< const
|
||||
useLayoutEffect unit do
|
||||
setSizeFromWindow setSize
|
||||
listener <- makeListener setSize
|
||||
Resize.registerListener listener
|
||||
pure size
|
||||
|
||||
setSizeFromWindow setSize = do
|
||||
win <- window
|
||||
width <- innerWidth win <#> toNumber
|
||||
height <- innerHeight win <#> toNumber
|
||||
setSize { width, height }
|
||||
|
||||
makeListener ∷ ({ height ∷ Number, width ∷ Number } -> Effect Unit) -> Effect EventListener
|
||||
makeListener setSize = do
|
||||
eventListener
|
||||
$ const (setSizeFromWindow setSize)
|
17
components/src/Yoga/Resize/Listener.purs
Normal file
17
components/src/Yoga/Resize/Listener.purs
Normal file
@ -0,0 +1,17 @@
|
||||
module Yoga.Resize.Listener (registerListener) where
|
||||
|
||||
import Prelude
|
||||
import Effect (Effect)
|
||||
import Web.Event.Event (EventType(..))
|
||||
import Web.Event.EventTarget (EventListener, addEventListener, removeEventListener)
|
||||
import Web.HTML (window)
|
||||
import Web.HTML.Window (toEventTarget)
|
||||
|
||||
eventType ∷ EventType
|
||||
eventType = EventType "resize"
|
||||
|
||||
registerListener ∷ EventListener -> Effect (Effect Unit)
|
||||
registerListener listener = do
|
||||
target <- window <#> toEventTarget
|
||||
addEventListener eventType listener false target
|
||||
pure $ removeEventListener eventType listener false target
|
@ -49,7 +49,7 @@ lightTheme =
|
||||
{ textColour = Color.hsl 220.0 0.18 0.30
|
||||
, backgroundColour = Color.hsl 30.0 0.50 0.96
|
||||
, interfaceColour = Color.hsl 210.0 0.10 0.89
|
||||
, highlightColour = Color.hsl 350.0 0.93 0.62
|
||||
, 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
|
||||
, purple = Color.hsl 284.0 0.64 0.60
|
||||
|
Loading…
Reference in New Issue
Block a user