Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-31 10:31:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor avatars (#251)

Browse Source
This commit is contained in:
KoalaSat 2022-09-23 01:55:11 +02:00 committed by Reckless_Satoshi
parent c9a18751e9
commit ae193f19a4
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
13 changed files with 171 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.github/workflows/client-image.yml vendored
View File

@ -46,10 +46,8 @@ jobs:
with:
images: recksato/robosats-client
tags: |
type=ref,event=branch
type=ref,event=pr
type=ref,event=tag
type=semver,pattern={{version}}
type=semver,pattern={{major}}.{{minor}}
type=sha,enable=true,priority=100,prefix=,suffix=,format=short
type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'main') }}
@ -72,4 +70,3 @@ jobs:
push: true
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}

3
.github/workflows/coordinator-image.yml vendored
View File

@ -35,10 +35,8 @@ jobs:
with:
images: recksato/robosats
tags: |
type=ref,event=branch
type=ref,event=pr
type=ref,event=tag
type=semver,pattern={{version}}
type=semver,pattern={{major}}.{{minor}}
type=sha,enable=true,priority=100,prefix=,suffix=,format=short
type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'main') }}
@ -58,4 +56,3 @@ jobs:
push: true
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}

9
.github/workflows/frontend-build.yml vendored
View File

@ -54,17 +54,16 @@ jobs:
name: main-js
path: frontend/static/frontend/main.js
invoke-docker-builds:
if: inputs.semver == ''
runs-on: ubuntu-latest
needs: build
steps:
# Invoke pre-release image build if this was not a tag push
# Docker images tagged only with short commit hash
- name: 'Invoke Coodinator Image CI'
if: inputs.semver == ''
uses: benc-uk/workflow-dispatch@v1
with:
workflow: 'Coodinator Image CI'
token: ${{ secrets.PERSONAL_TOKEN }}
- name: 'Invoke Client App Build CI/CD workflow'
if: inputs.semver == ''
uses: benc-uk/workflow-dispatch@v1
with:
workflow: 'Client App Image CI/CD'

2
.github/workflows/release.yml vendored
View File

@ -97,5 +97,3 @@ jobs:
# asset_path: app-release.apk
# asset_name: robosats-${{ needs.check-versions.outputs.semver }}.apk
# asset_content_type: application/apk

21
frontend/src/components/BookPage.js
View File

