First working version of new timeline
This commit is contained in:
parent
612a191f6d
commit
e7dbe0868d
|
@ -37,6 +37,7 @@ yarn-debug.log*
|
|||
yarn-error.log*
|
||||
.eslintcache
|
||||
|
||||
# vscode
|
||||
# IDEs
|
||||
.vscode
|
||||
__debug_bin
|
||||
.idea
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"eslint.workingDirectories": ["ui"]
|
||||
}
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react'
|
||||
import Layout from '../../components/layout/Layout'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import TimelineGallery from '../../components/timelineGallery/TimelineGallery'
|
||||
|
||||
const PhotosPage = () => {
|
||||
const { t } = useTranslation()
|
||||
|
@ -8,7 +9,7 @@ const PhotosPage = () => {
|
|||
return (
|
||||
<>
|
||||
<Layout title={t('photos_page.title', 'Photos')}>
|
||||
{/* <TimelineGallery /> */}
|
||||
<TimelineGallery />
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import styled from 'styled-components'
|
||||
import { MediaThumbnail } from '../photoGallery/MediaThumbnail'
|
||||
import {
|
||||
toggleFavoriteAction,
|
||||
|
@ -13,20 +12,6 @@ import {
|
|||
TimelineGalleryState,
|
||||
} from './timelineGalleryReducer'
|
||||
|
||||
const TotalItemsBubble = styled(Link)`
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 6px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
padding: 8px 0;
|
||||
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
|
||||
color: black;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
`
|
||||
|
||||
type TimelineGroupAlbumProps = {
|
||||
dateIndex: number
|
||||
albumIndex: number
|
||||
|
@ -40,8 +25,11 @@ const TimelineGroupAlbum = ({
|
|||
mediaState,
|
||||
dispatchMedia,
|
||||
}: TimelineGroupAlbumProps) => {
|
||||
const { media, mediaTotal, album } =
|
||||
mediaState.timelineGroups[dateIndex].groups[albumIndex]
|
||||
const {
|
||||
media,
|
||||
title: albumTitle,
|
||||
id: albumID,
|
||||
} = mediaState.timelineGroups[dateIndex].albums[albumIndex]
|
||||
|
||||
const [markFavorite] = useMarkFavoriteMutation()
|
||||
|
||||
|
@ -79,24 +67,14 @@ const TimelineGroupAlbum = ({
|
|||
/>
|
||||
))
|
||||
|
||||
let itemsBubble = null
|
||||
const mediaVisibleCount = media.length
|
||||
if (mediaTotal > mediaVisibleCount) {
|
||||
itemsBubble = (
|
||||
<TotalItemsBubble to={`/album/${album.id}`}>
|
||||
{`+${Math.min(mediaTotal - mediaVisibleCount, 99)}`}
|
||||
</TotalItemsBubble>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-2">
|
||||
<Link to={`/album/${album.id}`} className="hover:underline">
|
||||
{album.title}
|
||||
<Link to={`/album/${albumID}`} className="hover:underline">
|
||||
{albumTitle}
|
||||
</Link>
|
||||
<div className="flex flex-wrap items-center h-[210px] relative -mx-1 pr-4 overflow-hidden">
|
||||
{mediaElms}
|
||||
{itemsBubble}
|
||||
{/* {itemsBubble} */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -27,9 +27,9 @@ const TimelineGroupDate = ({
|
|||
|
||||
const group = mediaState.timelineGroups[groupIndex]
|
||||
|
||||
const albumGroupElms = group.groups.map((group, i) => (
|
||||
const albumGroupElms = group.albums.map((album, i) => (
|
||||
<TimelineGroupAlbum
|
||||
key={`${group.date}_${group.album.id}`}
|
||||
key={`${group.date}_${album.id}`}
|
||||
dateIndex={groupIndex}
|
||||
albumIndex={i}
|
||||
mediaState={mediaState}
|
||||
|
|
|
@ -214,7 +214,7 @@ function convertMediaToTimelineGroups(
|
|||
}
|
||||
|
||||
// if date changes
|
||||
if (sameDay(nextAlbum.media[0].date, media.date)) {
|
||||
if (!sameDay(nextAlbum.media[0].date, media.date)) {
|
||||
albums.push(nextAlbum)
|
||||
|
||||
timelineGroups.push({
|
||||
|
|
Loading…
Reference in New Issue