From 0784950793ddea40936f80f83ac588b959d28775 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Wed, 5 Jul 2023 13:13:53 +0200 Subject: [PATCH] Location: Fix rendering with reactions (#3400) --- src/assets/map-pin.svg | 2 +- src/components/middle/message/Location.scss | 16 ++++--- src/components/middle/message/Location.tsx | 43 ++++--------------- src/components/middle/message/Message.tsx | 2 +- .../message/helpers/buildContentClassName.ts | 2 +- src/global/helpers/messages.ts | 4 +- 6 files changed, 23 insertions(+), 46 deletions(-) diff --git a/src/assets/map-pin.svg b/src/assets/map-pin.svg index 9f541c656..53e328ad0 100644 --- a/src/assets/map-pin.svg +++ b/src/assets/map-pin.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/middle/message/Location.scss b/src/components/middle/message/Location.scss index edc894ac2..5e96c31b8 100644 --- a/src/components/middle/message/Location.scss +++ b/src/components/middle/message/Location.scss @@ -110,8 +110,9 @@ z-index: 5; } + .venue, .geo { - height: 2.5rem; + height: 3.25rem; } .geoLive, @@ -148,9 +149,9 @@ .location-info { display: grid; grid-template-columns: 1fr auto; - grid-template-rows: 1fr 1fr; + grid-template-rows: 1fr auto; width: 100%; - padding: 0.3125rem 0.5rem 0.375rem; + padding: 0.3125rem 0.5rem 0.25rem; &-title { font-weight: 500; @@ -159,7 +160,7 @@ &-subtitle { color: var(--color-text-secondary); - line-height: 1; + line-height: 1.25; font-size: 0.875rem; grid-area: 2 / 1 / 2 / 2; @@ -180,10 +181,13 @@ color: var(--accent-color); position: absolute; top: 50%; - left: 50%; - transform: translate(-50%, -50%); + left: 0; + transform: translateY(-50%); font-size: 0.875rem; font-weight: 500; + line-height: 1; + width: 100%; + text-align: center; } .geo-countdown-progress { diff --git a/src/components/middle/message/Location.tsx b/src/components/middle/message/Location.tsx index e69ddb286..718ad7818 100644 --- a/src/components/middle/message/Location.tsx +++ b/src/components/middle/message/Location.tsx @@ -8,15 +8,12 @@ import type { FC } from '../../../lib/teact/teact'; import type { ApiChat, ApiMessage, ApiUser } from '../../../api/types'; import type { ISettings } from '../../../types'; -import { CUSTOM_APPENDIX_ATTRIBUTE, MESSAGE_CONTENT_SELECTOR } from '../../../config'; import { getMessageLocation, buildStaticMapHash, isGeoLiveExpired, - isOwnMessage, isUserId, } from '../../../global/helpers'; -import getCustomAppendixBg from './helpers/getCustomAppendixBg'; import { formatCountdownShort, formatLastUpdated } from '../../../util/dateFormat'; import { getMetersPerPixel, getVenueColor, getVenueIconUrl, prepareMapUrl, @@ -31,7 +28,6 @@ import useTimeout from '../../../hooks/useTimeout'; import buildClassName from '../../../util/buildClassName'; import usePrevious from '../../../hooks/usePrevious'; import useInterval from '../../../hooks/useInterval'; -import useLayoutEffectWithPrevDeps from '../../../hooks/useLayoutEffectWithPrevDeps'; import Avatar from '../../common/Avatar'; import Skeleton from '../../ui/Skeleton'; @@ -49,7 +45,7 @@ const DEFAULT_MAP_CONFIG = { }; // eslint-disable-next-line max-len -const SVG_PIN = { __html: '' }; +const SVG_PIN = { __html: '' }; type OwnProps = { message: ApiMessage; @@ -62,9 +58,6 @@ type OwnProps = { const Location: FC = ({ message, peer, - isInSelectMode, - isSelected, - theme, }) => { const { openUrl } = getActions(); // eslint-disable-next-line no-null/no-null @@ -98,8 +91,6 @@ const Location: FC = ({ const avatarUser = (peer && isPeerUser) ? peer as ApiUser : undefined; const avatarChat = (peer && !isPeerUser) ? peer as ApiChat : undefined; - const isOwn = isOwnMessage(message); - const accuracyRadiusPx = useMemo(() => { if (type !== 'geoLive' || !point.accuracyRadius) { return 0; @@ -146,26 +137,6 @@ const Location: FC = ({ } }, [updateCountdown]); - useLayoutEffectWithPrevDeps(([prevShouldRenderText]) => { - if (shouldRenderText) { - if (!prevShouldRenderText) { - ref.current!.closest(MESSAGE_CONTENT_SELECTOR)!.removeAttribute(CUSTOM_APPENDIX_ATTRIBUTE); - } - return; - } - - if (mapBlobUrl) { - const contentEl = ref.current!.closest(MESSAGE_CONTENT_SELECTOR)!; - getCustomAppendixBg(mapBlobUrl, isOwn, isInSelectMode, isSelected, theme).then((appendixBg) => { - requestMutation(() => { - contentEl.style.setProperty('--appendix-bg', appendixBg); - contentEl.classList.add('has-appendix-thumb'); - contentEl.setAttribute(CUSTOM_APPENDIX_ATTRIBUTE, ''); - }); - }); - } - }, [shouldRenderText, isOwn, isInSelectMode, isSelected, theme, mapBlobUrl]); - useEffect(() => { // Prevent map refetching for slight location changes if (Math.abs(geo.lat - point.lat) < MOVE_THRESHOLD && Math.abs(geo.long - point.long) < MOVE_THRESHOLD) { @@ -253,11 +224,13 @@ const Location: FC = ({ if (type === 'venue') { const color = getVenueColor(location.venueType); const iconSrc = getVenueIconUrl(location.venueType); - return ( -
- -
- ); + if (iconSrc) { + return ( +
+ +
+ ); + } } return ( diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index cf92d7e8e..88c8831aa 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -648,7 +648,7 @@ const Message: FC = ({ let reactionsPosition!: ReactionsPosition; if (hasReactions) { - if (isCustomShape || ((photo || video) && !hasText)) { + if (isCustomShape || ((photo || video || (location && location.type === 'geo')) && !hasText)) { reactionsPosition = 'outside'; } else if (asForwarded) { metaPosition = 'standalone'; diff --git a/src/components/middle/message/helpers/buildContentClassName.ts b/src/components/middle/message/helpers/buildContentClassName.ts index 5d4536b9b..36136af30 100644 --- a/src/components/middle/message/helpers/buildContentClassName.ts +++ b/src/components/middle/message/helpers/buildContentClassName.ts @@ -126,7 +126,7 @@ export function buildContentClassName( classNames.push('has-solid-background'); } - if (isLastInGroup && (photo || (location && !hasText) || !isMediaWithNoText)) { + if (isLastInGroup && (photo || !isMediaWithNoText || (location && asForwarded))) { classNames.push('has-appendix'); } } diff --git a/src/global/helpers/messages.ts b/src/global/helpers/messages.ts index f551f945c..62da57b36 100644 --- a/src/global/helpers/messages.ts +++ b/src/global/helpers/messages.ts @@ -76,8 +76,8 @@ export function getMessageCustomShape(message: ApiMessage): boolean { return true; } - if (!text || photo || video || audio || voice || document || poll || webPage || contact || action || game || invoice - || location) { + if (!text || photo || video || audio || voice || document || poll || webPage || contact || action || game + || invoice || location) { return false; }