first pass at a relative time widget
parent
ac25d83e38
commit
8a2d1aee74
2
elm.json
2
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"
|
||||
}
|
||||
|
|
94
src/Main.elm
94
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)
|
||||
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
|
||||
-- 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)
|
||||
]
|
||||
|
||||
else
|
||||
Css.batch []
|
||||
]
|
||||
|
||||
-- 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 []
|
||||
]
|
||||
(Node.content node)
|
||||
, TimeDifference.timeDifference updated now
|
||||
]
|
||||
(Node.content node)
|
||||
|
||||
|
||||
viewRow : ID -> Model key -> Html Msg
|
||||
|
|
|
@ -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")
|
Reference in New Issue