1
0
Fork 0

Add more scroll events when navigating timelines.

This commit is contained in:
Nicolas Perriault 2017-04-30 11:08:30 +02:00
parent 059b2726e6
commit 8bb9adb307
No known key found for this signature in database
GPG Key ID: DA5E4C83904F7A2A
4 changed files with 50 additions and 26 deletions

View File

@ -22,14 +22,20 @@ module Command
, unfavouriteStatus , unfavouriteStatus
, follow , follow
, unfollow , unfollow
, focusId
, scrollColumnToTop
, scrollColumnToBottom
) )
import Dom
import Dom.Scroll
import Json.Encode as Encode import Json.Encode as Encode
import Mastodon.Model exposing (..) import Mastodon.Model exposing (..)
import Mastodon.Encoder import Mastodon.Encoder
import Mastodon.Http import Mastodon.Http
import Navigation import Navigation
import Ports import Ports
import Task
import Types exposing (..) import Types exposing (..)
@ -287,3 +293,18 @@ unfollow client id =
Nothing -> Nothing ->
Cmd.none Cmd.none
focusId : String -> Cmd Msg
focusId id =
Dom.focus id |> Task.attempt (always NoOp)
scrollColumnToTop : String -> Cmd Msg
scrollColumnToTop column =
Task.attempt (always NoOp) <| Dom.Scroll.toTop column
scrollColumnToBottom : String -> Cmd Msg
scrollColumnToBottom column =
Task.attempt (always NoOp) <| Dom.Scroll.toBottom column

View File

@ -1,14 +1,11 @@
module Model exposing (..) module Model exposing (..)
import Command import Command
import Dom
import Dom.Scroll
import Navigation import Navigation
import Mastodon.Decoder import Mastodon.Decoder
import Mastodon.Helper import Mastodon.Helper
import Mastodon.Model exposing (..) import Mastodon.Model exposing (..)
import Mastodon.WebSocket import Mastodon.WebSocket
import Task
import Types exposing (..) import Types exposing (..)
@ -224,7 +221,7 @@ updateDraft draftMsg currentUser draft =
Just status.spoiler_text Just status.spoiler_text
, visibility = status.visibility , visibility = status.visibility
} }
! [ Dom.focus "status" |> Task.attempt (always NoOp) ] ! [ Command.focusId "status" ]
updateViewer : ViewerMsg -> Maybe Viewer -> ( Maybe Viewer, Cmd Msg ) updateViewer : ViewerMsg -> Maybe Viewer -> ( Maybe Viewer, Cmd Msg )
@ -286,7 +283,8 @@ processMastodonEvent msg model =
ContextLoaded status result -> ContextLoaded status result ->
case result of case result of
Ok context -> Ok context ->
{ model | currentView = ThreadView (Thread status context) } ! [] { model | currentView = ThreadView (Thread status context) }
! [ Command.scrollColumnToBottom "thread" ]
Err error -> Err error ->
{ model { model
@ -352,7 +350,8 @@ processMastodonEvent msg model =
{ model | errors = (errorText error) :: model.errors } ! [] { model | errors = (errorText error) :: model.errors } ! []
StatusPosted _ -> StatusPosted _ ->
{ model | draft = defaultDraft } ! [] { model | draft = defaultDraft }
! [ Command.scrollColumnToTop "home" ]
StatusDeleted result -> StatusDeleted result ->
case result of case result of
@ -644,8 +643,11 @@ update msg model =
} }
! [] ! []
ScrollColumn context -> ScrollColumn ScrollTop column ->
model ! [ Task.attempt (always NoOp) <| Dom.Scroll.toTop context ] model ! [ Command.scrollColumnToTop column ]
ScrollColumn ScrollBottom column ->
model ! [ Command.scrollColumnToBottom column ]
subscriptions : Model -> Sub Msg subscriptions : Model -> Sub Msg

View File

