pub-solar/obs-portal
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages1 Wiki Activity Actions

frontend: More compact menu

Browse source
This commit is contained in:
Paul Bienkowski 2021-05-09 20:33:57 +02:00
parent a4756873e5
commit 3d8238307a
2 changed files with 24 additions and 32 deletions
frontend/src
App.js
pages
TracksPage.tsx

30
frontend/src/App.js
View file

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {List, Grid, Container, Menu, Icon, Button, Header} from 'semantic-ui-react' import {List, Grid, Container, Menu, Icon, Button, Header, Dropdown} from 'semantic-ui-react'
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom' import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom'
import config from 'config.json' import config from 'config.json'
@ -32,30 +32,24 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
Tracks Tracks
</Link> </Link>
{login ? (
<Menu.Menu position="right"> <Menu.Menu position="right">
<Link to="/upload" component={Menu.Item}> {login ? (
<Button compact primary> <Dropdown item trigger={
<Icon name="cloud upload" />
Upload
</Button>
</Link>
<Link to="/settings" component={Menu.Item}>
<Avatar user={login} className={styles.avatar} /> <Avatar user={login} className={styles.avatar} />
</Link> }>
<Dropdown.Menu>
<Link component={Menu.Item} to="/logout"> <Link to="/upload" component={Dropdown.Item} icon="cloud upload" text="Upload tracks" />
<Button compact>Logout</Button> <Link to="/settings" component={Dropdown.Item} icon="cog" text="Settings" />
</Link> <Dropdown.Divider />
</Menu.Menu> <Link to="/logout" component={Dropdown.Item} icon="sign-out" text="Logout" />
</Dropdown.Menu>
</Dropdown>
) : ( ) : (
<Menu.Menu>
<Menu.Item> <Menu.Item>
<LoginButton as="a" compact /> <LoginButton as="a" compact />
</Menu.Item> </Menu.Item>
</Menu.Menu>
)} )}
</Menu.Menu>
</Container> </Container>
</Menu> </Menu>

26
frontend/src/pages/TracksPage.tsx
View file

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {Message, Item, Tab, Loader, Pagination, Icon} from 'semantic-ui-react' import {Button, Message, Item, Menu, Loader, Pagination, Icon} from 'semantic-ui-react'
import {useObservable} from 'rxjs-hooks' import {useObservable} from 'rxjs-hooks'
import {Link, useHistory, useRouteMatch} from 'react-router-dom' import {Link, useHistory, useRouteMatch} from 'react-router-dom'
import {of, from, concat} from 'rxjs' import {of, from, concat} from 'rxjs'
@ -14,25 +14,23 @@ import {useQueryParam} from 'query'
function TracksPageTabs() { function TracksPageTabs() {
const history = useHistory() const history = useHistory()
const panes = React.useMemo(
() => [
{menuItem: 'Public tracks', url: '/tracks'},
{menuItem: 'My tracks', url: '/my/tracks'},
],
[]
)
const onTabChange = React.useCallback( const onClick = React.useCallback(
(e, data) => { (e, data) => {
history.push(panes[data.activeIndex].url) history.push(data.name)
}, },
[history, panes] [history]
) )
const isOwnTracksPage = useRouteMatch('/my/tracks') const isOwnTracksPage = Boolean(useRouteMatch('/my/tracks'))
const activeIndex = isOwnTracksPage ? 1 : 0
return <Tab menu={{secondary: true, pointing: true}} {...{panes, onTabChange, activeIndex}} /> return (
<Menu pointing secondary>
<Menu.Item name="/tracks" active={!isOwnTracksPage} {...{onClick}}>Tracks</Menu.Item>
<Menu.Item name="/my/tracks" active={isOwnTracksPage} {...{onClick}} />
<Menu.Item name="/upload" position='right' {...{onClick}}><Button color='green' compact size='small'>Upload</Button></Menu.Item>
</Menu>
)
} }
function TrackList({privateTracks}: {privateTracks: boolean}) { function TrackList({privateTracks}: {privateTracks: boolean}) {