Max 33274e5b9a
feat(webapp): user teaser popover (#8450)
* calculate distance between current user and queried user

* fix query for unset location

* use database to calculate distance

* rename distance to distance to me, 100% calculation done in DB

* distanceToMe tests

* lint fixes

* remove comments

* Show user teaser popover with badges, Desktop

* Refactor UserTeaser and add mobile popover support

* Avoid click propagation (WIP)

* Prevent event propagation

* Adjust alignment and font sizes

* More spacing for statistics

* Add distance, simplify user link

* Refactor location info into own component

* Add tests for UserTeaserPopup

* Refactor and test LocationInfo

* Query distanceToMe, rename distance to distanceToMe

* Update test

* Improve tests for UserTeaser, WIP

* Fix tests

* DistanceToMe on User instead of Location

* Revert "DistanceToMe on User instead of Location"

This reverts commit 96c9db00a44cd120e47bfe9534d3e066a194744c.

* Fix notifications

* Refactor UserTeaser and fix location info

* Fix group member crash

* Show 0 distance

* Fit in popover on small screens

* Allow access to profile on desktop

* Revert backend changes

* Load user teaser popover data only when needed

* Fix type mismatch

* Refactor for clarity and accessibility

* Litte refactorings and improvements

* Fix popover test

* Adapt and fix tests

* Fix tests and bugs

* Add placeholder

* cypress: adapt user teaser locator to changes

* Remove delays and scrolling

* Disable popovers in notification list and fix layout

* Remove flickering

* Make overlay catch all pointer events on touch devices

* Re-add attribute for E2E test

* Fix test, return to mouseover

* fix snapshot

---------

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
Co-authored-by: mahula <lenzmath@posteo.de>
2025-05-05 23:54:13 +00:00

163 lines
2.3 KiB
JavaScript

import gql from 'graphql-tag'
export const userFragment = gql`
fragment user on User {
id
slug
name
avatar {
url
}
disabled
deleted
}
`
export const locationFragment = (lang) => gql`
fragment location on User {
locationName
location {
id
name: name${lang}
lng
lat
distanceToMe
}
}
`
export const badgesFragment = gql`
fragment badges on User {
badgeTrophiesSelected {
id
icon
description
}
badgeVerification {
id
icon
description
}
}
`
export const userCountsFragment = gql`
fragment userCounts on User {
shoutedCount
contributionsCount
commentedCount
followedByCount
followingCount
followedByCurrentUser
}
`
export const userTeaserFragment = (lang) => gql`
${badgesFragment}
${locationFragment(lang)}
fragment userTeaser on User {
followedByCount
contributionsCount
commentedCount
...badges
...location
}
`
export const postFragment = gql`
fragment post on Post {
id
title
content
contentExcerpt
createdAt
updatedAt
disabled
deleted
slug
language
image {
url
sensitive
aspectRatio
type
}
author {
...user
}
pinnedAt
pinned
isObservedByMe
observingUsersCount
}
`
export const groupFragment = gql`
fragment group on Group {
id
groupName: name
slug
disabled
deleted
about
description
descriptionExcerpt
groupType
actionRadius
categories {
id
slug
name
icon
}
locationName
myRole
}
`
export const postCountsFragment = gql`
fragment postCounts on Post {
commentsCount
shoutedCount
shoutedByCurrentUser
emotionsCount
clickedCount
viewedTeaserCount
viewedTeaserByCurrentUser
}
`
export const tagsCategoriesAndPinnedFragment = gql`
fragment tagsCategoriesAndPinned on Post {
tags {
id
}
categories {
id
slug
name
icon
}
pinnedBy {
id
name
role
}
}
`
export const commentFragment = gql`
fragment comment on Comment {
id
createdAt
updatedAt
disabled
deleted
content
contentExcerpt
isPostObservedByMe
postObservingUsersCount
}
`