Page MenuHomePhabricator
Files F2901334

D3939.id12317.diff
No OneTemporary
Actions

D3939.id12317.diff
View Options

diff --git a/native/chat/settings/color-picker-modal.react.js b/native/chat/settings/color-picker-modal.react.js
--- a/native/chat/settings/color-picker-modal.react.js
+++ b/native/chat/settings/color-picker-modal.react.js
@@ -55,7 +55,7 @@
const { color, threadInfo } = this.props.route.params;
// Based on the assumption we are always in portrait,
// and consequently width is the lowest dimensions
- const modalStyle = { height: this.props.windowWidth - 5 };
+ const modalStyle = { height: this.props.windowWidth - 100 };
return (
<Modal modalStyle={[this.props.styles.colorPickerContainer, modalStyle]}>
<ColorPicker
diff --git a/native/components/color-selector-button.react.js b/native/components/color-selector-button.react.js
--- a/native/components/color-selector-button.react.js
+++ b/native/components/color-selector-button.react.js
@@ -6,20 +6,27 @@
type ColorSelectorButtonProps = {
+color: string,
- +currentColor: string,
+ +pendingColor: string,
+ +setPendingColor: ((string => string) | string) => void,
};
-
function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
- const { color, currentColor } = props;
+ const { color, pendingColor, setPendingColor } = props;
const colorSplotchStyle = React.useMemo(() => {
return [styles.button, { backgroundColor: `#${color}` }];
}, [color]);
- const isSelected = tinycolor.equals(currentColor, color);
+ const onPendingColorSelected = React.useCallback(() => {
+ setPendingColor(color);
+ }, [setPendingColor, color]);
+
+ const isSelected = tinycolor.equals(pendingColor, color);
return (
<View style={isSelected ? styles.outerRingSelected : styles.outerRing}>
- <TouchableOpacity style={colorSplotchStyle} />
+ <TouchableOpacity
+ style={colorSplotchStyle}
+ onPress={onPendingColorSelected}
+ />
</View>
);
}
diff --git a/native/components/color-selector.react.js b/native/components/color-selector.react.js
--- a/native/components/color-selector.react.js
+++ b/native/components/color-selector.react.js
@@ -1,7 +1,8 @@
// @flow
import * as React from 'react';
-import { Text, View, StyleSheet } from 'react-native';
+import { Button, Text, View, StyleSheet } from 'react-native';
+import tinycolor from 'tinycolor2';
import { selectedThreadColors } from 'lib/shared/thread-utils';
@@ -9,10 +10,11 @@
type ColorSelectorProps = {
+currentColor: string,
+ +onColorSelected: (hex: string) => void,
};
-
function ColorSelector(props: ColorSelectorProps): React.Node {
- const { currentColor } = props;
+ const { currentColor, onColorSelected } = props;
+ const [pendingColor, setPendingColor] = React.useState(currentColor);
const colorSelectorButtons = React.useMemo(
() =>
@@ -20,26 +22,43 @@
<ColorSelectorButton
key={color}
color={color}
- currentColor={currentColor}
+ pendingColor={pendingColor}
+ setPendingColor={setPendingColor}
/>
)),
- [currentColor],
+ [pendingColor],
);
+ const saveButtonDisabled = tinycolor.equals(currentColor, pendingColor);
+ const saveButtonStyle = React.useMemo(() => {
+ if (saveButtonDisabled) {
+ return [styles.saveButton, { backgroundColor: '#404040' }];
+ }
+ return [styles.saveButton, { backgroundColor: `#${pendingColor}` }];
+ }, [saveButtonDisabled, pendingColor]);
+
+ const onColorSplotchSelected = React.useCallback(() => {
+ onColorSelected(`#${pendingColor}`);
+ }, [onColorSelected, pendingColor]);
+
return (
<View style={styles.container}>
- <View style={styles.textContainer}>
- <Text style={styles.text}>Select thread color</Text>
- </View>
+ <Text style={styles.header}>Select thread color</Text>
<View style={styles.colorButtons}>{colorSelectorButtons}</View>
+ <View style={saveButtonStyle}>
+ <Button
+ title="Save"
+ color="white"
+ onPress={onColorSplotchSelected}
+ disabled={saveButtonDisabled}
+ />
+ </View>
</View>
);
}
const styles = StyleSheet.create({
colorButtons: {
- alignItems: 'center',
- display: 'flex',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
@@ -47,20 +66,21 @@
},
container: {
alignItems: 'center',
- display: 'flex',
flex: 1,
- flexDirection: 'column',
- flexWrap: 'wrap',
justifyContent: 'center',
},
- text: {
+ header: {
color: 'white',
fontSize: 24,
fontWeight: 'bold',
- },
- textContainer: {
margin: 20,
},
+ saveButton: {
+ borderRadius: 5,
+ margin: 10,
+ padding: 5,
+ width: 320,
+ },
});
export default ColorSelector;

File Metadata

Mime Type
text/plain
Expires
Sun, Oct 6, 12:34 PM (21 h, 6 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2249617
Default Alt Text
D3939.id12317.diff (4 KB)

Event Timeline