Skip to content

[#49] update Loading spinner #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 18 commits into
base: main
Choose a base branch
from
Open

[#49] update Loading spinner #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
f4f2579
WIP update loading spinner
kimispencer Jun 6, 2019
cf15e42
note
kimispencer Jun 6, 2019
690a135
primary bg color test
kimispencer Jun 7, 2019
73364e7
WIP potential loader with fade
kimispencer Jun 24, 2019
0425679
WIP get new loader to work with Button
kimispencer Jun 25, 2019
adf581a
notes
kimispencer Jun 25, 2019
ba8f9de
example
kimispencer Jun 26, 2019
842fd5d
button + loader
kimispencer Jul 5, 2019
5332e7c
Merge branch 'master' into kimi/update/loading-spinner
kimispencer Jul 5, 2019
4000e2e
WIP select loader
kimispencer Jul 8, 2019
131e341
Button loading prop
kimispencer Jul 8, 2019
39f9d44
Loader colors
kimispencer Jul 8, 2019
9873918
Loader dependent components
kimispencer Jul 8, 2019
fec246f
clean up debugging
kimispencer Jul 8, 2019
aeeff2e
loader + button
kimispencer Jul 15, 2019
4b6a568
secondary button loader
kimispencer Jul 15, 2019
42a7462
WIP case on ColorName
kimispencer Jul 16, 2019
48960a7
ColorName
kimispencer Jul 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"purescript-coroutines": "^5.0.0",
"purescript-fixed-precision": "^4.0.0",
"purescript-foldable-traversable": "^4.0.0",
"purescript-foreign-generic": "^10.0.0",
"purescript-foreign-object": ">= 1.0.0 < 3.0.0",
"purescript-generics-rep": "^6.0.0",
"purescript-foreign": "^5.0.0",
Expand Down
4 changes: 4 additions & 0 deletions docs/Examples/Button.example.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,10 @@ docs =
, example
$ button primary { buttonState = Loading, size = ExtraLarge }
]
, [ h4_ "Secondary + Loading"
, example
$ button secondary { buttonState = Loading }
]
]

sections :: Array (Array JSX) -> Array JSX
Expand Down
124 changes: 122 additions & 2 deletions docs/Examples/Loader.example.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ module Lumi.Components.Examples.Loader where

import Prelude

import Color (cssStringHSLA, desaturate, lighten)
import Data.Nullable (null)
import Lumi.Components.Column (column_)
import Lumi.Components.Color (Color(..), colorNames, colors)
import Lumi.Components.Column (column, column_)
import Lumi.Components.Loader (loader)
import Lumi.Components.Example (example)
import React.Basic (JSX)
Expand All @@ -13,5 +15,123 @@ docs :: JSX
docs =
column_
[ example $
loader { style: R.css {}, testId: null }
column {
children:
[ loader
{ style: R.css {}
, testId: null
, color: colorNames.white
, bgColor: colorNames.primary
}
]
, style: R.css { backgroundColor: cssStringHSLA $ colors.primary }
}
, example $
column {
children:
[ loader
{ style: R.css {}
, testId: null
, color: colorNames.black
, bgColor: colorNames.white
}
]
, style: R.css { backgroundColor: cssStringHSLA colors.white }
}
, example $
column {
children:
[ loader
{ style: R.css {}
, testId: null
, color: colorNames.black1
, bgColor: colorNames.white
}
]
, style: R.css { backgroundColor: cssStringHSLA colors.white }
}
, example $
column {
children:
[ loader
{ style: R.css {}
, testId: null
, color: colorNames.black2
, bgColor: colorNames.white
}
]
, style: R.css { backgroundColor: cssStringHSLA colors.white }
}
, example $
column {
children:
[ loader
{ style: R.css {}
, testId: null
, color: colorNames.black3
, bgColor: colorNames.white
}
]
, style: R.css { backgroundColor: cssStringHSLA colors.white }
}
, example $
column {
children:
[ loader
{ style: R.css {}
, testId: null
, color: colorNames.black4
, bgColor: colorNames.white
}
]
, style: R.css { backgroundColor: cssStringHSLA colors.white }
}
, example $
column {
children:
[ loader
{ style: R.css {}
, testId: null
, color: colorNames.black5
, bgColor: colorNames.white
}
]
, style: R.css { backgroundColor: cssStringHSLA colors.white }
}
, example $
column {
children:
[ loader
{ style: R.css {}
, testId: null
, color: colorNames.black6
, bgColor: colorNames.white
}
]
, style: R.css { backgroundColor: cssStringHSLA colors.white }
}
, example $
column {
children:
[ loader
{ style: R.css {}
, testId: null
, color: colorNames.black7
, bgColor: colorNames.white
}
]
, style: R.css { backgroundColor: cssStringHSLA colors.white }
}
, example $
column {
children:
[ loader
{ style: R.css {}
, testId: null
, color: colorNames.black8
, bgColor: colorNames.white
}
]
, style: R.css { backgroundColor: cssStringHSLA colors.white }
}
]
55 changes: 35 additions & 20 deletions src/Lumi/Components/Button.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,16 @@ import Data.Array as Array
import Data.Char (fromCharCode)
import Data.Foldable (fold)
import Data.Maybe (Maybe(..))
import Data.Nullable (Nullable, toNullable)
import Data.Newtype (unwrap)
import Data.Nullable (Nullable, toMaybe, toNullable)
import Data.String (null)
import Data.String.CodeUnits (fromCharArray)
import Effect.Uncurried (mkEffectFn1)
import Foreign (isNull, isUndefined, unsafeToForeign)
import JSS (JSS, jss)
import Lumi.Components.Color (ColorName, colorNames, colors)
import Lumi.Components.Icon (IconType, icon)
import Lumi.Components.Loader (spinnerMixin)
import Lumi.Components.Loader (loader)
import Lumi.Components.Size (Size(..))
import React.Basic (Component, JSX, createComponent, element, makeStateless)
import React.Basic.DOM (CSS, css, unsafeCreateDOMComponent)
Expand Down Expand Up @@ -83,9 +84,32 @@ button = makeStateless component render
}
where
children =
if not null props.title && not (isNull || isUndefined) (unsafeToForeign props.title)
then props.title
else invisibleSpace -- preserves button size
case props.buttonState of
Loading ->
loader
{ style:
case props.size of
Small -> R.css { width: "12px", height: "12px" }
Medium -> R.css { width: "18px", height: "18px" }
Large -> R.css { width: "24px", height: "24px" }
ExtraLarge -> R.css { width: "34px", height: "34px" }
, testId: toNullable Nothing
, color:
case map unwrap $ toMaybe props.color of
Just "primary" -> colorNames.white
Just "secondary" -> colorNames.secondary
Just _ -> colorNames.secondary
Nothing -> colorNames.secondary
, bgColor:
case toMaybe props.color of
Nothing -> colorNames.white
Just c -> c
}
_ ->
if not null props.title && not (isNull || isUndefined) (unsafeToForeign props.title)
then R.text props.title
else R.text invisibleSpace -- preserves button size


