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

frontend: Small UI improvements

Browse source
This commit is contained in:
Paul Bienkowski 2021-02-26 22:50:33 +01:00
parent c53796f9b6
commit 40882549f7
4 changed files with 19 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/pages/TrackEditor.tsx
View file

@ -74,8 +74,8 @@ const TrackEditor = connect((state) => ({login: state.login}))(function TrackEdi
<Page> <Page>
<Grid centered relaxed divided> <Grid centered relaxed divided>
<Grid.Row> <Grid.Row>
<Grid.Column width={8}> <Grid.Column width={10}>
<h2>Edit track</h2> <h2>Edit {track ? (track.title || 'Unnamed track') : 'track'}</h2>
<Form loading={loading} key={track?.slug} onSubmit={onSubmit}> <Form loading={loading} key={track?.slug} onSubmit={onSubmit}>
<Ref innerRef={findInput(register)}> <Ref innerRef={findInput(register)}>
<Form.Input label="Title" name="title" defaultValue={track?.title} style={{fontSize: '120%'}} /> <Form.Input label="Title" name="title" defaultValue={track?.title} style={{fontSize: '120%'}} />
@ -135,7 +135,7 @@ const TrackEditor = connect((state) => ({login: state.login}))(function TrackEdi
<Button type="submit">Save</Button> <Button type="submit">Save</Button>
</Form> </Form>
</Grid.Column> </Grid.Column>
<Grid.Column width={4}> <Grid.Column width={6}>
<h2>Danger zone</h2> <h2>Danger zone</h2>
<p> <p>
You can remove this track from your account and the portal if you like. However, if at any point you have You can remove this track from your account and the portal if you like. However, if at any point you have

5
frontend/src/pages/TrackPage/TrackComments.tsx
View file

@ -1,10 +1,9 @@
import React from 'react' import React from 'react'
import {Segment, Form, Button, Loader, Header, Comment} from 'semantic-ui-react' import {Message, Segment, Form, Button, Loader, Header, Comment} from 'semantic-ui-react'
import Markdown from 'react-markdown' import Markdown from 'react-markdown'
import {FormattedDate} from 'components' import {FormattedDate} from 'components'
function CommentForm({onSubmit}) { function CommentForm({onSubmit}) {
const [body, setBody] = React.useState('') const [body, setBody] = React.useState('')
@ -60,6 +59,8 @@ export default function TrackComments({comments, onSubmit, onDelete, login, hide
</Comment> </Comment>
))} ))}
{comments != null && !comments.length && <Message>Nobody commented... yet</Message>}
{login && comments != null && <CommentForm onSubmit={onSubmit} />} {login && comments != null && <CommentForm onSubmit={onSubmit} />}
</Comment.Group> </Comment.Group>
</Segment> </Segment>

2
frontend/src/pages/TrackPage/index.tsx
View file

@ -136,7 +136,7 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage(
<Segment> <Segment>
{track && ( {track && (
<> <>
<Header as="h1">{track.title}</Header> <Header as="h1">{track.title || 'Unnamed track'}</Header>
<TrackDetails {...{track, trackData, isAuthor}} /> <TrackDetails {...{track, trackData, isAuthor}} />
{isAuthor && <TrackActions {...{slug}} />} {isAuthor && <TrackActions {...{slug}} />}
</> </>

35
frontend/src/pages/UploadPage.tsx
View file

@ -85,7 +85,7 @@ function FileUploadStatus({
return ( return (
<span> <span>
<Loader inline size="mini" active /> {progress < 1 ? (progress * 100).toFixed(0) + ' %' : 'Processing...'} <Loader inline size="mini" active /> {progress < 1 ? `Uploading ${(progress * 100).toFixed(0)}%` : 'Processing...'}
</span> </span>
) )
} }
@ -149,9 +149,8 @@ export default function UploadPage() {
<Table.Row> <Table.Row>
<Table.HeaderCell>Filename</Table.HeaderCell> <Table.HeaderCell>Filename</Table.HeaderCell>
<Table.HeaderCell>Size</Table.HeaderCell> <Table.HeaderCell>Size</Table.HeaderCell>
<Table.HeaderCell>Status</Table.HeaderCell> <Table.HeaderCell>Status / Title</Table.HeaderCell>
<Table.HeaderCell></Table.HeaderCell> <Table.HeaderCell colSpan={2}></Table.HeaderCell>
<Table.HeaderCell></Table.HeaderCell>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
@ -164,16 +163,6 @@ export default function UploadPage() {
</Table.Cell> </Table.Cell>
<Table.Cell>{formatFileSize(size)}</Table.Cell> <Table.Cell>{formatFileSize(size)}</Table.Cell>
<Table.Cell> <Table.Cell>
{result ? (
<>
<Icon name="check" /> Uploaded
</>
) : (
<FileUploadStatus {...{id, file}} onComplete={onCompleteFileUpload} />
)}
</Table.Cell>
<Table.Cell>
{/* <pre>{JSON.stringify(result || null, null, 2)}</pre> */}
{result?.errors ? ( {result?.errors ? (
<List> <List>
{_.sortBy(Object.entries(result.errors)) {_.sortBy(Object.entries(result.errors))
@ -185,17 +174,17 @@ export default function UploadPage() {
</List.Item> </List.Item>
))} ))}
</List> </List>
) : null} ) : result ? (
</Table.Cell>
<Table.Cell>
{result?.track ? (
<> <>
<Link to={`/tracks/${result.track.slug}`}> <Icon name="check" /> {result.track?.title || 'Unnamed track'}
<Button size="small" icon="arrow right" />
</Link>
<Button size="small" icon="trash" onClick={() => onDeleteTrack(result.track.slug)} />
</> </>
) : null} ) : (
<FileUploadStatus {...{id, file}} onComplete={onCompleteFileUpload} />
)}
</Table.Cell>
<Table.Cell>{result?.track ? <Link to={`/tracks/${result.track.slug}`}>Show</Link> : null}</Table.Cell>
<Table.Cell>
{result?.track ? <Link to={`/tracks/${result.track.slug}/edit`}>Edit</Link> : null}
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
))} ))}