Fix color of quotes in chats with custom colors
This commit is contained in:
parent
d4b0ae25c1
commit
187d06fd69
5 changed files with 35 additions and 12 deletions
|
@ -162,6 +162,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.module-quote--outgoing-custom {
|
||||
.module-quote__primary,
|
||||
&.module-quote__reference-warning {
|
||||
border-inline-start-color: variables.$color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.module-quote__primary {
|
||||
flex-grow: 1;
|
||||
padding-inline: 8px;
|
||||
|
|
|
@ -477,6 +477,14 @@ export function Quote(props: Props): JSX.Element | null {
|
|||
);
|
||||
}
|
||||
|
||||
const customColorStyle = getCustomColorStyle(customColor, true);
|
||||
|
||||
// We don't set a custom color for outgoing quotes
|
||||
const borderInlineStartColor =
|
||||
isIncoming || isCompose
|
||||
? customColorStyle?.borderInlineStartColor
|
||||
: undefined;
|
||||
|
||||
function renderReferenceWarning() {
|
||||
if (!referencedMessageNotFound || isStoryReply) {
|
||||
return null;
|
||||
|
@ -490,9 +498,7 @@ export function Quote(props: Props): JSX.Element | null {
|
|||
? getClassName(`--incoming-${conversationColor}`)
|
||||
: getClassName(`--outgoing-${conversationColor}`)
|
||||
)}
|
||||
style={{
|
||||
...getCustomColorStyle(customColor, true),
|
||||
}}
|
||||
style={{ ...customColorStyle, borderInlineStartColor }}
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
|
@ -546,9 +552,14 @@ export function Quote(props: Props): JSX.Element | null {
|
|||
!onClick && getClassName('--no-click'),
|
||||
referencedMessageNotFound && getClassName('--with-reference-warning')
|
||||
)}
|
||||
style={{ ...getCustomColorStyle(customColor, true) }}
|
||||
style={customColorStyle}
|
||||
>
|
||||
<div className={getClassName('__primary')}>
|
||||
<div
|
||||
className={getClassName('__primary')}
|
||||
style={
|
||||
borderInlineStartColor ? { borderInlineStartColor } : undefined
|
||||
}
|
||||
>
|
||||
{renderAuthor()}
|
||||
{renderGenericFile()}
|
||||
{renderPayment()}
|
||||
|
|
|
@ -141,6 +141,7 @@ import { migrateAllMessages } from '../../messages/migrateMessageData';
|
|||
import { trimBody } from '../../util/longAttachment';
|
||||
import { generateBackupsSubscriberData } from '../../util/backupSubscriptionData';
|
||||
import { getEnvironment, isTestEnvironment } from '../../environment';
|
||||
import { calculateLightness } from '../../util/getHSL';
|
||||
|
||||
const MAX_CONCURRENCY = 10;
|
||||
|
||||
|
@ -2784,10 +2785,14 @@ function checkServiceIdEquivalence(
|
|||
function desktopHslToRgbInt(
|
||||
hue: number,
|
||||
saturation: number,
|
||||
lightness = 1
|
||||
lightness?: number
|
||||
): number {
|
||||
// Desktop stores saturation not as 0.123 (0 to 1.0) but 12.3 (percentage)
|
||||
return hslToRGBInt(hue, saturation / 100, lightness);
|
||||
return hslToRGBInt(
|
||||
hue,
|
||||
saturation / 100,
|
||||
lightness ?? calculateLightness(hue)
|
||||
);
|
||||
}
|
||||
|
||||
function toGroupCallStateProto(state: CallStatus): Backups.GroupCall.State {
|
||||
|
|
|
@ -7,7 +7,7 @@ import { getHSL } from './getHSL';
|
|||
import { getUserTheme } from '../shims/getUserTheme';
|
||||
|
||||
type ExtraQuotePropsType = {
|
||||
borderLeftColor?: string;
|
||||
borderInlineStartColor?: string;
|
||||
};
|
||||
|
||||
type BackgroundPropertyType =
|
||||
|
@ -18,7 +18,7 @@ type BackgroundPropertyType =
|
|||
export function getCustomColorStyle(
|
||||
color?: CustomColorType,
|
||||
isQuote = false
|
||||
): BackgroundPropertyType {
|
||||
): (BackgroundPropertyType & ExtraQuotePropsType) | undefined {
|
||||
if (!color) {
|
||||
return undefined;
|
||||
}
|
||||
|
@ -33,7 +33,7 @@ export function getCustomColorStyle(
|
|||
if (theme === ThemeType.dark) {
|
||||
adjustedLightness = -0.4;
|
||||
}
|
||||
extraQuoteProps.borderLeftColor = getHSL(color.start);
|
||||
extraQuoteProps.borderInlineStartColor = getHSL(color.start);
|
||||
}
|
||||
|
||||
if (!color.end) {
|
||||
|
|
|
@ -18,7 +18,7 @@ function getLightnessFromHue(hue: number, min: number, max: number) {
|
|||
return (percentage * (maxValue - minValue)) / 100 + minValue;
|
||||
}
|
||||
|
||||
function calculateLightness(hue: number): number {
|
||||
export function calculateLightness(hue: number): number {
|
||||
let lightness = 45;
|
||||
if (hue < 60) {
|
||||
lightness = getLightnessFromHue(hue, 0, 60);
|
||||
|
@ -55,7 +55,7 @@ export function getHSL(
|
|||
adjustedLightness = 0
|
||||
): string {
|
||||
return `hsl(${hue}, ${saturation}%, ${
|
||||
lightness == null
|
||||
lightness == null || adjustedLightness !== 0
|
||||
? adjustLightnessValue(calculateLightness(hue), adjustedLightness)
|
||||
: lightness * 100
|
||||
}%)`;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue