oxen-io/session-desktop
1
0
Fork 0
mirror of https://github.com/oxen-io/session-desktop.git synced 2023-12-14 02:12:57 +01:00
Code Issues Projects Releases Wiki Activity

feat: use quoteicon component in quoteimage

Browse source 
make sure to load message text is it exists for all quotes
This commit is contained in:
William Grant 2023-05-08 17:47:49 +10:00
parent b1cc6ad85e
commit 98e4474e75
3 changed files with 20 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ts/components/conversation/message/message-content/quote/QuoteIconContainer.tsx
View file

@ -24,7 +24,7 @@ const StyledQuoteIconContainer = styled.div`
position: relative; position: relative;
`; `;
const StyledQuoteIcon = styled.div` export const StyledQuoteIcon = styled.div`
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -37,7 +37,7 @@ const StyledQuoteIcon = styled.div`
justify-content: center; justify-content: center;
`; `;
const StyledQuoteIconBackground = styled.div` export const StyledQuoteIconBackground = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -58,11 +58,16 @@ const StyledQuoteIconBackground = styled.div`
} }
`; `;
export type QuoteIconTypes = Extract<
SessionIconType,
'file' | 'image' | 'play' | 'movie' | 'microphone'
>;
type QuoteIconProps = { type QuoteIconProps = {
icon: Extract<SessionIconType, 'file' | 'image' | 'play' | 'movie' | 'microphone'>; icon: QuoteIconTypes;
}; };
const QuoteIcon = (props: QuoteIconProps) => { export const QuoteIcon = (props: QuoteIconProps) => {
const { icon } = props; const { icon } = props;
const iconProps = icons[icon]; const iconProps = icons[icon];

17
ts/components/conversation/message/message-content/quote/QuoteImage.tsx
View file

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import { useDisableDrag } from '../../../../../hooks/useDisableDrag'; import { useDisableDrag } from '../../../../../hooks/useDisableDrag';
import { useEncryptedFileFetch } from '../../../../../hooks/useEncryptedFileFetch'; import { useEncryptedFileFetch } from '../../../../../hooks/useEncryptedFileFetch';
import styled from 'styled-components'; import styled from 'styled-components';
import { QuoteIcon, QuoteIconTypes } from './QuoteIconContainer';
const StyledQuoteImage = styled.div` const StyledQuoteImage = styled.div`
flex: initial; flex: initial;
@ -23,7 +23,7 @@ export const QuoteImage = (props: {
handleImageErrorBound: () => void; handleImageErrorBound: () => void;
url: string; url: string;
contentType: string; contentType: string;
icon?: string; icon?: QuoteIconTypes;
}) => { }) => {
const { url, icon, contentType, handleImageErrorBound } = props; const { url, icon, contentType, handleImageErrorBound } = props;
const disableDrag = useDisableDrag(); const disableDrag = useDisableDrag();
@ -31,18 +31,7 @@ export const QuoteImage = (props: {
const { loading, urlToLoad } = useEncryptedFileFetch(url, contentType, false); const { loading, urlToLoad } = useEncryptedFileFetch(url, contentType, false);
const srcData = !loading ? urlToLoad : ''; const srcData = !loading ? urlToLoad : '';
const iconElement = icon ? ( const iconElement = icon ? <QuoteIcon icon={icon} /> : null;
<div className="module-quote__icon-container__inner">
<div className="module-quote__icon-container__circle-background">
<div
className={classNames(
'module-quote__icon-container__icon',
`module-quote__icon-container__icon--${icon}`
)}
/>
</div>
</div>
) : null;
return ( return (
<StyledQuoteImage> <StyledQuoteImage>

10
ts/components/conversation/message/message-content/quote/QuoteText.tsx
View file

@ -55,7 +55,13 @@ function getTypeLabel({
if (MIME.isAudio(contentType)) { if (MIME.isAudio(contentType)) {
return window.i18n('audio'); return window.i18n('audio');
} }
if (
!GoogleChrome.isVideoTypeSupported(contentType) &&
!GoogleChrome.isImageTypeSupported(contentType) &&
!MIME.isAudio(contentType)
) {
return window.i18n('document');
}
return; return;
} }
@ -71,7 +77,7 @@ export const QuoteText = (
const { contentType, isVoiceMessage } = attachment; const { contentType, isVoiceMessage } = attachment;
const typeLabel = getTypeLabel({ contentType, isVoiceMessage }); const typeLabel = getTypeLabel({ contentType, isVoiceMessage });
if (typeLabel) { if (typeLabel && !text) {
return <div>{typeLabel}</div>; return <div>{typeLabel}</div>;
} }
} }