Browse Source

Add notification count badge to sidebar button

When on mobile, it wasn't previously possible to tell whether you had
any notifications/messages or not without opening the sidebar to check.
This adds a small "badge" to the sidebar button when the user has
notifications, showing them how many unread items they have.
merge-requests/7/head
Deimos 6 years ago
parent
commit
0493ca64e0
  1. 11
      tildes/scss/modules/_site-header.scss
  2. 5
      tildes/tildes/models/user/user.py
  3. 13
      tildes/tildes/templates/base.jinja2

11
tildes/scss/modules/_site-header.scss

@ -41,4 +41,15 @@
} }
margin-left: auto; margin-left: auto;
&.badge {
margin-right: 0.6rem;
&[data-badge]::after {
background-color: $orange;
font-size: 0.5rem;
height: 0.7rem;
transform: translate(50%, -40%);
}
}
} }

5
tildes/tildes/models/user/user.py

@ -179,3 +179,8 @@ class User(DatabaseModel):
# convert the address to lowercase to avoid potential casing issues # convert the address to lowercase to avoid potential casing issues
value = value.lower() value = value.lower()
self.email_address_hash = hash_string(value) self.email_address_hash = hash_string(value)
@property
def num_unread_total(self) -> int:
"""Return total number of unread items (notifications + messages)."""
return self.num_unread_messages + self.num_unread_notifications

13
tildes/tildes/templates/base.jinja2

@ -49,7 +49,18 @@
{{ logged_in_user_info() }} {{ logged_in_user_info() }}
<button class="btn btn-sm btn-link site-header-sidebar-button" data-js-sidebar-toggle>Sidebar</button>
<button
class="btn btn-sm btn-link site-header-sidebar-button
{% if request.user and request.user.num_unread_total > 0 %}
badge
{% endif %}
"
data-js-sidebar-toggle
{% if request.user and request.user.num_unread_total > 0 %}
data-badge="{{ request.user.num_unread_total }}"
{% endif %}
>Sidebar</button>
</header> </header>
<main data-js-hide-sidebar-if-open> <main data-js-hide-sidebar-if-open>

Loading…
Cancel
Save