From 8a2d1aee74b050d5ba72c3ca32147967f95c9eae Mon Sep 17 00:00:00 2001 From: Brian Hicks Date: Wed, 13 May 2020 17:32:23 -0500 Subject: [PATCH] first pass at a relative time widget --- elm.json | 2 + src/Main.elm | 94 ++++++++++++++++++---------------- src/Widgets/TimeDifference.elm | 66 ++++++++++++++++++++++++ 3 files changed, 118 insertions(+), 44 deletions(-) create mode 100644 src/Widgets/TimeDifference.elm diff --git a/elm.json b/elm.json index d92142e..1d66a57 100644 --- a/elm.json +++ b/elm.json @@ -18,6 +18,7 @@ "elm/time": "1.0.0", "elm/url": "1.0.0", "elm-community/maybe-extra": "5.2.0", + "justinmimbs/time-extra": "1.1.0", "rluiten/stemmer": "1.0.4", "rtfeldman/elm-css": "16.0.1", "rtfeldman/elm-iso8601-date-strings": "1.1.3", @@ -33,6 +34,7 @@ "danfishgold/base64-bytes": "1.0.3", "elm/bytes": "1.0.8", "elm/virtual-dom": "1.0.2", + "justinmimbs/date": "3.2.0", "rtfeldman/elm-hex": "1.0.0", "zwilias/elm-utf-tools": "2.0.1" } diff --git a/src/Main.elm b/src/Main.elm index 940d392..ab13e73 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -26,6 +26,7 @@ import Widgets.Button as Button import Widgets.Colors as Colors import Widgets.Icons as Icons import Widgets.Text as Text +import Widgets.TimeDifference as TimeDifference type alias Model key = @@ -562,6 +563,7 @@ viewApplication model = _ -> Nothing ) + model.currentTime (Database.filter Node.isTitle model.database) , Html.div [ css [ Css.property "grid-area" "note" ] ] [ case model.route of @@ -603,8 +605,8 @@ viewHeader attrs = ] -viewNav : List (Attribute Never) -> Maybe ID -> List Database.Row -> Html Msg -viewNav attrs activeId rows = +viewNav : List (Attribute Never) -> Maybe ID -> Posix -> List Database.Row -> Html Msg +viewNav attrs activeId now rows = Html.nav (Attrs.css [ Css.height (Css.pct 100) @@ -615,57 +617,61 @@ viewNav attrs activeId rows = :: attrs ) [ rows - |> List.map (\row -> Html.li [] [ viewNavLink activeId row ]) + |> List.sortBy (\row -> -(Time.posixToMillis row.updated)) + |> List.map (\row -> Html.li [] [ viewNavLink activeId now row ]) |> Html.ul [] ] -viewNavLink : Maybe ID -> Database.Row -> Html Msg -viewNavLink activeId { id, node } = - Content.toHtml - { activate = UserSelectedNoteInList id - , navigate = UserWantsToOpenNoteWithTitle - , navigateUrl = Route.toString << Route.NodeByTitle - } - [ Attrs.css - [ Css.padding (Css.px 10) - , Css.width (Css.pct 100) - - -- it's always text! - , Text.text - , Css.Global.descendants - [ Css.Global.everything - [ Css.textOverflow Css.ellipsis - , Css.overflow Css.hidden - , Css.whiteSpace Css.noWrap +viewNavLink : Maybe ID -> Posix -> Database.Row -> Html Msg +viewNavLink activeId now { id, node, updated } = + Html.div [] + [ Content.toHtml + { activate = UserSelectedNoteInList id + , navigate = UserWantsToOpenNoteWithTitle + , navigateUrl = Route.toString << Route.NodeByTitle + } + [ Attrs.css + [ Css.padding (Css.px 10) + , Css.width (Css.pct 100) + + -- it's always text! + , Text.text + , Css.Global.descendants + [ Css.Global.everything + [ Css.textOverflow Css.ellipsis + , Css.overflow Css.hidden + , Css.whiteSpace Css.noWrap + ] ] - ] - -- left align, but center vertically - , Css.displayFlex - , Css.flexDirection Css.row - , Css.justifyContent Css.left - , Css.alignItems Css.center - , Css.overflow Css.hidden - - -- surround by borders - , Css.borderBottom3 (Css.px 1) Css.solid (Colors.toCss Colors.greyLight) - , Css.borderLeft3 (Css.px 5) Css.solid Css.transparent - , Css.property "transition" "all 0.25s" - - -- highlight the active node - , -- TODO: make an isActive helper that checks if a child is active too - if activeId == Just id then - Css.batch - [ Css.borderLeftColor (Colors.toCss Colors.greenLight) - , Css.backgroundColor (Colors.toCss Colors.whiteLight) - ] + -- left align, but center vertically + , Css.displayFlex + , Css.flexDirection Css.row + , Css.justifyContent Css.left + , Css.alignItems Css.center + , Css.overflow Css.hidden + + -- surround by borders + , Css.borderBottom3 (Css.px 1) Css.solid (Colors.toCss Colors.greyLight) + , Css.borderLeft3 (Css.px 5) Css.solid Css.transparent + , Css.property "transition" "all 0.25s" + + -- highlight the active node + , -- TODO: make an isActive helper that checks if a child is active too + if activeId == Just id then + Css.batch + [ Css.borderLeftColor (Colors.toCss Colors.greenLight) + , Css.backgroundColor (Colors.toCss Colors.whiteLight) + ] - else - Css.batch [] + else + Css.batch [] + ] ] + (Node.content node) + , TimeDifference.timeDifference updated now ] - (Node.content node) viewRow : ID -> Model key -> Html Msg diff --git a/src/Widgets/TimeDifference.elm b/src/Widgets/TimeDifference.elm new file mode 100644 index 0000000..695b454 --- /dev/null +++ b/src/Widgets/TimeDifference.elm @@ -0,0 +1,66 @@ +module Widgets.TimeDifference exposing (timeDifference) + +import Accessibility.Styled as Html exposing (Html) +import Time +import Time.Extra exposing (Interval(..), diff) + + +timeDifference : Time.Posix -> Time.Posix -> Html msg +timeDifference before after = + case diff Year Time.utc before after of + 0 -> + case diff Month Time.utc before after of + 0 -> + case diff Week Time.utc before after of + 0 -> + case diff Day Time.utc before after of + 0 -> + case diff Hour Time.utc before after of + 0 -> + case diff Minute Time.utc before after of + 0 -> + case diff Second Time.utc before after of + 0 -> + Html.text "just now" + + 1 -> + Html.text "just now" + + otherwise -> + Html.text (String.fromInt otherwise ++ " seconds") + + 1 -> + Html.text "a minute" + + otherwise -> + Html.text (String.fromInt otherwise ++ " minutes") + + 1 -> + Html.text "an hour" + + otherwise -> + Html.text (String.fromInt otherwise ++ " hours") + + 1 -> + Html.text "a day" + + otherwise -> + Html.text (String.fromInt otherwise ++ " days") + + 1 -> + Html.text "a week" + + otherwise -> + Html.text (String.fromInt otherwise ++ " weeks") + + 1 -> + Html.text "a month" + + otherwise -> + Html.text (String.fromInt otherwise ++ " months") + + 1 -> + Html.text "a year" + + otherwise -> + Html.text (String.fromInt otherwise ++ " years")