[MM-21907][MM-21908] Unread Handling and Scrolling #4799

devinbinnie · 2020-01-30T21:22:18Z

Summary

Unread Handling and Scrolling for the new sidebar.
This covers 2 tickets because they ended up overlapping.

Ticket Link

https://mattermost.atlassian.net/browse/MM-21907
https://mattermost.atlassian.net/browse/MM-21908

…bar-arch

…/mattermost-webapp into channel-sidebar-arch

bradjcoughlin · 2020-02-03T20:22:58Z

components/sidebar/sidebar_category_list/sidebar_category_list.tsx

+import Scrollbars from 'react-custom-scrollbars';
+import {FormattedMessage} from 'react-intl';
+
+import {Spring, SpringSystem, util as MathUtil} from 'rebound';


In the HTML I'm building, I'm avoiding custom scrollbars. @deanwhillier thought this was something we should avoid. Does Spring just handle scroll position as opposed to overriding the default browser scrolling element?

Ah, it looks like Spring is just the animation library https://www.react-spring.io/docs/hooks/basics

Yep, that's right. It's just for having more control over the scrolling animation. We could look at removing it if it's not necessary, but it seems nice to have for now at least.

bradjcoughlin · 2020-02-03T20:27:02Z

components/sidebar/sidebar_category_list/sidebar_category_list.tsx

@@ -2,32 +2,286 @@
 // See LICENSE.txt for license information.

 import React from 'react';
+import Scrollbars from 'react-custom-scrollbars';


Can we dump react-custom-scrollbars in favor of default scrollbars?

I'd be in favour of this, as long as it doesn't mess with all the auto scrolling stuff we already do. @hmhealey sound good to you?

It doesn't affect the auto scrolling as far as I know. I think it's just for custom styling, so as long as that's not a problem with browsers we support, I'm good with it

Okay all done. One thing for you @bradjcoughlin, we'll want to auto-hide the scrollbar when the sidebar isn't hovered/focused, which means we'll want to only apply overflow-y: scroll on hover. Currently I have an inline style to make it show up all the time.

components/sidebar/sidebar_category_list/sidebar_category_list.tsx

hmhealey · 2020-02-05T19:26:46Z

components/sidebar/sidebar_category_list/sidebar_category_list.tsx

