refs #1065 Scroll top when clicking the timeline title

h3poteto · Aug 19, 2023 · 9340fbc · 9340fbc
1 parent 1b07c3e
commit 9340fbc
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/src/components/timelines/Conversations.tsx b/src/components/timelines/Conversations.tsx
@@ -138,13 +138,20 @@ const Conversations: React.FC<Props> = props => {
  return false
  }, [firstItemIndex, conversations, setConversations, unreadConversations])
 
+ const backToTop = () => {
+ scrollerRef.current.scrollTo({
+ top: 0,
+ behavior: 'smooth'
+ })
+ }
+
  return (
  <div style={{ width: columnWidth(props.timeline.column_width), minWidth: columnWidth(props.timeline.column_width), margin: '0 4px' }}>
  <Container style={{ height: 'calc(100% - 8px)' }}>
  <Header style={{ backgroundColor: 'var(--rs-bg-card)' }}>
  <FlexboxGrid align="middle" justify="space-between">
  <FlexboxGrid.Item style={{ width: 'calc(100% - 80px)' }}>
- <FlexboxGrid align="middle">
+ <FlexboxGrid align="middle" onClick={backToTop} style={{ cursor: 'pointer' }}>
  {/** icon **/}
  <FlexboxGrid.Item
  style={{

diff --git a/src/components/timelines/Notifications.tsx b/src/components/timelines/Notifications.tsx
@@ -227,6 +227,13 @@ const Notifications: React.FC<Props> = props => {
  return false
  }, [firstItemIndex, notifications, setNotifications, unreadNotifications])
 
+ const backToTop = () => {
+ scrollerRef.current.scrollTo({
+ top: 0,
+ behavior: 'smooth'
+ })
+ }
+
  return (
  <div
  style={{ width: columnWidth(props.timeline.column_width), minWidth: columnWidth(props.timeline.column_width), margin: '0 4px' }}
@@ -237,7 +244,7 @@ const Notifications: React.FC<Props> = props => {
  <Header style={{ backgroundColor: 'var(--rs-bg-card)' }}>
  <FlexboxGrid align="middle" justify="space-between">
  <FlexboxGrid.Item style={{ width: 'calc(100% - 108px)' }}>
- <FlexboxGrid align="middle">
+ <FlexboxGrid align="middle" onClick={backToTop} style={{ cursor: 'pointer' }}>
  {/** icon **/}
  <FlexboxGrid.Item
  style={{

diff --git a/src/components/timelines/Timeline.tsx b/src/components/timelines/Timeline.tsx
@@ -347,13 +347,20 @@ const Timeline: React.FC<Props> = props => {
  return false
  }, [firstItemIndex, statuses, setStatuses, unreadStatuses])
 
+ const backToTop = () => {
+ scrollerRef.current.scrollTo({
+ top: 0,
+ behavior: 'smooth'
+ })
+ }
+
  return (
  <div style={{ width: columnWidth(props.timeline.column_width), minWidth: columnWidth(props.timeline.column_width), margin: '0 4px' }}>
  <Container style={{ height: '100%' }}>
  <Header style={{ backgroundColor: 'var(--rs-bg-card)' }}>
  <FlexboxGrid align="middle" justify="space-between">
  <FlexboxGrid.Item style={{ width: 'calc(100% - 80px)' }}>
- <FlexboxGrid align="middle">
+ <FlexboxGrid align="middle" onClick={backToTop} style={{ cursor: 'pointer' }}>
  {/** icon **/}
  <FlexboxGrid.Item
  style={{