Skip to content

Commit

Permalink
fix: bugfix for timeline calendar (#10816)
Browse files Browse the repository at this point in the history 
* fix: scroll bar

* fix: wrong padding

* fix: mf-5293 nft tab

* fix: mf-5293 nft tab description

* fix: mf-5282 change date picker range

* chore: remove log
  • Loading branch information
@beyond009
beyond009 committed Sep 21, 2023
1 parent 8e4c2de commit 863ba52
Show file tree
Hide file tree
Showing 11 changed files with 275 additions and 135 deletions.
4 changes: 4 additions & 0 deletions packages/icons/brands/DiscordRoundBlack.dark.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions packages/icons/brands/DiscordRoundBlack.light.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions packages/icons/general/WebBlack.dark.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions packages/icons/general/WebBlack.light.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions packages/icons/icon-generated-as-jsx.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,16 @@ export const DiscordRound = /*#__PURE__*/ __createIcon('DiscordRound', [
u: () => new URL('./brands/DiscordRound.svg', import.meta.url),
},
])
export const DiscordRoundBlack = /*#__PURE__*/ __createIcon('DiscordRoundBlack', [
{
c: ['dark'],
u: () => new URL('./brands/DiscordRoundBlack.dark.svg', import.meta.url),
},
{
c: ['light'],
u: () => new URL('./brands/DiscordRoundBlack.light.svg', import.meta.url),
},
])
export const DiscordRoundGray = /*#__PURE__*/ __createIcon('DiscordRoundGray', [
{
u: () => new URL('./brands/DiscordRoundGray.svg', import.meta.url),
Expand Down Expand Up @@ -3316,6 +3326,16 @@ export const Web = /*#__PURE__*/ __createIcon('Web', [
u: () => new URL('./general/Web.svg', import.meta.url),
},
])
export const WebBlack = /*#__PURE__*/ __createIcon('WebBlack', [
{
c: ['dark'],
u: () => new URL('./general/WebBlack.dark.svg', import.meta.url),
},
{
c: ['light'],
u: () => new URL('./general/WebBlack.light.svg', import.meta.url),
},
])
export const MenuPersonas = /*#__PURE__*/ __createIcon('MenuPersonas', [
{
u: () => new URL('./menus/MenuPersonas.png', import.meta.url),
Expand Down
4 changes: 4 additions & 0 deletions packages/icons/icon-generated-as-url.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ export function danger_url() { return new URL("./brands/Danger.svg", import.meta
export function debank_url() { return new URL("./brands/Debank.svg", import.meta.url) }
export function discord_url() { return new URL("./brands/Discord.svg", import.meta.url) }
export function discord_round_url() { return new URL("./brands/DiscordRound.svg", import.meta.url) }
export function discord_round_black_dark_url() { return new URL("./brands/DiscordRoundBlack.dark.svg", import.meta.url) }
export function discord_round_black_light_url() { return new URL("./brands/DiscordRoundBlack.light.svg", import.meta.url) }
export function discord_round_gray_url() { return new URL("./brands/DiscordRoundGray.svg", import.meta.url) }
export function eip_1577_url() { return new URL("./brands/EIP1577.svg", import.meta.url) }
export function eth_url() { return new URL("./brands/ETH.svg", import.meta.url) }
Expand Down Expand Up @@ -313,6 +315,8 @@ export function wallet_setting_url() { return new URL("./general/WalletSetting.s
export function warning_url() { return new URL("./general/Warning.svg", import.meta.url) }
export function warning_triangle_url() { return new URL("./general/WarningTriangle.svg", import.meta.url) }
export function web_url() { return new URL("./general/Web.svg", import.meta.url) }
export function web_black_dark_url() { return new URL("./general/WebBlack.dark.svg", import.meta.url) }
export function web_black_light_url() { return new URL("./general/WebBlack.light.svg", import.meta.url) }
export function menu_personas_url() { return new URL("./menus/MenuPersonas.png", import.meta.url) }
export function menu_personas_active_url() { return new URL("./menus/MenuPersonasActive.png", import.meta.url) }
export function menu_settings_url() { return new URL("./menus/MenuSettings.png", import.meta.url) }
Expand Down
9 changes: 6 additions & 3 deletions packages/plugins/Calendar/src/SiteAdaptor/CalendarContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@ const useStyles = makeStyles()((theme) => ({
padding: '8px 16px 0 16px',
borderRadius: '12px 12px 0 0',
},
tabPanel: {
padding: '0 4px 0 12px',
},
}))

export function CalendarContent() {
Expand Down Expand Up @@ -79,23 +82,23 @@ export function CalendarContent() {
setSelectedDate={(date: Date) => setSelectedDate(date)}
list={list}
/>
<TabPanel value={tabs.news} style={{ padding: 0 }}>
<TabPanel value={tabs.news} className={classes.tabPanel}>
<NewsList
list={newsList}
isLoading={newsLoading}
empty={!Object.keys(newsList).length}
dateString={dateString}
/>
</TabPanel>
<TabPanel value={tabs.event} style={{ padding: 0 }}>
<TabPanel value={tabs.event} className={classes.tabPanel}>
<EventList
list={eventList}
isLoading={eventLoading}
empty={!Object.keys(eventList).length}
dateString={dateString}
/>
</TabPanel>
<TabPanel value={tabs.nfts} style={{ padding: 0 }}>
<TabPanel value={tabs.nfts} className={classes.tabPanel}>
<NFTList
list={nftList}
isLoading={nftLoading}
Expand Down
14 changes: 10 additions & 4 deletions packages/plugins/Calendar/src/SiteAdaptor/components/DatePicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React, { useMemo } from 'react'
import format from 'date-fns/format'
import startOfMonth from 'date-fns/startOfMonth'
import endOfMonth from 'date-fns/endOfMonth'
import addDays from 'date-fns/addDays'
import addMonths from 'date-fns/addMonths'
import isAfter from 'date-fns/isAfter'
import endOfMonth from 'date-fns/endOfMonth'
import { IconButton, Typography } from '@mui/material'
import { Icons } from '@masknet/icons'
import { makeStyles } from '@masknet/theme'
Expand Down Expand Up @@ -88,7 +89,12 @@ export function DatePicker({ list, selectedDate, setSelectedDate, open, setOpen
const { classes } = useStyles({ open })

const monthStart = useMemo(() => startOfMonth(selectedDate), [selectedDate])
const monthEnd = useMemo(() => endOfMonth(selectedDate), [selectedDate])
const isPrevMonthDisabled = useMemo(() => {
return !isAfter(selectedDate, endOfMonth(new Date()))
}, [selectedDate])
const isNextMonthDisabled = useMemo(() => {
return isAfter(addMonths(selectedDate, 1), addMonths(endOfMonth(new Date()), 2))
}, [selectedDate])

const handleDateClick = (date: Date) => {
setSelectedDate(date)
Expand Down Expand Up @@ -150,10 +156,10 @@ export function DatePicker({ list, selectedDate, setSelectedDate, open, setOpen
<div className={classes.header}>
<Typography className={classes.headerText}>{format(selectedDate, 'MMMM yyyy')}</Typography>
<Box className={classes.headerIcon}>
<IconButton size="small" onClick={() => changeMonth(-1)}>
<IconButton size="small" onClick={() => changeMonth(-1)} disabled={isPrevMonthDisabled}>
<Icons.LeftArrow size={24} />
</IconButton>
<IconButton size="small" onClick={() => changeMonth(1)}>
<IconButton size="small" onClick={() => changeMonth(1)} disabled={isNextMonthDisabled}>
<Icons.RightArrow size={24} />
</IconButton>
</Box>
Expand Down
91 changes: 55 additions & 36 deletions packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,20 @@ const useStyles = makeStyles()((theme) => ({
flexDirection: 'column',
height: '506px',
width: '100%',
overflow: 'overlay',
overflowY: 'scroll',
position: 'relative',
gap: '10px',
paddingBottom: '50px',
'&::-webkit-scrollbar': {
width: '4px',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: theme.palette.maskColor.secondaryLine,
borderRadius: '99px',
},
marginBottom: '50px',
},
paddingWrap: {
paddingRight: '12px',
},
empty: {
position: 'absolute',
Expand All @@ -30,7 +40,7 @@ const useStyles = makeStyles()((theme) => ({
},
eventCard: {
display: 'flex',
padding: '8px 12px',
padding: '8px 0',
flexDirection: 'column',
gap: '8px',
},
Expand Down Expand Up @@ -60,7 +70,7 @@ const useStyles = makeStyles()((theme) => ({
fontSize: '14px',
fontWeight: 400,
lineHeight: '18px',
color: theme.palette.mode === 'dark' ? theme.palette.maskColor.main : theme.palette.maskColor.second,
color: theme.palette.mode === 'dark' ? theme.palette.maskColor.second : theme.palette.maskColor.main,
},
poster: {
borderRadius: '8px',
Expand All @@ -73,7 +83,7 @@ const useStyles = makeStyles()((theme) => ({
fontWeight: 700,
lineHeight: '18px',
color: theme.palette.maskColor.main,
padding: '10px 12px',
padding: '10px 0',
},
}))

Expand Down Expand Up @@ -103,39 +113,48 @@ export function EventList({ list, isLoading, empty, dateString }: EventListProps
}, [list, dateString])
return (
<div className={classes.container}>
{isLoading && !list?.length ? (
<div className={cx(classes.empty, classes.eventTitle)}>
<LoadingStatus />
</div>
) : !empty && listAfterDate.length ? (
listAfterDate.map((key, index) => {
return (
<div key={key}>
<Typography className={classes.dateDiv}>{format(new Date(key), 'MMM dd,yyy')}</Typography>
{list[key].map((v) => (
<div
className={classes.eventCard}
key={v.eventTitle}
onClick={() => {
window.open(v.event_url)
}}>
<div className={classes.eventHeader}>
<div className={classes.projectWrap}>
<img src={v.project.logo} className={classes.logo} alt="logo" />
<Typography className={classes.projectName}> {v.project.name}</Typography>
<div className={classes.paddingWrap}>
{isLoading && !list?.length ? (
<div className={cx(classes.empty, classes.eventTitle)}>
<LoadingStatus />
</div>
) : !empty && listAfterDate.length ? (
listAfterDate.map((key, index) => {
return (
<div key={key}>
<Typography className={classes.dateDiv}>
{format(new Date(key), 'MMM dd,yyy')}
</Typography>
{list[key].map((v) => (
<div
className={classes.eventCard}
key={v.eventTitle}
onClick={() => {
window.open(v.event_url)
}}>
<div className={classes.eventHeader}>
<div className={classes.projectWrap}>
<img src={v.project.logo} className={classes.logo} alt="logo" />
<Typography className={classes.projectName}>
{' '}
{v.project.name}
</Typography>
</div>
</div>
<Typography className={classes.eventTitle}>{v.event_title}</Typography>
<Typography className={classes.eventTitle}>
{formatDate(v.event_date)}
</Typography>
<img className={classes.poster} src={v.poster_url} alt="poster" />
</div>
<Typography className={classes.eventTitle}>{v.event_title}</Typography>
<Typography className={classes.eventTitle}>{formatDate(v.event_date)}</Typography>
<img className={classes.poster} src={v.poster_url} alt="poster" />
</div>
))}
</div>
)
})
) : (
<EmptyStatus className={classes.empty}>{t.empty_status()}</EmptyStatus>
)}
))}
</div>
)
})
) : (
<EmptyStatus className={classes.empty}>{t.empty_status()}</EmptyStatus>
)}
</div>
</div>
)
}

0 comments on commit 863ba52

Please sign in to comment.