+ return this.getFirstUnreadChannelFromChannelIdArray(this.getDisplayedChannels().reverse());
+ }
+
+ getDisplayedChannels = () => {


Nothing to change for now, but I think this component might not be able to access a list of the displayed channels at some point. We might need to think about how that could work in the future. Maybe something to do with setChannelRef where it tells this component where the channel is in the sidebar and whether or not its unread?

components/sidebar/sidebar_channel/channel_mention_badge/index.ts

components/sidebar/sidebar_channel/sidebar_channel.tsx

* [MM-20881] Moved out old sidebar and added setting to activate new one (#4553) * Redux update * Update redux commit * Redux merge * Base channel sidebar architecture (#4706) Automatic Merge * [MM-21911] Moved favicon and titlebar update to its own component (#4811) * [MM-21911] Moved favicon and titlebar update to its own component * Moved favicon/title tests to their own file * PR feedback * [MM-21907][MM-21908] Unread Handling and Scrolling (#4799) * WIP * Barely working sidebar * Temp fix so you can use the sidebar better * Lint and type fixes * Unread badge and bolding class added * Split up sidebar channel types into different components * Lint/type fixes * WIP * PR feedback * Lint fix * Unread indicators and scrolling! * Auto scrolling when changing teams/when channel is in view * Lint and type fixes * Another type fix * Removing unnecessary styling * PR feedback * package fix * Reverted to regular scrollbars * Whoops, left my dumb test styling in :P * PR feedback * aaa * [MM-21909] Keyboard shortcuts and a11y-controller classes (#4821) * WIP * Barely working sidebar * Temp fix so you can use the sidebar better * Lint and type fixes * Unread badge and bolding class added * Split up sidebar channel types into different components * Lint/type fixes * WIP * PR feedback * Lint fix * Unread indicators and scrolling! * Auto scrolling when changing teams/when channel is in view * Lint and type fixes * Another type fix * Removing unnecessary styling * PR feedback * package fix * Added a11y classes to new sidebar * Keyboard shortcuts * Reverted to regular scrollbars * Whoops, left my dumb test styling in :P * PR feedback * Removed isSwitchingChannel * aaa * Revert redux commit until tests are fixed * [MM-22290] Collapsible Category Logic (#4873) * Barebone collapsing of categories (no saving) * Take into account unreads and if the channel is the current visible channel * Reactifying and cleaning up a couple small things * More cleanup * Clarity * Added new style sheet for new sidebar, and the animation for collapsing categories * Lint/type fixes and accessibility * Moved a11y section to just the title, for better reading and navigation * Removing code that won't be used * Merge'd * Category name is repeated * PR feedback * Removing unnecessary code * [MM-21910] Modal Handling for new Sidebar (#4847) * WIP * Barely working sidebar * Temp fix so you can use the sidebar better * Lint and type fixes * Unread badge and bolding class added * Split up sidebar channel types into different components * Lint/type fixes * WIP * PR feedback * Lint fix * Unread indicators and scrolling! * Auto scrolling when changing teams/when channel is in view * Lint and type fixes * Another type fix * Removing unnecessary styling * PR feedback * package fix * Added a11y classes to new sidebar * Keyboard shortcuts * Reverted to regular scrollbars * Whoops, left my dumb test styling in :P * Moved modals over to sidebar * PR feedback * Removed isSwitchingChannel * aaa * Modals functional * PR feedback * Merge'd * MM-22114 Add view state for collapsed categories and unread filter (#4914) * [MM-22291] Additional functionality from old sidebar (#4860) * [MM-22291] Additional functionality from old sidebar * PR feedback * PR feedback * Lank bline * Lint again * PR feedback * Merge'd * PR feedback * MM-21584 Replace removeItem call with setItem (#5003) * Update redux commit * Merging of CSS styles into new sidebar code (#4998) * [MM-22291] Additional functionality from old sidebar * PR feedback * PR feedback * Lank bline * Lint again * PR feedback * Merge'd * Actual functioning sidebar! * Using react-custom-scrollbars again and fixed a few styling issues * PR feedback * Lint fixes Co-authored-by: mattermod <[email protected]> * [MM-22478] Unread Filtering and Create New Channel Menu (#5005) * [MM-22291] Additional functionality from old sidebar * PR feedback * PR feedback * Lank bline * Lint again * PR feedback * Merge'd * Actual functioning sidebar! * Using react-custom-scrollbars again and fixed a few styling issues * PR feedback * Added base structure * Unread filter and add channel dropdown design and some functionality * Unread filtering and collapsible category logic hookup to redux * Lint fixes * Added translations * Disable collapse when unread filter is on * Merge'd * PR feedback * And more Co-authored-by: mattermod <[email protected]> * CSS fix for single team instances * PR feedback and some more missing redux hookups * Mobile/Desktop Sidebar View + Restored Team Sidebar and Header (#5016) * [MM-22291] Additional functionality from old sidebar * PR feedback * PR feedback * Lank bline * Lint again * PR feedback * Merge'd * Actual functioning sidebar! * Using react-custom-scrollbars again and fixed a few styling issues * PR feedback * Lint fixes * WIP * Added back original team sidebar and sidebar header for Phase 1 * Mobile bar fits, still styling issues * Style and lint fixes to make the sidebar work properly * Desktop and other mobile fixes * Merge'd Co-authored-by: mattermod <[email protected]> * Fixed labels to match spec * Snapshot update * Channel Switcher + History Button Style (#5023) * [MM-22291] Additional functionality from old sidebar * PR feedback * PR feedback * Lank bline * Lint again * PR feedback * Merge'd * Actual functioning sidebar! * Using react-custom-scrollbars again and fixed a few styling issues * PR feedback * Lint fixes * Added channel switcher modal button and back/forward buttons * Lint fixes and formatting * Styled arrows and buttons, and mock back/forward * Unmocking for Phase 1 * Removed unnecessary ms-filter Co-authored-by: mattermod <[email protected]> * Fixed so that the swap between old and new sidebars is instant, mobile view fixes * Type fix * Lint fix * PR feedback for Eric/Harrison * A bunch of alignment changes * Another design fix * [MM-23056] Analytics for new and old sidebar * More alignment fixes * Fixed letter cutoff issue and an alignment issue * [MM-22834] Hide unused Account Settings options when the new sidebar is enabled * Even more more alignment fixes, a test fix and some scrolling fixes * Additional alignment and style fixes * Alignment fixes for the history arrows * Fixed a test and a couple small issues * Added missing tooltips * Fix for the team switching crashing issue * Lint fix * A lot of a11y fixes, still need more * Lint and test fixes * Added some missing aria-labels * Fix crash issue #2 * Removed autoclose redirect since it can't fire * Removed more dead code * Redux update * PR feedback * Fixed a couple more small issues * Fixed a redux issue * More redux fixes and a bug fix * Fixed a test * Lint error Co-authored-by: Harrison Healey <[email protected]> Co-authored-by: mattermod <[email protected]>

* [MM-20881] Moved out old sidebar and added setting to activate new one (mattermost#4553) * Redux update * Update redux commit * Redux merge * Base channel sidebar architecture (mattermost#4706) Automatic Merge * [MM-21911] Moved favicon and titlebar update to its own component (mattermost#4811) * [MM-21911] Moved favicon and titlebar update to its own component * Moved favicon/title tests to their own file * PR feedback * [MM-21907][MM-21908] Unread Handling and Scrolling (mattermost#4799) * WIP * Barely working sidebar * Temp fix so you can use the sidebar better * Lint and type fixes * Unread badge and bolding class added * Split up sidebar channel types into different components * Lint/type fixes * WIP * PR feedback * Lint fix * Unread indicators and scrolling! * Auto scrolling when changing teams/when channel is in view * Lint and type fixes * Another type fix * Removing unnecessary styling * PR feedback * package fix * Reverted to regular scrollbars * Whoops, left my dumb test styling in :P * PR feedback * aaa * [MM-21909] Keyboard shortcuts and a11y-controller classes (mattermost#4821) * WIP * Barely working sidebar * Temp fix so you can use the sidebar better * Lint and type fixes * Unread badge and bolding class added * Split up sidebar channel types into different components * Lint/type fixes * WIP * PR feedback * Lint fix * Unread indicators and scrolling! * Auto scrolling when changing teams/when channel is in view * Lint and type fixes * Another type fix * Removing unnecessary styling * PR feedback * package fix * Added a11y classes to new sidebar * Keyboard shortcuts * Reverted to regular scrollbars * Whoops, left my dumb test styling in :P * PR feedback * Removed isSwitchingChannel * aaa * Revert redux commit until tests are fixed * [MM-22290] Collapsible Category Logic (mattermost#4873) * Barebone collapsing of categories (no saving) * Take into account unreads and if the channel is the current visible channel * Reactifying and cleaning up a couple small things * More cleanup * Clarity * Added new style sheet for new sidebar, and the animation for collapsing categories * Lint/type fixes and accessibility * Moved a11y section to just the title, for better reading and navigation * Removing code that won't be used * Merge'd * Category name is repeated * PR feedback * Removing unnecessary code * [MM-21910] Modal Handling for new Sidebar (mattermost#4847) * WIP * Barely working sidebar * Temp fix so you can use the sidebar better * Lint and type fixes * Unread badge and bolding class added * Split up sidebar channel types into different components * Lint/type fixes * WIP * PR feedback * Lint fix * Unread indicators and scrolling! * Auto scrolling when changing teams/when channel is in view * Lint and type fixes * Another type fix * Removing unnecessary styling * PR feedback * package fix * Added a11y classes to new sidebar * Keyboard shortcuts * Reverted to regular scrollbars * Whoops, left my dumb test styling in :P * Moved modals over to sidebar * PR feedback * Removed isSwitchingChannel * aaa * Modals functional * PR feedback * Merge'd * MM-22114 Add view state for collapsed categories and unread filter (mattermost#4914) * [MM-22291] Additional functionality from old sidebar (mattermost#4860) * [MM-22291] Additional functionality from old sidebar * PR feedback * PR feedback * Lank bline * Lint again * PR feedback * Merge'd * PR feedback * MM-21584 Replace removeItem call with setItem (mattermost#5003) * Update redux commit * Merging of CSS styles into new sidebar code (mattermost#4998) * [MM-22291] Additional functionality from old sidebar * PR feedback * PR feedback * Lank bline * Lint again * PR feedback * Merge'd * Actual functioning sidebar! * Using react-custom-scrollbars again and fixed a few styling issues * PR feedback * Lint fixes Co-authored-by: mattermod <[email protected]> * [MM-22478] Unread Filtering and Create New Channel Menu (mattermost#5005) * [MM-22291] Additional functionality from old sidebar * PR feedback * PR feedback * Lank bline * Lint again * PR feedback * Merge'd * Actual functioning sidebar! * Using react-custom-scrollbars again and fixed a few styling issues * PR feedback * Added base structure * Unread filter and add channel dropdown design and some functionality * Unread filtering and collapsible category logic hookup to redux * Lint fixes * Added translations * Disable collapse when unread filter is on * Merge'd * PR feedback * And more Co-authored-by: mattermod <[email protected]> * CSS fix for single team instances * PR feedback and some more missing redux hookups * Mobile/Desktop Sidebar View + Restored Team Sidebar and Header (mattermost#5016) * [MM-22291] Additional functionality from old sidebar * PR feedback * PR feedback * Lank bline * Lint again * PR feedback * Merge'd * Actual functioning sidebar! * Using react-custom-scrollbars again and fixed a few styling issues * PR feedback * Lint fixes * WIP * Added back original team sidebar and sidebar header for Phase 1 * Mobile bar fits, still styling issues * Style and lint fixes to make the sidebar work properly * Desktop and other mobile fixes * Merge'd Co-authored-by: mattermod <[email protected]> * Fixed labels to match spec * Snapshot update * Channel Switcher + History Button Style (mattermost#5023) * [MM-22291] Additional functionality from old sidebar * PR feedback * PR feedback * Lank bline * Lint again * PR feedback * Merge'd * Actual functioning sidebar! * Using react-custom-scrollbars again and fixed a few styling issues * PR feedback * Lint fixes * Added channel switcher modal button and back/forward buttons * Lint fixes and formatting * Styled arrows and buttons, and mock back/forward * Unmocking for Phase 1 * Removed unnecessary ms-filter Co-authored-by: mattermod <[email protected]> * Fixed so that the swap between old and new sidebars is instant, mobile view fixes * Type fix * Lint fix * PR feedback for Eric/Harrison * A bunch of alignment changes * Another design fix * [MM-23056] Analytics for new and old sidebar * More alignment fixes * Fixed letter cutoff issue and an alignment issue * [MM-22834] Hide unused Account Settings options when the new sidebar is enabled * Even more more alignment fixes, a test fix and some scrolling fixes * Additional alignment and style fixes * Alignment fixes for the history arrows * Fixed a test and a couple small issues * Added missing tooltips * Fix for the team switching crashing issue * Lint fix * A lot of a11y fixes, still need more * Lint and test fixes * Added some missing aria-labels * Fix crash issue mattermost#2 * Removed autoclose redirect since it can't fire * Removed more dead code * Redux update * PR feedback * Fixed a couple more small issues * Fixed a redux issue * More redux fixes and a bug fix * Fixed a test * Lint error Co-authored-by: Harrison Healey <[email protected]> Co-authored-by: mattermod <[email protected]>

devinbinnie added 21 commits January 14, 2020 15:07

WIP

8ff8449

Barely working sidebar

f4a6a03

Temp fix so you can use the sidebar better

afa305b

Lint and type fixes

5adb942

Merge branch 'feature/channel-sidebar-organization' into channel-side…

266d7d5

…bar-arch

Merge branch 'feature/channel-sidebar-organization' into channel-side…

14daa02

…bar-arch

Unread badge and bolding class added

0cbf460

Split up sidebar channel types into different components

cd55c15

Merge branch 'channel-sidebar-arch' into MM-21907

aa77f2b

Lint/type fixes

8ef3142

WIP

41caeb2

Merge branch 'feature/channel-sidebar-organization' into channel-side…

42244a8

…bar-arch

Merge branch 'feature/channel-sidebar-organization' into channel-side…

ba05fa8

…bar-arch

PR feedback

d4ed465

Merge branch 'channel-sidebar-arch' into MM-21907

d4d4db8

Lint fix

6f9f4d6

Unread indicators and scrolling!

9cb4a9e

Auto scrolling when changing teams/when channel is in view

9711710

Lint and type fixes

61e3aa4

Another type fix

8b120df

Removing unnecessary styling

c6e35cc

devinbinnie added the Do Not Merge/Awaiting PR Awaiting another pull request before merging (e.g. server changes) label Jan 30, 2020

devinbinnie requested review from hmhealey and bradjcoughlin January 30, 2020 21:22

devinbinnie added 3 commits January 30, 2020 16:26

PR feedback

43878ba

Merge branch 'channel-sidebar-arch' of https://github.com/devinbinnie…

f300e49

…/mattermost-webapp into channel-sidebar-arch

Merge branch 'channel-sidebar-arch' into MM-21907

3c48aac

devinbinnie added 2: Dev Review Requires review by a core commiter and removed Do Not Merge/Awaiting PR Awaiting another pull request before merging (e.g. server changes) labels Jan 31, 2020

Merge branch 'feature/channel-sidebar-organization' into MM-21907

c4b76f1

package fix

ad3cf19

devinbinnie mentioned this pull request Feb 3, 2020

[MM-21909] Keyboard shortcuts and a11y-controller classes #4821

Merged

bradjcoughlin reviewed Feb 3, 2020

View reviewed changes

devinbinnie added 2 commits February 5, 2020 11:39

Reverted to regular scrollbars

635acdf

Whoops, left my dumb test styling in :P

27ba44f

devinbinnie requested a review from bradjcoughlin February 5, 2020 16:40

hmhealey suggested changes Feb 5, 2020

View reviewed changes

PR feedback

1280252

devinbinnie requested a review from hmhealey February 5, 2020 20:31

devinbinnie added 2 commits February 5, 2020 15:42

Merge branch 'feature/channel-sidebar-organization' into MM-21907

535ed64

aaa

1f8c247

hmhealey approved these changes Feb 6, 2020

View reviewed changes

devinbinnie mentioned this pull request Feb 6, 2020

[MM-21910] Modal Handling for new Sidebar #4847

Merged

bradjcoughlin approved these changes Feb 6, 2020

View reviewed changes

devinbinnie added 4: Reviews Complete All reviewers have approved the pull request and removed 2: Dev Review Requires review by a core commiter labels Feb 6, 2020

devinbinnie merged commit c83d6cf into mattermost:feature/channel-sidebar-organization Feb 6, 2020

amyblais added Changelog/Not Needed Does not require a changelog entry Docs/Not Needed Does not require documentation labels Mar 18, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MM-21907][MM-21908] Unread Handling and Scrolling #4799

[MM-21907][MM-21908] Unread Handling and Scrolling #4799

devinbinnie commented Jan 30, 2020

bradjcoughlin Feb 3, 2020

bradjcoughlin Feb 3, 2020

hmhealey Feb 5, 2020

bradjcoughlin Feb 3, 2020

devinbinnie Feb 3, 2020

hmhealey Feb 5, 2020

devinbinnie Feb 5, 2020

hmhealey Feb 5, 2020

[MM-21907][MM-21908] Unread Handling and Scrolling #4799

[MM-21907][MM-21908] Unread Handling and Scrolling #4799

Conversation

devinbinnie commented Jan 30, 2020

Summary

Ticket Link

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment