Add positioning badge on Order page avatars

This commit is contained in:
Reckless_Satoshi 2022-04-24 09:01:25 -07:00
parent e4ded22cca
commit 21c4e9f74c
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
2 changed files with 15 additions and 8 deletions

View File

@ -10,10 +10,12 @@ import getFlags from './getFlags';
import AutocompletePayments from './AutocompletePayments';
import currencyDict from '../../static/assets/currencies.json';
//icons
import MoveToInboxIcon from '@mui/icons-material/MoveToInbox';
import OutboxIcon from '@mui/icons-material/Outbox';
import LockIcon from '@mui/icons-material/Lock';
import HourglassTopIcon from '@mui/icons-material/HourglassTop';
import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
import { getCookie } from "../utils/cookies";
import { pn } from "../utils/prettyNumbers";

View File

@ -8,6 +8,7 @@ import currencyDict from '../../static/assets/currencies.json';
import PaymentText from './PaymentText'
import TradeBox from "./TradeBox";
import getFlags from './getFlags'
import { t } from "i18next";
// icons
import AccessTimeIcon from '@mui/icons-material/AccessTime';
@ -15,7 +16,7 @@ import NumbersIcon from '@mui/icons-material/Numbers';
import PriceChangeIcon from '@mui/icons-material/PriceChange';
import PaymentsIcon from '@mui/icons-material/Payments';
import ArticleIcon from '@mui/icons-material/Article';
import { t } from "i18next";
import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
import { getCookie } from "../utils/cookies";
import { pn } from "../utils/prettyNumbers";
@ -476,11 +477,13 @@ class OrderPage extends Component {
<ListItemAvatar sx={{ width: 56, height: 56 }}>
<Tooltip placement="top" enterTouchDelay="0" title={t(this.state.maker_status)} >
<Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}>
<Badge overlap="circular" anchorOrigin={{horizontal: 'right', vertical: 'bottom'}} badgeContent={<div style={{position:"relative", left:"10px"}}> {!this.state.type ? <DoubleArrowIcon sx={{transform: "scaleX(-1)"}} color="secondary"/> : <DoubleArrowIcon color="primary"/>}</div>}>
<Avatar className="flippedSmallAvatar"
alt={this.state.maker_nick}
src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'}
/>
</Badge>
</Badge>
</Tooltip>
</ListItemAvatar>
<ListItemText primary={this.state.maker_nick + (this.state.type ? " "+t("(Seller)") : " "+t("(Buyer)") )} secondary={t("Order maker")} align="right"/>
@ -494,13 +497,15 @@ class OrderPage extends Component {
<ListItem align="left">
<ListItemText primary={this.state.taker_nick + (this.state.type ? " "+t("(Buyer)") : " "+t("(Seller)"))} secondary={t("Order taker")}/>
<ListItemAvatar >
<Tooltip enterTouchDelay="0" title={t(this.state.taker_status)} >
<Badge variant="dot" overlap="circular" 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 enterTouchDelay="0" title={t(this.state.taker_status)} >
<Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}>
<Badge overlap="circular" anchorOrigin={{horizontal: 'left', vertical: 'bottom'}} badgeContent={<div style={{position:"relative", right:"10px"}}> {this.state.type ? <DoubleArrowIcon color="secondary"/> : <DoubleArrowIcon sx={{transform: "scaleX(-1)"}} color="primary"/> }</div>}>
<Avatar className="smallAvatar"
alt={this.state.taker_nick}
src={window.location.origin +'/static/assets/avatars/' + this.state.taker_nick + '.png'}
/>
</Badge>
</Badge>
</Tooltip>
</ListItemAvatar>
</ListItem>