mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-18 03:01:41 +03:00
💀 Remove old table and deprecated sytles
This commit is contained in:
Tessa Kelly
parent
c0c4fb32b7
commit
efcf0c049c
1
elm.json
1
elm.json
@ -52,7 +52,6 @@
|
|||||||
"Nri.Ui.Slide.V1",
|
"Nri.Ui.Slide.V1",
|
||||||
"Nri.Ui.SlideModal.V1",
|
"Nri.Ui.SlideModal.V1",
|
||||||
"Nri.Ui.SlideModal.V2",
|
"Nri.Ui.SlideModal.V2",
|
||||||
"Nri.Ui.Table.V3",
|
|
||||||
"Nri.Ui.Table.V4",
|
"Nri.Ui.Table.V4",
|
||||||
"Nri.Ui.Tabs.V3",
|
"Nri.Ui.Tabs.V3",
|
||||||
"Nri.Ui.Text.V2",
|
"Nri.Ui.Text.V2",
|
||||||
|
|||||||
@ -1,49 +0,0 @@
|
|||||||
module DEPRECATED.Nri.Ui.Styles.V2 exposing (Keyframe, keyframes, toString)
|
|
||||||
|
|
||||||
{-| DEPRECATED. Once we are on elm-css 15.1.0 or later, we should use its
|
|
||||||
built-in keyframe functionality.
|
|
||||||
|
|
||||||
|
|
||||||
### Keyframe animations
|
|
||||||
|
|
||||||
@docs Keyframe, keyframes, toString
|
|
||||||
|
|
||||||
-}
|
|
||||||
|
|
||||||
|
|
||||||
{-| A CSS keyframe animation that will have vendor prefixes automatically added.
|
|
||||||
-}
|
|
||||||
type Keyframe
|
|
||||||
= CompiledKeyframe String
|
|
||||||
|
|
||||||
|
|
||||||
{-| Create a CSS keyframe animation with appropriate vendor prefixes
|
|
||||||
-}
|
|
||||||
keyframes : String -> List ( String, String ) -> Keyframe
|
|
||||||
keyframes name stops =
|
|
||||||
let
|
|
||||||
stop ( when, what ) =
|
|
||||||
when ++ " {" ++ what ++ "}"
|
|
||||||
|
|
||||||
x prefix =
|
|
||||||
"@"
|
|
||||||
++ prefix
|
|
||||||
++ "keyframes "
|
|
||||||
++ name
|
|
||||||
++ " {\n"
|
|
||||||
++ String.join "\n" (List.map stop stops)
|
|
||||||
++ "\n}\n"
|
|
||||||
in
|
|
||||||
[ "-webkit-", "-moz-", "" ]
|
|
||||||
|> List.map x
|
|
||||||
|> String.join ""
|
|
||||||
|> CompiledKeyframe
|
|
||||||
|
|
||||||
|
|
||||||
{-| Turn a [`Keyframe`](#Keyframe) into a string that can be included in a CSS stylesheet.
|
|
||||||
-}
|
|
||||||
toString : Keyframe -> String
|
|
||||||
toString keyframe =
|
|
||||||
case keyframe of
|
|
||||||
CompiledKeyframe compiled ->
|
|
||||||
compiled
|
|
||||||
@ -1,296 +0,0 @@
|
|||||||
module Nri.Ui.Table.V3 exposing
|
|
||||||
( Column, custom, string
|
|
||||||
, view, viewWithoutHeader
|
|
||||||
, viewLoading, viewLoadingWithoutHeader
|
|
||||||
, keyframes, keyframeStyles
|
|
||||||
)
|
|
||||||
|
|
||||||
{-| Upgrading from V1:
|
|
||||||
|
|
||||||
- All the `width` fields in column configurations now take an elm-css length
|
|
||||||
value rather than an Integer. Change `width = 100` to `width = px 100` to get
|
|
||||||
the same widths as before.
|
|
||||||
- Tables now by default take the full width of the container they are placed in.
|
|
||||||
If this is not what you want, wrap the table in an element with a fixed width.
|
|
||||||
- The table module now makes use of `Html.Styled` and no longer exposes a
|
|
||||||
separate `styles` value.
|
|
||||||
Check out the [elm-css](http://package.elm-lang.org/packages/rtfeldman/elm-css/14.0.0/Html-Styled)
|
|
||||||
documentation on Html.Styled to see how to work with it.
|
|
||||||
- The default cell padding has been removed and content is not vertically
|
|
||||||
centered in its cell. If you need to overwrite this, wrap your cells in
|
|
||||||
elements providing custom styling to the cell.
|
|
||||||
|
|
||||||
@docs Column, custom, string
|
|
||||||
|
|
||||||
@docs view, viewWithoutHeader
|
|
||||||
|
|
||||||
@docs viewLoading, viewLoadingWithoutHeader
|
|
||||||
|
|
||||||
@docs keyframes, keyframeStyles
|
|
||||||
|
|
||||||
-}
|
|
||||||
|
|
||||||
import Css exposing (..)
|
|
||||||
import DEPRECATED.Nri.Ui.Styles.V2
|
|
||||||
import Html.Styled as Html exposing (..)
|
|
||||||
import Html.Styled.Attributes exposing (css)
|
|
||||||
import Nri.Ui.Colors.V1 exposing (..)
|
|
||||||
import Nri.Ui.Fonts.V1 exposing (baseFont)
|
|
||||||
|
|
||||||
|
|
||||||
{-| Closed representation of how to render the header and cells of a column
|
|
||||||
in the table
|
|
||||||
-}
|
|
||||||
type Column data msg
|
|
||||||
= Column (Html msg) (data -> Html msg) Style
|
|
||||||
|
|
||||||
|
|
||||||
{-| A column that renders some aspect of a value as text
|
|
||||||
-}
|
|
||||||
string :
|
|
||||||
{ header : String
|
|
||||||
, value : data -> String
|
|
||||||
, width : LengthOrAuto compatible
|
|
||||||
}
|
|
||||||
-> Column data msg
|
|
||||||
string { header, value, width } =
|
|
||||||
Column (Html.text header) (value >> Html.text) (Css.width width)
|
|
||||||
|
|
||||||
|
|
||||||
{-| A column that renders however you want it to
|
|
||||||
-}
|
|
||||||
custom :
|
|
||||||
{ header : Html msg
|
|
||||||
, view : data -> Html msg
|
|
||||||
, width : LengthOrAuto compatible
|
|
||||||
}
|
|
||||||
-> Column data msg
|
|
||||||
custom options =
|
|
||||||
Column options.header options.view (Css.width options.width)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
-- VIEW
|
|
||||||
|
|
||||||
|
|
||||||
{-| Displays a table of data without a header row
|
|
||||||
-}
|
|
||||||
viewWithoutHeader : List (Column data msg) -> List data -> Html msg
|
|
||||||
viewWithoutHeader columns =
|
|
||||||
tableWithoutHeader [] columns (viewRow columns)
|
|
||||||
|
|
||||||
|
|
||||||
{-| Displays a table of data based on the provided column definitions
|
|
||||||
-}
|
|
||||||
view : List (Column data msg) -> List data -> Html msg
|
|
||||||
view columns =
|
|
||||||
tableWithHeader [] columns (viewRow columns)
|
|
||||||
|
|
||||||
|
|
||||||
viewRow : List (Column data msg) -> data -> Html msg
|
|
||||||
viewRow columns data =
|
|
||||||
tr
|
|
||||||
[ css rowStyles ]
|
|
||||||
(List.map (viewColumn data) columns)
|
|
||||||
|
|
||||||
|
|
||||||
viewColumn : data -> Column data msg -> Html msg
|
|
||||||
viewColumn data (Column _ renderer width) =
|
|
||||||
td
|
|
||||||
[ css (width :: cellStyles)
|
|
||||||
]
|
|
||||||
[ renderer data ]
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
-- VIEW LOADING
|
|
||||||
|
|
||||||
|
|
||||||
{-| Display a table with the given columns but instead of data, show blocked
|
|
||||||
out text with an interesting animation. This view lets the user know that
|
|
||||||
data is on its way and what it will look like when it arrives.
|
|
||||||
-}
|
|
||||||
viewLoading : List (Column data msg) -> Html msg
|
|
||||||
viewLoading columns =
|
|
||||||
tableWithHeader loadingTableStyles columns (viewLoadingRow columns) (List.range 0 8)
|
|
||||||
|
|
||||||
|
|
||||||
{-| Display the loading table without a header row
|
|
||||||
-}
|
|
||||||
viewLoadingWithoutHeader : List (Column data msg) -> Html msg
|
|
||||||
viewLoadingWithoutHeader columns =
|
|
||||||
tableWithoutHeader loadingTableStyles columns (viewLoadingRow columns) (List.range 0 8)
|
|
||||||
|
|
||||||
|
|
||||||
viewLoadingRow : List (Column data msg) -> Int -> Html msg
|
|
||||||
viewLoadingRow columns index =
|
|
||||||
tr
|
|
||||||
[ css rowStyles ]
|
|
||||||
(List.indexedMap (viewLoadingColumn index) columns)
|
|
||||||
|
|
||||||
|
|
||||||
viewLoadingColumn : Int -> Int -> Column data msg -> Html msg
|
|
||||||
viewLoadingColumn rowIndex colIndex (Column _ _ width) =
|
|
||||||
td
|
|
||||||
[ css (stylesLoadingColumn rowIndex colIndex width ++ cellStyles ++ loadingCellStyles)
|
|
||||||
]
|
|
||||||
[ span [ css loadingContentStyles ] [] ]
|
|
||||||
|
|
||||||
|
|
||||||
stylesLoadingColumn : Int -> Int -> Style -> List Style
|
|
||||||
stylesLoadingColumn rowIndex colIndex width =
|
|
||||||
[ width
|
|
||||||
, property "animation-delay" (String.fromFloat (toFloat (rowIndex + colIndex) * 0.1) ++ "s")
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
-- HELP
|
|
||||||
|
|
||||||
|
|
||||||
tableWithoutHeader : List Style -> List (Column data msg) -> (a -> Html msg) -> List a -> Html msg
|
|
||||||
tableWithoutHeader styles columns toRow data =
|
|
||||||
table styles
|
|
||||||
[ tableBody toRow data
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
tableWithHeader : List Style -> List (Column data msg) -> (a -> Html msg) -> List a -> Html msg
|
|
||||||
tableWithHeader styles columns toRow data =
|
|
||||||
table styles
|
|
||||||
[ tableHeader columns
|
|
||||||
, tableBody toRow data
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
table : List Style -> List (Html msg) -> Html msg
|
|
||||||
table styles =
|
|
||||||
Html.table [ css (styles ++ tableStyles) ]
|
|
||||||
|
|
||||||
|
|
||||||
tableHeader : List (Column data msg) -> Html msg
|
|
||||||
tableHeader columns =
|
|
||||||
thead []
|
|
||||||
[ tr [ css headersStyles ]
|
|
||||||
(List.map tableRowHeader columns)
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
tableRowHeader : Column data msg -> Html msg
|
|
||||||
tableRowHeader (Column header _ width) =
|
|
||||||
th
|
|
||||||
[ css (width :: headerStyles)
|
|
||||||
]
|
|
||||||
[ header ]
|
|
||||||
|
|
||||||
|
|
||||||
tableBody : (a -> Html msg) -> List a -> Html msg
|
|
||||||
tableBody toRow items =
|
|
||||||
tbody [] (List.map toRow items)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
-- STYLES
|
|
||||||
|
|
||||||
|
|
||||||
headersStyles : List Style
|
|
||||||
headersStyles =
|
|
||||||
[ borderBottom3 (px 3) solid gray75
|
|
||||||
, height (px 45)
|
|
||||||
, fontSize (px 15)
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
headerStyles : List Style
|
|
||||||
headerStyles =
|
|
||||||
[ padding4 (px 15) (px 12) (px 11) (px 12)
|
|
||||||
, textAlign left
|
|
||||||
, fontWeight bold
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
rowStyles : List Style
|
|
||||||
rowStyles =
|
|
||||||
[ height (px 45)
|
|
||||||
, fontSize (px 14)
|
|
||||||
, color gray20
|
|
||||||
, pseudoClass "nth-child(odd)"
|
|
||||||
[ backgroundColor gray96 ]
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
cellStyles : List Style
|
|
||||||
cellStyles =
|
|
||||||
[ verticalAlign middle
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
loadingContentStyles : List Style
|
|
||||||
loadingContentStyles =
|
|
||||||
[ width (pct 100)
|
|
||||||
, display inlineBlock
|
|
||||||
, height (Css.em 1)
|
|
||||||
, borderRadius (Css.em 1)
|
|
||||||
, backgroundColor gray75
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
loadingCellStyles : List Style
|
|
||||||
loadingCellStyles =
|
|
||||||
[ batch flashAnimation
|
|
||||||
, padding2 (px 14) (px 10)
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
loadingTableStyles : List Style
|
|
||||||
loadingTableStyles =
|
|
||||||
fadeInAnimation
|
|
||||||
|
|
||||||
|
|
||||||
tableStyles : List Style
|
|
||||||
tableStyles =
|
|
||||||
[ borderCollapse collapse
|
|
||||||
, baseFont
|
|
||||||
, Css.width (Css.pct 100)
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
|
||||||
keyframes : List DEPRECATED.Nri.Ui.Styles.V2.Keyframe
|
|
||||||
keyframes =
|
|
||||||
[ DEPRECATED.Nri.Ui.Styles.V2.keyframes "Nri-Ui-Table-V2-flash"
|
|
||||||
[ ( "0%", "opacity: 0.6" )
|
|
||||||
, ( "50%", "opacity: 0.2" )
|
|
||||||
, ( "100%", "opacity: 0.6" )
|
|
||||||
]
|
|
||||||
, DEPRECATED.Nri.Ui.Styles.V2.keyframes "Nri-Ui-Table-V2-fadein"
|
|
||||||
[ ( "from", "opacity: 0" )
|
|
||||||
, ( "to", "opacity: 1" )
|
|
||||||
]
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
|
||||||
keyframeStyles : Html msg
|
|
||||||
keyframeStyles =
|
|
||||||
Html.node "style"
|
|
||||||
[]
|
|
||||||
(List.map (Html.text << DEPRECATED.Nri.Ui.Styles.V2.toString) keyframes)
|
|
||||||
|
|
||||||
|
|
||||||
flashAnimation : List Css.Style
|
|
||||||
flashAnimation =
|
|
||||||
[ property "-webkit-animation" "Nri-Ui-Table-V2-flash 2s infinite"
|
|
||||||
, property "-moz-animation" "Nri-Ui-Table-V2-flash 2s infinite"
|
|
||||||
, property "animation" "Nri-Ui-Table-V2-flash 2s infinite"
|
|
||||||
, opacity (num 0.6)
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
fadeInAnimation : List Css.Style
|
|
||||||
fadeInAnimation =
|
|
||||||
[ property "-webkit-animation" "Nri-Ui-Table-V2-fadein 0.4s 0.2s forwards"
|
|
||||||
, property "-moz-animation" "Nri-Ui-Table-V2-fadein 0.4s 0.2s forwards"
|
|
||||||
, property "animation" "Nri-Ui-Table-V2-fadein 0.4s 0.2s forwards"
|
|
||||||
, opacity (num 0)
|
|
||||||
]
|
|
||||||
Loading…
Reference in New Issue
Block a user