nudge with number support

unisonweb · Aug 21, 2023 · bba8edb · bba8edb
1 parent 7fd5c83
commit bba8edb
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/src/UI/Nudge.elm b/src/UI/Nudge.elm
@@ -1,7 +1,8 @@
 module UI.Nudge exposing (..)
 
-import Html exposing (Html, div)
+import Html exposing (Html, div, text)
 import Html.Attributes exposing (class)
+import Maybe.Extra as MaybeE
 import UI
 import UI.Tooltip as Tooltip exposing (Tooltip)
 
@@ -11,6 +12,7 @@ type Nudge msg
  | Nudge
  { withTooltip : Maybe (Tooltip msg)
  , pulsate : Bool
+ , withNumber : Maybe Int
  }
 
 
@@ -25,7 +27,7 @@ empty =
 
 nudge : Nudge msg
 nudge =
- Nudge { withTooltip = Nothing, pulsate = False }
+ Nudge { withTooltip = Nothing, pulsate = False, withNumber = Nothing }
 
 
 
@@ -36,6 +38,7 @@ withTooltip : Tooltip msg -> Nudge msg -> Nudge msg
 withTooltip tooltip nudge_ =
  case nudge_ of
  NoNudge ->
+ -- create a new Nudge with the default settings
  withTooltip tooltip nudge
 
  Nudge n ->
@@ -46,12 +49,24 @@ pulsate : Nudge msg -> Nudge msg
 pulsate nudge_ =
  case nudge_ of
  NoNudge ->
+ -- create a new Nudge with the default settings
  pulsate nudge
 
  Nudge n ->
  Nudge { n | pulsate = True }
 
 
+withNumber : Int -> Nudge msg -> Nudge msg
+withNumber n nudge_ =
+ case nudge_ of
+ NoNudge ->
+ -- create a new Nudge with the default settings
+ withNumber n nudge
+
+ Nudge n_ ->
+ Nudge { n_ | withNumber = Just n }
+
+
 
 -- MAP
 
@@ -66,23 +81,28 @@ map toMsg nudgeA =
  Nudge
  { withTooltip = Maybe.map (Tooltip.map toMsg) n.withTooltip
  , pulsate = n.pulsate
+ , withNumber = n.withNumber
  }
 
 
 
 -- VIEW
 
 
-viewNudgeDot : Bool -> Html msg
-viewNudgeDot pulsate_ =
+viewNudgeDot : Bool -> Maybe Int -> Html msg
+viewNudgeDot pulsate_ withNumber_ =
+ let
+ num =
+ MaybeE.unwrap UI.nothing (String.fromInt >> text) withNumber_
+ in
  div
  [ if pulsate_ then
  class "nudge pulsate"
 
  else
  class "nudge"
  ]
- [ div [ class "nudge_circle" ] []
+ [ div [ class "nudge_circle" ] [ num ]
  ]
 
 
@@ -95,7 +115,7 @@ view nudge_ =
  Nudge settings ->
  case settings.withTooltip of
  Nothing ->
- viewNudgeDot settings.pulsate
+ viewNudgeDot settings.pulsate settings.withNumber
 
  Just tooltip ->
- Tooltip.view (viewNudgeDot settings.pulsate) tooltip
+ Tooltip.view (viewNudgeDot settings.pulsate settings.withNumber) tooltip
diff --git a/src/css/ui/components/nudge.css b/src/css/ui/components/nudge.css
@@ -1,6 +1,9 @@
 .nudge {
  position: relative;
  display: inline-flex;
+ font-size: var(--font-size-small);
+ color: var(--u-color_info_text);
+ font-family: var(--font-monospace);
 }
 
 .nudge .nudge_circle {