make the board list of the sidebar scrollable
This commit is contained in:
Jesús Espino
parent
b1b6d5b070
commit
7649ef2208
2 changed files with 103 additions and 96 deletions
|
|
@ -8,7 +8,6 @@
|
||||||
color: rgb(var(--sidebar-fg));
|
color: rgb(var(--sidebar-fg));
|
||||||
background-color: rgb(var(--sidebar-bg));
|
background-color: rgb(var(--sidebar-bg));
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
overflow-y: scroll;
|
|
||||||
|
|
||||||
&.hidden {
|
&.hidden {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -30,6 +29,12 @@
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.octo-sidebar-list {
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: calc(100% - 78px);
|
||||||
|
max-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
.octo-sidebar-header {
|
.octo-sidebar-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
|
||||||
|
|
@ -87,111 +87,113 @@ class Sidebar extends React.Component<Props, State> {
|
||||||
icon={<HideSidebarIcon/>}
|
icon={<HideSidebarIcon/>}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{
|
<div className='octo-sidebar-list'>
|
||||||
boards.map((board) => {
|
{
|
||||||
const displayTitle: string = board.title || intl.formatMessage({id: 'Sidebar.untitled-board', defaultMessage: '(Untitled Board)'})
|
boards.map((board) => {
|
||||||
const boardViews = views.filter((view) => view.parentId === board.id)
|
const displayTitle: string = board.title || intl.formatMessage({id: 'Sidebar.untitled-board', defaultMessage: '(Untitled Board)'})
|
||||||
return (
|
const boardViews = views.filter((view) => view.parentId === board.id)
|
||||||
<div key={board.id}>
|
return (
|
||||||
<div className={'octo-sidebar-item ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}>
|
<div key={board.id}>
|
||||||
<IconButton
|
<div className={'octo-sidebar-item ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}>
|
||||||
icon={<DisclosureTriangle/>}
|
<IconButton
|
||||||
onClick={() => {
|
icon={<DisclosureTriangle/>}
|
||||||
const newCollapsedBoards = {...this.state.collapsedBoards}
|
onClick={() => {
|
||||||
newCollapsedBoards[board.id] = !newCollapsedBoards[board.id]
|
const newCollapsedBoards = {...this.state.collapsedBoards}
|
||||||
this.setState({collapsedBoards: newCollapsedBoards})
|
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>}
|
|
||||||
{!collapsedBoards[board.id] && boardViews.map((view) => (
|
|
||||||
<div
|
|
||||||
key={view.id}
|
|
||||||
className='octo-sidebar-item subitem'
|
|
||||||
>
|
|
||||||
<DotIcon/>
|
|
||||||
<div
|
<div
|
||||||
className='octo-sidebar-title'
|
className='octo-sidebar-title'
|
||||||
onClick={() => {
|
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>
|
</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>
|
<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
|
<Button
|
||||||
onClick={this.addBoardClicked}
|
onClick={this.addBoardClicked}
|
||||||
>
|
>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id='Sidebar.add-board'
|
id='Sidebar.add-board'
|
||||||
defaultMessage='+ Add Board'
|
defaultMessage='+ Add Board'
|
||||||
/>
|
/>
|
||||||
</Button>
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className='octo-spacer'/>
|
<div className='octo-spacer'/>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue