IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: adjust algorithm for picking notification count

Browse Source 
Our current algorithm for picking the number of notifications to display
when expanding the notifications relies on magic numbers.

Previously we only allowed for header and an estimate of maximum height of
notification container, this is not ideal as there is padding at the bottom
and top of the notification container

This adds a special number for padding.

The longer term fix though is to render the notification panel off screen
then grab the correct count, finally adding it back into view with.

This would allow for large fonts, small fonts, custom themes and much more.
This commit is contained in:
Sam Saffron 2020-02-05 16:03:44 +11:00
parent 15b27f28aa
commit 0d6839e8a8
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/discourse/widgets/quick-access-panel.js.es6
View File

@ -4,7 +4,11 @@ import { h } from "virtual-dom";
import { headerHeight } from "discourse/components/site-header";
import { Promise } from "rsvp";
const AVERAGE_ITEM_HEIGHT = 55;
// even a 2 liner notification should be under 50px in default view
const AVERAGE_ITEM_HEIGHT = 50;
// our UX usually carries about 100px of padding around the notification excluding header
const PADDING = 100;
/**
* This tries to enforce a consistent flow of fetching, caching, refreshing,
@ -67,7 +71,7 @@ export default createWidget("quick-access-panel", {
estimateItemLimit() {
// Estimate (poorly) the amount of notifications to return.
let limit = Math.round(
($(window).height() - headerHeight()) / AVERAGE_ITEM_HEIGHT
($(window).height() - headerHeight() - PADDING) / AVERAGE_ITEM_HEIGHT
);
// We REALLY don't want to be asking for negative counts of notifications