mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-13 10:56:24 +00:00
Add tooltips userPage, bottomBar, makerPage
This commit is contained in:
Reckless_Satoshi
parent
d589dc276b
commit
260c9ec335
@ -1,5 +1,5 @@
|
||||
import React, { Component } from 'react'
|
||||
import {Badge, TextField, ListItemAvatar, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
|
||||
import {Badge, Tooltip, TextField, ListItemAvatar, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
|
||||
import MediaQuery from 'react-responsive'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
@ -264,17 +264,25 @@ bottomBarDesktop =()=>{
|
||||
<Grid container xs={12}>
|
||||
|
||||
<Grid item xs={2}>
|
||||
<div style={{display: this.props.avatarLoaded ? '':'none'}}>
|
||||
<ListItemButton onClick={this.handleClickOpenProfile} >
|
||||
<Tooltip open={(this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false}
|
||||
title="You have an active order">
|
||||
<ListItemAvatar sx={{ width: 30, height: 30 }} >
|
||||
<Badge badgeContent={(this.state.active_order_id > 0 & !this.state.profileShown) ? "": null} color="primary">
|
||||
<Avatar className='flippedSmallAvatar' sx={{margin: 0, top: -13}}
|
||||
alt={this.props.nickname}
|
||||
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
|
||||
imgProps={{
|
||||
onLoad:() => this.props.setAppState({avatarLoaded: true}),
|
||||
}}
|
||||
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
|
||||
/>
|
||||
</Badge>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={this.props.nickname}/>
|
||||
</ListItemButton>
|
||||
</Tooltip>
|
||||
<ListItemText primary={this.props.nickname}/>
|
||||
</ListItemButton>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={2}>
|
||||
@ -354,19 +362,23 @@ bottomBarDesktop =()=>{
|
||||
</Select>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<Tooltip enterTouchDelay="250" title="Show community and support links">
|
||||
<IconButton
|
||||
color="primary"
|
||||
aria-label="Community"
|
||||
onClick={this.handleClickOpenCommunity} >
|
||||
<PeopleIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<IconButton color="primary"
|
||||
aria-label="Stats for Nerds"
|
||||
onClick={this.handleClickOpenStatsForNerds} >
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
<Tooltip enterTouchDelay="250" title="Show stats for nerds">
|
||||
<IconButton color="primary"
|
||||
aria-label="Stats for Nerds"
|
||||
onClick={this.handleClickOpenStatsForNerds} >
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
@ -470,51 +482,62 @@ bottomBarPhone =()=>{
|
||||
|
||||
<Grid item xs={1.6}>
|
||||
<div style={{display: this.props.avatarLoaded ? '':'none'}}>
|
||||
<IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 22, right: 8}} >
|
||||
<Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
|
||||
<Avatar className='phoneFlippedSmallAvatar'
|
||||
sx={{ width: 65, height:65 }}
|
||||
alt={this.props.nickname}
|
||||
imgProps={{
|
||||
onLoad:() => this.props.setAppState({avatarLoaded: true}),
|
||||
}}
|
||||
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
|
||||
/>
|
||||
</Badge>
|
||||
</IconButton>
|
||||
<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}} >
|
||||
<Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
|
||||
<Avatar className='phoneFlippedSmallAvatar'
|
||||
sx={{ width: 65, height:65 }}
|
||||
alt={this.props.nickname}
|
||||
imgProps={{
|
||||
onLoad:() => this.props.setAppState({avatarLoaded: true}),
|
||||
}}
|
||||
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
|
||||
/>
|
||||
</Badge>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={1.6} align="center">
|
||||
<IconButton onClick={this.handleClickOpenExchangeSummary} >
|
||||
<Badge badgeContent={this.state.num_public_buy_orders} color="action">
|
||||
<InventoryIcon />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
<Tooltip enterTouchDelay="300" title="Number of public BUY orders">
|
||||
<IconButton onClick={this.handleClickOpenExchangeSummary} >
|
||||
<Badge badgeContent={this.state.num_public_buy_orders} color="action">
|
||||
<InventoryIcon />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={1.6} align="center">
|
||||
<IconButton onClick={this.handleClickOpenExchangeSummary} >
|
||||
<Badge badgeContent={this.state.num_public_sell_orders} color="action">
|
||||
<SellIcon />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
<Tooltip enterTouchDelay="300" title="Number of public SELL orders">
|
||||
<IconButton onClick={this.handleClickOpenExchangeSummary} >
|
||||
<Badge badgeContent={this.state.num_public_sell_orders} color="action">
|
||||
<SellIcon />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={1.6} align="center">
|
||||
<IconButton onClick={this.handleClickOpenExchangeSummary} >
|
||||
<Badge badgeContent={this.state.active_robots_today} color="action">
|
||||
<SmartToyIcon />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
<Tooltip enterTouchDelay="300" title="Today active robots">
|
||||
<IconButton onClick={this.handleClickOpenExchangeSummary} >
|
||||
<Badge badgeContent={this.state.active_robots_today} color="action">
|
||||
<SmartToyIcon />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={1.8} align="center">
|
||||
<IconButton onClick={this.handleClickOpenExchangeSummary} >
|
||||
<Badge badgeContent={this.state.today_avg_nonkyc_btc_premium+"%"} color="action">
|
||||
<PriceChangeIcon />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
<Tooltip enterTouchDelay="300" title="Today non-KYC bitcoin premium">
|
||||
<IconButton onClick={this.handleClickOpenExchangeSummary} >
|
||||
<Badge badgeContent={this.state.today_avg_nonkyc_btc_premium+"%"} color="action">
|
||||
<PriceChangeIcon />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid container item xs={3.8}>
|
||||
@ -529,19 +552,23 @@ bottomBarPhone =()=>{
|
||||
</Select>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<IconButton color="primary"
|
||||
aria-label="Stats for Nerds"
|
||||
onClick={this.handleClickOpenStatsForNerds} >
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<Tooltip enterTouchDelay="250" title="Show community and support links">
|
||||
<IconButton
|
||||
color="primary"
|
||||
aria-label="Community"
|
||||
onClick={this.handleClickOpenCommunity} >
|
||||
<PeopleIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<Tooltip enterTouchDelay="250" title="Show stats for nerds">
|
||||
<IconButton color="primary"
|
||||
aria-label="Stats for Nerds"
|
||||
onClick={this.handleClickOpenStatsForNerds} >
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
|
||||
@ -30,7 +30,7 @@ export default class HomePage extends Component {
|
||||
<Router >
|
||||
<div className='appCenter'>
|
||||
<Switch>
|
||||
<Route exact path='/' render={(props) => <UserGenPage setAppState={this.setAppState}/>}/>
|
||||
<Route exact path='/' render={(props) => <UserGenPage {...this.state} setAppState={this.setAppState}/>}/>
|
||||
<Route path='/make' component={MakerPage}/>
|
||||
<Route path='/book' component={BookPage}/>
|
||||
<Route path="/order/:orderId" component={OrderPage}/>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, dividerClasses} from "@mui/material"
|
||||
import { Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, dividerClasses} from "@mui/material"
|
||||
import { Link } from 'react-router-dom'
|
||||
import getFlags from './getFlags'
|
||||
|
||||
@ -184,6 +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">
|
||||
<TextField
|
||||
error={this.state.amount <= 0}
|
||||
helperText={this.state.amount <= 0 ? 'Invalid' : null}
|
||||
@ -195,7 +196,9 @@ export default class MakerPage extends Component {
|
||||
style: {textAlign:"center"}
|
||||
}}
|
||||
onChange={this.handleAmountChange}
|
||||
/></div>
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div >
|
||||
<Select
|
||||
required="true"
|
||||
@ -214,7 +217,7 @@ export default class MakerPage extends Component {
|
||||
</Grid>
|
||||
<br/>
|
||||
<Grid item xs={12} align="center">
|
||||
<FormControl >
|
||||
<Tooltip enterTouchDelay="0" title="Input your prefered payment methods">
|
||||
<TextField
|
||||
sx={{width:240}}
|
||||
label="Payment Method(s)"
|
||||
@ -228,7 +231,7 @@ export default class MakerPage extends Component {
|
||||
}}
|
||||
onChange={this.handlePaymentMethodChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} align="center">
|
||||
@ -239,6 +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">
|
||||
<FormControlLabel
|
||||
value="relative"
|
||||
control={<Radio color="primary"/>}
|
||||
@ -246,6 +250,8 @@ export default class MakerPage extends Component {
|
||||
labelPlacement="Top"
|
||||
onClick={this.handleClickRelative}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip enterTouchDelay="0" title="Set a fix amount of satoshis">
|
||||
<FormControlLabel
|
||||
value="explicit"
|
||||
control={<Radio color="secondary"/>}
|
||||
@ -253,6 +259,7 @@ export default class MakerPage extends Component {
|
||||
labelPlacement="Top"
|
||||
onClick={this.handleClickExplicit}
|
||||
/>
|
||||
</Tooltip>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
@ -297,7 +304,8 @@ export default class MakerPage extends Component {
|
||||
</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={12} align="center">
|
||||
<Button disabled={this.state.amount == null ||
|
||||
<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)
|
||||
@ -306,7 +314,8 @@ export default class MakerPage extends Component {
|
||||
variant="contained"
|
||||
onClick={this.handleCreateOfferButtonPressed} >
|
||||
Create Order
|
||||
</Button>
|
||||
</Button></div>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid item xs={12} align="center">
|
||||
{this.state.badRequest ?
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import React, { Component } from "react";
|
||||
import { Button , Dialog, Grid, Typography, TextField, ButtonGroup, CircularProgress, IconButton} from "@mui/material"
|
||||
import { Button , Tooltip, Dialog, Grid, Typography, TextField, ButtonGroup, CircularProgress, IconButton} from "@mui/material"
|
||||
import { Link } from 'react-router-dom'
|
||||
import Image from 'material-ui-image'
|
||||
import InfoDialog from './InfoDialog'
|
||||
import SmartToyIcon from '@mui/icons-material/SmartToy';
|
||||
import CasinoIcon from '@mui/icons-material/Casino';
|
||||
import ContentCopy from "@mui/icons-material/ContentCopy";
|
||||
import InfoIcon from '@mui/icons-material/Info';
|
||||
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
|
||||
|
||||
function getCookie(name) {
|
||||
let cookieValue = null;
|
||||
@ -103,7 +105,7 @@ export default class UserGenPage extends Component {
|
||||
handleClickSubmitToken=()=>{
|
||||
this.delGeneratedUser();
|
||||
this.getGeneratedUser(this.state.token);
|
||||
this.setState({loadingRobot: true, tokenHasChanged: false});
|
||||
this.setState({loadingRobot: true, tokenHasChanged: false, copied: false});
|
||||
this.props.setAppState({avatarLoaded: false, nickname: null, token: null});
|
||||
}
|
||||
|
||||
@ -141,6 +143,7 @@ export default class UserGenPage extends Component {
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} align="center">
|
||||
<Tooltip enterTouchDelay="0" title="This is your trading avatar">
|
||||
<div style={{ maxWidth: 200, maxHeight: 200 }}>
|
||||
<Image className='newAvatar'
|
||||
disableError='true'
|
||||
@ -148,7 +151,8 @@ export default class UserGenPage extends Component {
|
||||
color='null'
|
||||
src={this.state.avatar_url}
|
||||
/>
|
||||
</div><br/>
|
||||
</div>
|
||||
</Tooltip><br/>
|
||||
</Grid>
|
||||
</div>
|
||||
: <CircularProgress sx={{position: 'relative', top: 100, }}/>}
|
||||
@ -171,7 +175,7 @@ export default class UserGenPage extends Component {
|
||||
// style: { color: 'green' },
|
||||
// }}
|
||||
error={this.state.bad_request}
|
||||
label='Store your token safely'
|
||||
label={"Store your token safely"}
|
||||
required='true'
|
||||
value={this.state.token}
|
||||
variant='standard'
|
||||
@ -186,11 +190,15 @@ export default class UserGenPage extends Component {
|
||||
}}
|
||||
InputProps={{
|
||||
startAdornment:
|
||||
<IconButton onClick= {()=>navigator.clipboard.writeText(this.state.token)}>
|
||||
<ContentCopy color={this.state.tokenHasChanged ? 'inherit' : 'primary' } sx={{width:18, height:18}} />
|
||||
</IconButton>,
|
||||
<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}}/>
|
||||
</IconButton>
|
||||
</Tooltip>,
|
||||
endAdornment:
|
||||
<IconButton onClick={this.handleClickNewRandomToken}><CasinoIcon/></IconButton>,
|
||||
<Tooltip enterTouchDelay="250" title="Generate a new token">
|
||||
<IconButton onClick={this.handleClickNewRandomToken}><CasinoIcon/></IconButton>
|
||||
</Tooltip>,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -68,12 +68,9 @@ body {
|
||||
}
|
||||
|
||||
.phoneFlippedSmallAvatar {
|
||||
transform: translate(-20, -20);
|
||||
bottom: 50;
|
||||
right: 50;
|
||||
transform: scaleX(-1);
|
||||
border: 0.8px solid #555;
|
||||
filter: drop-shadow(0.5px 0.5px 0.5px #000000);
|
||||
border: 1.3px solid #555;
|
||||
filter: drop-shadow(0.7px 0.7px 0.7px #000000);
|
||||
}
|
||||
|
||||
.bookAvatar {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user