Scroll to the current item when going back from detail

The list view now supports an item id that will be scrolled to and is
highlighted with a shadow. When going back from detail view this is
now used to scroll to the currently viewed item.
This commit is contained in:
Eike Kettner
2020-09-14 18:43:04 +02:00
parent 913bfb611c
commit 3852c69da1
15 changed files with 131 additions and 52 deletions

View File

@ -120,26 +120,26 @@ updateDrag dm _ msg model =
--- View
view : UiSettings -> Model -> Html Msg
view settings model =
view : Maybe String -> UiSettings -> Model -> Html Msg
view current settings model =
div [ class "ui container" ]
(List.map (viewGroup settings) model.results.groups)
(List.map (viewGroup current settings) model.results.groups)
viewGroup : UiSettings -> ItemLightGroup -> Html Msg
viewGroup settings group =
viewGroup : Maybe String -> UiSettings -> ItemLightGroup -> Html Msg
viewGroup current settings group =
div [ class "item-group" ]
[ div [ class "ui horizontal divider header item-list" ]
[ i [ class "calendar alternate outline icon" ] []
, text group.name
]
, div [ class "ui stackable three cards" ]
(List.map (viewItem settings) group.items)
(List.map (viewItem current settings) group.items)
]
viewItem : UiSettings -> ItemLight -> Html Msg
viewItem settings item =
viewItem : Maybe String -> UiSettings -> ItemLight -> Html Msg
viewItem current settings item =
let
dirIcon =
i [ class (Data.Direction.iconFromMaybe item.direction) ] []
@ -174,6 +174,7 @@ viewItem settings item =
([ classList
[ ( "ui fluid card", True )
, ( newColor, not isConfirmed )
, ( "current", current == Just item.id )
]
, id item.id
, href "#"

View File

@ -648,7 +648,7 @@ update key flags next msg model =
noSub ( model, Page.set key (ItemDetailPage id) )
Nothing ->
noSub ( model, Page.set key HomePage )
noSub ( model, Page.set key (HomePage Nothing) )
else
noSub ( model, Cmd.none )

View File

@ -99,7 +99,7 @@ renderDetailMenu inav model =
)
]
]
[ a [ class "item", Page.href HomePage ]
[ a [ class "item", Page.href (HomePage (Just model.item.id)) ]
[ i [ class "arrow left icon" ] []
]
, a