Page MenuHomePhabricator
Files F3351574

D3868.id12259.diff
No OneTemporary
Actions

D3868.id12259.diff
View Options

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
@@ -1,28 +1,49 @@
// @flow
import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import tinycolor from 'tinycolor2';
type ColorSelectorButtonProps = {
- color: string,
+ +color: string,
+ +currentColor: string,
};
function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
- const { color } = props;
- const buttonStyle = React.useMemo(
- () => [styles.button, { backgroundColor: color }],
- [color],
+ const { color, currentColor } = props;
+
+ const colorSplotchStyle = React.useMemo(() => {
+ return [styles.button, { backgroundColor: `#${color}` }];
+ }, [color]);
+
+ const isSelected = tinycolor.equals(currentColor, color);
+ return (
+ <View style={isSelected ? styles.outerRingSelected : styles.outerRing}>
+ <TouchableOpacity style={colorSplotchStyle} />
+ </View>
);
- return <View style={buttonStyle} />;
}
const styles = StyleSheet.create({
button: {
borderRadius: 20,
height: 40,
- margin: 15,
+ margin: 10,
width: 40,
},
+ outerRing: {
+ borderRadius: 40,
+ height: 60,
+ margin: 5,
+ width: 60,
+ },
+ outerRingSelected: {
+ backgroundColor: '#404040',
+ borderRadius: 40,
+ height: 60,
+ margin: 5,
+ width: 60,
+ },
});
export default ColorSelectorButton;
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
@@ -3,26 +3,35 @@
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
+import { selectedThreadColors } from 'lib/shared/thread-utils';
+
import ColorSelectorButton from './color-selector-button.react';
-function ColorSelector(): React.Node {
+type ColorSelectorProps = {
+ +currentColor: string,
+};
+
+function ColorSelector(props: ColorSelectorProps): React.Node {
+ const { currentColor } = props;
+
+ const colorSelectorButtons = React.useMemo(
+ () =>
+ selectedThreadColors.map(color => (
+ <ColorSelectorButton
+ key={color}
+ color={color}
+ currentColor={currentColor}
+ />
+ )),
+ [currentColor],
+ );
+
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.text}>Select thread color</Text>
</View>
- <View style={styles.colorButtons}>
- <ColorSelectorButton color="#4B87AA" />
- <ColorSelectorButton color="#5C9F5F" />
- <ColorSelectorButton color="#B8753D" />
- <ColorSelectorButton color="#AA4B4B" />
- <ColorSelectorButton color="#6D49AB" />
- <ColorSelectorButton color="#C85000" />
- <ColorSelectorButton color="#008F83" />
- <ColorSelectorButton color="#648CAA" />
- <ColorSelectorButton color="#57697F" />
- <ColorSelectorButton color="#575757" />
- </View>
+ <View style={styles.colorButtons}>{colorSelectorButtons}</View>
</View>
);
}

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 24, 2:35 AM (20 h, 42 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2572859
Default Alt Text
D3868.id12259.diff (3 KB)

Event Timeline