mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-13 10:56:24 +00:00
Improve order dividers, status tooltips
This commit is contained in:
Reckless_Satoshi
parent
260c9ec335
commit
26bccdf9df
@ -1,5 +1,5 @@
|
||||
import React, { Component } from "react";
|
||||
import { Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material";
|
||||
import { Tooltip, Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar, IconButton} from "@mui/material";
|
||||
import { Link } from 'react-router-dom'
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
import MediaQuery from 'react-responsive'
|
||||
@ -79,7 +79,7 @@ export default class BookPage extends Component {
|
||||
({id: order.id,
|
||||
avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
|
||||
robosat: order.maker_nick,
|
||||
type: order.type ? "Sell": "Buy",
|
||||
type: order.type ? "Seller": "Buyer",
|
||||
amount: parseFloat(parseFloat(order.amount).toFixed(4)),
|
||||
currency: this.getCurrencyCode(order.currency),
|
||||
payment_method: order.payment_method,
|
||||
@ -108,7 +108,7 @@ export default class BookPage extends Component {
|
||||
</ListItemButton>
|
||||
);
|
||||
} },
|
||||
{ field: 'type', headerName: 'Type', width: 60 },
|
||||
{ field: 'type', headerName: 'Is', width: 60 },
|
||||
{ field: 'amount', headerName: 'Amount', type: 'number', width: 80 },
|
||||
{ field: 'currency', headerName: 'Currency', width: 100,
|
||||
renderCell: (params) => {return (
|
||||
@ -135,14 +135,14 @@ export default class BookPage extends Component {
|
||||
|
||||
bookListTablePhone=()=>{
|
||||
return (
|
||||
<div style={{ height: 425, width: '100%' }}>
|
||||
<div style={{ height: 422, width: '100%' }}>
|
||||
<DataGrid
|
||||
rows={
|
||||
this.state.orders.map((order) =>
|
||||
({id: order.id,
|
||||
avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
|
||||
robosat: order.maker_nick,
|
||||
type: order.type ? "Sell": "Buy",
|
||||
type: order.type ? "Seller": "Buyer",
|
||||
amount: parseFloat(parseFloat(order.amount).toFixed(4)),
|
||||
currency: this.getCurrencyCode(order.currency),
|
||||
payment_method: order.payment_method,
|
||||
@ -155,9 +155,8 @@ export default class BookPage extends Component {
|
||||
// { field: 'id', headerName: 'ID', width: 40 },
|
||||
{ field: 'robosat', headerName: 'Robot', width: 80,
|
||||
renderCell: (params) => {return (
|
||||
<ListItemButton style={{ cursor: "pointer" }}>
|
||||
<ListItemAvatar>
|
||||
<div style={{ width: 48, height: 48 }}>
|
||||
<Tooltip placement="right" enterTouchDelay="0" title={params.row.robosat+" ("+params.row.type+")"}>
|
||||
<div style={{ width: 45, height: 45 }}>
|
||||
<Image className='bookAvatar'
|
||||
disableError='true'
|
||||
disableSpinner='true'
|
||||
@ -166,15 +165,16 @@ export default class BookPage extends Component {
|
||||
src={params.row.avatar}
|
||||
/>
|
||||
</div>
|
||||
</ListItemAvatar>
|
||||
</ListItemButton>
|
||||
</Tooltip>
|
||||
);
|
||||
} },
|
||||
{ field: 'type', headerName: 'Type', width: 60, hide:'true'},
|
||||
{ field: 'type', headerName: 'Is', width: 60, hide:'true'},
|
||||
{ field: 'amount', headerName: 'Amount', type: 'number', width: 80 },
|
||||
{ field: 'currency', headerName: 'Currency', width: 100,
|
||||
renderCell: (params) => {return (
|
||||
<Tooltip placement="left" enterTouchDelay="0" title={params.row.payment_method}>
|
||||
<div style={{ cursor: "pointer" }}>{params.row.currency + " " + getFlags(params.row.currency)}</div>
|
||||
</Tooltip>
|
||||
)} },
|
||||
{ field: 'payment_method', headerName: 'Payment Method', width: 180, hide:'true'},
|
||||
{ field: 'price', headerName: 'Price', type: 'number', width: 140, hide:'true',
|
||||
@ -183,7 +183,9 @@ export default class BookPage extends Component {
|
||||
)} },
|
||||
{ field: 'premium', headerName: 'Premium', type: 'number', width: 85,
|
||||
renderCell: (params) => {return (
|
||||
<Tooltip placement="left" enterTouchDelay="0" title={this.pn(params.row.price) + " " +params.row.currency+ "/BTC" }>
|
||||
<div style={{ cursor: "pointer" }}>{parseFloat(parseFloat(params.row.premium).toFixed(4))+"%" }</div>
|
||||
</Tooltip>
|
||||
)} },
|
||||
]}
|
||||
|
||||
|
||||
@ -484,10 +484,10 @@ bottomBarPhone =()=>{
|
||||
<div style={{display: this.props.avatarLoaded ? '':'none'}}>
|
||||
<Tooltip open={(this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false}
|
||||
title="You have an active order">
|
||||
<IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 22, right: 8}} >
|
||||
<IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 17, right: 8}} >
|
||||
<Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
|
||||
<Avatar className='phoneFlippedSmallAvatar'
|
||||
sx={{ width: 65, height:65 }}
|
||||
sx={{ width: 55, height:55 }}
|
||||
alt={this.props.nickname}
|
||||
imgProps={{
|
||||
onLoad:() => this.props.setAppState({avatarLoaded: true}),
|
||||
|
||||
@ -184,7 +184,7 @@ export default class MakerPage extends Component {
|
||||
</Grid>
|
||||
<Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
|
||||
<div style={{maxWidth:140}}>
|
||||
<Tooltip enterTouchDelay="0" title="Amount of fiat to exchange for bitcoin">
|
||||
<Tooltip placement="top" enterTouchDelay="0" title="Amount of fiat to exchange for bitcoin">
|
||||
<TextField
|
||||
error={this.state.amount <= 0}
|
||||
helperText={this.state.amount <= 0 ? 'Invalid' : null}
|
||||
@ -217,7 +217,7 @@ export default class MakerPage extends Component {
|
||||
</Grid>
|
||||
<br/>
|
||||
<Grid item xs={12} align="center">
|
||||
<Tooltip enterTouchDelay="0" title="Input your prefered payment methods">
|
||||
<Tooltip placement="top" enterTouchDelay="0" title="Enter your prefered payment methods">
|
||||
<TextField
|
||||
sx={{width:240}}
|
||||
label="Payment Method(s)"
|
||||
@ -242,7 +242,7 @@ export default class MakerPage extends Component {
|
||||
</div>
|
||||
</FormHelperText>
|
||||
<RadioGroup row defaultValue="relative">
|
||||
<Tooltip enterTouchDelay="0" title="Let the price move with the market">
|
||||
<Tooltip placement="top" enterTouchDelay="0" title="Let the price move with the market">
|
||||
<FormControlLabel
|
||||
value="relative"
|
||||
control={<Radio color="primary"/>}
|
||||
@ -251,7 +251,7 @@ export default class MakerPage extends Component {
|
||||
onClick={this.handleClickRelative}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip enterTouchDelay="0" title="Set a fix amount of satoshis">
|
||||
<Tooltip placement="top" enterTouchDelay="0" title="Set a fix amount of satoshis">
|
||||
<FormControlLabel
|
||||
value="explicit"
|
||||
control={<Radio color="secondary"/>}
|
||||
@ -304,18 +304,19 @@ export default class MakerPage extends Component {
|
||||
</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={12} align="center">
|
||||
<Tooltip enterTouchDelay="0" title="You must fill the form correctly">
|
||||
<div><Button disabled={this.state.amount == null ||
|
||||
this.state.amount <= 0 ||
|
||||
(this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) ||
|
||||
(!this.state.is_explicit & this.state.badPremium != null)
|
||||
}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
onClick={this.handleCreateOfferButtonPressed} >
|
||||
Create Order
|
||||
</Button></div>
|
||||
</Tooltip>
|
||||
{/* conditions to disable the make button */}
|
||||
{(this.state.amount == null ||
|
||||
this.state.amount <= 0 ||
|
||||
(this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) ||
|
||||
(!this.state.is_explicit & this.state.badPremium != null))
|
||||
?
|
||||
<Tooltip enterTouchDelay="0" title="You must fill the form correctly">
|
||||
<div><Button disabled color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed} >Create Order</Button></div>
|
||||
</Tooltip>
|
||||
:
|
||||
<Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed} >Create Order</Button>
|
||||
}
|
||||
|
||||
</Grid>
|
||||
<Grid item xs={12} align="center">
|
||||
{this.state.badRequest ?
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component } from "react";
|
||||
import { Badge, Tab, Tabs, Alert, Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
|
||||
import { Chip, Tooltip, Badge, Tab, Tabs, Alert, Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
|
||||
import Countdown, { zeroPad, calcTimeDelta } from 'react-countdown';
|
||||
import MediaQuery from 'react-responsive'
|
||||
|
||||
@ -161,7 +161,10 @@ export default class OrderPage extends Component {
|
||||
// Render a completed state
|
||||
return (<Button variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>);
|
||||
} else{
|
||||
return(<Button disabled={true} variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>)
|
||||
return(
|
||||
<Tooltip enterTouchDelay="0" title="Wait until you can take an order"><div>
|
||||
<Button disabled={true} variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>
|
||||
</div></Tooltip>)
|
||||
}
|
||||
};
|
||||
|
||||
@ -352,15 +355,16 @@ export default class OrderPage extends Component {
|
||||
|
||||
// Colors for the status badges
|
||||
statusBadgeColor(status){
|
||||
if(status=='active'){
|
||||
return("success")
|
||||
}
|
||||
if(status=='seen_recently'){
|
||||
return("warning")
|
||||
}
|
||||
if(status=='inactive'){
|
||||
return('error')
|
||||
}
|
||||
if(status=='active'){return("success")}
|
||||
if(status=='seen_recently'){return("warning")}
|
||||
if(status=='inactive'){return('error')}
|
||||
}
|
||||
|
||||
// Colors for the status badges
|
||||
statusTooltip(status){
|
||||
if(status=='active'){return("Active")}
|
||||
if(status=='seen_recently'){return("Seen recently")}
|
||||
if(status=='inactive'){return('Inactive')}
|
||||
}
|
||||
|
||||
orderBox=()=>{
|
||||
@ -369,52 +373,56 @@ export default class OrderPage extends Component {
|
||||
<Grid item xs={12} align="center">
|
||||
<MediaQuery minWidth={920}>
|
||||
<Typography component="h5" variant="h5">
|
||||
Order Details
|
||||
Order Box
|
||||
</Typography>
|
||||
</MediaQuery>
|
||||
<Paper elevation={12} style={{ padding: 8,}}>
|
||||
<List dense="true">
|
||||
<ListItem >
|
||||
<ListItemAvatar sx={{ width: 56, height: 56 }}>
|
||||
<Tooltip placement="top" enterTouchDelay="0" title={this.statusTooltip(this.state.maker_status)} >
|
||||
<Badge variant="dot" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}>
|
||||
<Avatar className="flippedSmallAvatar"
|
||||
alt={this.state.maker_nick}
|
||||
src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'}
|
||||
/>
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={this.state.maker_nick + (this.state.type ? " (Seller)" : " (Buyer)")} secondary="Order maker" align="right"/>
|
||||
</ListItem>
|
||||
<Divider />
|
||||
|
||||
{this.state.is_participant ?
|
||||
<>
|
||||
{this.state.taker_nick!='None' ?
|
||||
<>
|
||||
<Divider />
|
||||
<ListItem align="left">
|
||||
<ListItemText primary={this.state.taker_nick + (this.state.type ? " (Buyer)" : " (Seller)")} secondary="Order taker"/>
|
||||
<ListItemAvatar >
|
||||
<Tooltip enterTouchDelay="0" title={this.statusTooltip(this.state.taker_status)} >
|
||||
<Badge variant="dot" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}>
|
||||
<Avatar className="smallAvatar"
|
||||
alt={this.state.taker_nick}
|
||||
src={window.location.origin +'/static/assets/avatars/' + this.state.taker_nick + '.png'}
|
||||
/>
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
</ListItemAvatar>
|
||||
</ListItem>
|
||||
<Divider />
|
||||
</ListItem>
|
||||
</>:
|
||||
""
|
||||
}
|
||||
<Divider><Chip label='Order Details'/></Divider>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<ArticleIcon/>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={this.state.status_message} secondary="Order status"/>
|
||||
</ListItem>
|
||||
<Divider />
|
||||
<Divider/>
|
||||
</>
|
||||
:""
|
||||
:<Divider><Chip label='Order Details'/></Divider>
|
||||
}
|
||||
|
||||
<ListItem>
|
||||
@ -559,8 +567,8 @@ export default class OrderPage extends Component {
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Tabs value={value} onChange={handleChange} variant="fullWidth" >
|
||||
<Tab label="Order Details" {...this.a11yProps(0)} />
|
||||
<Tab label="Contract Box" {...this.a11yProps(1)} />
|
||||
<Tab label="Order" {...this.a11yProps(0)} />
|
||||
<Tab label="Contract" {...this.a11yProps(1)} />
|
||||
</Tabs>
|
||||
</Box>
|
||||
<Grid container spacing={2}>
|
||||
|
||||
@ -92,6 +92,7 @@ export default class UserGenPage extends Component {
|
||||
this.setState({
|
||||
token: this.genBase62Token(34),
|
||||
tokenHasChanged: true,
|
||||
copied: true,
|
||||
});
|
||||
}
|
||||
|
||||
@ -192,7 +193,7 @@ export default class UserGenPage extends Component {
|
||||
startAdornment:
|
||||
<Tooltip disableHoverListener open={this.state.copied} enterTouchDelay="0" title="Copied!">
|
||||
<IconButton onClick= {()=> (navigator.clipboard.writeText(this.state.token) & this.setState({copied:true}))}>
|
||||
<ContentCopy color={this.props.avatarLoaded & !this.state.copied & !this.state.bad_request ? 'success' : 'inherit' } sx={{width:18, height:18}}/>
|
||||
<ContentCopy color={this.props.avatarLoaded & !this.state.copied & !this.state.bad_request ? 'primary' : 'inherit' } sx={{width:18, height:18}}/>
|
||||
</IconButton>
|
||||
</Tooltip>,
|
||||
endAdornment:
|
||||
@ -204,10 +205,19 @@ export default class UserGenPage extends Component {
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12} align="center">
|
||||
<Button disabled={!this.state.tokenHasChanged} type="submit" size='small' onClick= {this.handleClickSubmitToken}>
|
||||
{this.state.tokenHasChanged ?
|
||||
<Button type="submit" size='small' onClick= {this.handleClickSubmitToken}>
|
||||
<SmartToyIcon sx={{width:18, height:18}} />
|
||||
<span> Generate Robot</span>
|
||||
</Button>
|
||||
:
|
||||
<Tooltip enterTouchDelay="0" title="You must enter a new token first">
|
||||
<Button disabled={true} type="submit" size='small' >
|
||||
<SmartToyIcon sx={{width:18, height:18}} />
|
||||
<span> Generate Robot</span>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
}
|
||||
</Grid>
|
||||
<Grid item xs={12} align="center">
|
||||
<ButtonGroup variant="contained" aria-label="outlined primary button group">
|
||||
|
||||
@ -73,6 +73,13 @@ body {
|
||||
filter: drop-shadow(0.7px 0.7px 0.7px #000000);
|
||||
}
|
||||
|
||||
.phoneFlippedSmallAvatar:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
box-shadow: inset 0px 0px 35px rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.bookAvatar {
|
||||
border-radius: 50%;
|
||||
transform: scaleX(-1);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user