Skip to content

Commit

Permalink
Update collectibles modal UI (#11544)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dylanjeffers
dylanjeffers authored Mar 7, 2025
1 parent 713f9bf commit 830eefb
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 136 deletions.
35 changes: 9 additions & 26 deletions packages/web/src/components/collectibles/components/CollectibleRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import { formatDateWithTimezoneOffset } from '@audius/common/utils'
import {
IconRemove as IconHide,
IconDrag,
IconMultiselectAdd as IconShow
IconMultiselectAdd as IconShow,
Text
} from '@audius/harmony'
import cn from 'classnames'

Expand All @@ -28,7 +29,7 @@ export const VisibleCollectibleRow = (props) => {
handleProps,
...otherProps
} = props
const { name, isOwned, dateCreated, mediaType, frameUrl, gifUrl, videoUrl } =
const { name, dateCreated, mediaType, frameUrl, gifUrl, videoUrl } =
collectible

const dragRef = useRef<HTMLDivElement>(null)
Expand Down Expand Up @@ -67,7 +68,7 @@ export const VisibleCollectibleRow = (props) => {
return (
<div className={styles.editRow} ref={forwardRef} {...otherProps}>
<Tooltip text={collectibleMessages.hideCollectible}>
<IconHide onClick={onHideClick} />
<IconHide color='danger' onClick={onHideClick} />
</Tooltip>
<div className={styles.verticalDivider} />
{(frameUrl ?? gifUrl) ? (
Expand All @@ -91,17 +92,8 @@ export const VisibleCollectibleRow = (props) => {
) : (
<div className={styles.editMediaEmpty} />
)}
<div className={styles.editRowTitle}>{name}</div>
<div>
{isOwned ? (
<span className={cn(styles.owned, styles.editStamp)}>
{collectibleMessages.owned}
</span>
) : (
<span className={cn(styles.created, styles.editStamp)}>
{collectibleMessages.created}
</span>
)}
<div className={styles.editRowTitle}>
<Text variant='title'>{name}</Text>
</div>
{dateCreated && <div>{formatDateWithTimezoneOffset(dateCreated)}</div>}
<div className={styles.verticalDivider} />
Expand All @@ -119,7 +111,7 @@ type HiddenCollectibleRowProps = {

export const HiddenCollectibleRow = (props: HiddenCollectibleRowProps) => {
const { collectible, onShowClick } = props
const { name, isOwned, dateCreated, mediaType, frameUrl, gifUrl, videoUrl } =
const { name, dateCreated, mediaType, frameUrl, gifUrl, videoUrl } =
collectible

return (
Expand Down Expand Up @@ -152,17 +144,8 @@ export const HiddenCollectibleRow = (props: HiddenCollectibleRowProps) => {
) : (
<div className={styles.editMediaEmpty} />
)}
<div className={styles.editRowTitle}>{name}</div>
<div>
{isOwned ? (
<span className={cn(styles.owned, styles.editStamp)}>
{collectibleMessages.owned}
</span>
) : (
<span className={cn(styles.created, styles.editStamp)}>
{collectibleMessages.created}
</span>
)}
<div className={styles.editRowTitle}>
<Text variant='title'>{name}</Text>
</div>
{dateCreated && <div>{formatDateWithTimezoneOffset(dateCreated)}</div>}
</div>
Expand Down
19 changes: 1 addition & 18 deletions packages/web/src/components/collectibles/components/CollectiblesPage.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -347,23 +347,8 @@
line-height: 28px;
}

.editModal {
display: flex;
flex-direction: column;
align-items: center;
font-size: var(--harmony-font-s);
font-weight: var(--harmony-font-bold);
margin: 0 24px;
}

.editModalBody {
width: 100%;
max-width: 620px;
}

.editListSection {
width: 100%;
margin-top: 32px;
}

.editListHeader {
Expand Down Expand Up @@ -417,9 +402,7 @@

.editRowTitle {
flex-grow: 1;
font-size: var(--harmony-font-m);
width: 260px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Expand Down Expand Up @@ -448,7 +431,7 @@
}

.editTableContainer {
max-height: 20vh;
max-height: 550px;
overflow-y: auto;
}

Expand Down
193 changes: 101 additions & 92 deletions packages/web/src/components/collectibles/components/CollectiblesPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import {
} from '@audius/common/store'
import { getHash, route } from '@audius/common/utils'
import {
Button as HarmonyButton,
Modal,
IconKebabHorizontal,
IconPencil,
Expand All @@ -32,7 +31,10 @@ import {
PopupMenuItem,
Button,
Flex,
Box
ModalHeader,
ModalTitle,
ModalContent,
Text
} from '@audius/harmony'
import cn from 'classnames'
import { chunk } from 'lodash'
Expand Down Expand Up @@ -714,104 +716,111 @@ const CollectiblesPage = (props: CollectiblesPageProps) => {
</div>

<Modal
title={collectibleMessages.sortCollectibles}
isOpen={isEditingPreferences}
onClose={() => setIsEditingPreferences(false)}
showTitleHeader
showDismissButton
bodyClassName={cn(styles.modalBody, styles.editModalBody)}
headerContainerClassName={styles.modalHeader}
titleClassName={styles.modalTitle}
allowScroll
size='large'
>
<div className={styles.editModal}>
{getVisibleCollectibles().length > 0 && (
<div className={styles.editListSection}>
<DragDropContext onDragEnd={onDragEnd}>
<ModalHeader>
<ModalTitle title={collectibleMessages.sortCollectibles} />
</ModalHeader>
<ModalContent>
<Flex gap='m' h={600}>
{getVisibleCollectibles().length > 0 && (
<div className={styles.editListSection}>
<DragDropContext onDragEnd={onDragEnd}>
<div className={styles.editListHeader}>
<Text variant='title' size='l'>
{collectibleMessages.visibleCollectibles}
</Text>
</div>

<div
className={cn(
styles.editTableContainer,
editTableContainerClass,
{
[styles.tableTopShadow]: showVisibleTableTopShadow,
[styles.tableBottomShadow]:
showVisibleTableBottomShadow,
[styles.tableVerticalShadow]:
showVisibleTableTopShadow &&
showVisibleTableBottomShadow
}
)}
ref={visibleTableRef}
>
<Droppable droppableId={VISIBLE_COLLECTIBLES_DROPPABLE_ID}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
>
{getVisibleCollectibles().map((c, index) => (
<Draggable
key={c.id}
draggableId={c.id}
index={index}
>
{(provided, snapshot) => (
<VisibleCollectibleRow
{...provided.draggableProps}
handleProps={provided.dragHandleProps}
forwardRef={provided.innerRef}
isDragging={snapshot.isDragging}
collectible={c}
onHideClick={handleHideCollectible(c.id)}
/>
)}
</Draggable>
))}

{provided.placeholder}
</div>
)}
</Droppable>
</div>
</DragDropContext>
</div>
)}

{getHiddenCollectibles().length > 0 && (
<div className={styles.editListSection}>
<div className={styles.editListHeader}>
{collectibleMessages.visibleCollectibles}
<Text variant='title' size='l'>
{collectibleMessages.hiddenCollectibles}
</Text>
</div>

<div
className={cn(
styles.editTableContainer,
editTableContainerClass,
{
[styles.tableTopShadow]: showVisibleTableTopShadow,
[styles.tableBottomShadow]: showVisibleTableBottomShadow,
[styles.tableVerticalShadow]:
showVisibleTableTopShadow &&
showVisibleTableBottomShadow
}
)}
ref={visibleTableRef}
className={cn(styles.editTableContainer, {
[styles.tableTopShadow]: showHiddenTableTopShadow,
[styles.tableBottomShadow]: showHiddenTableBottomShadow,
[styles.tableVerticalShadow]:
showHiddenTableTopShadow && showHiddenTableBottomShadow
})}
ref={hiddenTableRef}
>
<Droppable droppableId={VISIBLE_COLLECTIBLES_DROPPABLE_ID}>
{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
{getVisibleCollectibles().map((c, index) => (
<Draggable
key={c.id}
draggableId={c.id}
index={index}
>
{(provided, snapshot) => (
<VisibleCollectibleRow
{...provided.draggableProps}
handleProps={provided.dragHandleProps}
forwardRef={provided.innerRef}
isDragging={snapshot.isDragging}
collectible={c}
onHideClick={handleHideCollectible(c.id)}
/>
)}
</Draggable>
))}

{provided.placeholder}
</div>
)}
</Droppable>
{getHiddenCollectibles().map((c) => (
<HiddenCollectibleRow
key={c.id}
collectible={c}
onShowClick={handleShowCollectible(c.id)}
/>
))}
</div>
</DragDropContext>
</div>
)}

{getHiddenCollectibles().length > 0 && (
<div className={styles.editListSection}>
<div className={styles.editListHeader}>
{collectibleMessages.hiddenCollectibles}
</div>

<div
className={cn(styles.editTableContainer, {
[styles.tableTopShadow]: showHiddenTableTopShadow,
[styles.tableBottomShadow]: showHiddenTableBottomShadow,
[styles.tableVerticalShadow]:
showHiddenTableTopShadow && showHiddenTableBottomShadow
})}
ref={hiddenTableRef}
>
{getHiddenCollectibles().map((c) => (
<HiddenCollectibleRow
key={c.id}
collectible={c}
onShowClick={handleShowCollectible(c.id)}
/>
))}
</div>
</div>
)}
<Box m='l'>
<HarmonyButton
variant='primary'
onClick={handleDoneClick}
disabled={isUpdatingUserCollectibles}
>
Done
</HarmonyButton>
</Box>
</div>
)}
</Flex>
</ModalContent>
<Flex justifyContent='center' pb='xl'>
<Button
variant='primary'
onClick={handleDoneClick}
disabled={isUpdatingUserCollectibles}
>
Done
</Button>
</Flex>
</Modal>

<Modal
Expand Down Expand Up @@ -854,9 +863,9 @@ const CollectiblesPage = (props: CollectiblesPageProps) => {
</div>
</div>
</Toast>
<HarmonyButton variant='primary' onClick={closeEmbedModal}>
<Button variant='primary' onClick={closeEmbedModal}>
{collectibleMessages.done}
</HarmonyButton>
</Button>
</div>
</div>
</div>
Expand Down

0 comments on commit 830eefb

Please sign in to comment.