defaults :: ButtonProps
defaults =
Expand Down Expand Up @@ -191,8 +215,7 @@ styles = jss
, "&:hover": { backgroundColor: cssStringHSLA $ darken 0.1 colors.primary }
, "&:active": { backgroundColor: cssStringHSLA $ darken 0.15 colors.primary }
, "&:disabled, &[data-loading=\"true\"]":
{ backgroundColor: cssStringHSLA colors.primary2
, cursor: "default"
{ cursor: "default"
}
, "&:focus":
{ outline: 0
Expand Down Expand Up @@ -231,19 +254,8 @@ styles = jss
, "&:disabled, &[data-loading=\"true\"]":
{ color: cssStringHSLA colors.black2
, borderColor: cssStringHSLA colors.black3
}
}
, "&[data-loading=\"true\"]":
{ "&:after": spinnerMixin { radius: "16px", borderWidth: "2px" }
, "@media (min-width: $break-point-mobile)":
{ "&[data-size=\"small\"]":
{ "&:after": spinnerMixin { radius: "12px", borderWidth: "2px" }
}
, "&[data-size=\"large\"]":
{ "&:after": spinnerMixin { radius: "24px", borderWidth: "3px" }
}
, "&[data-size=\"extra-large\"]":
{ "&:after": spinnerMixin { radius: "34px", borderWidth: "4px" }
, "& lumi-loader":
{ "&::after": { background: cssStringHSLA colors.white }
}
}
}
Expand Down Expand Up @@ -309,5 +321,8 @@ styles = jss
, "&:active": { backgroundColor: cssStringHSLA $ darken 0.15 value }
, "&:disabled, &[data-loading=\"true\"]":
{ backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value
, "& lumi-loader":
{ "&::after": { background: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value }
}
}
}
4 changes: 3 additions & 1 deletion src/Lumi/Components/Color.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,15 @@ module Lumi.Components.Color
import Color (rgb, rgba)
import Color as C
import Data.Newtype (class Newtype)
import Foreign.Generic (class Decode, class Encode)

type Color = C.Color

newtype ColorName = ColorName String

derive instance newtypeColorName :: Newtype ColorName _
derive newtype instance decodeColorName :: Decode ColorName
derive newtype instance encodeColorName :: Encode ColorName

type ColorMap a =
{ black :: a
Expand Down Expand Up @@ -89,4 +92,3 @@ colorNames =
, white: ColorName "white"
, transparent: ColorName "transparent"
}

13 changes: 8 additions & 5 deletions src/Lumi/Components/Form.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ import Effect (Effect)
import Effect.Aff (Aff)
import Effect.Class (liftEffect)
import JSS (JSS, jss)
import Lumi.Components.Color (colors)
import Lumi.Components.Color (colorNames, colors)
import Lumi.Components.Column (column)
import Lumi.Components.FetchCache as FetchCache
import Lumi.Components.Form.Defaults (formDefaults) as Defaults
Expand Down Expand Up @@ -448,10 +448,13 @@ asyncSelectByKey getData loadOptions fromId toId toSelectOption optionRenderer =
Nothing -> empty
Just _ -> alignToInput
case data_ of
Nothing -> loader
{ style: R.css { width: "20px", height: "20px", borderWidth: "2px" }
, testId: toNullable Nothing
}
Nothing ->
loader
{ style: R.css { width: "20px", height: "20px", borderWidth: "2px" }
, testId: toNullable Nothing
, color: colorNames.secondary
, bgColor: colorNames.white
}
Just data_' -> text body
{ children = [ optionRenderer data_' ]
}
Expand Down
Loading