luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Move sidebar Add Board button to bottom

Browse source
This commit is contained in:
Chen-I Lim 2020-12-08 15:00:03 -08:00
parent cd9e34499b
commit 0d5f45b9b4
2 changed files with 79 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
webapp/src/components/sidebar.scss
View file

@ -7,7 +7,7 @@
min-height: 100%;
color: rgb(var(--sidebar-fg));
background-color: rgb(var(--sidebar-bg));
padding: 10px 0;
padding-top: 10px;
&.hidden {
position: absolute;
@ -26,12 +26,12 @@
}
>* {
flex-shrink: 0;
flex: 0 0 auto;
}
.octo-sidebar-list {
flex: 1 1 auto;
overflow-y: auto;
max-height: calc(100% - 78px);
max-width: 250px;
}
@ -135,4 +135,8 @@
stroke: rgba(var(--sidebar-fg), 0.5);
stroke-width: 6px;
}
.Button {
min-height: 30px;
}
}

146
webapp/src/components/sidebar.tsx
View file

@ -181,84 +181,82 @@ class Sidebar extends React.Component<Props, State> {
)
})
}
<br/>
<MenuWrapper>
<Button>
<FormattedMessage
id='Sidebar.add-board'
defaultMessage='+ Add Board'
/>
</Button>
<Menu position='top'>
<Menu.Label>
<b>
<FormattedMessage
id='Sidebar.select-a-template'
defaultMessage='Select a template'
/>
</b>
</Menu.Label>
<Menu.Separator/>
{workspaceTree.boardTemplates.map((boardTemplate) => {
let displayName = boardTemplate.title || intl.formatMessage({id: 'Sidebar.untitled', defaultMessage: 'Untitled'})
if (boardTemplate.icon) {
displayName = `${boardTemplate.icon} ${displayName}`
}
return (
<Menu.Text
key={boardTemplate.id}
id={boardTemplate.id}
name={displayName}
onClick={() => {
this.addBoardFromTemplate(boardTemplate.id)
}}
rightIcon={
<MenuWrapper stopPropagationOnToggle={true}>
<IconButton icon={<OptionsIcon/>}/>
<Menu position='left'>
<Menu.Text
id='edit'
name={intl.formatMessage({id: 'Sidebar.edit-template', defaultMessage: 'Edit'})}
onClick={() => {
this.props.showBoard(boardTemplate.id)
}}
/>
<Menu.Text
icon={<DeleteIcon/>}
id='delete'
name={intl.formatMessage({id: 'Sidebar.delete-template', defaultMessage: 'Delete'})}
onClick={async () => {
await mutator.deleteBlock(boardTemplate, 'delete board template')
}}
/>
</Menu>
</MenuWrapper>
}
/>
)
})}
<Menu.Text
id='empty-template'
name={intl.formatMessage({id: 'Sidebar.empty-board', defaultMessage: 'Empty board'})}
onClick={this.addBoardClicked}
/>
<Menu.Text
id='add-template'
name={intl.formatMessage({id: 'Sidebar.add-template', defaultMessage: '+ New template'})}
onClick={this.addBoardTemplateClicked}
/>
</Menu>
</MenuWrapper>
</div>
<div className='octo-spacer'/>
<MenuWrapper>
<Button>
<FormattedMessage
id='Sidebar.add-board'
defaultMessage='+ Add Board'
/>
</Button>
<Menu position='top'>
<Menu.Label>
<b>
<FormattedMessage
id='Sidebar.select-a-template'
defaultMessage='Select a template'
/>
</b>
</Menu.Label>
<Menu.Separator/>
{workspaceTree.boardTemplates.map((boardTemplate) => {
let displayName = boardTemplate.title || intl.formatMessage({id: 'Sidebar.untitled', defaultMessage: 'Untitled'})
if (boardTemplate.icon) {
displayName = `${boardTemplate.icon} ${displayName}`
}
return (
<Menu.Text
key={boardTemplate.id}
id={boardTemplate.id}
name={displayName}
onClick={() => {
this.addBoardFromTemplate(boardTemplate.id)
}}
rightIcon={
<MenuWrapper stopPropagationOnToggle={true}>
<IconButton icon={<OptionsIcon/>}/>
<Menu position='left'>
<Menu.Text
id='edit'
name={intl.formatMessage({id: 'Sidebar.edit-template', defaultMessage: 'Edit'})}
onClick={() => {
this.props.showBoard(boardTemplate.id)
}}
/>
<Menu.Text
icon={<DeleteIcon/>}
id='delete'
name={intl.formatMessage({id: 'Sidebar.delete-template', defaultMessage: 'Delete'})}
onClick={async () => {
await mutator.deleteBlock(boardTemplate, 'delete board template')
}}
/>
</Menu>
</MenuWrapper>
}
/>
)
})}
<Menu.Text
id='empty-template'
name={intl.formatMessage({id: 'Sidebar.empty-board', defaultMessage: 'Empty board'})}
onClick={this.addBoardClicked}
/>
<Menu.Text
id='add-template'
name={intl.formatMessage({id: 'Sidebar.add-template', defaultMessage: '+ New template'})}
onClick={this.addBoardTemplateClicked}
/>
</Menu>
</MenuWrapper>
<MenuWrapper>
<Button>
<FormattedMessage