From 7649ef2208e5b64e3a300c2933afb071522b4104 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Tue, 17 Nov 2020 18:53:29 +0100
Subject: [PATCH] make the board list of the sidebar scrollable

---
 webapp/src/components/sidebar.scss |   7 +-
 webapp/src/components/sidebar.tsx  | 192 +++++++++++++++--------------
 2 files changed, 103 insertions(+), 96 deletions(-)

diff --git a/webapp/src/components/sidebar.scss b/webapp/src/components/sidebar.scss
index 2e6490ad1..36c2be062 100644
--- a/webapp/src/components/sidebar.scss
+++ b/webapp/src/components/sidebar.scss
@@ -8,7 +8,6 @@
 	color: rgb(var(--sidebar-fg));
 	background-color: rgb(var(--sidebar-bg));
     padding: 10px 0;
-    overflow-y: scroll;
 
     &.hidden {
         position: absolute;
@@ -30,6 +29,12 @@
         flex-shrink: 0;
     }
 
+    .octo-sidebar-list {
+        overflow-y: auto;
+        max-height: calc(100% - 78px);
+        max-width: 250px;
+    }
+
     .octo-sidebar-header {
         display: flex;
         flex-direction: row;
diff --git a/webapp/src/components/sidebar.tsx b/webapp/src/components/sidebar.tsx
index 24a82bc85..193edc5dc 100644
--- a/webapp/src/components/sidebar.tsx
+++ b/webapp/src/components/sidebar.tsx
@@ -87,111 +87,113 @@ class Sidebar extends React.Component<Props, State> {
                         icon={<HideSidebarIcon/>}
                     />
                 </div>
-                {
-                    boards.map((board) => {
-                        const displayTitle: string = board.title || intl.formatMessage({id: 'Sidebar.untitled-board', defaultMessage: '(Untitled Board)'})
-                        const boardViews = views.filter((view) => view.parentId === board.id)
-                        return (
-                            <div key={board.id}>
-                                <div className={'octo-sidebar-item ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}>
-                                    <IconButton
-                                        icon={<DisclosureTriangle/>}
-                                        onClick={() => {
-                                            const newCollapsedBoards = {...this.state.collapsedBoards}
-                                            newCollapsedBoards[board.id] = !newCollapsedBoards[board.id]
-                                            this.setState({collapsedBoards: newCollapsedBoards})
-                                        }}
-                                    />
-                                    <div
-                                        className='octo-sidebar-title'
-                                        onClick={() => {
-                                            this.boardClicked(board)
-                                        }}
-                                        title={displayTitle}
-                                    >
-                                        {board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
-                                    </div>
-                                    <MenuWrapper>
-                                        <IconButton icon={<OptionsIcon/>}/>
-                                        <Menu position='left'>
-                                            <Menu.Text
-                                                id='deleteBoard'
-                                                name={intl.formatMessage({id: 'Sidebar.delete-board', defaultMessage: 'Delete Board'})}
-                                                icon={<DeleteIcon/>}
-                                                onClick={async () => {
-                                                    const nextBoardId = boards.length > 1 ? boards.find((o) => o.id !== board.id)?.id : undefined
-                                                    mutator.deleteBlock(
-                                                        board,
-                                                        'delete block',
-                                                        async () => {
-                                                            nextBoardId && this.props.showBoard(nextBoardId!)
-                                                        },
-                                                        async () => {
-                                                            this.props.showBoard(board.id)
-                                                        },
-                                                    )
-                                                }}
-                                            />
-
-                                            <Menu.Text
-                                                id='duplicateBoard'
-                                                name={intl.formatMessage({id: 'Sidebar.duplicate-board', defaultMessage: 'Duplicate Board'})}
-                                                icon={<DuplicateIcon/>}
-                                                onClick={async () => {
-                                                    await mutator.duplicateBoard(
-                                                        board.id,
-                                                        'duplicate board',
-                                                        async (newBoardId) => {
-                                                            newBoardId && this.props.showBoard(newBoardId)
-                                                        },
-                                                        async () => {
-                                                            this.props.showBoard(board.id)
-                                                        },
-                                                    )
-                                                }}
-                                            />
-                                        </Menu>
-                                    </MenuWrapper>
-                                </div>
-                                {!collapsedBoards[board.id] && boardViews.length === 0 &&
-                                    <div className='octo-sidebar-item subitem no-views'>
-                                        <FormattedMessage
-                                            id='Sidebar.no-views-in-board'
-                                            defaultMessage='No pages inside'
+                <div className='octo-sidebar-list'>
+                    {
+                        boards.map((board) => {
+                            const displayTitle: string = board.title || intl.formatMessage({id: 'Sidebar.untitled-board', defaultMessage: '(Untitled Board)'})
+                            const boardViews = views.filter((view) => view.parentId === board.id)
+                            return (
+                                <div key={board.id}>
+                                    <div className={'octo-sidebar-item ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}>
+                                        <IconButton
+                                            icon={<DisclosureTriangle/>}
+                                            onClick={() => {
+                                                const newCollapsedBoards = {...this.state.collapsedBoards}
+                                                newCollapsedBoards[board.id] = !newCollapsedBoards[board.id]
+                                                this.setState({collapsedBoards: newCollapsedBoards})
+                                            }}
                                         />
-                                    </div>}
-                                {!collapsedBoards[board.id] && boardViews.map((view) => (
-                                    <div
-                                        key={view.id}
-                                        className='octo-sidebar-item subitem'
-                                    >
-                                        <DotIcon/>
                                         <div
                                             className='octo-sidebar-title'
                                             onClick={() => {
-                                                this.viewClicked(board, view)
+                                                this.boardClicked(board)
                                             }}
-                                            title={view.title || intl.formatMessage({id: 'Sidebar.untitled-view', defaultMessage: '(Untitled View)'})}
+                                            title={displayTitle}
                                         >
-                                            {view.title || intl.formatMessage({id: 'Sidebar.untitled-view', defaultMessage: '(Untitled View)'})}
+                                            {board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
                                         </div>
+                                        <MenuWrapper>
+                                            <IconButton icon={<OptionsIcon/>}/>
+                                            <Menu position='left'>
+                                                <Menu.Text
+                                                    id='deleteBoard'
+                                                    name={intl.formatMessage({id: 'Sidebar.delete-board', defaultMessage: 'Delete Board'})}
+                                                    icon={<DeleteIcon/>}
+                                                    onClick={async () => {
+                                                        const nextBoardId = boards.length > 1 ? boards.find((o) => o.id !== board.id)?.id : undefined
+                                                        mutator.deleteBlock(
+                                                            board,
+                                                            'delete block',
+                                                            async () => {
+                                                                nextBoardId && this.props.showBoard(nextBoardId!)
+                                                            },
+                                                            async () => {
+                                                                this.props.showBoard(board.id)
+                                                            },
+                                                        )
+                                                    }}
+                                                />
+
+                                                <Menu.Text
+                                                    id='duplicateBoard'
+                                                    name={intl.formatMessage({id: 'Sidebar.duplicate-board', defaultMessage: 'Duplicate Board'})}
+                                                    icon={<DuplicateIcon/>}
+                                                    onClick={async () => {
+                                                        await mutator.duplicateBoard(
+                                                            board.id,
+                                                            'duplicate board',
+                                                            async (newBoardId) => {
+                                                                newBoardId && this.props.showBoard(newBoardId)
+                                                            },
+                                                            async () => {
+                                                                this.props.showBoard(board.id)
+                                                            },
+                                                        )
+                                                    }}
+                                                />
+                                            </Menu>
+                                        </MenuWrapper>
                                     </div>
-                                ))}
-                            </div>
-                        )
-                    })
-                }
+                                    {!collapsedBoards[board.id] && boardViews.length === 0 &&
+                                        <div className='octo-sidebar-item subitem no-views'>
+                                            <FormattedMessage
+                                                id='Sidebar.no-views-in-board'
+                                                defaultMessage='No pages inside'
+                                            />
+                                        </div>}
+                                    {!collapsedBoards[board.id] && boardViews.map((view) => (
+                                        <div
+                                            key={view.id}
+                                            className='octo-sidebar-item subitem'
+                                        >
+                                            <DotIcon/>
+                                            <div
+                                                className='octo-sidebar-title'
+                                                onClick={() => {
+                                                    this.viewClicked(board, view)
+                                                }}
+                                                title={view.title || intl.formatMessage({id: 'Sidebar.untitled-view', defaultMessage: '(Untitled View)'})}
+                                            >
+                                                {view.title || intl.formatMessage({id: 'Sidebar.untitled-view', defaultMessage: '(Untitled View)'})}
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            )
+                        })
+                    }
 
-                <br/>
+                    <br/>
 
-                <Button
-                    onClick={this.addBoardClicked}
-                >
-                    <FormattedMessage
-                        id='Sidebar.add-board'
-                        defaultMessage='+ Add Board'
-                    />
-                </Button>
+                    <Button
+                        onClick={this.addBoardClicked}
+                    >
+                        <FormattedMessage
+                            id='Sidebar.add-board'
+                            defaultMessage='+ Add Board'
+                        />
+                    </Button>
+                </div>
 
                 <div className='octo-spacer'/>