Move sidebar Add Board button to bottom
This commit is contained in:
Chen-I Lim
parent
cd9e34499b
commit
0d5f45b9b4
2 changed files with 79 additions and 77 deletions
|
|
@ -7,7 +7,7 @@
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
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-top: 10px;
|
||||||
|
|
||||||
&.hidden {
|
&.hidden {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -26,12 +26,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
>* {
|
>* {
|
||||||
flex-shrink: 0;
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.octo-sidebar-list {
|
.octo-sidebar-list {
|
||||||
|
flex: 1 1 auto;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: calc(100% - 78px);
|
|
||||||
max-width: 250px;
|
max-width: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -135,4 +135,8 @@
|
||||||
stroke: rgba(var(--sidebar-fg), 0.5);
|
stroke: rgba(var(--sidebar-fg), 0.5);
|
||||||
stroke-width: 6px;
|
stroke-width: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Button {
|
||||||
|
min-height: 30px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
<div className='octo-spacer'/>
|
<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>
|
<MenuWrapper>
|
||||||
<Button>
|
<Button>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue