Skip to content

Commit 06268da

Browse files
LautaroPetaccioLautaroPetaccio
authored
Feat: Third parties new detail page (#3152)
* feat: Add Third Parties new details page * feat: Third Parties new detail page * feat: Add mappings tooltip * fix: Expand range field * fix: Build * fix: Update Vite * fix: Capitalization
1 parent 8019c8c commit 06268da

24 files changed

+824
-517
lines changed

‎package-lock.json

+214-168
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@
118118
"rollup-plugin-polyfill-node": "^0.13.0",
119119
"ts-node": "^10.9.2",
120120
"typescript": "^5.3.3",
121-
"vite": "^5.0.12",
121+
"vite": "^5.4.0",
122122
"vite-bundle-visualizer": "^1.0.0",
123123
"vite-plugin-node-polyfills": "^0.19.0"
124124
},

‎src/components/Back/Back.module.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.main {
2+
min-width: 32px;
3+
}

‎src/components/Back/Back.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import * as React from 'react'
22
import { useHistory } from 'react-router-dom'
33
import { Back as BackComponent, BackProps } from 'decentraland-ui'
4+
import styles from './Back.module.css'
45

56
export default function Back(props: BackProps) {
67
const { onClick, absolute, ...rest } = props
78
const history = useHistory()
89
const onBack = React.useCallback(() => {
910
history.goBack()
1011
}, [history])
11-
return <BackComponent {...rest} onClick={history.length && !absolute ? onBack : onClick} />
12+
return <BackComponent {...rest} className={styles.main} onClick={history.length && !absolute ? onBack : onClick} />
1213
}

‎src/components/CopyToClipboard/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import CopyToClipboard from './CopyToClipboard'
2+
export { CopyToClipboard }

‎src/components/MappingEditor/MappingEditor.module.css

+6-2
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434

3535
/* Input margin */
3636

37-
.any,
38-
.multiple {
37+
.compact .any,
38+
.compact .multiple {
3939
margin-top: 19px;
4040
}
4141

@@ -83,6 +83,10 @@
8383
flex-direction: column;
8484
}
8585

