Skip to content

Commit

Permalink
Fix selecting oracle radio buttons
Browse files Browse the repository at this point in the history 
Adjust flip list layout
  • Loading branch information
@aidenaio
aidenaio committed Apr 5, 2023
1 parent f0a09a7 commit 17d9f08
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 94 deletions.
2 changes: 1 addition & 1 deletion renderer/pages/flips/list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ export default function FlipListPage() {
{current.matches('ready.dirty.active') && (
<>
{missingFlips.map(({keywords, ...flip}, idx) => (
<Box key={idx}>
<Box key={idx} w={150}>
<EmptyFlipBox position="relative">
{[FlipType.Deleting, FlipType.Invalid].some(
(x) => x === flip.type
Expand Down
172 changes: 88 additions & 84 deletions renderer/screens/flips/components.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import React, {useEffect} from 'react'
import NextLink from 'next/link'
import {
SimpleGrid,
Image,
Text,
Box,
Expand Down Expand Up @@ -30,6 +29,8 @@ import {
Center,
useRadio,
useRadioGroup,
Wrap,
WrapItem,
} from '@chakra-ui/react'
import {DragDropContext, Droppable, Draggable} from 'react-beautiful-dnd'
import {useTranslation} from 'react-i18next'
Expand Down Expand Up @@ -91,7 +92,7 @@ export function FlipPageTitle({onClose, ...props}) {
}

export function FlipCardList(props) {
return <SimpleGrid columns={4} spacing={10} {...props} />
return <Wrap spacing="39px" {...props} />
}

export function FlipCard({flipService, onDelete}) {
Expand Down Expand Up @@ -122,95 +123,97 @@ export function FlipCard({flipService, onDelete}) {
const isDeletable = [FlipType.Published, FlipType.Draft].includes(type)

return (
<Box position="relative">
<FlipCardImageBox>
{[FlipType.Publishing, FlipType.Deleting, FlipType.Invalid].some(
(x) => x === type
) && (
<FlipOverlay
backgroundImage={
// eslint-disable-next-line no-nested-ternary
[FlipType.Publishing, FlipType.Deleting].some((x) => x === type)
? `linear-gradient(to top, ${colors.warning[500]}, transparent)`
: type === FlipType.Invalid
? `linear-gradient(to top, ${colors.red[500]}, transparent)`
: ''
<WrapItem>
<Box w={150} position="relative">
<FlipCardImageBox>
{[FlipType.Publishing, FlipType.Deleting, FlipType.Invalid].some(
(x) => x === type
) && (
<FlipOverlay
backgroundImage={
// eslint-disable-next-line no-nested-ternary
[FlipType.Publishing, FlipType.Deleting].some((x) => x === type)
? `linear-gradient(to top, ${colors.warning[500]}, transparent)`
: type === FlipType.Invalid
? `linear-gradient(to top, ${colors.red[500]}, transparent)`
: ''
}
>
<FlipOverlayStatus>
<InfoSolidIcon boxSize="5" />
<FlipOverlayText>
{type === FlipType.Publishing && t('Mining...')}
{type === FlipType.Deleting && t('Deleting...')}
{type === FlipType.Invalid && t('Mining error')}
</FlipOverlayText>
</FlipOverlayStatus>
</FlipOverlay>
)}
<FlipCardImage
src={
images[originalOrder ? originalOrder[0] : 0] ||
images[originalOrder ? originalOrder[1] : 1]
}
>
<FlipOverlayStatus>
<InfoSolidIcon boxSize="5" />
<FlipOverlayText>
{type === FlipType.Publishing && t('Mining...')}
{type === FlipType.Deleting && t('Deleting...')}
{type === FlipType.Invalid && t('Mining error')}
</FlipOverlayText>
</FlipOverlayStatus>
</FlipOverlay>
)}
<FlipCardImage
src={
images[originalOrder ? originalOrder[0] : 0] ||
images[originalOrder ? originalOrder[1] : 1]
}
/>
</FlipCardImageBox>
<Flex justifyContent="space-between" alignItems="flex-start" mt={4}>
<Box>
<FlipCardTitle>
{keywords.words && keywords.words.length
? formatKeywords(keywords.words)
: t('Missing keywords')}
</FlipCardTitle>
<FlipCardSubtitle>
{new Date(modifiedAt).toLocaleString()}
</FlipCardSubtitle>
</Box>
{isActionable && (
<FlipCardMenu>
{isSubmittable && (
<FlipCardMenuItem onClick={() => send('PUBLISH', {id})}>
<HStack spacing="2">
<FlipCardMenuItemIcon icon={UploadIcon} />
<Text as="span">{t('Submit flip')}</Text>
</HStack>
</FlipCardMenuItem>
)}
{isViewable && (
<NextLink href={`/flips/view?id=${id}`}>
<FlipCardMenuItem>
/>
</FlipCardImageBox>
<Flex justifyContent="space-between" alignItems="flex-start" mt={4}>
<Box>
<FlipCardTitle>
{keywords.words && keywords.words.length
? formatKeywords(keywords.words)
: t('Missing keywords')}
</FlipCardTitle>
<FlipCardSubtitle>
{new Date(modifiedAt).toLocaleString()}
</FlipCardSubtitle>
</Box>
{isActionable && (
<FlipCardMenu>
{isSubmittable && (
<FlipCardMenuItem onClick={() => send({type: 'PUBLISH', id})}>
<HStack spacing="2">
<FlipCardMenuItemIcon icon={EyeIcon} />
<Text as="span">{t('View flip')}</Text>
<FlipCardMenuItemIcon icon={UploadIcon} />
<Text as="span">{t('Submit flip')}</Text>
</HStack>
</FlipCardMenuItem>
</NextLink>
)}
{isEditable && (
<NextLink href={`/flips/edit?id=${id}`}>
<FlipCardMenuItem>
)}
{isViewable && (
<NextLink href={`/flips/view?id=${id}`}>
<FlipCardMenuItem>
<HStack spacing="2">
<FlipCardMenuItemIcon icon={EyeIcon} />
<Text as="span">{t('View flip')}</Text>
</HStack>
</FlipCardMenuItem>
</NextLink>
)}
{isEditable && (
<NextLink href={`/flips/edit?id=${id}`}>
<FlipCardMenuItem>
<HStack spacing="2">
<FlipCardMenuItemIcon icon={EditIcon} />
<Text as="span">{t('Edit flip')}</Text>
</HStack>
</FlipCardMenuItem>
</NextLink>
)}
{(isSubmittable || isEditable) && isDeletable && (
<MenuDivider color="gray.300" my={2} width={rem(145)} />
)}

{isDeletable && (
<FlipCardMenuItem onClick={onDelete}>
<HStack spacing="2">
<FlipCardMenuItemIcon icon={EditIcon} />
<Text as="span">{t('Edit flip')}</Text>
<FlipCardMenuItemIcon icon={DeleteIcon} color="red.500" />
<Text as="span">{t('Delete flip')}</Text>
</HStack>
</FlipCardMenuItem>
</NextLink>
)}
{(isSubmittable || isEditable) && isDeletable && (
<MenuDivider color="gray.300" my={2} width={rem(145)} />
)}

{isDeletable && (
<FlipCardMenuItem onClick={onDelete}>
<HStack spacing="2">
<FlipCardMenuItemIcon icon={DeleteIcon} color="red.500" />
<Text as="span">{t('Delete flip')}</Text>
</HStack>
</FlipCardMenuItem>
)}
</FlipCardMenu>
)}
</Flex>
</Box>
)}
</FlipCardMenu>
)}
</Flex>
</Box>
</WrapItem>
)
}

Expand Down Expand Up @@ -263,6 +266,7 @@ export function FlipCardMenu(props) {
rounded="lg"
py="2"
minWidth="145px"
zIndex="dropdown"
{...props}
/>
</Menu>
Expand Down
9 changes: 5 additions & 4 deletions renderer/screens/oracles/containers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -942,7 +942,7 @@ export function VotingDurationInput({
value={String(value)}
// eslint-disable-next-line no-shadow
onChange={(value) => {
send('CHANGE', {id, value})
send({type: 'CHANGE', id, value})
}}
>
<HStack spacing="3">
Expand All @@ -961,7 +961,8 @@ export function VotingDurationInput({
id={id}
value={value}
onChange={({target}) => {
send('CHANGE', {
send({
type: 'CHANGE',
id,
value: Number(target.value),
})
Expand Down Expand Up @@ -1307,9 +1308,9 @@ export function LaunchVotingDrawer({votingService}) {
available={identity.balance}
isLoading={current.matches(`mining.${VotingStatus.Starting}`)}
onLaunch={(e) => {
send('START_VOTING', e)
send({type: 'START_VOTING', ...e})
}}
onError={(e) => send('ERROR', e)}
onError={(e) => send({type: 'ERROR', ...e})}
/>
)
}
Expand Down
10 changes: 5 additions & 5 deletions renderer/screens/oracles/machines.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Machine, assign, spawn} from 'xstate'
import {assign, spawn, createMachine} from 'xstate'
import {choose, log, send, sendParent} from 'xstate/lib/actions'
import dayjs from 'dayjs'
import {
Expand Down Expand Up @@ -30,7 +30,7 @@ import {epochDb, requestDb} from '../../shared/utils/db'
import {ContractRpcMode, VotingListFilter} from './types'
import {fetchNetworkSize} from '../../shared/api/dna'

export const votingListMachine = Machine(
export const votingListMachine = createMachine(
{
context: {
votings: [],
Expand Down Expand Up @@ -294,7 +294,7 @@ export const votingListMachine = Machine(
}
)

export const votingMachine = Machine(
export const votingMachine = createMachine(
{
id: 'voting',
initial: 'unknown',
Expand Down Expand Up @@ -479,7 +479,7 @@ export const votingMachine = Machine(
)

export const createNewVotingMachine = (epoch, address) =>
Machine(
createMachine(
{
context: {
epoch,
Expand Down Expand Up @@ -963,7 +963,7 @@ export const createNewVotingMachine = (epoch, address) =>
)

export const createViewVotingMachine = (id, epoch, address) =>
Machine(
createMachine(
{
id: 'viewVoting',
context: {
Expand Down

0 comments on commit 17d9f08

Please sign in to comment.