ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better Dark theme

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-04-13 11:44:36 +03:00
parent 9fa042fdf9
commit e8b9adedc1
8 changed files with 62 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/middle/MiddleColumn.scss
View File

@ -16,7 +16,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background-color: #F2EBCE; background-color: #A2AF8E;
} }
&::after { &::after {
@ -25,7 +25,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
.disable-animations #root & { body:not(.animation-level-0) #root & {
transition: opacity .2s !important; transition: opacity .2s !important;
} }

15
src/components/middle/composer/Composer.scss
View File

@ -157,21 +157,16 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
&::before {
content: ''; .svg-appendix {
display: block;
position: absolute; position: absolute;
bottom: -.1875rem; bottom: -.1875rem;
right: -.5625rem; right: -.5625rem;
width: .5625rem; width: .5625rem;
height: 1.25rem; 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==); .corner {
background-position: bottom left; fill: var(--color-background);
transform: scaleX(-1);
.theme-dark & {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjA1IiBoZWlnaHQ9IjIwMCI+PGZlT2Zmc2V0IHJlc3VsdD0ib2ZmT3V0IiBpbj0iU291cmNlQWxwaGEiIGR5PSIxIi8+PGZlQ29sb3JNYXRyaXggcmVzdWx0PSJtYXRyaXhPdXQiIGluPSJvZmZPdXQiIHZhbHVlcz0iMC4xMyAwIDAgMCAwIDAgMC4xMyAwIDAgMCAwIDAgMC4xMyAwIDAgMCAwIDAgMC42IDAiLz48ZmVHYXVzc2lhbkJsdXIgcmVzdWx0PSJibHVyT3V0IiBpbj0ibWF0cml4T3V0IiBzdGREZXZpYXRpb249IjEiLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJibHVyT3V0Ii8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTMgMTdoNlYwYy0uMTkzIDIuODQtLjg3NiA1Ljc2Ny0yLjA1IDguNzgyLS45MDQgMi4zMjUtMi40NDYgNC40ODUtNC42MjUgNi40OEExIDEgMCAwMDMgMTd6IiBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiLz48cGF0aCBkPSJNMyAxN2g2VjBjLS4xOTMgMi44NC0uODc2IDUuNzY3LTIuMDUgOC43ODItLjkwNCAyLjMyNS0yLjQ0NiA0LjQ4NS00LjYyNSA2LjQ4QTEgMSAwIDAwMyAxN3oiIGZpbGw9IiMyMTIxMjEiLz48L2c+PC9zdmc+);
} }
} }

13
src/components/middle/composer/Composer.tsx
View File

