diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss index 881f2929d..bab7b6b97 100644 --- a/src/components/middle/MiddleColumn.scss +++ b/src/components/middle/MiddleColumn.scss @@ -16,7 +16,7 @@ left: 0; bottom: 0; right: 0; - background-color: #F2EBCE; + background-color: #A2AF8E; } &::after { @@ -25,7 +25,7 @@ background-repeat: no-repeat; background-size: cover; - .disable-animations #root & { + body:not(.animation-level-0) #root & { transition: opacity .2s !important; } diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss index b85805caf..d84ca45dd 100644 --- a/src/components/middle/composer/Composer.scss +++ b/src/components/middle/composer/Composer.scss @@ -157,21 +157,16 @@ position: relative; z-index: 1; - &::before { - content: ''; - display: block; + + .svg-appendix { position: absolute; bottom: -.1875rem; right: -.5625rem; width: .5625rem; height: 1.25rem; - // background-image: url('../../../../assets/chat-bubble-white.svg'); - background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciB4PSItNTAlIiB5PSItMTQuNyUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjE0MS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIxIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAuMDYyMTk2MjQ4MiAwIDAgMCAwIDAuMTM4NTc0MTQ0IDAgMCAwIDAgMC4xODUwMzczNjQgMCAwIDAgMC4xNSAwIiBpbj0ic2hhZG93Qmx1ck91dGVyMSIvPjwvZmlsdGVyPjxwYXRoIGQ9Ik0zIDE3aDZWMGMtLjE5MyAyLjg0LS44NzYgNS43NjctMi4wNSA4Ljc4Mi0uOTA0IDIuMzI1LTIuNDQ2IDQuNDg1LTQuNjI1IDYuNDhBMSAxIDAgMDAzIDE3eiIgaWQ9ImIiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PC9nPjwvc3ZnPg==); - background-position: bottom left; - transform: scaleX(-1); - - .theme-dark & { - background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjA1IiBoZWlnaHQ9IjIwMCI+PGZlT2Zmc2V0IHJlc3VsdD0ib2ZmT3V0IiBpbj0iU291cmNlQWxwaGEiIGR5PSIxIi8+PGZlQ29sb3JNYXRyaXggcmVzdWx0PSJtYXRyaXhPdXQiIGluPSJvZmZPdXQiIHZhbHVlcz0iMC4xMyAwIDAgMCAwIDAgMC4xMyAwIDAgMCAwIDAgMC4xMyAwIDAgMCAwIDAgMC42IDAiLz48ZmVHYXVzc2lhbkJsdXIgcmVzdWx0PSJibHVyT3V0IiBpbj0ibWF0cml4T3V0IiBzdGREZXZpYXRpb249IjEiLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJibHVyT3V0Ii8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTMgMTdoNlYwYy0uMTkzIDIuODQtLjg3NiA1Ljc2Ny0yLjA1IDguNzgyLS45MDQgMi4zMjUtMi40NDYgNC40ODUtNC42MjUgNi40OEExIDEgMCAwMDMgMTd6IiBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiLz48cGF0aCBkPSJNMyAxN2g2VjBjLS4xOTMgMi44NC0uODc2IDUuNzY3LTIuMDUgOC43ODItLjkwNCAyLjMyNS0yLjQ0NiA0LjQ4NS00LjYyNSA2LjQ4QTEgMSAwIDAwMyAxN3oiIGZpbGw9IiMyMTIxMjEiLz48L2c+PC9zdmc+); + + .corner { + fill: var(--color-background); } } diff --git a/src/components/middle/composer/Composer.tsx b/src/components/middle/composer/Composer.tsx index 8bf2a32e6..df769d9d4 100644 --- a/src/components/middle/composer/Composer.tsx +++ b/src/components/middle/composer/Composer.tsx @@ -138,6 +138,8 @@ const MOBILE_KEYBOARD_HIDE_DELAY_MS = 100; const SELECT_MODE_TRANSITION_MS = 200; const CAPTION_MAX_LENGTH = 1024; const SENDING_ANIMATION_DURATION = 350; +// eslint-disable-next-line max-len +const APPENDIX = ''; const Composer: FC = ({ dropAreaState, @@ -184,6 +186,8 @@ const Composer: FC = ({ openChat, clearReceipt, }) => { + // eslint-disable-next-line no-null/no-null + const appendixRef = useRef(null); const [html, setHtml] = useState(''); const lastMessageSendTimeSeconds = useRef(); const prevDropAreaState = usePrevious(dropAreaState); @@ -208,6 +212,14 @@ const Composer: FC = ({ } }, [chatId, loadScheduledHistory, lastSyncTime, threadId]); + useEffect(() => { + if (!appendixRef.current) { + return; + } + + appendixRef.current.innerHTML = APPENDIX; + }, []); + useEffect(() => { if (contentToBeScheduled) { setScheduledMessageArgs(contentToBeScheduled); @@ -686,6 +698,7 @@ const Composer: FC = ({ usersById={usersById} />
+
{allowedAttachmentOptions.canAttachEmbedLinks && ( diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index eef0f0919..d85ba1f0c 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -3,6 +3,7 @@ import React, { FC, memo, useCallback, + useEffect, useMemo, useRef, } from '../../../lib/teact/teact'; @@ -148,6 +149,10 @@ type DispatchProps = Pick = ({ message, @@ -208,6 +213,8 @@ const Message: FC = ({ const ref = useRef(null); // eslint-disable-next-line no-null/no-null const bottomMarkerRef = useRef(null); + // eslint-disable-next-line no-null/no-null + const appendixRef = useRef(null); useOnIntersect(bottomMarkerRef, observeIntersectionForBottom); @@ -275,6 +282,13 @@ const Message: FC = ({ useEnsureMessage(chatId, hasReply ? message.replyToMessageId : undefined, replyMessage, message.id); useFocusMessage(ref, chatId, isFocused, focusDirection, noFocusHighlight); + useEffect(() => { + if (!appendixRef.current) { + return; + } + + appendixRef.current.innerHTML = isOwn ? APPENDIX_OWN : APPENDIX_NOT_OWN; + }, [isOwn]); const handleGroupDocumentMessagesSelect = useCallback((e: ReactMouseEvent) => { e.stopPropagation(); @@ -696,6 +710,7 @@ const Message: FC = ({ // @ts-ignore style={style} > + {contentClassName.includes('has-appendix') && (
)} {asForwarded && !customShape && (!isInDocumentGroup || isFirstInDocumentGroup) && (
{lang('ForwardedMessage')}
)} diff --git a/src/components/middle/message/MessageMeta.scss b/src/components/middle/message/MessageMeta.scss index b02e0f1f5..84a779d31 100644 --- a/src/components/middle/message/MessageMeta.scss +++ b/src/components/middle/message/MessageMeta.scss @@ -49,6 +49,8 @@ .media:not(.text) &, .Message .custom-shape & { background: rgba(0,0,0, 0.2); + --color-accent-own: white; + --color-accent: white; color: white !important; opacity: 1; bottom: .25rem; diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index dca2290e8..9897bef91 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -116,95 +116,41 @@ } } - &.has-appendix { - .Message.own & { - &::before { - right: -.5625rem; - background-position: bottom right; - background-image: url('data:image/svg+xml,%3Csvg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cdefs%3E%3Cfilter x="-50%25" y="-14.7%25" width="200%25" height="141.2%25" filterUnits="objectBoundingBox" id="a"%3E%3CfeOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/%3E%3CfeGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/%3E%3CfeColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/%3E%3C/filter%3E%3Cpath d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" id="b"/%3E%3C/defs%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cuse fill="%23000" filter="url(%23a)" xlink:href="%23b"/%3E%3Cuse fill="%23EEFFDE" xlink:href="%23b"/%3E%3C/g%3E%3C/svg%3E'); - } - - .theme-dark &:not([data-has-custom-appendix])::before { - background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciBpZD0iYSIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwNSIgaGVpZ2h0PSIyMDAiPjxmZU9mZnNldCByZXN1bHQ9Im9mZk91dCIgaW49IlNvdXJjZUFscGhhIiBkeD0iLTEiIGR5PSIxIi8+PGZlQ29sb3JNYXRyaXggcmVzdWx0PSJtYXRyaXhPdXQiIGluPSJvZmZPdXQiIHZhbHVlcz0iMC4xMyAwIDAgMCAwIDAgMC4xMyAwIDAgMCAwIDAgMC4xMyAwIDAgMCAwIDAgMC42IDAiLz48ZmVHYXVzc2lhbkJsdXIgcmVzdWx0PSJibHVyT3V0IiBpbj0ibWF0cml4T3V0IiBzdGREZXZpYXRpb249IjEiLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJibHVyT3V0Ii8+PC9maWx0ZXI+PHBhdGggZD0iTTYgMTdIMFYwYy4xOTMgMi44NC44NzYgNS43NjcgMi4wNSA4Ljc4Mi45MDQgMi4zMjUgMi40NDYgNC40ODUgNC42MjUgNi40OEExIDEgMCAwMTYgMTd6IiBpZD0iYiIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjx1c2UgZmlsbD0iIzAwMCIgZmlsdGVyPSJ1cmwoI2EpIiB4bGluazpocmVmPSIjYiIvPjx1c2UgZmlsbD0iIzlBNUYzRiIgeGxpbms6aHJlZj0iI2IiLz48L2c+PC9zdmc+); - } - } - - .Message:not(.own) & { - &::before { - left: -.5625rem; - background-position: bottom left; - background-image: url('data:image/svg+xml,%3Csvg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cdefs%3E%3Cfilter x="-50%25" y="-14.7%25" width="200%25" height="141.2%25" filterUnits="objectBoundingBox" id="a"%3E%3CfeOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/%3E%3CfeGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/%3E%3CfeColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/%3E%3C/filter%3E%3Cpath d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" id="b"/%3E%3C/defs%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cuse fill="%23000" filter="url(%23a)" xlink:href="%23b"/%3E%3Cuse fill="%23FFF" xlink:href="%23b"/%3E%3C/g%3E%3C/svg%3E'); - } - - .theme-dark &:not([data-has-custom-appendix])::before { - background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjA1IiBoZWlnaHQ9IjIwMCI+PGZlT2Zmc2V0IHJlc3VsdD0ib2ZmT3V0IiBpbj0iU291cmNlQWxwaGEiIGR5PSIxIi8+PGZlQ29sb3JNYXRyaXggcmVzdWx0PSJtYXRyaXhPdXQiIGluPSJvZmZPdXQiIHZhbHVlcz0iMC4xMyAwIDAgMCAwIDAgMC4xMyAwIDAgMCAwIDAgMC4xMyAwIDAgMCAwIDAgMC42IDAiLz48ZmVHYXVzc2lhbkJsdXIgcmVzdWx0PSJibHVyT3V0IiBpbj0ibWF0cml4T3V0IiBzdGREZXZpYXRpb249IjEiLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJibHVyT3V0Ii8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTMgMTdoNlYwYy0uMTkzIDIuODQtLjg3NiA1Ljc2Ny0yLjA1IDguNzgyLS45MDQgMi4zMjUtMi40NDYgNC40ODUtNC42MjUgNi40OEExIDEgMCAwMDMgMTd6IiBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiLz48cGF0aCBkPSJNMyAxN2g2VjBjLS4xOTMgMi44NC0uODc2IDUuNzY3LTIuMDUgOC43ODItLjkwNCAyLjMyNS0yLjQ0NiA0LjQ4NS00LjYyNSA2LjQ4QTEgMSAwIDAwMyAxN3oiIGZpbGw9IiMyMTIxMjEiLz48L2c+PC9zdmc+); - } - } - - &:not(.has-solid-background) { - .Message.is-in-selection-mode.is-album:not(.own) & { - &::before { - bottom: -.125rem !important; - left: -.5rem; - z-index: 2; - } - } - - .Message.is-in-selection-mode.is-album.own & { - &::before { - bottom: -.125rem !important; - right: -.5rem; - z-index: 2; - } - } - } - - &::before { - content: ''; - display: block; - position: absolute; - bottom: -.1875rem; - width: .5625rem; - height: 1.25rem; - } + &:not(.has-appendix) .svg-appendix { + display: none; } - &.has-appendix-thumb { + .svg-appendix { + position: absolute; + bottom: -.1875rem; + width: .5625rem; + height: 1.25rem; + + .corner { + fill: var(--background-color); + } .Message.own & { - &::after { - right: -.5625rem; - background-position: bottom right; - background-image: url('data:image/svg+xml,%3Csvg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cdefs%3E%3Cfilter x="-50%25" y="-14.7%25" width="200%25" height="141.2%25" filterUnits="objectBoundingBox" id="a"%3E%3CfeOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/%3E%3CfeGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/%3E%3CfeColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/%3E%3C/filter%3E%3Cpath d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" id="b"/%3E%3C/defs%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cuse fill="%23000" filter="url(%23a)" xlink:href="%23b"/%3E%3Cuse fill="%23CCCCCC" xlink:href="%23b"/%3E%3C/g%3E%3C/svg%3E'); - } + right: -.5625rem; } .Message:not(.own) & { - &::after { - left: -.5625rem; - background-position: bottom left; - background-image: url('data:image/svg+xml,%3Csvg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cdefs%3E%3Cfilter x="-50%25" y="-14.7%25" width="200%25" height="141.2%25" filterUnits="objectBoundingBox" id="a"%3E%3CfeOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/%3E%3CfeGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/%3E%3CfeColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/%3E%3C/filter%3E%3Cpath d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" id="b"/%3E%3C/defs%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cuse fill="%23000" filter="url(%23a)" xlink:href="%23b"/%3E%3Cuse fill="%23CCCCCC" xlink:href="%23b"/%3E%3C/g%3E%3C/svg%3E'); - } - } - - &::after { - content: ''; - display: block; - position: absolute; - bottom: -.1875rem; - width: .5625rem; - height: 1.25rem; - opacity: 1; - transition: opacity 500ms ease; + left: -.5625rem; } } &[data-has-custom-appendix] { - &::before { - background-image: var(--appendix-bg) !important; + .svg-appendix .corner { + fill: var(--appendix-bg); } + } - &::after { - opacity: 0; + &.has-appendix-thumb { + .Message & { + .svg-appendix { + --background-color: #ccc; + opacity: 1; + transition: opacity 500ms ease; + } } } diff --git a/src/components/middle/message/helpers/getCustomAppendixBg.ts b/src/components/middle/message/helpers/getCustomAppendixBg.ts index 66b18a992..fd828c270 100644 --- a/src/components/middle/message/helpers/getCustomAppendixBg.ts +++ b/src/components/middle/message/helpers/getCustomAppendixBg.ts @@ -1,24 +1,7 @@ -// eslint-disable-next-line max-len -const SAMPLE_OWN = ''; -// eslint-disable-next-line max-len -const SAMPLE_NOT_OWN = ''; -// eslint-disable-next-line max-len -const SAMPLE_OWN_SELECTED = ''; -// eslint-disable-next-line max-len -const SAMPLE_NOT_OWN_SELECTED = ''; - const SELECTED_APPENDIX_BACKGROUND = 'rgba(255,255,255,1)'; export default async (src: string, isOwn: boolean, inSelectMode?: boolean, isSelected?: boolean) => { - const color = isSelected ? SELECTED_APPENDIX_BACKGROUND : await getAppendixColorFromImage(src, isOwn); - let svg; - if (inSelectMode) { - svg = (isOwn ? SAMPLE_OWN_SELECTED : SAMPLE_NOT_OWN_SELECTED); - } else { - svg = (isOwn ? SAMPLE_OWN : SAMPLE_NOT_OWN); - } - svg = svg.replace('{FILL}', color); - return `url('data:image/svg+xml,${encodeURIComponent(svg)}')`; + return isSelected ? SELECTED_APPENDIX_BACKGROUND : getAppendixColorFromImage(src, isOwn); }; async function getAppendixColorFromImage(src: string, isOwn: boolean) { diff --git a/src/styles/themes.json b/src/styles/themes.json index 6ab3e67b6..92c8eea6f 100644 --- a/src/styles/themes.json +++ b/src/styles/themes.json @@ -10,7 +10,7 @@ "--color-borders-input": ["#DADCE0", "#5B5B5A"], "--color-links": ["#52A1EF", "#868DF6"], "--color-gray": ["#C4C9CC", "#808080"], - "--color-default-shadow": ["#72727240", "#00000099"], + "--color-default-shadow": ["#72727240", "#21212140"], "--color-light-shadow": ["#7272722B", "#00000040"], "--color-green": ["#4DCD5E", "#868DF5"], "--color-text-meta-colored": ["#4DCD5E", "#868DF5"],