From 0198f5f4d86beaa5d88b2e6edc49905c5f9c8cc9 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Tue, 19 Apr 2022 15:12:33 +0200 Subject: [PATCH] Message / Invoice: Better layout (#1834) --- src/api/gramjs/apiBuilders/messages.ts | 12 ++++++ src/api/types/messages.ts | 2 + src/components/middle/message/Invoice.scss | 17 ++++---- src/components/middle/message/Invoice.tsx | 40 ++++++++++++++++++- src/components/middle/message/Message.scss | 2 +- src/components/middle/message/Message.tsx | 10 ++++- .../middle/message/MessageMeta.scss | 3 +- .../message/helpers/buildContentClassName.ts | 6 ++- .../message/helpers/getCustomAppendixBg.ts | 1 + 9 files changed, 80 insertions(+), 13 deletions(-) diff --git a/src/api/gramjs/apiBuilders/messages.ts b/src/api/gramjs/apiBuilders/messages.ts index 9d7f4098a..ceac8f4a2 100644 --- a/src/api/gramjs/apiBuilders/messages.ts +++ b/src/api/gramjs/apiBuilders/messages.ts @@ -712,10 +712,22 @@ export function buildInvoice(media: GramJs.MessageMediaInvoice): ApiInvoice { description: text, title, photo, test, totalAmount, currency, receiptMsgId, } = media; + const imageAttribute = photo?.attributes + .find((a: any): a is GramJs.DocumentAttributeImageSize => a instanceof GramJs.DocumentAttributeImageSize); + + let photoWidth: number | undefined; + let photoHeight: number | undefined; + if (imageAttribute) { + photoWidth = imageAttribute.w; + photoHeight = imageAttribute.h; + } + return { text, title, photoUrl: photo?.url, + photoWidth, + photoHeight, receiptMsgId, amount: Number(totalAmount), currency, diff --git a/src/api/types/messages.ts b/src/api/types/messages.ts index 9bf0a4b96..6f9851221 100644 --- a/src/api/types/messages.ts +++ b/src/api/types/messages.ts @@ -137,6 +137,8 @@ export interface ApiInvoice { text: string; title: string; photoUrl?: string; + photoWidth?: number; + photoHeight?: number; amount: number; currency: string; receiptMsgId?: number; diff --git a/src/components/middle/message/Invoice.scss b/src/components/middle/message/Invoice.scss index 7d206fddb..086b59fd7 100644 --- a/src/components/middle/message/Invoice.scss +++ b/src/components/middle/message/Invoice.scss @@ -8,13 +8,14 @@ position: relative; &.has-image { - .invoice-image { - max-width: 100%; - height: 20rem; + margin: 1rem -0.5rem -0.375rem; - @media (max-width: 600px) { - height: 10rem; - } + .invoice-image { + width: 100%; + max-height: 30rem; + object-fit: cover; + border-bottom-left-radius: var(--border-bottom-left-radius); + border-bottom-right-radius: var(--border-bottom-right-radius); } .description-text { @@ -22,9 +23,9 @@ top: 0; padding: 0.25rem 0.5rem; margin: 0.25rem; - background-color: rgba(90, 110, 70, 0.6); + background-color: rgba(0, 0, 0, 0.2); border-radius: var(--border-radius-messages-small); - color: var(--color-text); + color: var(--color-white); font-weight: 500; span { diff --git a/src/components/middle/message/Invoice.tsx b/src/components/middle/message/Invoice.tsx index 31436bf93..dc4542f48 100644 --- a/src/components/middle/message/Invoice.tsx +++ b/src/components/middle/message/Invoice.tsx @@ -1,21 +1,37 @@ -import React, { FC, memo } from '../../../lib/teact/teact'; +import React, { + FC, memo, useLayoutEffect, useRef, +} from '../../../lib/teact/teact'; import { ApiMessage } from '../../../api/types'; +import { ISettings } from '../../../types'; +import { CUSTOM_APPENDIX_ATTRIBUTE } from '../../../config'; import { getMessageInvoice } from '../../../global/helpers'; import { formatCurrency } from '../../../util/formatCurrency'; import renderText from '../../common/helpers/renderText'; +import getCustomAppendixBg from './helpers/getCustomAppendixBg'; import useLang from '../../../hooks/useLang'; import './Invoice.scss'; type OwnProps = { message: ApiMessage; + shouldAffectAppendix?: boolean; + isInSelectMode?: boolean; + isSelected?: boolean; + theme: ISettings['theme']; }; const Invoice: FC = ({ message, + shouldAffectAppendix, + isInSelectMode, + isSelected, + theme, }) => { + // eslint-disable-next-line no-null/no-null + const ref = useRef(null); + const lang = useLang(); const invoice = getMessageInvoice(message); @@ -26,10 +42,30 @@ const Invoice: FC = ({ currency, isTest, photoUrl, + photoWidth, + photoHeight, } = invoice!; + useLayoutEffect(() => { + if (!shouldAffectAppendix) { + return; + } + + const contentEl = ref.current!.closest('.message-content')!; + + if (photoUrl) { + getCustomAppendixBg(photoUrl, false, isInSelectMode, isSelected, theme).then((appendixBg) => { + contentEl.style.setProperty('--appendix-bg', appendixBg); + contentEl.setAttribute(CUSTOM_APPENDIX_ATTRIBUTE, ''); + }); + } + }, [shouldAffectAppendix, photoUrl, isInSelectMode, isSelected, theme]); + + const photoStyle = photoHeight && photoWidth ? `aspect-ratio: ${photoWidth / photoHeight};` : undefined; + return (
{title && ( @@ -44,6 +80,8 @@ const Invoice: FC = ({ className="invoice-image" src={photoUrl} alt="" + style={photoStyle} + crossOrigin="anonymous" /> )}

diff --git a/src/components/middle/message/Message.scss b/src/components/middle/message/Message.scss index 2b34b6925..07c0debb4 100644 --- a/src/components/middle/message/Message.scss +++ b/src/components/middle/message/Message.scss @@ -133,7 +133,7 @@ &.has-inline-buttons { .message-content { - border-bottom-right-radius: var(--border-radius-messages-small); + --border-bottom-right-radius: var(--border-radius-messages-small); } } diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index e64db9e36..a054da50a 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -797,7 +797,15 @@ const Message: FC = ({ theme={theme} /> )} - {invoice && } + {invoice && ( + + )} {location && ( {