Skip to content

Commit

Permalink
first pass at a relative time widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@BrianHicks
BrianHicks committed May 13, 2020
1 parent ac25d83 commit 8a2d1ae
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 44 deletions.
2 changes: 2 additions & 0 deletions elm.json
View file
Expand Up @@ -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",
Expand All @@ -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"
}
Expand Down
94 changes: 50 additions & 44 deletions src/Main.elm
View file
Expand Up @@ -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 =
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand All @@ -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
Expand Down
66 changes: 66 additions & 0 deletions src/Widgets/TimeDifference.elm
View file
@@ -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")

0 comments on commit 8a2d1ae

Please sign in to comment.