Thread pagination improvements (#1555)

* Update thread pagination * Thread pagination improvs
rafalp · Apr 5, 2023 · b8ad4a0 · b8ad4a0
1 parent 025df27
commit b8ad4a0
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 12 deletions.
diff --git a/frontend/src/components/thread/ThreadPagination.jsx b/frontend/src/components/thread/ThreadPagination.jsx
@@ -1,13 +1,26 @@
 import React from "react"
 import { Link } from "react-router"
 
-const ThreadPagination = ({ baseUrl, posts }) => (
+const ThreadPagination = ({ baseUrl, posts, scrollToTop }) => (
   <div className="misago-pagination">
+    {!!scrollToTop && (
+      <button
+        className="btn btn-default btn-outline btn-icon"
+        title={gettext("Go to top")}
+        type="button"
+        onClick={resetScroll}
+      >
+        <span className="material-icon">
+          arrow_upward
+        </span>
+      </button>
+    )}
     {posts.isLoaded && posts.first ? (
       <Link
         className="btn btn-default btn-outline btn-icon"
         to={baseUrl}
         title={gettext("Go to first page")}
+        onClick={scrollToTop ? resetScroll : null}
       >
         <span className="material-icon">first_page</span>
       </Link>
@@ -26,6 +39,7 @@ const ThreadPagination = ({ baseUrl, posts }) => (
         className="btn btn-default btn-outline btn-icon"
         to={baseUrl + (posts.previous > 1 ? posts.previous + "/" : "")}
         title={gettext("Go to previous page")}
+        onClick={scrollToTop ? resetScroll : null}
       >
         <span className="material-icon">chevron_left</span>
       </Link>
@@ -44,6 +58,7 @@ const ThreadPagination = ({ baseUrl, posts }) => (
         className="btn btn-default btn-outline btn-icon"
         to={baseUrl + posts.next + "/"}
         title={gettext("Go to next page")}
+        onClick={scrollToTop ? resetScroll : null}
       >
         <span className="material-icon">chevron_right</span>
       </Link>
@@ -62,6 +77,7 @@ const ThreadPagination = ({ baseUrl, posts }) => (
         className="btn btn-default btn-outline btn-icon"
         to={baseUrl + posts.last + "/"}
         title={gettext("Go to last page")}
+        onClick={scrollToTop ? resetScroll : null}
       >
         <span className="material-icon">last_page</span>
       </Link>
@@ -78,4 +94,8 @@ const ThreadPagination = ({ baseUrl, posts }) => (
   </div>
 )
 
+function resetScroll() {
+  window.scrollTo(0, 0)
+}
+
 export default ThreadPagination
diff --git a/frontend/src/components/thread/ThreadShortcutsButton.jsx b/frontend/src/components/thread/ThreadShortcutsButton.jsx
@@ -1,6 +1,7 @@
 import React from "react"
+import { Link } from "react-router"
 
-const ThreadShortcutsButton = ({ user, thread }) => (
+const ThreadShortcutsButton = ({ user, thread, posts }) => (
   <div className="dropdown">
     <button
       className="btn btn-default btn-outline btn-icon"
@@ -13,6 +14,14 @@ const ThreadShortcutsButton = ({ user, thread }) => (
       <span className="material-icon">bookmark</span>
     </button>
     <ul className="dropdown-menu">
+      {!!posts.first && (
+        <li>
+          <Link className="btn btn-link" href={thread.url.index}>
+            <span className="material-icon">place</span>
+            {gettext("Go to first post")}
+          </Link>
+        </li>
+      )}
       {user.is_authenticated && thread.is_new && (
         <li>
           <a className="btn btn-link" href={thread.url.new_post}>

diff --git a/frontend/src/components/thread/ThreadToolbarBottom.jsx b/frontend/src/components/thread/ThreadToolbarBottom.jsx
@@ -17,7 +17,11 @@ const ThreadToolbarBottom = ({
   <Toolbar>
     <ToolbarSection>
       <ToolbarItem>
-        <ThreadPagination baseUrl={thread.url.index} posts={posts} />
+        <ThreadPagination
+          baseUrl={thread.url.index}
+          posts={posts}
+          scrollToTop
+        />
       </ToolbarItem>
       {moderation.enabled && (
         <ToolbarItem className="hidden-sm hidden-md hidden-lg" shrink>

diff --git a/frontend/src/components/thread/ThreadToolbarTop.jsx b/frontend/src/components/thread/ThreadToolbarTop.jsx
@@ -19,9 +19,9 @@ const ThreadToolbarTop = ({
   <Toolbar>
     <ToolbarSection className="hidden-xs">
       <ToolbarItem>
-        <ThreadShortcutsButton thread={thread} user={user} />
+        <ThreadShortcutsButton posts={posts} thread={thread} user={user} />
       </ToolbarItem>
-      <ToolbarItem className="hidden-xs hidden-sm">
+      <ToolbarItem>
         <ThreadPagination baseUrl={thread.url.index} posts={posts} />
       </ToolbarItem>
     </ToolbarSection>
@@ -36,7 +36,7 @@ const ThreadToolbarTop = ({
     {thread.acl.can_reply ? (
       <ToolbarSection>
         <ToolbarItem className="hidden-sm hidden-md hidden-lg" shrink>
-          <ThreadShortcutsButton thread={thread} user={user} />
+          <ThreadShortcutsButton posts={posts} thread={thread} user={user} />
         </ToolbarItem>
         <ToolbarItem>
           <ThreadReplyButton onClick={onReply} />
@@ -63,7 +63,7 @@ const ThreadToolbarTop = ({
     ) : (
       <ToolbarSection>
         <ToolbarItem className="hidden-sm hidden-md hidden-lg" shrink>
-          <ThreadShortcutsButton thread={thread} user={user} />
+          <ThreadShortcutsButton posts={posts} thread={thread} user={user} />
         </ToolbarItem>
         {thread.acl.can_start_poll && !thread.poll && (
           <ToolbarItem>

diff --git a/misago/static/misago/js/misago.js b/misago/static/misago/js/misago.js
diff --git a/misago/static/misago/js/misago.js.map b/misago/static/misago/js/misago.js.map
diff --git a/misago/templates/misago/thread/pagination.html b/misago/templates/misago/thread/pagination.html
@@ -1,5 +1,10 @@
 {% load i18n misago_capture %}
 <nav class="misago-pagination" role="nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
+  {% if bottom %}
+    <a class="btn btn-default btn-outline btn-icon" title="{% trans 'Go to top' %}" href="#">
+      <span class="material-icon">arrow_upward</span>
+    </a>
+  {% endif %}
   {% if paginator.first %}
     <a class="btn btn-default btn-outline btn-icon" title="{% trans 'Go to first page' %}" href="{% url url_name slug=thread.slug pk=thread.pk %}">
       <span class="material-icon">first_page</span>

diff --git a/misago/templates/misago/thread/toolbar_bottom.html b/misago/templates/misago/thread/toolbar_bottom.html
@@ -2,7 +2,7 @@
 <div class="toolbar">
   <div class="toolbar-section">
     <div class="toolbar-item">
-      {% include "misago/thread/pagination.html" %}
+      {% include "misago/thread/pagination.html" with bottom=1 %}
     </div>
   </div>
   <div class="toolbar-section toolbar-section-auto hidden-xs hidden-sm">

diff --git a/misago/templates/misago/thread/toolbar_top.html b/misago/templates/misago/thread/toolbar_top.html
@@ -8,8 +8,8 @@
         </button>
       </div>
     </div>
-    <div class="toolbar-item hidden-xs hidden-sm">
-      {% include "misago/thread/pagination.html" %}
+    <div class="toolbar-item">
+      {% include "misago/thread/pagination.html"%}
     </div>
   </div>
   <div class="toolbar-spacer"></div>