commit 755c7f8aaa70683003d11a72607067cb48fee007
parent c177a95d7f354eb57144a7ccd1233577cb2455e4
Author: Johan Lindskogen <johan.lindskogen@gmail.com>
Date: Sun, 29 Nov 2015 00:15:21 +0100
Different Drawer package
Colorize nicknames with sha256
Menu button for opening channel list
Diffstat:
5 files changed, 110 insertions(+), 18 deletions(-)
diff --git a/package.json b/package.json
@@ -6,11 +6,12 @@
"start": "node_modules/react-native/packager/packager.sh"
},
"dependencies": {
+ "js-sha256": "^0.3.0",
"react": "^0.14.3",
"react-apple-easing": "0.0.2",
"react-native": "~0.15.0",
+ "react-native-drawer": "^1.9.0",
"react-native-parsed-text": "0.0.4",
- "react-native-side-menu": "^0.15.5",
"react-redux": "^3.1.0",
"redux": "^3.0.4",
"redux-diff-logger": "0.0.6"
diff --git a/src/lib/helpers/colorizer.js b/src/lib/helpers/colorizer.js
@@ -0,0 +1,38 @@
+import { sha256 } from 'js-sha256';
+
+const AVAILABLE_COLORS = [
+ "#3E4141", "#F1F1F0", "#554141",
+ "#654141", "#DAACDF", "#FFCF85",
+ "#80AAC6", "#B4C978", "#CADFFE",
+ "#E7E6A0", "#F66864", "#929292",
+ "#03FCFE", "#F2C6F7", "#E3F6FF",
+ "#9CC4DF", "#CDE28C", "#73DFFD",
+ "#DF82FC", "#06DEFD", "#00DA9A",
+ "#38ACE2", "#72DA9B", "#72FDFE",
+ "#35C240", "#16BEA1", "#00D825",
+ "#0ABFFC", "#00F72C", "#99FABF",
+ "#72FABE", "#BCFBBF", "#DF9DBC",
+ "#00F99C", "#BDC1FD", "#71F72D",
+ "#98F82F", "#BDE0FE", "#BCF830",
+ "#FFA3FD", "#BDBB9A", "#FFBB2A",
+ "#BDDB9C", "#E664FC", "#BDFEFE",
+ "#DFFEFF", "#BD9CBC", "#E866B6",
+ "#DEFA9E", "#FFC3FE", "#DF7BBC",
+ "#FFE1FE", "#FFDEBF", "#FF7DBC",
+ "#FF7620", "#FFDB2F", "#FEF935",
+ "#FFFB9E", "#FFFFFF"
+];
+
+const sessionCache = {};
+
+export const hashNickToColor = (nick) => {
+ if (sessionCache[nick]) {
+ return sessionCache[nick];
+ }
+
+ const hash = parseInt(sha256(nick), 16);
+ const nickColor = AVAILABLE_COLORS[hash % AVAILABLE_COLORS.length];
+ sessionCache[nick] = nickColor;
+
+ return nickColor;
+};
+\ No newline at end of file
diff --git a/src/usecase/App.js b/src/usecase/App.js
@@ -1,12 +1,13 @@
import React from 'react-native';
import { connect } from 'react-redux/native';
-import SideMenu from 'react-native-side-menu';
+import Drawer from 'react-native-drawer';
let {
Component,
View,
Text,
+ TouchableOpacity,
StyleSheet,
} = React;
@@ -19,18 +20,41 @@ class App extends Component {
changeCurrentBuffer(bufferName) {
this.props.dispatch(changeCurrentBuffer(bufferName));
+ this.drawer.close();
}
render() {
let { buffers, currentBufferName } = this.props;
+
+ let sidebar = (
+ <BufferList buffers={buffers}
+ currentBufferName={currentBufferName}
+ onSelectBuffer={(b) => this.changeCurrentBuffer(b.name)} />
+ );
+
return (
<View style={styles.container}>
- <View style={styles.topbar} />
- <SideMenu touchToClose={true} menu={<BufferList buffers={buffers}
- currentBufferName={currentBufferName}
- onSelectBuffer={(b) => this.changeCurrentBuffer(b.name)} />}>
+ <Drawer type="static"
+ content={sidebar}
+ panOpenMask={.03}
+ tapToClose={true}
+ openDrawerOffset={100}
+ captureGestures={true}
+ ref={(d) => this.drawer = d}
+ tweenHandler={Drawer.tweenPresets.parallax}>
+ <View style={styles.topbar}>
+ <View style={styles.channels}>
+ <TouchableOpacity style={styles.channelsButton} onPress={() => this.drawer.open()}>
+ <Text style={styles.channelsButtonText}>#</Text>
+ </TouchableOpacity>
+ </View>
+ <View>
+ <Text style={styles.topbarText}>{currentBufferName}</Text>
+ </View>
+ <View style={styles.channels}></View>
+ </View>
<BufferView bufferName={currentBufferName}/>
- </SideMenu>
+ </Drawer>
</View>
);
}
@@ -45,8 +69,34 @@ export default connect(state => {
const styles = StyleSheet.create({
topbar: {
- height: 20,
- backgroundColor: '#001'
+ flexDirection: 'row',
+ paddingTop: 20,
+ height: 70,
+ backgroundColor: '#333',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ channels: {
+ flex: 1,
+ paddingHorizontal: 5,
+ },
+ channelsButton: {
+ paddingVertical: 5,
+ paddingHorizontal: 10,
+ width: 40
+ },
+ channelsButtonText: {
+ textAlign: 'center',
+ fontSize: 20,
+ fontFamily: 'Gill Sans',
+ color: '#eee',
+ fontWeight: 'bold'
+ },
+ topbarText: {
+ color: '#eee',
+ fontFamily: 'Thonburi',
+ fontWeight: 'bold',
+ fontSize: 15
},
container: {
flex: 1,
diff --git a/src/usecase/buffers/ui/BufferList.js b/src/usecase/buffers/ui/BufferList.js
@@ -18,6 +18,7 @@ export default class BufferList extends Component {
return (
<View style={styles.container}>
+ <View style={styles.topbar}></View>
<ScrollView style={styles.container}>
{buffersList.map(buffer => (
<TouchableHighlight key={buffer.name}
@@ -44,16 +45,14 @@ export default class BufferList extends Component {
}
};
-const { width, height } = Dimensions.get('window');
-
const styles = StyleSheet.create({
container: {
- height: height,
- width: width,
- paddingRight: width * 0.2,
flex: 1,
backgroundColor: '#121212'
},
+ topbar: {
+ height: 30
+ },
row: {
flexDirection: 'row',
},
@@ -62,9 +61,8 @@ const styles = StyleSheet.create({
},
listItem: {
flex: 1,
- paddingRight: width * 0.4,
height: 40,
- paddingLeft: 10,
+ paddingHorizontal: 20,
justifyContent: 'center',
},
listItemText: {
diff --git a/src/usecase/buffers/ui/themes/Default.js b/src/usecase/buffers/ui/themes/Default.js
@@ -2,6 +2,8 @@ import React from 'react-native';
import ParsedText from 'react-native-parsed-text';
+import { hashNickToColor } from '../../../../lib/helpers/colorizer';
+
const {
Component,
StyleSheet,
@@ -39,13 +41,15 @@ export default class BufferLine extends Component {
<View style={[styles.container, highlightedViewStyles(line)]}>
<View style={styles.metaContainer}>
<View style={styles.userContainer}>
- <Text style={[styles.text, styles.meta, getHighlightedTextStyles(line)]}>{line.nick}</Text>
+ <Text style={[styles.text, styles.meta, {color: hashNickToColor(line.nick)}, getHighlightedTextStyles(line)]}>
+ {line.nick}
+ </Text>
</View>
<Text style={[styles.text, styles.meta, getHighlightedTextStyles(line)]}>{line.time}</Text>
</View>
<View style={[styles.messageContainer, highlightedViewStyles(line)]}>
<ParsedText
- style={[styles.text, getHighlightedTextStyles(line)]}
+ style={[styles.text, {color: hashNickToColor(line.nick)}, getHighlightedTextStyles(line)]}
parse={parseArgs}>
{line.message}
</ParsedText>
