Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2026-05-08 08:58:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

Selects custom color when created

Browse Source
This commit is contained in:
Josh Perez
2021-06-03 17:34:36 -04:00
committed by GitHub
parent 6d82acd23c
commit 53d6065c00
8 changed files with 158 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts/components/ChatColorPicker.stories.tsx
+4 -2
View File
@@ -24,17 +24,19 @@ const SAMPLE_CUSTOM_COLOR = {
const createProps = (): PropsType => ({
addCustomColor: action('addCustomColor'),
colorSelected: action('colorSelected'),
editCustomColor: action('editCustomColor'),
getConversationsWithCustomColor: (_: string) => [],
i18n,
onChatColorReset: action('onChatColorReset'),
onSelectColor: action('onSelectColor'),
removeCustomColor: action('removeCustomColor'),
removeCustomColorOnConversations: action('removeCustomColorOnConversations'),
resetAllChatColors: action('resetAllChatColors'),
resetDefaultChatColor: action('resetDefaultChatColor'),
selectedColor: select('selectedColor', ConversationColors, 'basil' as const),
selectedCustomColor: {},
setGlobalDefaultConversationColor: action(
'setGlobalDefaultConversationColor'
),
});
story.add('Default', () => <ChatColorPicker {...createProps()} />);
ts/components/ChatColorPicker.tsx
+57 -19
View File
@@ -24,48 +24,60 @@ type CustomColorDataType = {
};
export type PropsDataType = {
conversationId?: string;
customColors?: Record<string, CustomColorType>;
getConversationsWithCustomColor: (colorId: string) => Array<ConversationType>;
i18n: LocalizerType;
isGlobal?: boolean;
onChatColorReset?: () => unknown;
onSelectColor: (
selectedColor?: ConversationColorType;
selectedCustomColor: CustomColorDataType;
};
type PropsActionType = {
addCustomColor: (
color: CustomColorType,
nextAction: (uuid: string) => unknown
) => unknown;
colorSelected: (payload: {
conversationId: string;
conversationColor?: ConversationColorType;
customColorData?: {
id: string;
value: CustomColorType;
};
}) => unknown;
editCustomColor: (colorId: string, color: CustomColorType) => unknown;
removeCustomColor: (colorId: string) => unknown;
removeCustomColorOnConversations: (colorId: string) => unknown;
resetAllChatColors: () => unknown;
resetDefaultChatColor: () => unknown;
setGlobalDefaultConversationColor: (
color: ConversationColorType,
customColorData?: {
id: string;
value: CustomColorType;
}
) => unknown;
selectedColor?: ConversationColorType;
selectedCustomColor: CustomColorDataType;
};
type PropsActionType = {
addCustomColor: (color: CustomColorType) => unknown;
editCustomColor: (colorId: string, color: CustomColorType) => unknown;
removeCustomColor: (colorId: string) => unknown;
removeCustomColorOnConversations: (colorId: string) => unknown;
resetAllChatColors: () => unknown;
resetDefaultChatColor: () => unknown;
};
export type PropsType = PropsDataType & PropsActionType;
export const ChatColorPicker = ({
addCustomColor,
colorSelected,
conversationId,
customColors = {},
editCustomColor,
getConversationsWithCustomColor,
i18n,
isGlobal = false,
onChatColorReset,
onSelectColor,
removeCustomColor,
removeCustomColorOnConversations,
resetAllChatColors,
resetDefaultChatColor,
selectedColor = ConversationColors[0],
selectedCustomColor,
setGlobalDefaultConversationColor,
}: PropsType): JSX.Element => {
const [confirmResetAll, setConfirmResetAll] = useState(false);
const [confirmResetWhat, setConfirmResetWhat] = useState(false);
@@ -73,6 +85,30 @@ export const ChatColorPicker = ({
CustomColorDataType | undefined
>(undefined);
const onSelectColor = (
conversationColor: ConversationColorType,
customColorData?: { id: string; value: CustomColorType }
): void => {
if (conversationId) {
colorSelected({
conversationId,
conversationColor,
customColorData,
});
} else {
setGlobalDefaultConversationColor(conversationColor, customColorData);
}
};
const onColorAdded = (value: CustomColorType) => {
return (id: string) => {
onSelectColor('custom', {
id,
value,
});
};
};
const renderCustomColorEditorWrapper = () => (
<CustomColorEditorWrapper
customColorToEdit={customColorToEdit}
@@ -87,7 +123,7 @@ export const ChatColorPicker = ({
value: color,
});
} else {
addCustomColor(color);
addCustomColor(color, onColorAdded(color));
}
}}
/>
@@ -192,7 +228,7 @@ export const ChatColorPicker = ({
removeCustomColorOnConversations(colorId);
}}
onDupe={() => {
addCustomColor(colorValues);
addCustomColor(colorValues, onColorAdded(colorValues));
}}
onEdit={() => {
setCustomColorToEdit({ id: colorId, value: colorValues });
@@ -218,10 +254,12 @@ export const ChatColorPicker = ({
</div>
</div>
<hr />
{onChatColorReset ? (
{conversationId ? (
<PanelRow
label={i18n('ChatColorPicker__reset')}
onClick={onChatColorReset}
onClick={() => {
colorSelected({ conversationId });
}}
/>
) : null}
<PanelRow
ts/components/GlobalModalContainer.tsx
+2 -11
View File
@@ -4,17 +4,11 @@
import React from 'react';
import { Modal } from './Modal';
import { LocalizerType } from '../types/Util';
import { ConversationColorType } from '../types/Colors';
type PropsType = {
i18n: LocalizerType;
isChatColorEditorVisible: boolean;
renderChatColorPicker: (actions: {
setGlobalDefaultConversationColor: (
color: ConversationColorType
) => unknown;
}) => JSX.Element;
setGlobalDefaultConversationColor: (color: ConversationColorType) => unknown;
renderChatColorPicker: () => JSX.Element;
toggleChatColorEditor: () => unknown;
};
@@ -22,7 +16,6 @@ export const GlobalModalContainer = ({
i18n,
isChatColorEditorVisible,
renderChatColorPicker,
setGlobalDefaultConversationColor,
toggleChatColorEditor,
}: PropsType): JSX.Element | null => {
if (isChatColorEditorVisible) {
@@ -35,9 +28,7 @@ export const GlobalModalContainer = ({
onClose={toggleChatColorEditor}
title={i18n('ChatColorPicker__global-chat-color')}
>
{renderChatColorPicker({
setGlobalDefaultConversationColor,
})}
{renderChatColorPicker()}
</Modal>
);
}