self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-02-01 19:14:35 +02:00
Code Issues Releases Activity

Move invite users option to user menu

Browse Source
This commit is contained in:
Chen-I Lim 2021-01-21 10:52:44 -08:00
parent 2bddb0cfc0
commit 98858f9d32
5 changed files with 100 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webapp/src/components/modal.scss
View File

@ -23,6 +23,9 @@
bottom: 25px;
left: 25px;
}
&.bottom-right {
left: 0;
}
}
.hideOnWidescreen {

2
webapp/src/components/modal.tsx
View File

@ -10,7 +10,7 @@ import './modal.scss'
type Props = {
onClose: () => void
intl: IntlShape
position?: 'top'|'bottom'
position?: 'top'|'bottom'|'bottom-right'
}
class Modal extends React.PureComponent<Props> {

2
webapp/src/components/registrationLinkComponent.scss
View File

@ -3,6 +3,8 @@
flex-direction: column;
padding: 5px;
color: rgb(var(--main-fg));
font-weight: normal;
line-height: normal;
> .row {
display: flex;

2
webapp/src/components/registrationLinkComponent.tsx
View File

@ -42,7 +42,7 @@ class RegistrationLinkComponent extends React.PureComponent<Props, State> {
return (
<Modal
position='top'
position='bottom-right'
onClose={this.props.onClose}
>
<div className='RegistrationLinkComponent'>

185
webapp/src/components/sidebar.tsx
View File

@ -284,79 +284,63 @@ class Sidebar extends React.Component<Props, State> {
</Menu>
</MenuWrapper>
<ModalWrapper>
<MenuWrapper>
<Button>
<FormattedMessage
id='Sidebar.settings'
defaultMessage='Settings'
/>
</Button>
<Menu position='top'>
<Menu.Text
id='invite'
name={intl.formatMessage({id: 'Sidebar.invite-users', defaultMessage: 'Invite Users'})}
onClick={async () => {
this.setState({showRegistrationLinkDialog: true})
}}
/>
<Menu.Text
id='import'
name={intl.formatMessage({id: 'Sidebar.import-archive', defaultMessage: 'Import archive'})}
onClick={async () => Archiver.importFullArchive()}
/>
<Menu.Text
id='export'
name={intl.formatMessage({id: 'Sidebar.export-archive', defaultMessage: 'Export archive'})}
onClick={async () => Archiver.exportFullArchive()}
/>
<Menu.SubMenu
id='lang'
name={intl.formatMessage({id: 'Sidebar.set-language', defaultMessage: 'Set language'})}
position='top'
>
<Menu.Text
id='english-lang'
name={intl.formatMessage({id: 'Sidebar.english', defaultMessage: 'English'})}
onClick={async () => this.props.setLanguage('en')}
/>
<Menu.Text
id='spanish-lang'
name={intl.formatMessage({id: 'Sidebar.spanish', defaultMessage: 'Spanish'})}
onClick={async () => this.props.setLanguage('es')}
/>
</Menu.SubMenu>
<Menu.SubMenu
id='theme'
name={intl.formatMessage({id: 'Sidebar.set-theme', defaultMessage: 'Set theme'})}
position='top'
>
<Menu.Text
id='default-theme'
name={intl.formatMessage({id: 'Sidebar.default-theme', defaultMessage: 'Default theme'})}
onClick={async () => setTheme(defaultTheme)}
/>
<Menu.Text
id='dark-theme'
name={intl.formatMessage({id: 'Sidebar.dark-theme', defaultMessage: 'Dark theme'})}
onClick={async () => setTheme(darkTheme)}
/>
<Menu.Text
id='light-theme'
name={intl.formatMessage({id: 'Sidebar.light-theme', defaultMessage: 'Light theme'})}
onClick={async () => setTheme(lightTheme)}
/>
</Menu.SubMenu>
</Menu>
</MenuWrapper>
{this.state.showRegistrationLinkDialog &&
<RegistrationLinkComponent
onClose={() => {
this.setState({showRegistrationLinkDialog: false})
}}
<MenuWrapper>
<Button>
<FormattedMessage
id='Sidebar.settings'
defaultMessage='Settings'
/>
}
</ModalWrapper>
</Button>
<Menu position='top'>
<Menu.Text
id='import'
name={intl.formatMessage({id: 'Sidebar.import-archive', defaultMessage: 'Import archive'})}
onClick={async () => Archiver.importFullArchive()}
/>
<Menu.Text
id='export'
name={intl.formatMessage({id: 'Sidebar.export-archive', defaultMessage: 'Export archive'})}
onClick={async () => Archiver.exportFullArchive()}
/>
<Menu.SubMenu
id='lang'
name={intl.formatMessage({id: 'Sidebar.set-language', defaultMessage: 'Set language'})}
position='top'
>
<Menu.Text
id='english-lang'
name={intl.formatMessage({id: 'Sidebar.english', defaultMessage: 'English'})}
onClick={async () => this.props.setLanguage('en')}
/>
<Menu.Text
id='spanish-lang'
name={intl.formatMessage({id: 'Sidebar.spanish', defaultMessage: 'Spanish'})}
onClick={async () => this.props.setLanguage('es')}
/>
</Menu.SubMenu>
<Menu.SubMenu
id='theme'
name={intl.formatMessage({id: 'Sidebar.set-theme', defaultMessage: 'Set theme'})}
position='top'
>
<Menu.Text
id='default-theme'
name={intl.formatMessage({id: 'Sidebar.default-theme', defaultMessage: 'Default theme'})}
onClick={async () => setTheme(defaultTheme)}
/>
<Menu.Text
id='dark-theme'
name={intl.formatMessage({id: 'Sidebar.dark-theme', defaultMessage: 'Dark theme'})}
onClick={async () => setTheme(darkTheme)}
/>
<Menu.Text
id='light-theme'
name={intl.formatMessage({id: 'Sidebar.light-theme', defaultMessage: 'Light theme'})}
onClick={async () => setTheme(lightTheme)}
/>
</Menu.SubMenu>
</Menu>
</MenuWrapper>
</div>
)
}
@ -365,28 +349,45 @@ class Sidebar extends React.Component<Props, State> {
const {intl} = this.props
return (
<MenuWrapper>
<Button>
{user.username}
</Button>
<Menu>
<Menu.Text
id='logout'
name={intl.formatMessage({id: 'Sidebar.logout', defaultMessage: 'Log out'})}
onClick={async () => {
octoClient.logout()
window.location.href = '/login'
<ModalWrapper>
<MenuWrapper>
<Button>
{user.username}
</Button>
<Menu>
<Menu.Text
id='logout'
name={intl.formatMessage({id: 'Sidebar.logout', defaultMessage: 'Log out'})}
onClick={async () => {
octoClient.logout()
window.location.href = '/login'
}}
/>
<Menu.Text
id='changePassword'
name={intl.formatMessage({id: 'Sidebar.changePassword', defaultMessage: 'Change password'})}
onClick={async () => {
window.location.href = '/change_password'
}}
/>
<Menu.Text
id='invite'
name={intl.formatMessage({id: 'Sidebar.invite-users', defaultMessage: 'Invite Users'})}
onClick={async () => {
this.setState({showRegistrationLinkDialog: true})
}}
/>
</Menu>
</MenuWrapper>
{this.state.showRegistrationLinkDialog &&
<RegistrationLinkComponent
onClose={() => {
this.setState({showRegistrationLinkDialog: false})
}}
/>
<Menu.Text
id='changePassword'
name={intl.formatMessage({id: 'Sidebar.changePassword', defaultMessage: 'Change password'})}
onClick={async () => {
window.location.href = '/change_password'
}}
/>
</Menu>
</MenuWrapper>
}
</ModalWrapper>
)
}