86+
.range.compact :global(.dcl.field) {
87+
flex: 1 1 auto;
88+
}
89+
8690
/* To class */
8791
.to {
8892
text-transform: uppercase;

‎src/components/MappingEditor/MappingEditor.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ export const MappingEditor = (props: Props) => {
158158
/>
159159
) : (
160160
<TextAreaField
161-
label={t('mapping_editor.mapping_value_label')}
161+
label={t('mapping_editor.mapping_value_multiple_label')}
162162
disabled={disabled}
163163
loading={loading}
164164
info={

‎src/components/ThirdPartyCollectionDetailPage/CollectionContextMenu/CollectionContextMenu.module.css

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
.dropdown {
2-
border: 1px solid var(--gray);
3-
border-radius: 5px;
4-
}
5-
61
.ellipsis {
72
margin: auto !important;
3+
color: var(--primary-text);
84
}

‎src/components/ThirdPartyCollectionDetailPage/CollectionContextMenu/CollectionContextMenu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const CollectionContextMenu: React.FC<Props> = props => {
6060
className={styles.dropdown}
6161
trigger={
6262
<Button basic>
63-
<Icon className={styles.ellipsis} name="ellipsis horizontal" />
63+
<Icon className={styles.ellipsis} size="large" name="ellipsis horizontal" />
6464
</Button>
6565
}
6666
inline

‎src/components/ThirdPartyCollectionDetailPage/CollectionItemHeader/CollectionItemHeader.module.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.itemCheckbox {
2+
margin-right: 10px;
3+
}
4+
5+
.gridHeader:global(.ui.grid) {
6+
border-bottom: 1px solid var(--divider);
7+
padding-bottom: 10px;
8+
color: var(--secondary-text);
9+
}
10+
11+
.gridHeader:global(.ui.grid) > :global(.row) > :global(.column:first-child) {
12+
padding-left: 10px;
13+
}
14+
15+
.gridHeader:global(.ui.grid) > :global(.row) > :global(.column).itemColumn {
16+
display: flex;
17+
align-items: center;
18+
}

‎src/components/ThirdPartyCollectionDetailPage/CollectionItemHeader/CollectionItemHeader.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { Checkbox, Grid } from 'decentraland-ui'
22
import { Props } from './CollectionItemHeader.types'
33
import { t } from 'decentraland-dapps/dist/modules/translation'
4+
import styles from './CollectionItemHeader.module.css'
45

56
export const CollectionItemHeader = ({ areAllSelected, onSelectedAllClick }: Props) => {
67
return (
7-
<Grid columns="equal" className="grid-header secondary-text">
8+
<Grid columns="equal" className={styles.gridHeader}>
89
<Grid.Row>
9-
<Grid.Column width={5} className="item-column">
10-
<Checkbox className="item-checkbox" checked={areAllSelected} onClick={onSelectedAllClick} />
10+
<Grid.Column width={5} className={styles.itemColumn}>
11+
<Checkbox className={styles.itemCheckbox} checked={areAllSelected} onClick={onSelectedAllClick} />
1112
&nbsp;
1213
{t('global.item')}
1314
</Grid.Column>

‎src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.module.css

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
.gridHeader:global(.ui.grid) {
2+
border-bottom: 1px solid var(--divider);
3+
padding-bottom: 10px;
4+
color: var(--secondary-text);
5+
}
6+
7+
.gridHeader:global(.ui.grid) > :global(.row) > :global(.column:first-child) {
8+
padding-left: 10px;
9+
}
10+
11+
.gridHeader:global(.ui.grid) > :global(.row) > :global(.column).itemColumn {
12+
display: flex;
13+
align-items: center;
14+
}
15+
16+
.itemCheckbox {
17+
margin-right: 10px;
18+
}
19+
20+
.linkedTooltip {
21+
display: grid;
22+
width: 458px;
23+
margin: 14px;
24+
grid-template-columns: auto auto;
25+
gap: 4px;
26+
overflow: hidden;
27+
}
28+
29+
.gridItem {
30+
position: relative;
31+
padding: 10px;
32+
display: flex;
33+
align-items: start;
34+
}
35+
36+
.mappingExample {
37+
color: #cfcdd4;
38+
}
39+
40+
.mappingType {
41+
display: flex;
42+
align-items: center;
43+
}
44+
45+
.mappingDescription {
46+
flex-direction: column;
47+
}
48+
49+
.mappingIcon {
50+
width: 20px;
51+
height: 20px;
52+
margin-right: 10px;
53+
}
54+
55+
.tooltipHeader {
56+
display: flex;
57+
align-items: center;
58+
grid-column-start: 1;
59+
grid-column-end: 3;
60+
padding: 10px;
61+
text-transform: uppercase;
62+
}
63+
64+
.tooltipHeader img {
65+
width: 20px;
66+
height: 20px;
67+
margin-right: 10px;
68+
}
69+
70+
.gridItem::before,
71+
.gridItem::after {
72+
content: '';
73+
position: absolute;
74+
background-color: #a09ba8;
75+
z-index: 1;
76+
}
77+
78+
.gridItem::after {
79+
width: 100vw;
80+
height: 1px;
81+
left: 0;
82+
top: -1px;
83+
}
84+
85+
.linkedToColumn > span {
86+
margin-right: 6px;
87+
}

‎src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.tsx

+55-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,67 @@
1-
import { Checkbox, Grid } from 'decentraland-ui'
1+
import classNames from 'classnames'
2+
import { MappingType } from '@dcl/schemas'
3+
import { Checkbox, Grid, InfoTooltip } from 'decentraland-ui'
4+
import allIcon from '../../../icons/all.svg'
5+
import multipleIcon from '../../../icons/multiple.svg'
6+
import singleIcon from '../../../icons/single.svg'
7+
import rangeIcon from '../../../icons/range.svg'
8+
import lightbulbIcon from '../../../icons/lightbulb.svg'
29
import { Props } from './CollectionItemHeaderV2.types'
310
import { t } from 'decentraland-dapps/dist/modules/translation'
11+
import styles from './CollectionItemHeaderV2.module.css'
12+
13+
const mappingTypeIcons = {
14+
[MappingType.ANY]: allIcon,
15+
[MappingType.MULTIPLE]: multipleIcon,
16+
[MappingType.SINGLE]: singleIcon,
17+
[MappingType.RANGE]: rangeIcon
18+
}
19+
20+
const LinkingTooltipMappingType = ({ type }: { type: MappingType }) => {
21+
return (
22+
<>
23+
<div className={styles.gridItem}>
24+
<div className={styles.mappingType}>
25+
<img className={styles.mappingIcon} src={mappingTypeIcons[type]} />
26+
{t(`mapping_editor.mapping_types.${type}`)}
27+
</div>
28+
</div>
29+
<div className={classNames(styles.gridItem, styles.mappingDescription)}>
30+
<div>{t(`mapping_editor.mapping_descriptions.${type}`)}</div>
31+
{type !== MappingType.ANY && <div className={styles.mappingExample}>{t(`mapping_editor.mapping_examples.${type}`)}</div>}
32+
</div>
33+
</>
34+
)
35+
}
36+
37+
const LinkingTooltipContent = () => (
38+
<div className={styles.linkedTooltip}>
39+
<div className={styles.tooltipHeader}>
40+
<img src={lightbulbIcon} />
41+
{t('collection_row.linking_tooltip.title')}
42+
</div>
43+
<LinkingTooltipMappingType type={MappingType.ANY} />
44+
<LinkingTooltipMappingType type={MappingType.SINGLE} />
45+
<LinkingTooltipMappingType type={MappingType.MULTIPLE} />
46+
<LinkingTooltipMappingType type={MappingType.RANGE} />
47+
</div>
48+
)
449

550
export const CollectionItemHeaderV2 = ({ areAllSelected, onSelectedAllClick }: Props) => {
651
return (
7-
<Grid columns="equal" className="grid-header secondary-text">
52+
<Grid columns="equal" className={styles.gridHeader}>
853
<Grid.Row>
9-
<Grid.Column width={4} className="item-column">
10-
<Checkbox className="item-checkbox" checked={areAllSelected} onClick={onSelectedAllClick} />
54+
<Grid.Column width={4} className={styles.itemColumn}>
55+
<Checkbox className={styles.itemCheckbox} checked={areAllSelected} onClick={onSelectedAllClick} />
1156
&nbsp;
1257
{t('global.item')}
1358
</Grid.Column>
14-
<Grid.Column>Linked to</Grid.Column>
59+
<Grid.Column className={styles.linkedToColumn}>
60+
<span>{t('third_party_collection_detail_page.linked_to')}</span>
61+
<InfoTooltip>
62+
<LinkingTooltipContent />
63+
</InfoTooltip>
64+
</Grid.Column>
1565
<Grid.Column width={2}> {t('collection_row.status')} </Grid.Column>
1666
<Grid.Column width={1}></Grid.Column>
1767
</Grid.Row>

‎src/components/ThirdPartyCollectionDetailPage/CollectionPublishButton/CollectionPublishButton.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useMemo, useCallback } from 'react'
2-
import { Button, Popup } from 'decentraland-ui'
2+
import { Button, Icon, Popup } from 'decentraland-ui'
33
import { Network } from '@dcl/schemas'
44
import { NetworkButton } from 'decentraland-dapps/dist/containers'
55
import { t } from 'decentraland-dapps/dist/modules/translation/utils'
@@ -92,7 +92,7 @@ const CollectionPublishButton = (props: Props) => {
9292
position="bottom center"
9393
trigger={
9494
<div className="popup-button">
95-
<Button secondary compact disabled={true}>
95+
<Button primary disabled={true}>
9696
{t('collection_detail_page.under_review')}
9797
</Button>
9898
</div>
@@ -113,10 +113,10 @@ const CollectionPublishButton = (props: Props) => {
113113
(isTryingToPublish && (slots === 0 || !hasEnoughSlots)) || items.length === 0 || buttonAction === PublishButtonAction.NONE
114114
}
115115
primary
116-
compact
117116
onClick={handleOnClick}
118117
network={Network.MATIC}
119118
>
119+
<Icon name="upload" />
120120
{getTPButtonActionLabel(buttonAction)}
121121
</NetworkButton>
122122
</div>

0 commit comments

Comments
 (0)