keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Merge pull request #3099 from yougotwill/fix/no-ref/message_preview_status

Browse Source 
fix: message preview status icon was shrinking due to text overflow
pull/3113/head
Audric Ackermann 11 months ago committed by GitHub
parent 009bc18903 12caf66cde
commit d3cbe3d93d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 62 additions and 26 deletions
Show Stats Download Patch File Download Diff File

14
ts/components/icon/Icons.tsx
Unescape Escape View File

@ -88,7 +88,19 @@ export type SessionIconType =
export type SessionIconSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge' | 'huge2' | 'max';
export const icons: Record<string, { path: string; viewBox: string; ratio: number }> = {
export type ClipRule = 'nonzero' | 'evenodd' | 'inherit';
export type FillRule = 'nonzero' | 'evenodd';
type IconProps = {
path: string;
viewBox: string;
ratio: number;
fill?: string;
clipRule?: ClipRule;
fillRule?: FillRule;
};
export const icons: Record<SessionIconType, IconProps> = {
addUser: {
path: 'M8.85,2.17c-1.73,0-3.12,1.4-3.12,3.12s1.4,3.12,3.12,3.12c1.73,0,3.13-1.4,3.13-3.12S10.58,2.17,8.85,2.17z M8.85,0.08c2.88,0,5.21,2.33,5.21,5.21s-2.33,5.21-5.21,5.21s-5.2-2.33-5.2-5.21C3.65,2.42,5.98,0.08,8.85,0.08z M20.83,5.29 c0.54,0,0.98,0.41,1.04,0.93l0.01,0.11v2.08h2.08c0.54,0,0.98,0.41,1.04,0.93v0.12c0,0.54-0.41,0.98-0.93,1.04l-0.11,0.01h-2.08 v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08h-2.08c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11 c0-0.54,0.41-0.98,0.93-1.04l0.11-0.01h2.08V6.34C19.79,5.76,20.26,5.29,20.83,5.29z M12.5,12.58c2.8,0,5.09,2.21,5.2,4.99v0.22 v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08c0-1.67-1.3-3.03-2.95-3.12h-0.18H5.21 c-1.67,0-3.03,1.3-3.12,2.95v0.18v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93L0,19.88V17.8 c0-2.8,2.21-5.09,4.99-5.2h0.22h7.29V12.58z',
viewBox: '0 0 25 21',

54
ts/components/icon/SessionIcon.tsx
Unescape Escape View File

@ -1,7 +1,8 @@
import React from 'react';
import styled, { css, keyframes } from 'styled-components';
import React, { memo } from 'react';
import styled, { css, CSSProperties, keyframes } from 'styled-components';
import { icons, SessionIconSize, SessionIconType } from '.';
import { ClipRule, FillRule } from './Icons';
export type SessionIconProps = {
iconType: SessionIconType;
@ -15,6 +16,7 @@ export type SessionIconProps = {
glowStartDelay?: number;
noScale?: boolean;
backgroundColor?: string;
style?: CSSProperties;
dataTestId?: string;
unreadCount?: number;
};
@ -55,6 +57,9 @@ type StyledSvgProps = {
noScale?: boolean;
iconColor?: string;
backgroundColor?: string;
fill?: string;
clipRule?: ClipRule;
filleRule?: FillRule;
};
const rotate = keyframes`
@ -119,37 +124,28 @@ const animation = (props: {
return undefined;
};
const Svg = React.memo(styled.svg<StyledSvgProps>`
const Svg = memo(styled.svg<StyledSvgProps>`
width: ${props => props.width};
transform: ${props => `rotate(${props.iconRotation}deg)`};
${props => animation(props)};
border-radius: ${props => props.borderRadius};
background-color: ${props =>
props.backgroundColor ? props.backgroundColor : '--button-icon-background-color'};
border-radius: ${props => (props.borderRadius ? props.borderRadius : '')};
props.backgroundColor ? props.backgroundColor : 'var(--button-icon-background-color)'};
filter: ${props => (props.noScale ? `drop-shadow(0px 0px 4px ${props.iconColor})` : '')};
fill: ${props => (props.iconColor ? props.iconColor : '--button-icon-stroke-color')};
fill: ${props => (props.iconColor ? props.iconColor : 'var(--button-icon-stroke-color)')};
padding: ${props => (props.iconPadding ? props.iconPadding : '')};
transition: inherit;
`);
const SessionSvg = (props: {
viewBox: string;
path: string | Array<string>;
width: string | number;
height: string | number;
iconRotation: number;
iconColor?: string;
rotateDuration?: number;
glowDuration?: number;
glowStartDelay?: number;
noScale?: boolean;
borderRadius?: string;
backgroundColor?: string;
iconPadding?: string;
dataTestId?: string;
}) => {
const colorSvg = props.iconColor ? props.iconColor : '--button-icon-stroke-color';
const SessionSvg = (
props: StyledSvgProps & {
viewBox: string;
path: string | Array<string>;
style?: CSSProperties;
dataTestId?: string;
}
) => {
const colorSvg = props.iconColor ? props.iconColor : 'var(--button-icon-stroke-color)';
const pathArray = props.path instanceof Array ? props.path : [props.path];
const propsToPick = {
width: props.width,
@ -164,6 +160,10 @@ const SessionSvg = (props: {
backgroundColor: props.backgroundColor,
borderRadius: props.borderRadius,
iconPadding: props.iconPadding,
fill: props.fill,
clipRule: props.clipRule,
fillRule: props.filleRule,
style: props.style,
dataTestId: props.dataTestId,
};
@ -187,6 +187,7 @@ export const SessionIcon = (props: SessionIconProps) => {
noScale,
backgroundColor,
iconPadding,
style,
dataTestId,
} = props;
let { iconSize, iconRotation } = props;
@ -196,6 +197,9 @@ export const SessionIcon = (props: SessionIconProps) => {
const iconDimensions = getIconDimensionFromIconSize(iconSize);
const iconDef = icons[iconType];
const ratio = iconDef?.ratio || 1;
const fill = iconDef?.fill || undefined;
const clipRule = iconDef?.clipRule || 'nonzero';
const fillRule = iconDef?.fillRule || 'nonzero';
return (
<SessionSvg
@ -212,6 +216,10 @@ export const SessionIcon = (props: SessionIconProps) => {
iconColor={iconColor}
backgroundColor={backgroundColor}
iconPadding={iconPadding}
fill={fill}
clipRule={clipRule}
filleRule={fillRule}
style={style}
dataTestId={dataTestId}
/>
);

20
ts/components/leftpane/conversation-list-item/MessageItem.tsx
Unescape Escape View File

@ -68,13 +68,21 @@ function IconMessageStatus({ status }: { status: LastMessageStatusType }) {
const nonErrorIconColor = 'var(--text-secondary-color';
switch (status) {
case 'error':
return <SessionIcon iconColor={'var(--danger-color'} iconType="error" iconSize="tiny" />;
return (
<SessionIcon
iconColor={'var(--danger-color'}
iconType="error"
iconSize="tiny"
style={{ flexShrink: 0 }}
/>
);
case 'read':
return (
<SessionIcon
iconColor={nonErrorIconColor}
iconType="doubleCheckCircleFilled"
iconSize="tiny"
style={{ flexShrink: 0 }}
/>
);
case 'sending':
@ -84,10 +92,18 @@ function IconMessageStatus({ status }: { status: LastMessageStatusType }) {
iconColor={nonErrorIconColor}
iconType="sending"
iconSize="tiny"
style={{ flexShrink: 0 }}
/>
);
case 'sent':
return <SessionIcon iconColor={nonErrorIconColor} iconType="circleCheck" iconSize="tiny" />;
return (
<SessionIcon
iconColor={nonErrorIconColor}
iconType="circleCheck"
iconSize="tiny"
style={{ flexShrink: 0 }}
/>
);
case undefined:
return null;
default:

Write Preview
Loading…
Cancel
Save