@ -138,6 +138,8 @@ const MOBILE_KEYBOARD_HIDE_DELAY_MS = 100;
const SELECT_MODE_TRANSITION_MS = 200; const SELECT_MODE_TRANSITION_MS = 200;
const CAPTION_MAX_LENGTH = 1024; const CAPTION_MAX_LENGTH = 1024;
const SENDING_ANIMATION_DURATION = 350; const SENDING_ANIMATION_DURATION = 350;
// eslint-disable-next-line max-len
const APPENDIX = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix 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"/></filter></defs><g fill="none" fill-rule="evenodd"><path 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" fill="#000" filter="url(#a)"/><path 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" fill="#FFF" class="corner"/></g></svg>';
const Composer: FC<OwnProps & StateProps & DispatchProps> = ({ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
dropAreaState, dropAreaState,
@ -184,6 +186,8 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
openChat, openChat,
clearReceipt, clearReceipt,
}) => { }) => {
// eslint-disable-next-line no-null/no-null
const appendixRef = useRef<HTMLDivElement>(null);
const [html, setHtml] = useState<string>(''); const [html, setHtml] = useState<string>('');
const lastMessageSendTimeSeconds = useRef<number>(); const lastMessageSendTimeSeconds = useRef<number>();
const prevDropAreaState = usePrevious(dropAreaState); const prevDropAreaState = usePrevious(dropAreaState);
@ -208,6 +212,14 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
} }
}, [chatId, loadScheduledHistory, lastSyncTime, threadId]); }, [chatId, loadScheduledHistory, lastSyncTime, threadId]);
useEffect(() => {
if (!appendixRef.current) {
return;
}
appendixRef.current.innerHTML = APPENDIX;
}, []);
useEffect(() => { useEffect(() => {
if (contentToBeScheduled) { if (contentToBeScheduled) {
setScheduledMessageArgs(contentToBeScheduled); setScheduledMessageArgs(contentToBeScheduled);
@ -686,6 +698,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
usersById={usersById} usersById={usersById}
/> />
<div id="message-compose"> <div id="message-compose">
<div className="svg-appendix" ref={appendixRef} />
<ComposerEmbeddedMessage /> <ComposerEmbeddedMessage />
{allowedAttachmentOptions.canAttachEmbedLinks && ( {allowedAttachmentOptions.canAttachEmbedLinks && (
<WebPagePreview chatId={chatId} messageText={!attachments.length ? html : ''} /> <WebPagePreview chatId={chatId} messageText={!attachments.length ? html : ''} />

15
src/components/middle/message/Message.tsx
View File

@ -3,6 +3,7 @@ import React, {
FC, FC,
memo, memo,
useCallback, useCallback,
useEffect,
useMemo, useMemo,
useRef, useRef,
} from '../../../lib/teact/teact'; } from '../../../lib/teact/teact';
@ -148,6 +149,10 @@ type DispatchProps = Pick<GlobalActions, (
const NBSP = '\u00A0'; const NBSP = '\u00A0';
const GROUP_MESSAGE_HOVER_ATTRIBUTE = 'data-is-document-group-hover'; const GROUP_MESSAGE_HOVER_ATTRIBUTE = 'data-is-document-group-hover';
// eslint-disable-next-line max-len
const APPENDIX_OWN = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix 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"/></filter></defs><g fill="none" fill-rule="evenodd"><path 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" fill="#000" filter="url(#a)"/><path 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" fill="#EEFFDE" class="corner"/></g></svg>';
// eslint-disable-next-line max-len
const APPENDIX_NOT_OWN = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix 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"/></filter></defs><g fill="none" fill-rule="evenodd"><path 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" fill="#000" filter="url(#a)"/><path 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" fill="#FFF" class="corner"/></g></svg>';
const Message: FC<OwnProps & StateProps & DispatchProps> = ({ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
message, message,
@ -208,6 +213,8 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const bottomMarkerRef = useRef<HTMLDivElement>(null); const bottomMarkerRef = useRef<HTMLDivElement>(null);
// eslint-disable-next-line no-null/no-null
const appendixRef = useRef<HTMLDivElement>(null);
useOnIntersect(bottomMarkerRef, observeIntersectionForBottom); useOnIntersect(bottomMarkerRef, observeIntersectionForBottom);
@ -275,6 +282,13 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
useEnsureMessage(chatId, hasReply ? message.replyToMessageId : undefined, replyMessage, message.id); useEnsureMessage(chatId, hasReply ? message.replyToMessageId : undefined, replyMessage, message.id);
useFocusMessage(ref, chatId, isFocused, focusDirection, noFocusHighlight); 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<HTMLDivElement, MouseEvent>) => { const handleGroupDocumentMessagesSelect = useCallback((e: ReactMouseEvent<HTMLDivElement, MouseEvent>) => {
e.stopPropagation(); e.stopPropagation();
@ -696,6 +710,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
// @ts-ignore // @ts-ignore
style={style} style={style}
> >
{contentClassName.includes('has-appendix') && (<div className="svg-appendix" ref={appendixRef} />)}
{asForwarded && !customShape && (!isInDocumentGroup || isFirstInDocumentGroup) && ( {asForwarded && !customShape && (!isInDocumentGroup || isFirstInDocumentGroup) && (
<div className="message-title">{lang('ForwardedMessage')}</div> <div className="message-title">{lang('ForwardedMessage')}</div>
)} )}

2
src/components/middle/message/MessageMeta.scss
View File

@ -49,6 +49,8 @@
.media:not(.text) &, .media:not(.text) &,
.Message .custom-shape & { .Message .custom-shape & {
background: rgba(0,0,0, 0.2); background: rgba(0,0,0, 0.2);
--color-accent-own: white;
--color-accent: white;
color: white !important; color: white !important;
opacity: 1; opacity: 1;
bottom: .25rem; bottom: .25rem;

100
src/components/middle/message/_message-content.scss
View File

@ -116,95 +116,41 @@
} }
} }
&.has-appendix { &:not(.has-appendix) .svg-appendix {
.Message.own & { display: none;
&::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;
}
} }
&.has-appendix-thumb { .svg-appendix {
position: absolute;
bottom: -.1875rem;
width: .5625rem;
height: 1.25rem;
.corner {
fill: var(--background-color);
}
.Message.own & { .Message.own & {
&::after { right: -.5625rem;
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');
}
} }
.Message:not(.own) & { .Message:not(.own) & {
&::after { left: -.5625rem;
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;
} }
} }
&[data-has-custom-appendix] { &[data-has-custom-appendix] {
&::before { .svg-appendix .corner {
background-image: var(--appendix-bg) !important; fill: var(--appendix-bg);
} }
}
&::after { &.has-appendix-thumb {
opacity: 0; .Message & {
.svg-appendix {
--background-color: #ccc;
opacity: 1;
transition: opacity 500ms ease;
}
} }
} }

19
src/components/middle/message/helpers/getCustomAppendixBg.ts
View File

@ -1,24 +1,7 @@
// eslint-disable-next-line max-len
const SAMPLE_OWN = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix 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"/></filter><path 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"/></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="{FILL}" xlink:href="#b"/></g></svg>';
// eslint-disable-next-line max-len
const SAMPLE_NOT_OWN = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix 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"/></filter><path 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"/></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="{FILL}" xlink:href="#b"/></g></svg>';
// eslint-disable-next-line max-len
const SAMPLE_OWN_SELECTED = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix 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"/></filter><path d="M6 17.5H0V0c .193 3.84.876 5.767 2.05 9.782.904 2.325 2.446 4.485 4.925 6.95A1 1 0 017 17.5z" id="b" stroke="white" stroke-width="1" stroke-dasharray="36 15" stroke-dashoffset="30"/></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="{FILL}" xlink:href="#b"/></g></svg>';
// eslint-disable-next-line max-len
const SAMPLE_NOT_OWN_SELECTED = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix 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"/></filter><path d="M3 17.5h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17.5z" id="b" stroke="white" stroke-width="1" stroke-dasharray="36 15" stroke-dashoffset="30"/></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="{FILL}" xlink:href="#b"/></g></svg>';
const SELECTED_APPENDIX_BACKGROUND = 'rgba(255,255,255,1)'; const SELECTED_APPENDIX_BACKGROUND = 'rgba(255,255,255,1)';
export default async (src: string, isOwn: boolean, inSelectMode?: boolean, isSelected?: boolean) => { export default async (src: string, isOwn: boolean, inSelectMode?: boolean, isSelected?: boolean) => {
const color = isSelected ? SELECTED_APPENDIX_BACKGROUND : await getAppendixColorFromImage(src, isOwn); return isSelected ? SELECTED_APPENDIX_BACKGROUND : 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)}')`;
}; };
async function getAppendixColorFromImage(src: string, isOwn: boolean) { async function getAppendixColorFromImage(src: string, isOwn: boolean) {

2
src/styles/themes.json
View File

@ -10,7 +10,7 @@
"--color-borders-input": ["#DADCE0", "#5B5B5A"], "--color-borders-input": ["#DADCE0", "#5B5B5A"],
"--color-links": ["#52A1EF", "#868DF6"], "--color-links": ["#52A1EF", "#868DF6"],
"--color-gray": ["#C4C9CC", "#808080"], "--color-gray": ["#C4C9CC", "#808080"],
"--color-default-shadow": ["#72727240", "#00000099"], "--color-default-shadow": ["#72727240", "#21212140"],
"--color-light-shadow": ["#7272722B", "#00000040"], "--color-light-shadow": ["#7272722B", "#00000040"],
"--color-green": ["#4DCD5E", "#868DF5"], "--color-green": ["#4DCD5E", "#868DF5"],
"--color-text-meta-colored": ["#4DCD5E", "#868DF5"], "--color-text-meta-colored": ["#4DCD5E", "#868DF5"],