mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-28 01:45:20 +03:00
Add Nri.Outline doodad
This commit is contained in:
Jasper Woudenberg
parent
6651ffd044
commit
274c134fa8
@ -12,6 +12,8 @@
|
||||
"Nri.Button",
|
||||
"Nri.Divider",
|
||||
"Nri.Modal",
|
||||
"Nri.Outline",
|
||||
"Nri.Palette",
|
||||
"Nri.Styles",
|
||||
"Nri.Tabs",
|
||||
"Nri.Text",
|
||||
|
||||
181
src/Nri/Outline.elm
Normal file
181
src/Nri/Outline.elm
Normal file
@ -0,0 +1,181 @@
|
||||
module Nri.Outline
|
||||
exposing
|
||||
( OutlineLayout
|
||||
, container
|
||||
, customRow
|
||||
, row
|
||||
, rowWithExtraContent
|
||||
, styles
|
||||
, withEvaluated
|
||||
, withTitle
|
||||
)
|
||||
|
||||
{-| A nestedable layout that can be themed.
|
||||
|
||||
|
||||
## Types
|
||||
|
||||
@docs OutlineLayout
|
||||
|
||||
|
||||
## Main container
|
||||
|
||||
@docs container
|
||||
|
||||
|
||||
## Rows
|
||||
|
||||
@docs row, rowWithExtraContent, customRow
|
||||
|
||||
|
||||
## Row modifiers
|
||||
|
||||
@docs withTitle, withEvaluated
|
||||
|
||||
|
||||
## Styles
|
||||
|
||||
@docs styles
|
||||
|
||||
-}
|
||||
|
||||
import Html exposing (..)
|
||||
import Nri.Outline.Styles as Styles exposing (styles)
|
||||
import Nri.Outline.Types as Types
|
||||
import Nri.Outline.Utils as Utils
|
||||
import Nri.Styles
|
||||
|
||||
|
||||
{-| Aliased strictly for exporting
|
||||
-}
|
||||
type alias OutlineLayout msg =
|
||||
Types.OutlineLayout msg
|
||||
|
||||
|
||||
{-| The row container. This is required as it injects the styles for the rows into a style tag.
|
||||
|
||||
import Html exposing (..)
|
||||
import Nri.Outline as Outline
|
||||
|
||||
main : Html msg
|
||||
main =
|
||||
div []
|
||||
[ Outline.container
|
||||
[{- Extra attributes go here -}]
|
||||
[{- Rows go here -}]
|
||||
]
|
||||
|
||||
-}
|
||||
container : List (Attribute msg) -> List (Types.OutlineLayout msg) -> Html msg
|
||||
container attributes rows =
|
||||
ul (attributes ++ [ styles.class [ Styles.Container ] ])
|
||||
(List.map (Utils.rowToHtml Types.Root) rows)
|
||||
|
||||
|
||||
{-| Render an unstyled row with only the outline styles.
|
||||
|
||||
import Html exposing (..)
|
||||
import Nri.Outline as Outline
|
||||
|
||||
main : Html msg
|
||||
main =
|
||||
div []
|
||||
[ Outline.container []
|
||||
[ Outline.row
|
||||
{ content = text "This is my content"
|
||||
, palette = Palette.red
|
||||
, rows = []
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
-}
|
||||
row : Types.RowConfig msg -> Types.OutlineLayout msg
|
||||
row config =
|
||||
Types.Row <| Utils.rawRow config
|
||||
|
||||
|
||||
{-| -}
|
||||
customRow : Types.CustomConfig msg -> Types.OutlineLayout msg
|
||||
customRow config =
|
||||
Types.Row config
|
||||
|
||||
|
||||
{-| Render a row with extra content. This row cannot have child rows.
|
||||
|
||||
import Html exposing (..)
|
||||
import Nri.Outline as Outline
|
||||
|
||||
main : Html msg
|
||||
main =
|
||||
div []
|
||||
[ Outline.container []
|
||||
[ Outline.rowWithExtraContent
|
||||
{ content = text "This is my content"
|
||||
, palette = Palette.red
|
||||
, extraContent = text "My extra content"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
-}
|
||||
rowWithExtraContent : Types.ExtraContenRowConfig msg -> Types.OutlineLayout msg
|
||||
rowWithExtraContent config =
|
||||
Types.Row <|
|
||||
Utils.rawRowWithExtraContent config
|
||||
|
||||
|
||||
{-| Render a row with a title
|
||||
|
||||
import Html exposing (..)
|
||||
import Nri.Outline as Outline
|
||||
|
||||
main : Html msg
|
||||
main =
|
||||
div []
|
||||
[ Outline.container []
|
||||
[ Outline.withTitle "My Title" <|
|
||||
Outline.row
|
||||
{ content = text "This is my content"
|
||||
, palette = Palette.red
|
||||
, rows = []
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
-}
|
||||
withTitle : String -> Types.OutlineLayout msg -> Types.OutlineLayout msg
|
||||
withTitle =
|
||||
Utils.withTitle
|
||||
|
||||
|
||||
{-| Render a row with 'good' emphasis
|
||||
|
||||
import Html exposing (..)
|
||||
import Nri.Outline as Outline
|
||||
import Nri.Outline.Types as Types
|
||||
|
||||
main : Html msg
|
||||
main =
|
||||
div []
|
||||
[ Outline.container []
|
||||
[ Outline.withEvaluated Types.Good <|
|
||||
Outline.row
|
||||
{ content = text "This is my content"
|
||||
, palette = Palette.red
|
||||
, rows = []
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
-}
|
||||
withEvaluated : Types.Evaluation -> Types.OutlineLayout msg -> Types.OutlineLayout msg
|
||||
withEvaluated =
|
||||
Utils.withEvaluated
|
||||
|
||||
|
||||
{-| Styles used by this module
|
||||
-}
|
||||
styles : Nri.Styles.Styles Never Styles.CssClasses msg
|
||||
styles =
|
||||
Styles.styles
|
||||
270
src/Nri/Outline/Styles.elm
Normal file
270
src/Nri/Outline/Styles.elm
Normal file
@ -0,0 +1,270 @@
|
||||
module Nri.Outline.Styles exposing (..)
|
||||
|
||||
import Css exposing (..)
|
||||
import Nri.Colors as Colors
|
||||
import Nri.Css.Extra
|
||||
import Nri.Fonts
|
||||
import Nri.Palette as Palette exposing (Palette)
|
||||
import Nri.Styles
|
||||
|
||||
|
||||
type CssClasses
|
||||
= Container
|
||||
| Row
|
||||
| ChildRow
|
||||
| RowGray
|
||||
| RowDarkGray
|
||||
| RowBlue
|
||||
| RowDarkBlue
|
||||
| RowPurple
|
||||
| RowTurquoise
|
||||
| RowRed
|
||||
| RowGreen
|
||||
| RowWhite
|
||||
| RowCornflower
|
||||
| RowAqua
|
||||
| RowPanelTitle
|
||||
| RowPanelTitleGray
|
||||
| RowPanelTitleDarkGray
|
||||
| RowPanelTitleBlue
|
||||
| RowPanelTitleDarkBlue
|
||||
| RowPanelTitlePurple
|
||||
| RowPanelTitleTurquoise
|
||||
| RowPanelTitleRed
|
||||
| RowPanelTitleGreen
|
||||
| RowPanelTitleWhite
|
||||
| RowPanelTitleCornflower
|
||||
| RowPanelTitleAqua
|
||||
| RowPanelContent
|
||||
| RowPanelContentGray
|
||||
| RowPanelContentCornflower
|
||||
| RowPanelContentDarkGray
|
||||
| RowPanelContentBlue
|
||||
| RowPanelContentDarkBlue
|
||||
| RowPanelContentPurple
|
||||
| RowPanelContentTurquoise
|
||||
| RowPanelContentRed
|
||||
| RowPanelContentGreen
|
||||
| RowPanelContentWhite
|
||||
| RowPanelContentAqua
|
||||
| RowPanelContentDashed
|
||||
| ChildRowContent
|
||||
| ChildRowContentCornflower
|
||||
| ChildRowContentGray
|
||||
| ChildRowContentDarkGray
|
||||
| ChildRowContentBlue
|
||||
| ChildRowContentDarkBlue
|
||||
| ChildRowContentPurple
|
||||
| ChildRowContentTurquoise
|
||||
| ChildRowContentRed
|
||||
| ChildRowContentGreen
|
||||
| ChildRowContentWhite
|
||||
| ChildRowContentAqua
|
||||
| RowContent
|
||||
| RowChildren
|
||||
|
||||
|
||||
styles : Nri.Styles.Styles Never CssClasses msg
|
||||
styles =
|
||||
Nri.Styles.styles "Nri-Outline-"
|
||||
[ Css.class Container
|
||||
[ listStyle none
|
||||
, margin zero
|
||||
, padding zero
|
||||
]
|
||||
|
||||
-- rows
|
||||
, Css.class Row
|
||||
[ paddingBottom (px 16)
|
||||
, position relative
|
||||
, lastChild [ paddingBottom zero ]
|
||||
]
|
||||
, Css.class ChildRow
|
||||
[ after
|
||||
[ property "content" "''"
|
||||
, position absolute
|
||||
, top (px -16)
|
||||
, left (px -14)
|
||||
, width (px 14)
|
||||
, borderLeft3 (px 1) solid (Palette.gray |> .border)
|
||||
, property "height" "calc(100% + 16px)"
|
||||
]
|
||||
, lastChild
|
||||
[ after [ borderLeftWidth zero ] ]
|
||||
, onlyChild
|
||||
{- Fixes border styles if there is only one child row -}
|
||||
[ after
|
||||
[ property "content" "''"
|
||||
, position absolute
|
||||
, top (px -16)
|
||||
, left (px -14)
|
||||
, width (px 14)
|
||||
, borderLeftWidth (px 1)
|
||||
, borderLeftStyle solid
|
||||
, property "height" "16px"
|
||||
]
|
||||
]
|
||||
]
|
||||
, Css.class RowGray
|
||||
[ rowTheme Palette.gray ]
|
||||
, Css.class RowDarkGray
|
||||
[ rowTheme Palette.darkGray ]
|
||||
, Css.class RowBlue
|
||||
[ rowTheme Palette.blue ]
|
||||
, Css.class RowDarkBlue
|
||||
[ rowTheme Palette.darkBlue ]
|
||||
, Css.class RowPurple
|
||||
[ rowTheme Palette.purple ]
|
||||
, Css.class RowTurquoise
|
||||
[ rowTheme Palette.turquoise ]
|
||||
, Css.class RowRed
|
||||
[ rowTheme Palette.red ]
|
||||
, Css.class RowGreen
|
||||
[ rowTheme Palette.green ]
|
||||
, Css.class RowWhite
|
||||
[ rowTheme Palette.white ]
|
||||
, Css.class RowCornflower
|
||||
[ rowTheme Palette.cornflower ]
|
||||
, Css.class RowAqua
|
||||
[ rowTheme Palette.aqua ]
|
||||
|
||||
-- row panel titles
|
||||
, Css.class RowPanelTitle
|
||||
[ Nri.Fonts.baseFont
|
||||
, borderRadius (px 16)
|
||||
, color Colors.white
|
||||
, display inlineBlock
|
||||
, fontSize (px 12)
|
||||
, height (px 16)
|
||||
, left (px -4)
|
||||
, lineHeight (px 16)
|
||||
, padding2 zero (px 7)
|
||||
, position absolute
|
||||
, top (px -8)
|
||||
, property "z-index" "2"
|
||||
]
|
||||
, Css.class RowPanelTitleGray
|
||||
[ rowPanelTitleTheme Palette.gray ]
|
||||
, Css.class RowPanelTitleDarkGray
|
||||
[ rowPanelTitleTheme Palette.darkGray ]
|
||||
, Css.class RowPanelTitleBlue
|
||||
[ rowPanelTitleTheme Palette.blue ]
|
||||
, Css.class RowPanelTitleDarkBlue
|
||||
[ rowPanelTitleTheme Palette.darkBlue ]
|
||||
, Css.class RowPanelTitlePurple
|
||||
[ rowPanelTitleTheme Palette.purple ]
|
||||
, Css.class RowPanelTitleTurquoise
|
||||
[ rowPanelTitleTheme Palette.turquoise ]
|
||||
, Css.class RowPanelTitleRed
|
||||
[ rowPanelTitleTheme Palette.red ]
|
||||
, Css.class RowPanelTitleGreen
|
||||
[ rowPanelTitleTheme Palette.green ]
|
||||
, Css.class RowPanelTitleWhite
|
||||
[ rowPanelTitleTheme Palette.white ]
|
||||
, Css.class RowPanelTitleCornflower
|
||||
[ rowPanelTitleTheme Palette.cornflower ]
|
||||
, Css.class RowPanelTitleAqua
|
||||
[ rowPanelTitleTheme Palette.aqua ]
|
||||
, Css.class RowPanelContent
|
||||
[ borderRadius (px 8)
|
||||
, borderWidth (px 1)
|
||||
, borderColor (Palette.gray |> .border)
|
||||
, borderStyle solid
|
||||
, backgroundColor (Palette.gray |> .background)
|
||||
, color Colors.gray20
|
||||
, fontSize (px 18)
|
||||
, Nri.Fonts.quizFont
|
||||
, padding (px 13)
|
||||
, Nri.Css.Extra.lineHeightNum 1.2
|
||||
]
|
||||
, Css.class RowPanelContentGray
|
||||
[ rowPanelContentTheme Palette.gray ]
|
||||
, Css.class RowPanelContentCornflower
|
||||
[ rowPanelContentTheme Palette.cornflower ]
|
||||
, Css.class RowPanelContentDarkGray
|
||||
[ rowPanelContentTheme Palette.darkGray ]
|
||||
, Css.class RowPanelContentBlue
|
||||
[ rowPanelContentTheme Palette.blue ]
|
||||
, Css.class RowPanelContentDarkBlue
|
||||
[ rowPanelContentTheme Palette.darkBlue ]
|
||||
, Css.class RowPanelContentPurple
|
||||
[ rowPanelContentTheme Palette.purple ]
|
||||
, Css.class RowPanelContentTurquoise
|
||||
[ rowPanelContentTheme Palette.turquoise ]
|
||||
, Css.class RowPanelContentRed
|
||||
[ rowPanelContentTheme Palette.red ]
|
||||
, Css.class RowPanelContentGreen
|
||||
[ rowPanelContentTheme Palette.green ]
|
||||
, Css.class RowPanelContentWhite
|
||||
[ rowPanelContentTheme Palette.white ]
|
||||
, Css.class RowPanelContentAqua
|
||||
[ rowPanelContentTheme Palette.aqua ]
|
||||
, Css.class RowPanelContentDashed
|
||||
[ borderStyle dashed ]
|
||||
, Css.class ChildRowContent
|
||||
[ after
|
||||
[ property "content" "''"
|
||||
, height (pct 50)
|
||||
, width (px 14)
|
||||
, borderBottom3 (px 1) solid (Palette.gray |> .border)
|
||||
, borderLeft3 (px 1) solid (Palette.gray |> .border)
|
||||
, left (px -14)
|
||||
, top zero
|
||||
, position absolute
|
||||
, maxHeight (px 50)
|
||||
]
|
||||
]
|
||||
, Css.class ChildRowContentCornflower
|
||||
[ childRowContentTheme Palette.cornflower ]
|
||||
, Css.class ChildRowContentGray
|
||||
[ childRowContentTheme Palette.gray ]
|
||||
, Css.class ChildRowContentDarkGray
|
||||
[ childRowContentTheme Palette.darkGray ]
|
||||
, Css.class ChildRowContentBlue
|
||||
[ childRowContentTheme Palette.blue ]
|
||||
, Css.class ChildRowContentDarkBlue
|
||||
[ childRowContentTheme Palette.darkBlue ]
|
||||
, Css.class ChildRowContentPurple
|
||||
[ childRowContentTheme Palette.purple ]
|
||||
, Css.class ChildRowContentTurquoise
|
||||
[ childRowContentTheme Palette.turquoise ]
|
||||
, Css.class ChildRowContentRed
|
||||
[ childRowContentTheme Palette.red ]
|
||||
, Css.class ChildRowContentGreen
|
||||
[ childRowContentTheme Palette.green ]
|
||||
, Css.class ChildRowContentWhite
|
||||
[ childRowContentTheme Palette.white ]
|
||||
, Css.class ChildRowContentAqua
|
||||
[ childRowContentTheme Palette.aqua ]
|
||||
, Css.class RowContent
|
||||
[ position relative ]
|
||||
, Css.class RowChildren
|
||||
[ paddingLeft (px 29)
|
||||
, paddingTop (px 16)
|
||||
, listStyleType none
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
rowTheme : Palette -> Style
|
||||
rowTheme palette =
|
||||
batch [ after [ borderColor palette.border ] ]
|
||||
|
||||
|
||||
rowPanelTitleTheme : Palette -> Style
|
||||
rowPanelTitleTheme palette =
|
||||
Css.batch [ backgroundColor palette.border ]
|
||||
|
||||
|
||||
childRowContentTheme : Palette -> Style
|
||||
childRowContentTheme palette =
|
||||
Css.batch [ after [ borderColor palette.border ] ]
|
||||
|
||||
|
||||
rowPanelContentTheme : Palette -> Style
|
||||
rowPanelContentTheme palette =
|
||||
Css.batch
|
||||
[ backgroundColor palette.background
|
||||
, borderColor palette.border
|
||||
, after [ borderColor palette.border ]
|
||||
]
|
||||
90
src/Nri/Outline/Types.elm
Normal file
90
src/Nri/Outline/Types.elm
Normal file
@ -0,0 +1,90 @@
|
||||
module Nri.Outline.Types exposing (..)
|
||||
|
||||
{-|
|
||||
|
||||
@docs BaseConfig, CustomConfig, Evaluation, ExtraContenRowConfig, OutlineLayout, OutlinePanelConfig, RowConfig, RowModifier, RowVerticalAlignment, RowsContent, Hierarchy
|
||||
|
||||
-}
|
||||
|
||||
import Html exposing (Html)
|
||||
import Nri.Palette as Palette
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias BaseConfig msg extras =
|
||||
{ extras
|
||||
| content : Html msg
|
||||
, palette : Palette.Palette
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias CustomConfig msg =
|
||||
BaseConfig msg
|
||||
(RowsContent msg
|
||||
{ verticalAlign : RowVerticalAlignment
|
||||
, extraContent : Maybe (Html msg)
|
||||
, modifyRow : RowModifier
|
||||
, hasDashedBorder : Bool
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias RowConfig msg =
|
||||
BaseConfig msg (RowsContent msg {})
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias RowsContent msg extras =
|
||||
{ extras | rows : List (OutlineLayout msg) }
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias ExtraContenRowConfig msg =
|
||||
BaseConfig msg
|
||||
{ rows : List (OutlineLayout msg)
|
||||
, extraContent : Html msg
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias OutlinePanelConfig msg =
|
||||
{ title : String
|
||||
, content : Html msg
|
||||
, hasDashedBorder : Bool
|
||||
, modifyRow : RowModifier
|
||||
, palette : Palette.Palette
|
||||
}
|
||||
|
||||
|
||||
{-| This type also is used to give nice errors when passing invalid items to the rows field
|
||||
-}
|
||||
type OutlineLayout msg
|
||||
= Row (CustomConfig msg)
|
||||
| KeyedRow String (CustomConfig msg)
|
||||
|
||||
|
||||
{-| -}
|
||||
type RowModifier
|
||||
= NodeEvaluated Evaluation
|
||||
| Normal
|
||||
|
||||
|
||||
{-| The vertical alignment of the outline horizontal bar
|
||||
-}
|
||||
type RowVerticalAlignment
|
||||
= TopAlign
|
||||
| MiddleAlign
|
||||
|
||||
|
||||
{-| -}
|
||||
type Evaluation
|
||||
= Good
|
||||
| Bad
|
||||
|
||||
|
||||
{-| -}
|
||||
type Hierarchy
|
||||
= Root
|
||||
| Child
|
||||
392
src/Nri/Outline/Utils.elm
Normal file
392
src/Nri/Outline/Utils.elm
Normal file
@ -0,0 +1,392 @@
|
||||
module Nri.Outline.Utils exposing (..)
|
||||
|
||||
{-|
|
||||
|
||||
@docs RowNodeType, keyedRowToHtml, outlinePanel, paletteOfFirst, rawRow, rawRowWithExtraContent, rowToHtml, toHtml, toKeyedHtml, toRowNodeType, viewExtraContent, viewRow, withEvaluated, withTitle
|
||||
|
||||
-}
|
||||
|
||||
import Css exposing (..)
|
||||
import Html exposing (..)
|
||||
import Html.Attributes
|
||||
import Html.Keyed
|
||||
import Nri.Outline.Styles as Styles exposing (styles)
|
||||
import Nri.Outline.Types as Types
|
||||
import Nri.Palette as Palette
|
||||
|
||||
|
||||
{-| -}
|
||||
type RowNodeType msg
|
||||
= Tag (Html msg)
|
||||
| KeyedTag ( String, Html msg )
|
||||
|
||||
|
||||
{-| -}
|
||||
withTitle : String -> Types.OutlineLayout msg -> Types.OutlineLayout msg
|
||||
withTitle title taggedRow =
|
||||
let
|
||||
updatedConfig config =
|
||||
{ config
|
||||
| content =
|
||||
outlinePanel
|
||||
{ title = title
|
||||
, content = config.content
|
||||
, hasDashedBorder = config.hasDashedBorder
|
||||
, palette = config.palette
|
||||
, modifyRow = config.modifyRow
|
||||
}
|
||||
, verticalAlign = Types.TopAlign
|
||||
}
|
||||
in
|
||||
case taggedRow of
|
||||
Types.Row config ->
|
||||
Types.Row <| updatedConfig config
|
||||
|
||||
Types.KeyedRow key config ->
|
||||
Types.KeyedRow key <| updatedConfig config
|
||||
|
||||
|
||||
{-| -}
|
||||
withEvaluated : Types.Evaluation -> Types.OutlineLayout msg -> Types.OutlineLayout msg
|
||||
withEvaluated evaluation taggedRow =
|
||||
{- TODO: this should render with styles like a row with title, but hide the title.
|
||||
Currently, the developer and use this without a title. If that happens, then
|
||||
this has no affect on the row
|
||||
-}
|
||||
case taggedRow of
|
||||
Types.Row config ->
|
||||
Types.Row { config | modifyRow = Types.NodeEvaluated evaluation }
|
||||
|
||||
Types.KeyedRow key config ->
|
||||
Types.KeyedRow key { config | modifyRow = Types.NodeEvaluated evaluation }
|
||||
|
||||
|
||||
{-| -}
|
||||
outlinePanel : Types.OutlinePanelConfig msg -> Html msg
|
||||
outlinePanel config =
|
||||
div []
|
||||
[ div
|
||||
[ styles.class
|
||||
[ Styles.RowPanelTitle
|
||||
, case config.palette.name of
|
||||
Palette.Gray ->
|
||||
Styles.RowPanelTitleGray
|
||||
|
||||
Palette.DarkGray ->
|
||||
Styles.RowPanelTitleDarkGray
|
||||
|
||||
Palette.Blue ->
|
||||
Styles.RowPanelTitleBlue
|
||||
|
||||
Palette.DarkBlue ->
|
||||
Styles.RowPanelTitleDarkBlue
|
||||
|
||||
Palette.Purple ->
|
||||
Styles.RowPanelTitlePurple
|
||||
|
||||
Palette.Turquoise ->
|
||||
Styles.RowPanelTitleTurquoise
|
||||
|
||||
Palette.Red ->
|
||||
Styles.RowPanelTitleRed
|
||||
|
||||
Palette.Green ->
|
||||
Styles.RowPanelTitleGreen
|
||||
|
||||
Palette.White ->
|
||||
Styles.RowPanelTitleWhite
|
||||
|
||||
Palette.Cornflower ->
|
||||
Styles.RowPanelTitleCornflower
|
||||
|
||||
Palette.Aqua ->
|
||||
Styles.RowPanelTitleAqua
|
||||
]
|
||||
]
|
||||
[ Html.text config.title ]
|
||||
, div
|
||||
[ styles.classList
|
||||
[ ( Styles.RowPanelContent, True )
|
||||
, ( Styles.RowPanelContentDashed, config.hasDashedBorder )
|
||||
, ( case config.modifyRow of
|
||||
Types.NodeEvaluated Types.Good ->
|
||||
Styles.RowPanelContentGreen
|
||||
|
||||
Types.NodeEvaluated Types.Bad ->
|
||||
Styles.RowPanelContentPurple
|
||||
|
||||
_ ->
|
||||
case config.palette.name of
|
||||
Palette.Gray ->
|
||||
Styles.RowPanelContentGray
|
||||
|
||||
Palette.DarkGray ->
|
||||
Styles.RowPanelContentDarkGray
|
||||
|
||||
Palette.Blue ->
|
||||
Styles.RowPanelContentBlue
|
||||
|
||||
Palette.DarkBlue ->
|
||||
Styles.RowPanelContentDarkBlue
|
||||
|
||||
Palette.Purple ->
|
||||
Styles.RowPanelContentPurple
|
||||
|
||||
Palette.Turquoise ->
|
||||
Styles.RowPanelContentTurquoise
|
||||
|
||||
Palette.Red ->
|
||||
Styles.RowPanelContentRed
|
||||
|
||||
Palette.Green ->
|
||||
Styles.RowPanelContentGreen
|
||||
|
||||
Palette.White ->
|
||||
Styles.RowPanelContentWhite
|
||||
|
||||
Palette.Cornflower ->
|
||||
Styles.RowPanelContentCornflower
|
||||
|
||||
Palette.Aqua ->
|
||||
Styles.RowPanelContentAqua
|
||||
, True
|
||||
)
|
||||
]
|
||||
]
|
||||
[ config.content ]
|
||||
]
|
||||
|
||||
|
||||
{-| -}
|
||||
toRowNodeType : Types.Hierarchy -> Types.OutlineLayout msg -> RowNodeType msg
|
||||
toRowNodeType hierarchy layout =
|
||||
case layout of
|
||||
Types.Row config ->
|
||||
Tag <|
|
||||
viewRow
|
||||
hierarchy
|
||||
config
|
||||
(ul
|
||||
[ styles.class [ Styles.RowChildren ] ]
|
||||
(List.map (rowToHtml Types.Child) config.rows)
|
||||
)
|
||||
|
||||
Types.KeyedRow key config ->
|
||||
KeyedTag
|
||||
( key
|
||||
, viewRow
|
||||
hierarchy
|
||||
config
|
||||
(Html.Keyed.node "ul"
|
||||
[ styles.class [ Styles.RowChildren ] ]
|
||||
(List.map (keyedRowToHtml Types.Child) config.rows)
|
||||
)
|
||||
)
|
||||
|
||||
|
||||
{-| -}
|
||||
viewRow : Types.Hierarchy -> Types.CustomConfig msg -> Html msg -> Html msg
|
||||
viewRow hierarchy config children =
|
||||
let
|
||||
extraContentPalette =
|
||||
paletteOfFirst config.rows
|
||||
|
||||
rowAttrs =
|
||||
[ styles.classList
|
||||
[ ( Styles.Row, True )
|
||||
, ( Styles.ChildRow, hierarchy == Types.Child )
|
||||
, ( case config.palette.name of
|
||||
Palette.Blue ->
|
||||
Styles.RowBlue
|
||||
|
||||
Palette.Gray ->
|
||||
Styles.RowGray
|
||||
|
||||
Palette.DarkGray ->
|
||||
Styles.RowDarkGray
|
||||
|
||||
Palette.DarkBlue ->
|
||||
Styles.RowDarkBlue
|
||||
|
||||
Palette.Purple ->
|
||||
Styles.RowPurple
|
||||
|
||||
Palette.Turquoise ->
|
||||
Styles.RowTurquoise
|
||||
|
||||
Palette.Red ->
|
||||
Styles.RowRed
|
||||
|
||||
Palette.Green ->
|
||||
Styles.RowGreen
|
||||
|
||||
Palette.White ->
|
||||
Styles.RowWhite
|
||||
|
||||
Palette.Cornflower ->
|
||||
Styles.RowCornflower
|
||||
|
||||
Palette.Aqua ->
|
||||
Styles.RowAqua
|
||||
, True
|
||||
)
|
||||
]
|
||||
|
||||
-- , OutlineCss.modifierClassFromAlign config.verticalAlign
|
||||
]
|
||||
in
|
||||
li
|
||||
rowAttrs
|
||||
[ div
|
||||
[ styles.classList
|
||||
[ ( Styles.RowContent, True )
|
||||
, ( Styles.ChildRowContent, hierarchy == Types.Child )
|
||||
, ( case config.palette.name of
|
||||
Palette.Blue ->
|
||||
Styles.ChildRowContentBlue
|
||||
|
||||
Palette.Gray ->
|
||||
Styles.ChildRowContentGray
|
||||
|
||||
Palette.DarkGray ->
|
||||
Styles.ChildRowContentDarkGray
|
||||
|
||||
Palette.DarkBlue ->
|
||||
Styles.ChildRowContentDarkBlue
|
||||
|
||||
Palette.Purple ->
|
||||
Styles.ChildRowContentPurple
|
||||
|
||||
Palette.Turquoise ->
|
||||
Styles.ChildRowContentTurquoise
|
||||
|
||||
Palette.Red ->
|
||||
Styles.ChildRowContentRed
|
||||
|
||||
Palette.Green ->
|
||||
Styles.ChildRowContentGreen
|
||||
|
||||
Palette.White ->
|
||||
Styles.ChildRowContentWhite
|
||||
|
||||
Palette.Cornflower ->
|
||||
Styles.ChildRowContentCornflower
|
||||
|
||||
Palette.Aqua ->
|
||||
Styles.ChildRowContentAqua
|
||||
, True
|
||||
)
|
||||
]
|
||||
]
|
||||
[ config.content
|
||||
, Maybe.map (viewExtraContent extraContentPalette) config.extraContent
|
||||
|> Maybe.withDefault (Html.text "")
|
||||
]
|
||||
, if List.isEmpty config.rows then
|
||||
Html.text ""
|
||||
else
|
||||
children
|
||||
]
|
||||
|
||||
|
||||
{-| -}
|
||||
viewExtraContent : Maybe Palette.Palette -> Html msg -> Html msg
|
||||
viewExtraContent palette content =
|
||||
let
|
||||
{- Styles are inline here to accomodate the calculations we must do
|
||||
to correctly format extra content. This is based off if there are any child rows
|
||||
following the extra content. If there are, we add the padding and border styles.
|
||||
If there are not, we have no styling.
|
||||
-}
|
||||
styles =
|
||||
(Css.asPairs >> Html.Attributes.style) <|
|
||||
case palette of
|
||||
Just { border } ->
|
||||
[ marginLeft (px 15)
|
||||
, borderLeft3 (px 1) solid border
|
||||
, paddingLeft (px 15)
|
||||
]
|
||||
|
||||
Nothing ->
|
||||
[]
|
||||
in
|
||||
div [ styles ] [ content ]
|
||||
|
||||
|
||||
{-| When the row has extra content, the palette from the first child needs to be known in
|
||||
order to have the correct border on the left of the extra content. This ensures we have
|
||||
a consistent styling on the outline borders.
|
||||
-}
|
||||
paletteOfFirst : List (Types.OutlineLayout msg) -> Maybe Palette.Palette
|
||||
paletteOfFirst rows =
|
||||
rows
|
||||
|> List.head
|
||||
|> Maybe.map
|
||||
(\row ->
|
||||
case row of
|
||||
Types.Row config ->
|
||||
config.palette
|
||||
|
||||
Types.KeyedRow _ config ->
|
||||
config.palette
|
||||
)
|
||||
|
||||
|
||||
{-| -}
|
||||
rowToHtml : Types.Hierarchy -> Types.OutlineLayout msg -> Html msg
|
||||
rowToHtml hierarchy =
|
||||
toRowNodeType hierarchy >> toHtml
|
||||
|
||||
|
||||
{-| -}
|
||||
keyedRowToHtml : Types.Hierarchy -> Types.OutlineLayout msg -> ( String, Html msg )
|
||||
keyedRowToHtml hierarchy =
|
||||
toRowNodeType hierarchy >> toKeyedHtml
|
||||
|
||||
|
||||
{-| -}
|
||||
toHtml : RowNodeType msg -> Html msg
|
||||
toHtml row =
|
||||
case row of
|
||||
Tag html ->
|
||||
html
|
||||
|
||||
KeyedTag ( _, html ) ->
|
||||
html
|
||||
|
||||
|
||||
{-| -}
|
||||
toKeyedHtml : RowNodeType msg -> ( String, Html msg )
|
||||
toKeyedHtml row =
|
||||
case row of
|
||||
Tag html ->
|
||||
( "", html )
|
||||
|
||||
KeyedTag output ->
|
||||
output
|
||||
|
||||
|
||||
{-| -}
|
||||
rawRow : Types.RowConfig msg -> Types.CustomConfig msg
|
||||
rawRow config =
|
||||
{ content = config.content
|
||||
, palette = config.palette
|
||||
, rows = config.rows
|
||||
, verticalAlign = Types.MiddleAlign
|
||||
, extraContent = Nothing
|
||||
, modifyRow = Types.Normal
|
||||
, hasDashedBorder = False
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
rawRowWithExtraContent : Types.ExtraContenRowConfig msg -> Types.CustomConfig msg
|
||||
rawRowWithExtraContent config =
|
||||
{ content = config.content
|
||||
, palette = config.palette
|
||||
, rows = config.rows
|
||||
, verticalAlign = Types.TopAlign
|
||||
, extraContent = Just config.extraContent
|
||||
, modifyRow = Types.Normal
|
||||
, hasDashedBorder = False
|
||||
}
|
||||
156
src/Nri/Palette.elm
Normal file
156
src/Nri/Palette.elm
Normal file
@ -0,0 +1,156 @@
|
||||
module Nri.Palette exposing (..)
|
||||
|
||||
{-| Predefined color palettes for use in configurable components
|
||||
|
||||
@docs Palette, PaletteName
|
||||
@docs white, gray, darkGray, blue, darkBlue, purple, turquoise, green, red, aqua, cornflower
|
||||
|
||||
-}
|
||||
|
||||
import Css exposing (..)
|
||||
import Nri.Colors as Colors
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias Palette =
|
||||
{ border : Css.Color
|
||||
, background : Css.Color
|
||||
, primary : Css.Color
|
||||
, name : PaletteName
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type PaletteName
|
||||
= Gray
|
||||
| DarkGray
|
||||
| Blue
|
||||
| DarkBlue
|
||||
| Purple
|
||||
| Turquoise
|
||||
| Red
|
||||
| Green
|
||||
| White
|
||||
| Cornflower
|
||||
| Aqua
|
||||
|
||||
|
||||
{-| Gray palette
|
||||
-}
|
||||
gray : Palette
|
||||
gray =
|
||||
{ border = Colors.gray75
|
||||
, background = Colors.gray96
|
||||
, primary = Colors.gray75
|
||||
, name = Gray
|
||||
}
|
||||
|
||||
|
||||
{-| Aqua palette
|
||||
-}
|
||||
aqua : Palette
|
||||
aqua =
|
||||
{ border = Colors.aqua
|
||||
, background = Colors.aquaLight
|
||||
, primary = Colors.aqua
|
||||
, name = Aqua
|
||||
}
|
||||
|
||||
|
||||
{-| Dark Gray palette
|
||||
-}
|
||||
darkGray : Palette
|
||||
darkGray =
|
||||
{ border = Colors.gray45
|
||||
, background = Colors.gray96
|
||||
, primary = Colors.gray45
|
||||
, name = DarkGray
|
||||
}
|
||||
|
||||
|
||||
{-| Blue palette
|
||||
-}
|
||||
blue : Palette
|
||||
blue =
|
||||
{ border = Colors.azure
|
||||
, background = Colors.frost
|
||||
, primary = Colors.azure
|
||||
, name = Blue
|
||||
}
|
||||
|
||||
|
||||
{-| Dark blue palette
|
||||
-}
|
||||
darkBlue : Palette
|
||||
darkBlue =
|
||||
{ border = Colors.navy
|
||||
, background = Colors.frost
|
||||
, primary = Colors.navy
|
||||
, name = DarkBlue
|
||||
}
|
||||
|
||||
|
||||
{-| Purple palette
|
||||
-}
|
||||
purple : Palette
|
||||
purple =
|
||||
{ border = Colors.purple
|
||||
, background = Colors.purpleLight
|
||||
, primary = Colors.purple
|
||||
, name = Purple
|
||||
}
|
||||
|
||||
|
||||
{-| Turquoise palette
|
||||
-}
|
||||
turquoise : Palette
|
||||
turquoise =
|
||||
{ border = Colors.turquoise
|
||||
, background = Colors.turquoiseLight
|
||||
, primary = Colors.turquoise
|
||||
, name = Turquoise
|
||||
}
|
||||
|
||||
|
||||
{-| Green palette
|
||||
-}
|
||||
green : Palette
|
||||
green =
|
||||
{ border = Colors.green
|
||||
, background = Colors.greenLightest
|
||||
, primary = Colors.green
|
||||
, name = Green
|
||||
}
|
||||
|
||||
|
||||
{-| Red palette
|
||||
-}
|
||||
red : Palette
|
||||
red =
|
||||
{ border = Colors.red
|
||||
, background = Colors.redLight
|
||||
, primary = Colors.red
|
||||
, name = Red
|
||||
}
|
||||
|
||||
|
||||
{-| White palette (borders are blue)
|
||||
-}
|
||||
white : Palette
|
||||
white =
|
||||
{ border = Colors.navy
|
||||
, background = Colors.white
|
||||
, primary = Colors.navy
|
||||
, name = White
|
||||
}
|
||||
|
||||
|
||||
{-| Cornflower palette
|
||||
-}
|
||||
cornflower : Palette
|
||||
cornflower =
|
||||
{ border = Colors.cornflower
|
||||
, background = Colors.cornflowerLight
|
||||
, primary = Colors.cornflower
|
||||
, name = Cornflower
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user