@ -70,7 +70,7 @@ type Msg
| ReblogStatus Int | ReblogStatus Int
| Register | Register
| RemoveFavorite Int | RemoveFavorite Int
| ScrollColumn String | ScrollColumn ScrollDirection String
| ServerChange String | ServerChange String
| SubmitDraft | SubmitDraft
| UnfollowAccount Int | UnfollowAccount Int
@ -92,6 +92,16 @@ type alias AccountViewInfo =
} }
type CurrentView
= -- Basically, what we should be displaying in the fourth column
AccountFollowersView Account (List Account)
| AccountFollowingView Account (List Account)
| AccountView Account
| GlobalTimelineView
| LocalTimelineView
| ThreadView Thread
type alias Draft = type alias Draft =
{ status : String { status : String
, in_reply_to : Maybe Status , in_reply_to : Maybe Status
@ -101,6 +111,11 @@ type alias Draft =
} }
type ScrollDirection
= ScrollTop
| ScrollBottom
type alias Thread = type alias Thread =
{ status : Status { status : Status
, context : Context , context : Context
@ -113,16 +128,6 @@ type alias Viewer =
} }
type CurrentView
= -- Basically, what we should be displaying in the fourth column
AccountFollowersView Account (List Account)
| AccountFollowingView Account (List Account)
| AccountView Account
| GlobalTimelineView
| LocalTimelineView
| ThreadView Thread
type alias Model = type alias Model =
{ server : String { server : String
, registration : Maybe AppRegistration , registration : Maybe AppRegistration

View File

@ -178,10 +178,6 @@ statusView context ({ account, content, media_attachments, reblog, mentions } as
let let
accountLinkAttributes = accountLinkAttributes =
[ href account.url [ href account.url
-- When clicking on a status, we should not let the browser
-- redirect to a new page. That's why we're preventing the default
-- behavior here
, onClickWithPreventAndStop (LoadAccount account.id) , onClickWithPreventAndStop (LoadAccount account.id)
] ]
in in
@ -433,7 +429,7 @@ timelineView label iconName context currentUser statuses =
div [ class "col-md-3 column" ] div [ class "col-md-3 column" ]
[ div [ class "panel panel-default" ] [ div [ class "panel panel-default" ]
[ a [ a
[ href "", onClickWithPreventAndStop <| ScrollColumn context ] [ href "", onClickWithPreventAndStop <| ScrollColumn ScrollTop context ]
[ div [ class "panel-heading" ] [ icon iconName, text label ] ] [ div [ class "panel-heading" ] [ icon iconName, text label ] ]
, ul [ id context, class "list-group timeline" ] <| , ul [ id context, class "list-group timeline" ] <|
List.map (statusEntryView context "" currentUser) statuses List.map (statusEntryView context "" currentUser) statuses
@ -509,7 +505,7 @@ notificationListView currentUser notifications =
div [ class "col-md-3 column" ] div [ class "col-md-3 column" ]
[ div [ class "panel panel-default" ] [ div [ class "panel panel-default" ]
[ a [ a
[ href "", onClickWithPreventAndStop <| ScrollColumn "notifications" ] [ href "", onClickWithPreventAndStop <| ScrollColumn ScrollTop "notifications" ]
[ div [ class "panel-heading" ] [ icon "bell", text "Notifications" ] ] [ div [ class "panel-heading" ] [ icon "bell", text "Notifications" ] ]
, ul [ id "notifications", class "list-group timeline" ] <| , ul [ id "notifications", class "list-group timeline" ] <|
List.map (notificationEntryView currentUser) notifications List.map (notificationEntryView currentUser) notifications
@ -692,7 +688,7 @@ threadView currentUser thread =
div [ class "col-md-3 column" ] div [ class "col-md-3 column" ]
[ div [ class "panel panel-default" ] [ div [ class "panel panel-default" ]
[ closeablePanelheading "list" "Thread" CloseThread [ closeablePanelheading "list" "Thread" CloseThread
, ul [ class "list-group timeline" ] <| , ul [ id "thread", class "list-group timeline" ] <|
List.map threadEntry statuses List.map threadEntry statuses
] ]
] ]