diff options
| -rw-r--r-- | src/client/Model/Payment.elm | 2 | ||||
| -rw-r--r-- | src/client/View/Payments/Paging.elm | 88 | ||||
| -rw-r--r-- | src/server/Design/Global.hs | 7 |
3 files changed, 83 insertions, 14 deletions
diff --git a/src/client/Model/Payment.elm b/src/client/Model/Payment.elm index 88063b4..8a51c66 100644 --- a/src/client/Model/Payment.elm +++ b/src/client/Model/Payment.elm @@ -13,7 +13,7 @@ import Json.Decode as Json exposing ((:=)) import Dict exposing (..) perPage : Int -perPage = 10 +perPage = 8 type alias Payments = Dict PaymentId Payment diff --git a/src/client/View/Payments/Paging.elm b/src/client/View/Payments/Paging.elm index 7be4c7b..c3db819 100644 --- a/src/client/View/Payments/Paging.elm +++ b/src/client/View/Payments/Paging.elm @@ -14,18 +14,84 @@ import ServerCommunication as SC exposing (serverCommunications) import Update exposing (..) import Update.Payment exposing (..) +import View.Icon exposing (renderIcon) + +showedPages : Int +showedPages = 5 + paymentsPaging : PaymentView -> Html paymentsPaging paymentView = let maxPage = ceiling (toFloat paymentView.paymentsCount / toFloat perPage) - pages = [1..maxPage] - in ul - [ class "pages" ] - ( pages - |> List.map (\page -> - li - [ class ("page" ++ (if page == paymentView.currentPage then " current" else "")) - , onClick serverCommunications.address (SC.UpdatePage page) - ] - [ text (toString page) ] + pages = truncatePages paymentView.currentPage [1..maxPage] + in if maxPage == 1 + then + text "" + else + ul + [ class "pages" ] + ( ( if paymentView.currentPage > 1 + then [ firstPage, previousPage paymentView ] + else [] + ) + ++ ( List.map (paymentsPage paymentView) pages) + ++ ( if paymentView.currentPage < maxPage + then [ nextPage paymentView, lastPage maxPage ] + else [] ) - ) + ) + +truncatePages : Int -> List Int -> List Int +truncatePages currentPage pages = + let totalPages = List.length pages + showedLeftPages = ceiling ((toFloat showedPages - 1) / 2) + showedRightPages = floor ((toFloat showedPages - 1) / 2) + truncatedPages = + if | currentPage < showedLeftPages -> + [1..showedPages] + | currentPage > totalPages - showedRightPages -> + [(totalPages - showedPages)..totalPages] + | otherwise -> + [(currentPage - showedLeftPages)..(currentPage + showedRightPages)] + in List.filter (flip List.member pages) truncatedPages + +firstPage : Html +firstPage = + li + [ class "page" + , onClick serverCommunications.address (SC.UpdatePage 1) + ] + [ renderIcon "fast-backward" ] + +previousPage : PaymentView -> Html +previousPage paymentView = + li + [ class "page" + , onClick serverCommunications.address (SC.UpdatePage (paymentView.currentPage - 1)) + ] + [ renderIcon "backward" ] + +nextPage : PaymentView -> Html +nextPage paymentView = + li + [ class "page" + , onClick serverCommunications.address (SC.UpdatePage (paymentView.currentPage + 1)) + ] + [ renderIcon "forward" ] + +lastPage : Int -> Html +lastPage maxPage = + li + [ class "page" + , onClick serverCommunications.address (SC.UpdatePage maxPage) + ] + [ renderIcon "fast-forward" ] + +paymentsPage : PaymentView -> Int -> Html +paymentsPage paymentView page = + let onCurrentPage = page == paymentView.currentPage + in li + [ class ("page" ++ (if onCurrentPage then " current" else "")) + , onClick serverCommunications.address <| + if onCurrentPage then SC.NoCommunication else SC.UpdatePage page + ] + [ text (toString page) ] diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs index 45b1cbc..e3dd824 100644 --- a/src/server/Design/Global.hs +++ b/src/server/Design/Global.hs @@ -54,11 +54,12 @@ global = do ".exceedingPayers" ? do margin (px 0) (px 20) (px 45) (px 20) - padding (px 10) (px 10) (px 10) (px 10) + padding (px 15) (px 15) (px 15) (px 15) backgroundColor C.green color C.white fontWeight bold borderRadius (px 5) (px 5) (px 5) (px 5) + fontSize (pct 120) ".exceedingPayer" Clay.** ".userName" ? marginRight (px 10) @@ -174,9 +175,9 @@ global = do ".page" ? do display inlineBlock border solid (px 2) C.darkGrey + color C.darkGrey borderRadius (px 2) (px 2) (px 2) (px 2) marginRight (px 10) - cursor pointer let side = 50 width (px side) height (px side) @@ -184,6 +185,8 @@ global = do textAlign (alignSide (sideCenter)) fontWeight bold + ":not(.current)" & cursor pointer + ".current" & do borderColor C.red color C.red |