From fe864e71842104c9dcdfb8f4f25f5be0df68f525 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 2 Apr 2020 18:13:29 -0700 Subject: [PATCH] Pulls Loading out into its own module --- src/Nri/Ui/Loading/V1.elm | 93 +++++++++++++++++++++ src/Nri/Ui/Page/V3.elm | 75 ----------------- styleguide-app/Examples.elm | 22 +++++ styleguide-app/Examples/Loading.elm | 122 ++++++++++++++++++++++++++++ styleguide-app/Examples/Page.elm | 79 ++---------------- 5 files changed, 243 insertions(+), 148 deletions(-) create mode 100644 src/Nri/Ui/Loading/V1.elm create mode 100644 styleguide-app/Examples/Loading.elm diff --git a/src/Nri/Ui/Loading/V1.elm b/src/Nri/Ui/Loading/V1.elm new file mode 100644 index 00000000..b31bcd66 --- /dev/null +++ b/src/Nri/Ui/Loading/V1.elm @@ -0,0 +1,93 @@ +module Nri.Ui.Loading.V1 exposing + ( fadeInPage, page + , spinner + ) + +{-| Loading behaviors + +@docs fadeInPage, page +@docs spinner + +-} + +import Css exposing (..) +import Css.Animations +import Html.Styled as Html exposing (Html) +import Html.Styled.Attributes as Attributes +import Nri.Ui.Colors.V1 as Colors +import Nri.Ui.Svg.V1 as Svg exposing (Svg) +import Nri.Ui.UiIcon.V1 as UiIcon + + +{-| View a full-screen loading page that fades into view. +-} +fadeInPage : Html msg +fadeInPage = + loading_ + [ Css.property "animation-delay" "1s" + , Css.property "animation-duration" "1.5s" + , Css.property "animation-fill-mode" "forwards" + , Css.animationName fadeInKeyframes + , Css.property "animation-timing-function" "linear" + , Css.opacity Css.zero + ] + + +{-| View a full-screen loading page. +-} +page : Html msg +page = + loading_ [] + + +loading_ : List Css.Style -> Html msg +loading_ withCss = + Html.div + [ Attributes.css + ([ Css.backgroundColor Colors.blueDeep + , Css.position Css.fixed + , Css.displayFlex + , Css.alignItems Css.center + , Css.justifyContent Css.center + , Css.width (Css.vw 100) + , Css.height (Css.vh 100) + , Css.top Css.zero + , Css.left Css.zero + , Css.zIndex (Css.int 10000) + ] + ++ withCss + ) + ] + [ Svg.toHtml spinner + ] + + +{-| -} +spinner : Svg +spinner = + UiIcon.edit + |> Svg.withLabel "Loading..." + |> Svg.withColor Colors.white + |> Svg.withWidth (Css.px 100) + |> Svg.withHeight (Css.px 100) + |> Svg.withCss + [ Css.property "animation-duration" "1s" + , Css.property "animation-iteration-count" "infinite" + , Css.animationName rotateKeyframes + , Css.property "animation-timing-function" "linear" + ] + + +rotateKeyframes : Css.Animations.Keyframes {} +rotateKeyframes = + Css.Animations.keyframes + [ ( 0, [ Css.Animations.transform [ Css.rotate (Css.deg -360) ] ] ) + ] + + +fadeInKeyframes : Css.Animations.Keyframes {} +fadeInKeyframes = + Css.Animations.keyframes + [ ( 0, [ Css.Animations.opacity Css.zero ] ) + , ( 100, [ Css.Animations.opacity (Css.num 1) ] ) + ] diff --git a/src/Nri/Ui/Page/V3.elm b/src/Nri/Ui/Page/V3.elm index 8f4fe15c..ab66d291 100644 --- a/src/Nri/Ui/Page/V3.elm +++ b/src/Nri/Ui/Page/V3.elm @@ -1,26 +1,20 @@ module Nri.Ui.Page.V3 exposing ( DefaultPage, broken, blocked, notFound, noPermission , RecoveryText(..) - , loadingFadeIn, loading ) {-| A styled NRI page! @docs DefaultPage, broken, blocked, notFound, noPermission @docs RecoveryText -@docs loadingFadeIn, loading -} import Css exposing (..) -import Css.Animations import Html.Styled as Html exposing (Html) import Html.Styled.Attributes as Attributes import Nri.Ui.Button.V5 as Button -import Nri.Ui.Colors.V1 as Colors -import Nri.Ui.Svg.V1 as Svg import Nri.Ui.Text.V2 as Text -import Nri.Ui.UiIcon.V1 as UiIcon {-| The default page information is for the button @@ -96,75 +90,6 @@ noPermission defaultPage = } -{-| View a full-screen loading page that fades into view. --} -loadingFadeIn : Html msg -loadingFadeIn = - loading_ - [ Css.property "animation-delay" "1s" - , Css.property "animation-duration" "1.5s" - , Css.property "animation-fill-mode" "forwards" - , Css.animationName fadeInKeyframes - , Css.property "animation-timing-function" "linear" - , Css.opacity Css.zero - ] - - -{-| View a full-screen loading page. --} -loading : Html msg -loading = - loading_ [] - - -loading_ : List Css.Style -> Html msg -loading_ withCss = - Html.div - [ Attributes.css - ([ Css.backgroundColor Colors.blueDeep - , Css.position Css.fixed - , Css.displayFlex - , Css.alignItems Css.center - , Css.justifyContent Css.center - , Css.width (Css.vw 100) - , Css.height (Css.vh 100) - , Css.top Css.zero - , Css.left Css.zero - , Css.zIndex (Css.int 10000) - ] - ++ withCss - ) - ] - [ UiIcon.edit - |> Svg.withLabel "Loading..." - |> Svg.withColor Colors.white - |> Svg.withWidth (Css.px 100) - |> Svg.withHeight (Css.px 100) - |> Svg.withCss - [ Css.property "animation-duration" "1s" - , Css.property "animation-iteration-count" "infinite" - , Css.animationName rotateKeyframes - , Css.property "animation-timing-function" "linear" - ] - |> Svg.toHtml - ] - - -rotateKeyframes : Css.Animations.Keyframes {} -rotateKeyframes = - Css.Animations.keyframes - [ ( 0, [ Css.Animations.transform [ Css.rotate (Css.deg -360) ] ] ) - ] - - -fadeInKeyframes : Css.Animations.Keyframes {} -fadeInKeyframes = - Css.Animations.keyframes - [ ( 0, [ Css.Animations.opacity Css.zero ] ) - , ( 100, [ Css.Animations.opacity (Css.num 1) ] ) - ] - - -- INTERNAL diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index c88cbb89..fc286c95 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -16,6 +16,7 @@ import Examples.Dropdown as Dropdown import Examples.Fonts as Fonts import Examples.Heading as Heading import Examples.Icon as Icon +import Examples.Loading as Loading import Examples.Logo as Logo import Examples.MasteryIcon as MasteryIcon import Examples.Modal as Modal @@ -321,6 +322,25 @@ all = IconState childState -> Just childState + _ -> + Nothing + ) + , Loading.example + |> Example.wrapMsg LoadingMsg + (\msg -> + case msg of + LoadingMsg childMsg -> + Just childMsg + + _ -> + Nothing + ) + |> Example.wrapState LoadingState + (\msg -> + case msg of + LoadingState childState -> + Just childState + _ -> Nothing ) @@ -704,6 +724,7 @@ type State | FontsState Fonts.State | HeadingState Heading.State | IconState Icon.State + | LoadingState Loading.State | LogoState Logo.State | MasteryIconState MasteryIcon.State | ModalState Modal.State @@ -741,6 +762,7 @@ type Msg | FontsMsg Fonts.Msg | HeadingMsg Heading.Msg | IconMsg Icon.Msg + | LoadingMsg Loading.Msg | LogoMsg Logo.Msg | MasteryIconMsg MasteryIcon.Msg | ModalMsg Modal.Msg diff --git a/styleguide-app/Examples/Loading.elm b/styleguide-app/Examples/Loading.elm new file mode 100644 index 00000000..b1ed25cf --- /dev/null +++ b/styleguide-app/Examples/Loading.elm @@ -0,0 +1,122 @@ +module Examples.Loading exposing (example, State, Msg) + +{-| + +@docs example, State, Msg + +-} + +import Browser.Events +import Category exposing (Category(..)) +import Css +import Css.Global exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass) +import Example exposing (Example) +import Html.Styled as Html exposing (Html) +import Html.Styled.Events as Events +import Json.Decode +import Nri.Ui.Button.V10 as Button +import Nri.Ui.Heading.V2 as Heading +import Nri.Ui.Loading.V1 as Loading + + +{-| -} +type alias State = + { showLoadingFadeIn : Bool + , showLoading : Bool + } + + +init : State +init = + { showLoadingFadeIn = False + , showLoading = False + } + + +{-| -} +type Msg + = ShowLoadingFadeIn + | ShowLoading + | CloseFullScreenPage + + +update : Msg -> State -> ( State, Cmd Msg ) +update msg model = + case msg of + ShowLoadingFadeIn -> + ( { model | showLoadingFadeIn = True } + , Cmd.none + ) + + ShowLoading -> + ( { model | showLoading = True } + , Cmd.none + ) + + CloseFullScreenPage -> + ( { model + | showLoadingFadeIn = False + , showLoading = False + } + , Cmd.none + ) + + +subscriptions : State -> Sub Msg +subscriptions { showLoadingFadeIn, showLoading } = + if showLoadingFadeIn || showLoading then + Browser.Events.onClick (Json.Decode.succeed CloseFullScreenPage) + + else + Sub.none + + +{-| -} +example : Example State Msg +example = + { name = "Nri.Ui.Loading.V1" + , categories = [ Pages ] + , state = init + , update = update + , subscriptions = subscriptions + , view = + \{ showLoadingFadeIn, showLoading } -> + [ if showLoading then + Loading.page + + else + Html.text "" + , Button.button "Loading.page" + [ Button.custom + [ Events.stopPropagationOn "click" + (Json.Decode.map (\m -> ( m, True )) + (Json.Decode.succeed ShowLoading) + ) + ] + , if showLoadingFadeIn then + Button.disabled + + else + Button.secondary + , Button.css [ Css.marginRight (Css.px 20) ] + ] + , if showLoadingFadeIn then + Loading.fadeInPage + + else + Html.text "" + , Button.button "Loading.fadeInPage" + [ Button.custom + [ Events.stopPropagationOn "click" + (Json.Decode.map (\m -> ( m, True )) + (Json.Decode.succeed ShowLoadingFadeIn) + ) + ] + , if showLoadingFadeIn then + Button.loading + + else + Button.secondary + ] + ] + } diff --git a/styleguide-app/Examples/Page.elm b/styleguide-app/Examples/Page.elm index 3c9b7e89..dee126a5 100644 --- a/styleguide-app/Examples/Page.elm +++ b/styleguide-app/Examples/Page.elm @@ -21,47 +21,22 @@ import Nri.Ui.Page.V3 as Page {-| -} type alias State = - { showLoadingFadeIn : Bool - , showLoading : Bool - } + {} init : State init = - { showLoadingFadeIn = False - , showLoading = False - } + {} {-| -} type Msg - = ShowLoadingFadeIn - | ShowLoading - | CloseFullScreenPage - | LinkClick String + = LinkClick String update : Msg -> State -> ( State, Cmd Msg ) update msg model = case msg of - ShowLoadingFadeIn -> - ( { model | showLoadingFadeIn = True } - , Cmd.none - ) - - ShowLoading -> - ( { model | showLoading = True } - , Cmd.none - ) - - CloseFullScreenPage -> - ( { model - | showLoadingFadeIn = False - , showLoading = False - } - , Cmd.none - ) - LinkClick message -> let _ = @@ -71,12 +46,8 @@ update msg model = subscriptions : State -> Sub Msg -subscriptions { showLoadingFadeIn, showLoading } = - if showLoadingFadeIn || showLoading then - Browser.Events.onClick (Json.Decode.succeed CloseFullScreenPage) - - else - Sub.none +subscriptions {} = + Sub.none {-| -} @@ -88,7 +59,7 @@ example = , update = update , subscriptions = subscriptions , view = - \{ showLoadingFadeIn, showLoading } -> + \{} -> [ Css.Global.global [ Css.Global.selector "[data-page-container]" [ Css.displayFlex @@ -110,43 +81,5 @@ example = { link = LinkClick "Custom" , recoveryText = Page.Custom "Hit the road, Jack" } - , Heading.h3 [] [ Html.text "Page.loadingFadeIn" ] - , if showLoadingFadeIn then - Page.loadingFadeIn - - else - Html.text "" - , Button.button "Open loadingFadeIn" - [ Button.custom - [ Events.stopPropagationOn "click" - (Json.Decode.map (\m -> ( m, True )) - (Json.Decode.succeed ShowLoadingFadeIn) - ) - ] - , if showLoadingFadeIn then - Button.loading - - else - Button.primary - ] - , Heading.h3 [] [ Html.text "Page.loading" ] - , if showLoading then - Page.loading - - else - Html.text "" - , Button.button "Open loading" - [ Button.custom - [ Events.stopPropagationOn "click" - (Json.Decode.map (\m -> ( m, True )) - (Json.Decode.succeed ShowLoading) - ) - ] - , if showLoadingFadeIn then - Button.disabled - - else - Button.primary - ] ] }