REFACTOR: Update the notification menu to remove scrolling (#10371)

REFACTOR: Update the notification menu to remove scrolling (#10371)

diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js
index a31c16f..bb0baee 100644
--- a/app/assets/javascripts/discourse/app/components/site-header.js
+++ b/app/assets/javascripts/discourse/app/components/site-header.js
@@ -9,8 +9,6 @@ import PanEvents, {
 } from "discourse/mixins/pan-events";
 import { topicTitleDecorators } from "discourse/components/topic-title";
 
-const PANEL_BODY_MARGIN = 30;
-
 const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
   widget: "header",
   docAt: null,
@@ -311,8 +309,6 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
       }
 
       const $panelBody = $(".panel-body", $panel);
-      // 2 pixel fudge allows for firefox subpixel sizing stuff causing scrollbar
-      let contentHeight = $(".panel-body-contents", $panel).height() + 2;
 
       // We use a mutationObserver to check for style changes, so it's important
       // we don't set it if it doesn't change. Same goes for the $panelBody!
@@ -330,22 +326,6 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
           $panel.css({ top: "100%", height: "auto" });
         }
 
-        // adjust panel height
-        const fullHeight = $window.height();
-        const offsetTop = $panel.offset().top;
-        const scrollTop = $window.scrollTop();
-
-        if (
-          contentHeight + (offsetTop - scrollTop) + PANEL_BODY_MARGIN >
-            fullHeight ||
-          this.site.mobileView
-        ) {
-          contentHeight =
-            fullHeight - (offsetTop - scrollTop) - PANEL_BODY_MARGIN;
-        }
-        if ($panelBody.height() !== contentHeight) {
-          $panelBody.height(contentHeight);
-        }
         $("body").addClass("drop-down-mode");
       } else {
         if (this.site.mobileView) {
@@ -354,15 +334,14 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
 
         const menuTop = this.site.mobileView ? headerTop() : headerHeight();
 
-        let height;
         const winHeightOffset = 16;
         let initialWinHeight = window.innerHeight
           ? window.innerHeight
           : $(window).height();
         const winHeight = initialWinHeight - winHeightOffset;
-        if (menuTop + contentHeight < winHeight && !this.site.mobileView) {
-          height = contentHeight + "px";
-        } else {
+
+        let height;
+        if (this.site.mobileView) {
           height = winHeight - menuTop;
         }
 
diff --git a/app/assets/javascripts/discourse/app/widgets/menu-panel.js b/app/assets/javascripts/discourse/app/widgets/menu-panel.js
index cc8218e..6d0ede4 100644
--- a/app/assets/javascripts/discourse/app/widgets/menu-panel.js
+++ b/app/assets/javascripts/discourse/app/widgets/menu-panel.js
@@ -37,7 +37,7 @@ createWidget("menu-panel", {
   tagName: "div.menu-panel",
   template: hbs`
     <div class='panel-body'>
-      <div class='panel-body-contents clearfix'>
+      <div class='panel-body-contents'>
         {{yield}}
       </div>
     </div>
diff --git a/app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js b/app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js
index 75ca481..a0860ed 100644
--- a/app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js
+++ b/app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js
@@ -10,11 +10,6 @@ const ICON = "bookmark";
 createWidgetFrom(QuickAccessPanel, "quick-access-bookmarks", {
   buildKey: () => "quick-access-bookmarks",
 
-  hasMore() {
-    // Always show the button to the bookmarks page.
-    return true;
-  },
-
   showAllHref() {
     return `${this.attrs.path}/activity/bookmarks`;
   },
@@ -49,10 +44,7 @@ createWidgetFrom(QuickAccessPanel, "quick-access-bookmarks", {
 
   loadBookmarksWithReminders() {
     return ajax(`/u/${this.currentUser.username}/bookmarks.json`, {
-      cache: "false",
-      data: {
-        limit: this.estimateItemLimit()
-      }
+      cache: "false"
     }).then(result => {
       result = result.user_bookmark_list;
 
@@ -71,7 +63,6 @@ createWidgetFrom(QuickAccessPanel, "quick-access-bookmarks", {
       data: {
         username: this.currentUser.username,
         filter: UserAction.TYPES.bookmarks,
-        limit: this.estimateItemLimit(),
         no_results_help_key: "user_activity.no_bookmarks"
       }
     }).then(({ user_actions, no_results_help }) => {
diff --git a/app/assets/javascripts/discourse/app/widgets/quick-access-messages.js b/app/assets/javascripts/discourse/app/widgets/quick-access-messages.js
index e8431bc..b90d8ab 100644
--- a/app/assets/javascripts/discourse/app/widgets/quick-access-messages.js
+++ b/app/assets/javascripts/discourse/app/widgets/quick-access-messages.js
@@ -24,12 +24,6 @@ createWidgetFrom(QuickAccessPanel, "quick-access-messages", {
   buildKey: () => "quick-access-messages",
   emptyStatePlaceholderItemKey: "choose_topic.none_found",
 
-  hasMore() {
-    // Always show the button to the messages page for composing, archiving,
-    // etc.
-    return true;
-  },
-
   showAllHref() {
     return `${this.attrs.path}/messages`;
   },
@@ -40,7 +34,7 @@ createWidgetFrom(QuickAccessPanel, "quick-access-messages", {
         filter: `topics/private-messages/${this.currentUser.username_lower}`
       })
       .then(({ topic_list }) => {
-        return topic_list.topics.map(toItem).slice(0, this.estimateItemLimit());
+        return topic_list.topics.map(toItem);
       });
   },
 
diff --git a/app/assets/javascripts/discourse/app/widgets/quick-access-notifications.js b/app/assets/javascripts/discourse/app/widgets/quick-access-notifications.js
index 2841da9..6334242 100644
--- a/app/assets/javascripts/discourse/app/widgets/quick-access-notifications.js
+++ b/app/assets/javascripts/discourse/app/widgets/quick-access-notifications.js
@@ -46,8 +46,7 @@ createWidgetFrom(QuickAccessPanel, "quick-access-notifications", {
       "notification",
       {
         recent: true,
-        silent: this.currentUser.enforcedSecondFactor,
-        limit: this.estimateItemLimit()
+        silent: this.currentUser.enforcedSecondFactor
       },
       { cacheKey: "recent-notifications" }
     );
diff --git a/app/assets/javascripts/discourse/app/widgets/quick-access-panel.js b/app/assets/javascripts/discourse/app/widgets/quick-access-panel.js
index b53868e..6c56802 100644
--- a/app/assets/javascripts/discourse/app/widgets/quick-access-panel.js
+++ b/app/assets/javascripts/discourse/app/widgets/quick-access-panel.js
@@ -2,15 +2,8 @@ import I18n from "I18n";
 import Session from "discourse/models/session";
 import { createWidget } from "discourse/widgets/widget";
 import { h } from "virtual-dom";
-import { headerHeight } from "discourse/components/site-header";
 import { Promise } from "rsvp";
 
-// 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,
  * and rendering for "quick access items".
@@ -31,6 +24,10 @@ export default createWidget("quick-access-panel", {
     return Promise.resolve();
   },
 
+  hideBottomItems() {
+    return false;
+  },
+
   hasUnread() {
     return false;
   },
@@ -39,10 +36,6 @@ export default createWidget("quick-access-panel", {
     return "";
   },
 
-  hasMore() {
-    return this.getItems().length >= this.estimateItemLimit();
-  },
-
   findNewItems() {
     return Promise.resolve([]);
   },
@@ -69,23 +62,6 @@ export default createWidget("quick-access-panel", {
     });
   },
 
-  estimateItemLimit() {
-    // Estimate (poorly) the amount of notifications to return.
-    let limit = Math.round(
-      ($(window).height() - headerHeight() - PADDING) / AVERAGE_ITEM_HEIGHT
-    );
-

[... diff too long, it was truncated ...]

GitHub sha: 1972364d

This commit appears in #10371 which was merged by awesomerobot.