Chime.Components (Chime v0.1.0-dev)

Copy Markdown View Source

The bell, the feed and the preferences in the app's LiveViews, from @chime (Chime.Live):

<Chime.Components.bell chime={@chime} />
<Chime.Components.feed chime={@chime} />

The bell has a dot while the person has notifications they have not seen, never a count unless asked (count); a click opens the feed, which marks them seen. The feed lists the notifications as their notifiers render them, the unread ones marked; a click on one reads it and goes to its :url.

The markup has classes of chime- and no style of its own: style it with the app's CSS, or start from Chime's, deps/chime/priv/static/chime.css (imported into the app's: @import "../../deps/chime/priv/static/chime.css";). The words are Chime's, in the app's languages by its Gettext (see Chime.Messages); each is an attribute too, for words of the app's own.

Summary

Functions

bell(assigns)

The bell, with a dot for what the person has not seen.

feed(assigns)

The panel of the feed, while it is open.

preferences(assigns)

The person's preferences: a row for each category of the config, a choice for each channel. A live component of its own, which keeps the changes as they are made.

Functions

bell(assigns)

The bell, with a dot for what the person has not seen.

Attributes

  • chime (Chime.Live.State) (required)
  • count (:boolean) - show the number of unread, not only a dot. Defaults to false.
  • label (:string) - "Notifications". Defaults to nil.
  • class (:string) - Defaults to nil.

feed(assigns)

The panel of the feed, while it is open.

Attributes

  • chime (Chime.Live.State) (required)
  • title (:string) - "Notifications". Defaults to nil.
  • empty (:string) - "Nothing yet.". Defaults to nil.
  • read_all (:string) - "Mark all as read". Defaults to nil.
  • more (:string) - "Show more". Defaults to nil.
  • all (:string) - "All". Defaults to nil.
  • unread (:string) - "Unread". Defaults to nil.
  • archive (:string) - "Archive". Defaults to nil.
  • class (:string) - Defaults to nil.

preferences(assigns)

The person's preferences: a row for each category of the config, a choice for each channel. A live component of its own, which keeps the changes as they are made.

<Chime.Components.preferences id="notifications" chime={@chime} />

Attributes

  • id (:string) (required)
  • chime (Chime.Live.State) (required)
  • labels (:map) - the channels' and settings' words: %{"email" => "Email", "daily" => "Daily"}. Defaults to %{}.