@ -81,13 +81,13 @@ class BookPage extends Component {
// Colors for the status badges
statusBadgeColor(status) {
if (status == 'Active') {
if (status === 'Active') {
return 'success';
}
if (status == 'Seen recently') {
if (status === 'Seen recently') {
return 'warning';
}
if (status == 'Inactive') {
if (status === 'Inactive') {
return 'error';
}
}
@ -167,7 +167,12 @@ class BookPage extends Component {
return (
<ListItemButton style={{ cursor: 'pointer' }}>
<ListItemAvatar>
<RobotAvatar order={params.row} />
<RobotAvatar
nickname={params.row.maker_nick}
orderType={params.row.type}
statusColor={this.statusBadgeColor(params.row.maker_status)}
tooltip={t(params.row.maker_status)}
/>
</ListItemAvatar>
<ListItemText primary={params.row.maker_nick} />
</ListItemButton>
@ -307,7 +312,13 @@ class BookPage extends Component {
renderCell: (params) => {
return (
<div style={{ position: 'relative', left: '-5px' }}>
<RobotAvatar order={params.row} />
<RobotAvatar
nickname={params.row.maker_nick}
smooth={true}
orderType={params.row.type}
statusColor={this.statusBadgeColor(params.row.maker_status)}
tooltip={t(params.row.maker_status)}
/>
</div>
);
},

60
frontend/src/components/BottomBar.js
View File

@ -19,6 +19,7 @@ import MediaQuery from 'react-responsive';
import Flags from 'country-flag-icons/react/3x2';
import { Link as LinkRouter } from 'react-router-dom';
import { apiClient } from '../services/api';
import RobotAvatar from './Robots/RobotAvatar';
// Icons
import BarChartIcon from '@mui/icons-material/BarChart';
@ -204,29 +205,16 @@ class BottomBar extends Component {
}
>
<ListItemAvatar sx={{ width: 30 * fontSizeFactor, height: 30 * fontSizeFactor }}>
<Badge
badgeContent={
(this.props.activeOrderId > 0) & !this.props.profileShown ? '' : null
}
color='primary'
>
<Avatar
className='flippedSmallAvatar'
sx={{ margin: 0, top: -13 }}
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
<RobotAvatar
style={{ marginTop: -13 }}
statusColor={
(this.props.activeOrderId > 0) & !this.props.profileShown
? 'primary'
: undefined
}
nickname={this.props.nickname}
onLoad={() => this.props.setAppState({ avatarLoaded: true })}
/>
</Badge>
</ListItemAvatar>
</Tooltip>
<ListItemText primary={this.props.nickname} />
@ -512,29 +500,17 @@ class BottomBar extends Component {
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: 55, height: 55 }}
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
<RobotAvatar
style={{ width: 55, height: 55 }}
avatarClass='phoneFlippedSmallAvatar'
statusColor={
(this.props.activeOrderId > 0) & !this.props.profileShown
? 'primary'
: undefined
}
nickname={this.props.nickname}
onLoad={() => this.props.setAppState({ avatarLoaded: true })}
/>
</Badge>
</IconButton>
</Tooltip>
</div>

18
frontend/src/components/Charts/DepthChart/index.tsx
View File

@ -216,6 +216,17 @@ const DepthChart: React.FC<DepthChartProps> = ({
/>
);
const statusBadgeColor = (status: string) => {
if (status === 'Active') {
return 'success';
}
if (status === 'Seen recently') {
return 'warning';
}
return 'error';
};
const generateTooltip: React.FunctionComponent<PointTooltipProps> = (
pointTooltip: PointTooltipProps,
) => {
@ -225,7 +236,12 @@ const DepthChart: React.FC<DepthChartProps> = ({
<Grid container justifyContent='space-between'>
<Grid item xs={3}>
<Grid container justifyContent='center' alignItems='center'>
<RobotAvatar order={order} />
<RobotAvatar
nickname={order.maker_nick}
orderType={order.type}
statusColor={statusBadgeColor(order.maker_status)}
tooltip={t(order.maker_status)}
/>
</Grid>
</Grid>
<Grid item xs={8}>

12
frontend/src/components/Dialogs/Profile.tsx
View File

@ -39,6 +39,7 @@ import { UserNinjaIcon, BitcoinIcon } from '../Icons';
import { getCookie } from '../../utils/cookies';
import { copyToClipboard } from '../../utils/clipboard';
import { getWebln } from '../../utils/webln';
import RobotAvatar from '../Robots/RobotAvatar';
interface Props {
isOpen: boolean;
@ -167,13 +168,10 @@ const ProfileDialog = ({
</ListItemText>
<ListItemAvatar>
<Avatar
className='profileAvatar'
sx={{ width: 65, height: 65 }}
alt={nickname}
src={
nickname ? `${window.location.origin}/static/assets/avatars/${nickname}.png` : ''
}
<RobotAvatar
avatarClass='profileAvatar'
style={{ width: 65, height: 65 }}
nickname={nickname}
/>
</ListItemAvatar>
</ListItem>

20
frontend/src/components/EncryptedChat.js
View File

@ -20,6 +20,7 @@ import { getCookie } from '../utils/cookies';
import { saveAsJson } from '../utils/saveFile';
import { copyToClipboard } from '../utils/clipboard';
import { AuditPGPDialog } from './Dialogs';
import RobotAvatar from './Robots/RobotAvatar';
// Icons
import CheckIcon from '@mui/icons-material/Check';
@ -270,23 +271,10 @@ class Chat extends Component {
<CardHeader
sx={{ color: '#333333' }}
avatar={
<Badge
variant='dot'
overlap='circular'
badgeContent=''
color={props.userConnected ? 'success' : 'error'}
>
<Avatar
className='flippedSmallAvatar'
alt={props.message.userNick}
src={
window.location.origin +
'/static/assets/avatars/' +
props.message.userNick +
'.png'
}
<RobotAvatar
statusColor={props.userConnected ? 'success' : 'error'}
nickname={props.message.userNick}
/>
</Badge>
}
style={{ backgroundColor: props.cardColor }}
title={

102
frontend/src/components/OrderPage.js
View File

@ -55,6 +55,7 @@ import { pn } from '../utils/prettyNumbers';
import { copyToClipboard } from '../utils/clipboard';
import { getWebln } from '../utils/webln';
import { apiClient } from '../services/api';
import RobotAvatar from './Robots/RobotAvatar';
class OrderPage extends Component {
constructor(props) {
@ -667,13 +668,13 @@ class OrderPage extends Component {
// Colors for the status badges
statusBadgeColor(status) {
if (status == 'Active') {
if (status === 'Active') {
return 'success';
}
if (status == 'Seen recently') {
if (status === 'Seen recently') {
return 'warning';
}
if (status == 'Inactive') {
if (status === 'Inactive') {
return 'error';
}
}
@ -692,46 +693,12 @@ class OrderPage extends Component {
<List dense={true}>
<ListItem>
<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: '5px', top: '2px' }}>
{' '}
{!this.state.type ? (
<SendReceiveIcon
sx={{ transform: 'scaleX(-1)', height: '18px', width: '18px' }}
color='secondary'
<RobotAvatar
statusColor={this.statusBadgeColor(this.state.maker_status)}
nickname={this.state.maker_nick}
tooltip={t(this.state.maker_status)}
orderType={this.state.type}
/>
) : (
<SendReceiveIcon
sx={{ height: '18px', width: '18px' }}
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={
@ -745,7 +712,7 @@ class OrderPage extends Component {
{this.state.is_participant ? (
<>
{this.state.taker_nick != 'None' ? (
{this.state.taker_nick !== 'None' ? (
<>
<Divider />
<ListItem align='left'>
@ -757,50 +724,13 @@ class OrderPage extends Component {
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)}
>
<Badge
overlap='circular'
anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
badgeContent={
<div style={{ position: 'relative', right: '5px', top: '2px' }}>
{' '}
{this.state.type ? (
<SendReceiveIcon
sx={{ height: '18px', width: '18px' }}
color='secondary'
<RobotAvatar
avatarClass='smallAvatar'
statusColor={this.statusBadgeColor(this.state.taker_status)}
nickname={this.state.taker_nick}
tooltip={t(this.state.taker_status)}
orderType={this.state.type === 0 ? 1 : 0}
/>
) : (
<SendReceiveIcon
sx={{
transform: 'scaleX(-1)',
height: '18px',
width: '18px',
}}
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>
</>

104
frontend/src/components/Robots/RobotAvatar/index.tsx
View File

@ -1,24 +1,37 @@
import React from 'react';
import { Badge, Tooltip } from '@mui/material';
import SmoothImage from 'react-smooth-image';
import Order from '../../../models/Order.model';
import { Avatar, Badge, Tooltip } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { SendReceiveIcon } from '../../Icons';
interface DepthChartProps {
order: Order;
nickname: string;
smooth?: boolean;
style?: object;
statusColor?: 'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning';
orderType?: number;
tooltip?: string;
avatarClass?: string;
onLoad?: () => void;
}
const RobotAvatar: React.FC<DepthChartProps> = ({ order }) => {
const RobotAvatar: React.FC<DepthChartProps> = ({
nickname,
orderType,
statusColor,
tooltip,
smooth = false,
style = {},
avatarClass = 'flippedSmallAvatar',
onLoad = () => {},
}) => {
const { t } = useTranslation();
const avatarSrc: string =
window.location.origin + '/static/assets/avatars/' + order?.maker_nick + '.png';
const avatarSrc: string = window.location.origin + '/static/assets/avatars/' + nickname + '.png';
const statusBadge = (
<div style={{ position: 'relative', left: '6px', top: '1px' }}>
{order?.type === 0 ? (
{orderType === 0 ? (
<SendReceiveIcon
sx={{ transform: 'scaleX(-1)', height: '18px', width: '18px' }}
color='secondary'
@ -29,45 +42,68 @@ const RobotAvatar: React.FC<DepthChartProps> = ({ order }) => {
</div>
);
const statusBadgeColor = () => {
if (!order) {
return;
}
if (order.maker_status === 'Active') {
return 'success';
}
if (order.maker_status === 'Seen recently') {
return 'warning';
}
if (order.maker_status === 'Inactive') {
return 'error';
}
};
return order ? (
<Tooltip placement='right' enterTouchDelay={0} title={t(order.maker_status) || ''}>
<Badge variant='dot' overlap='circular' badgeContent='' color={statusBadgeColor()}>
<Badge
overlap='circular'
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
badgeContent={statusBadge}
>
<div style={{ width: 45, height: 45 }}>
const getAvatar = () => {
if (smooth) {
return (
<SmoothImage
className={avatarClass}
src={avatarSrc}
imageStyles={{
...style,
borderRadius: '50%',
transform: 'scaleX(-1)',
border: '0.3px solid #555',
filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
}}
/>
</div>
);
} else {
return (
<Avatar
className={avatarClass}
style={style}
alt={nickname}
src={avatarSrc}
imgProps={{
onLoad,
}}
/>
);
}
};
const getAvatarWithBadges = () => {
let component = getAvatar();
if (statusColor) {
component = (
<Badge variant='dot' overlap='circular' badgeContent='' color={statusColor}>
{component}
</Badge>
);
}
if (orderType !== undefined) {
component = (
<Badge
overlap='circular'
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
badgeContent={statusBadge}
>
{component}
</Badge>
);
}
return component;
};
return tooltip ? (
<Tooltip placement='right' enterTouchDelay={0} title={tooltip}>
{getAvatarWithBadges()}
</Tooltip>
) : (
<></>
getAvatarWithBadges()
);
};

17
frontend/src/components/TradeSummary.tsx
View File

@ -20,6 +20,7 @@ import {
} from '@mui/material';
import { pn } from '../utils/prettyNumbers';
import { saveAsJson } from '../utils/saveFile';
import RobotAvatar from './Robots/RobotAvatar';
// Icons
import FlagWithProps from './FlagWithProps';
@ -94,12 +95,7 @@ const TradeSummary = ({
>
<ToggleButtonGroup size='small' value={buttonValue} exclusive>
<ToggleButton value={0} disableRipple={true} onClick={() => setButtonValue(0)}>
<Avatar
className='flippedSmallAvatar'
sx={{ height: 24, width: 24 }}
alt={makerNick}
src={window.location.origin + '/static/assets/avatars/' + makerNick + '.png'}
/>
<RobotAvatar style={{ height: 24, width: 24 }} nickname={makerNick} />
&nbsp;
{t('Maker')}
</ToggleButton>
@ -109,11 +105,10 @@ const TradeSummary = ({
<ToggleButton value={2} disableRipple={true} onClick={() => setButtonValue(2)}>
{t('Taker')}
&nbsp;
<Avatar
className='smallAvatar'
sx={{ height: 28, width: 28 }}
alt={takerNick}
src={window.location.origin + '/static/assets/avatars/' + takerNick + '.png'}
<RobotAvatar
avatarClass='smallAvatar'
style={{ height: 28, width: 28 }}
nickname={takerNick}
/>
</ToggleButton>
</ToggleButtonGroup>