NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-19 19:51:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Use sortArrow UiIcon

Browse Source
This commit is contained in:
Tessa Kelly 2022-03-30 14:21:48 -07:00
parent dca883f87b
commit bc55a67504
1 changed files with 29 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
styleguide-app/Examples/SortableTable.elm
View File

@ -11,14 +11,12 @@ import Css exposing (..)
import Example exposing (Example)
import Html.Styled as Html exposing (..)
import Html.Styled.Attributes exposing (css)
import Nri.Ui.Colors.Extra
import Nri.Ui.Colors.V1
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.SortableTable.V2 as SortableTable
import Nri.Ui.Svg.V1 as Svg
import Nri.Ui.Table.V5 as Table
import SolidColor
import Svg.Styled as Svg
import Svg.Styled.Attributes as SvgAttributes
import Nri.Ui.UiIcon.V1 as UiIcon
type Column
@ -44,35 +42,17 @@ type Direction
sortArrow : Direction -> Html msg
sortArrow direction =
Html.div
[ css
[ width (px 8)
, height (px 6)
, position relative
, margin2 (px 1) zero
]
]
[ Svg.svg
[ SvgAttributes.viewBox "0 0 8 6"
, SvgAttributes.css
[ position absolute
, top zero
, left zero
, case direction of
Up ->
Css.batch []
(case direction of
Up ->
UiIcon.sortArrow
Down ->
Css.batch [ transform <| rotate (deg 180) ]
]
, Nri.Ui.Colors.V1.gray75
|> Nri.Ui.Colors.Extra.fromCssColor
|> SolidColor.toRGBString
|> SvgAttributes.fill
]
[ Svg.polygon [ SvgAttributes.points "0 6 4 0 8 6 0 6" ] []
]
]
Down ->
UiIcon.sortArrowDown
)
|> Svg.withColor Colors.gray75
|> Svg.withWidth (Css.px 12)
|> Svg.withHeight (Css.px 12)
|> Svg.toHtml
{-| -}
@ -87,44 +67,36 @@ example =
, subscriptions = \_ -> Sub.none
, preview =
let
arrows =
Html.div
header name =
div
[ css
[ Css.displayFlex
, Css.flexDirection Css.column
, Css.justifyContent Css.spaceBetween
, Css.alignItems Css.center
, Css.justifyContent Css.center
]
]
[ sortArrow Up
, sortArrow Down
[ text name
, div
[ css
[ Css.displayFlex
, Css.flexDirection Css.column
, Css.marginTop (Css.px -4)
]
]
[ sortArrow Up
, sortArrow Down
]
]
in
[ Table.view
[ Table.custom
{ header =
div
[ css [ displayFlex, justifyContent spaceBetween ]
]
[ text "X"
, Html.div
[ css [ padding (px 2) ] ]
[ arrows ]
]
{ header = header "X"
, view = .a >> Html.text
, width = px 50
, cellStyles = always []
}
, Table.custom
{ header =
div
[ css [ displayFlex, justifyContent spaceBetween ]
]
[ text "Y"
, Html.div
[ css [ padding (px 2) ] ]
[ arrows ]
]
{ header = header "Y"
, view = .b >> Html.text
, width = px 50
, cellStyles = always []