Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: bugfix for timeline calendar #10816

Merged
merged 6 commits into from
Sep 21, 2023
Merged

fix: bugfix for timeline calendar #10816

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1f36c6b
fix: scroll bar
beyond009 Sep 20, 2023
df5ceb6
fix: wrong padding
beyond009 Sep 20, 2023
384ea82
fix: mf-5293 nft tab
beyond009 Sep 21, 2023
8d1b134
fix: mf-5293 nft tab description
beyond009 Sep 21, 2023
aa80d93
fix: mf-5282 change date picker range
beyond009 Sep 21, 2023
ad70d4f
chore: remove log
beyond009 Sep 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/icons/brands/DiscordRoundBlack.dark.svg
View file
Open in desktop
Loading
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
Open in desktop
Loading
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
Open in desktop
Loading
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
Open in desktop
Loading
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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>
)
}
Loading
Loading