diff --git a/__tests__/RoomItem.js b/__tests__/RoomItem.js index 627682345..cc4d76d28 100644 --- a/__tests__/RoomItem.js +++ b/__tests__/RoomItem.js @@ -1,4 +1,11 @@ -import 'react-native'; +import {View} from 'react-native'; +import { Provider } from 'react-redux'; + +import { createStore, combineReducers } from 'redux'; + +const reducers = combineReducers({settings:() => ({})}); +const store = createStore(reducers); + import React from 'react'; import RoomItem from '../app/presentation/RoomItem'; @@ -10,25 +17,25 @@ const date = new Date(2017, 10, 10, 10); jest.mock('react-native-img-cache', () => { return { CachedImage: 'View' } }); it('renders correctly', () => { - expect(renderer.create().toJSON()).toMatchSnapshot(); + expect(renderer.create().toJSON()).toMatchSnapshot(); }); it('render unread', () => { - expect(renderer.create().toJSON()).toMatchSnapshot(); + expect(renderer.create().toJSON()).toMatchSnapshot(); }); it('render unread +999', () => { - expect(renderer.create().toJSON()).toMatchSnapshot(); + expect(renderer.create().toJSON()).toMatchSnapshot(); }); it('render no icon', () => { - expect(renderer.create().toJSON()).toMatchSnapshot(); + expect(renderer.create().toJSON()).toMatchSnapshot(); }); it('render private group', () => { - expect(renderer.create( ).toJSON()).toMatchSnapshot(); + expect(renderer.create( ).toJSON()).toMatchSnapshot(); }); it('render channel', () => { - expect(renderer.create().toJSON()).toMatchSnapshot(); + expect(renderer.create().toJSON()).toMatchSnapshot(); }); diff --git a/__tests__/__snapshots__/RoomItem.js.snap b/__tests__/__snapshots__/RoomItem.js.snap index ba93694b3..3eee42a6f 100644 --- a/__tests__/__snapshots__/RoomItem.js.snap +++ b/__tests__/__snapshots__/RoomItem.js.snap @@ -1,315 +1,444 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`render channel 1`] = ` - - - -  - - + - - general - - +  + + + - Nov 10 - + + general + + + Nov 10 + + `; exports[`render no icon 1`] = ` - - - - - - + - - name - - + + + + - Nov 10 - + + name + + + Nov 10 + + `; exports[`render private group 1`] = ` - + - + + + + + + + private-group + + + Nov 10 + + + + + +`; + +exports[`render unread +999 1`] = ` + + + + - - - - - - private-group - - + NA + + + - Nov 10 - - - -`; - -exports[`render unread +999 1`] = ` - - + name + + + Nov 10 + + + - - NA - - - - - name - - - Nov 10 + 999+ - - 999+ - `; exports[`render unread 1`] = ` - - - - NA - - + - - name - + + NA + + + + + name + + + Nov 10 + + - Nov 10 + 1 - - 1 - `; exports[`renders correctly 1`] = ` - - - - NA - - + - - name - - + NA + + + - Nov 10 - + + name + + + Nov 10 + + `; diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index 7adb1e3fc..325faeffe 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -218,25 +218,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = ` > RC - RC - RC - LC - LC - LC - LC - LC - - + + diff --git a/android/app/src/main/assets/fonts/icomoon.ttf b/android/app/src/main/assets/fonts/icomoon.ttf new file mode 100755 index 000000000..3601ae802 Binary files /dev/null and b/android/app/src/main/assets/fonts/icomoon.ttf differ diff --git a/app/animations/collapse.js b/app/animations/collapse.js new file mode 100644 index 000000000..35bca751d --- /dev/null +++ b/app/animations/collapse.js @@ -0,0 +1,63 @@ +import { View, Animated } from 'react-native'; + +import PropTypes from 'prop-types'; +import React from 'react'; + +export default class Panel extends React.Component { + static propTypes = { + open: PropTypes.bool.isRequired, + children: PropTypes.node.isRequired, + style: PropTypes.object + } + constructor(props) { + super(props); + this.state = { + animation: new Animated.Value() + }; + this.first = true; + this.open = false; + this.opacity = 0; + } + componentDidMount() { + const initialValue = !this.props.open ? this.height : 0; + this.state.animation.setValue(initialValue); + } + componentWillReceiveProps(nextProps) { + if (this.first) { + this.first = false; + if (!this.props.open) { + this.state.animation.setValue(0); + return; + } + } + if (this.open === nextProps.open) { + return; + } + this.open = nextProps.open; + const initialValue = !nextProps.open ? this.height : 0; + const finalValue = !nextProps.open ? 0 : this.height; + + this.state.animation.setValue(initialValue); + Animated.timing( + this.state.animation, + { + toValue: finalValue, + duration: 150 + } + ).start(); + } + set _height(h) { + this.height = h || this.height; + } + render() { + return ( + + this._height = nativeEvent.layout.height} style={{ position: !this.first ? 'relative' : 'absolute' }}> + {this.props.children} + + + ); + } +} diff --git a/app/containers/Avatar.js b/app/containers/Avatar.js index 228322e6a..7fe9b5ae6 100644 --- a/app/containers/Avatar.js +++ b/app/containers/Avatar.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; import { StyleSheet, Text, View } from 'react-native'; import { CachedImage } from 'react-native-img-cache'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; @@ -19,6 +20,10 @@ const styles = StyleSheet.create({ } }); +@connect(state => ({ + baseUrl: state.settings.Site_Url +})) + class Avatar extends React.PureComponent { render() { const { diff --git a/app/containers/MessageBox.js b/app/containers/MessageBox/index.js similarity index 53% rename from app/containers/MessageBox.js rename to app/containers/MessageBox/index.js index 7b81d186c..1c585a840 100644 --- a/app/containers/MessageBox.js +++ b/app/containers/MessageBox/index.js @@ -1,47 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { View, TextInput, StyleSheet, SafeAreaView, Platform } from 'react-native'; -import Icon from 'react-native-vector-icons/MaterialIcons'; +import { View, TextInput, SafeAreaView, Platform } from 'react-native'; +import Icon from 'react-native-vector-icons/Ionicons'; import ImagePicker from 'react-native-image-picker'; import { connect } from 'react-redux'; -import { userTyping } from '../actions/room'; -import RocketChat from '../lib/rocketchat'; -import { editRequest, editCancel, clearInput } from '../actions/messages'; - -const styles = StyleSheet.create({ - textBox: { - paddingTop: 1, - paddingHorizontal: 15, - borderTopWidth: 1, - borderTopColor: '#ccc', - backgroundColor: '#fff' - }, - safeAreaView: { - flexDirection: 'row', - alignItems: 'center' - }, - textBoxInput: { - height: 40, - minHeight: 40, - maxHeight: 120, - flexGrow: 1, - paddingHorizontal: 10, - paddingTop: 12 - }, - actionButtons: { - color: '#aaa', - paddingTop: 10, - paddingBottom: 10, - paddingHorizontal: 8, - fontSize: 20, - alignSelf: 'flex-end' - }, - editing: { - backgroundColor: '#fff5df' - } -}); - +import { userTyping } from '../../actions/room'; +import RocketChat from '../../lib/rocketchat'; +import { editRequest, editCancel, clearInput } from '../../actions/messages'; +import styles from './style'; +import MyIcon from '../icons'; @connect(state => ({ + room: state.room, message: state.messages.message, editing: state.messages.editing }), dispatch => ({ @@ -65,7 +34,8 @@ export default class MessageBox extends React.Component { constructor(props) { super(props); this.state = { - height: 40 + height: 20, + text: '' }; } @@ -77,32 +47,49 @@ export default class MessageBox extends React.Component { this.component.setNativeProps({ text: '' }); } } - - submit(message) { - this.component.setNativeProps({ text: '' }); - this.props.typing(false); - if (message.trim() === '') { - return; - } - // if is editing a message + onChangeText(text) { + this.setState({ text }); + this.props.typing(text.length > 0); + } + get leftButtons() { const { editing } = this.props; if (editing) { - const { _id, rid } = this.props.message; - this.props.editRequest({ _id, msg: message, rid }); - } else { - // if is submiting a new message - this.props.onSubmit(message); + return this.editCancel()} />; } - this.props.clearInput(); + return !this.state.emoji ? this.openEmoji()} name='md-happy' /> : this.openEmoji()} style={styles.actionButtons} name='md-sad' />; + } + get rightButtons() { + const icons = []; + + if (this.state.text.length) { + icons.push( this.submit(this.component._lastNativeText)} + />); + } + icons.push( this.addFile()} + />); + return icons; } + // get placeholder() { + // return `New Message`.substring(0, 35); + // } + updateSize = (height) => { + this.setState({ height: height + (Platform.OS === 'ios' ? 0 : 0) }); + } addFile = () => { const options = { customButtons: [{ name: 'import', title: 'Import File From' }] }; - ImagePicker.showImagePicker(options, (response) => { if (response.didCancel) { console.log('User cancelled image picker'); @@ -122,49 +109,56 @@ export default class MessageBox extends React.Component { } }); } - - updateSize = (height) => { - this.setState({ height: height + (Platform.OS === 'ios' ? 20 : 0) }); - } - editCancel() { this.props.editCancel(); this.component.setNativeProps({ text: '' }); } - - renderLeftButton() { - const { editing } = this.props; - if (editing) { - return this.editCancel()} />; - } - return ; + openEmoji() { + this.setState({ emoji: !this.state.emoji }); + } + submit(message) { + this.component.setNativeProps({ text: '' }); + this.props.clearInput(); + this.setState({ text: '' }); + requestAnimationFrame(() => { + this.props.typing(false); + if (message.trim() === '') { + return; + } + // if is editing a message + const { editing } = this.props; + if (editing) { + const { _id, rid } = this.props.message; + this.props.editRequest({ _id, msg: message, rid }); + } else { + // if is submiting a new message + this.props.onSubmit(message); + } + }); } render() { const { height } = this.state; return ( - - - {this.renderLeftButton()} + + + {this.leftButtons} this.component = component} style={[styles.textBoxInput, { height }]} returnKeyType='default' blurOnSubmit={false} - placeholder='New message' - onChangeText={text => this.props.typing(text.length > 0)} + placeholder='New Message' + onChangeText={text => this.onChangeText(text)} underlineColorAndroid='transparent' defaultValue='' multiline + placeholderTextColor='#9EA2A8' onContentSizeChange={e => this.updateSize(e.nativeEvent.contentSize.height)} /> - this.submit(this.component._lastNativeText)} - /> - - + {this.rightButtons} + + ); } } diff --git a/app/containers/MessageBox/style.js b/app/containers/MessageBox/style.js new file mode 100644 index 000000000..32532515f --- /dev/null +++ b/app/containers/MessageBox/style.js @@ -0,0 +1,67 @@ +import { StyleSheet } from 'react-native'; + + +export default StyleSheet.create({ + textBox: { + backgroundColor: '#fff', + flex: 0, + alignItems: 'center', + borderTopWidth: 1, + borderTopColor: '#D8D8D8', + paddingHorizontal: 15, + paddingVertical: 15 + }, + safeAreaView: { + flexDirection: 'row', + alignItems: 'center' + }, + textArea: { + flexDirection: 'row', + alignItems: 'center', + backgroundColor: 'white', + flexGrow: 0 + }, + textBoxInput: { + paddingVertical: 0, + paddingHorizontal: 10, + textAlignVertical: 'top', + maxHeight: 120, + flexGrow: 1, + width: 1, + paddingTop: 0, + paddingBottom: 0 + }, + editing: { + backgroundColor: '#fff5df' + }, + actionButtons: { + color: '#2F343D', + fontSize: 20, + textAlign: 'center', + paddingHorizontal: 5, + flex: 0 + }, + actionRow: { + flexDirection: 'row', + alignItems: 'center', + alignContent: 'center' + }, + actionContent: { + borderBottomWidth: 1, + borderBottomColor: '#ECECEC', + + borderTopWidth: 1, + borderTopColor: '#ECECEC', + + backgroundColor: '#F7F8FA' + }, + actionTitle: { + flex: 1, + fontSize: 17, + padding: 14, + textAlign: 'right', + borderBottomWidth: 1, + borderBottomColor: '#ECECEC', + color: '#2F343D' + } +}); diff --git a/app/containers/icons.js b/app/containers/icons.js new file mode 100644 index 000000000..236466031 --- /dev/null +++ b/app/containers/icons.js @@ -0,0 +1,4 @@ +import { createIconSetFromIcoMoon } from 'react-native-vector-icons'; +import iconConfig from '../icons.json'; + +export default createIconSetFromIcoMoon(iconConfig); diff --git a/app/icons.json b/app/icons.json new file mode 100755 index 000000000..aee0103de --- /dev/null +++ b/app/icons.json @@ -0,0 +1,370 @@ +{ + "IcoMoonType": "selection", + "icons": [ + { + "icon": { + "paths": [ + "M438.857 0v1024h146.286v-1024z", + "M1024 438.857h-1024v146.286h1024z" + ], + "attrs": [ + {}, + {} + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "plus" + ], + "colorPermutations": { + "47526116572821": [ + {}, + {} + ] + } + }, + "attrs": [ + {}, + {} + ], + "properties": { + "order": 28, + "id": 2, + "name": "plus", + "prevSize": 32, + "code": 59648 + }, + "setIdx": 2, + "setId": 6, + "iconIdx": 0 + }, + { + "icon": { + "paths": [ + "M192 256.3v511.4c0 35.542 28.768 64.3 64.3 64.3h511.4c35.542 0 64.3-28.768 64.3-64.3v-511.4c0-35.542-28.768-64.3-64.3-64.3h-511.4c-35.542 0-64.3 28.768-64.3 64.3zM115.2 256.3c0-77.942 63.136-141.1 141.1-141.1h511.4c77.942 0 141.1 63.136 141.1 141.1v511.4c0 77.942-63.136 141.1-141.1 141.1h-511.4c-77.942 0-141.1-63.136-141.1-141.1v-511.4z", + "M384 499.2c-63.623 0-115.2-51.577-115.2-115.2s51.577-115.2 115.2-115.2c63.623 0 115.2 51.577 115.2 115.2s-51.577 115.2-115.2 115.2zM384 422.4c21.208 0 38.4-17.192 38.4-38.4s-17.192-38.4-38.4-38.4c-21.208 0-38.4 17.192-38.4 38.4s17.192 38.4 38.4 38.4z", + "M362.1 661.315l142.276 97.378 216.661-204.97 119.31 88.168 45.643-61.765-171.023-126.383-218.354 206.571-141.706-96.989-215.826 199.756 52.167 56.364z" + ], + "attrs": [ + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "image--dark" + ], + "colorPermutations": { + "2372372371291162451461152331": [ + { + "f": 0 + }, + { + "f": 0 + }, + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + } + ], + "properties": { + "order": 27, + "id": 7, + "name": "image", + "prevSize": 32, + "code": 59649 + }, + "setIdx": 3, + "setId": 5, + "iconIdx": 1 + }, + { + "icon": { + "paths": [ + "M536.525 899.948l-24.525 20.355-24.525-20.355c-2.383-1.978-6.519-5.545-12.158-10.619-9.205-8.281-19.41-17.9-30.368-28.777-31.205-30.973-62.381-65.972-91.538-104.393-84.606-111.487-135.811-228.912-135.811-347.961 0-161.866 131.854-292.999 294.4-292.999s294.4 131.133 294.4 292.999c0 119.049-51.205 236.473-135.811 347.961-29.157 38.421-60.333 73.42-91.538 104.393-10.958 10.877-21.164 20.496-30.368 28.777-5.639 5.073-9.775 8.64-12.158 10.619zM524.949 806.045c28.795-28.581 57.619-60.94 84.462-96.312 75.394-99.349 120.189-202.073 120.189-301.534 0-119.356-97.376-216.199-217.6-216.199s-217.6 96.843-217.6 216.199c0 99.46 44.795 202.185 120.189 301.534 26.843 35.372 55.667 67.731 84.462 96.312 4.618 4.584 8.948 8.792 12.949 12.611 4.001-3.819 8.33-8.027 12.949-12.611z", + "M512 550.4c-77.762 0-140.8-63.038-140.8-140.8s63.038-140.8 140.8-140.8c77.762 0 140.8 63.038 140.8 140.8s-63.038 140.8-140.8 140.8zM512 473.6c35.346 0 64-28.654 64-64s-28.654-64-64-64c-35.346 0-64 28.654-64 64s28.654 64 64 64z" + ], + "attrs": [ + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "locaiton--dark" + ], + "colorPermutations": { + "2372372371291162451461152331": [ + { + "f": 0 + }, + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + } + ], + "properties": { + "order": 26, + "id": 6, + "name": "locaiton", + "prevSize": 32, + "code": 59650 + }, + "setIdx": 3, + "setId": 5, + "iconIdx": 2 + }, + { + "icon": { + "paths": [ + "M192 396.8v384h435.2v-384h-435.2zM704 320v537.6h-588.8v-537.6h588.8z", + "M704 669.575l179.2 58.183v-226.793l-179.2 58.183v110.427zM860.987 427.431c51.738-16.799 99.013 17.465 99.013 71.914v230.034c0 54.383-47.285 88.709-99.013 71.914l-233.787-75.907v-222.049l233.787-75.907z", + "M243.2 243.2h332.8v-76.8h-332.8z" + ], + "attrs": [ + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "video--dark" + ], + "colorPermutations": { + "2372372371291162451461152331": [ + { + "f": 0 + }, + { + "f": 0 + }, + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + } + ], + "properties": { + "order": 25, + "id": 5, + "name": "video", + "prevSize": 32, + "code": 59652 + }, + "setIdx": 3, + "setId": 5, + "iconIdx": 3 + }, + { + "icon": { + "paths": [ + "M512 179.2c-56.554 0-102.4 45.846-102.4 102.4v153.6c0 56.554 45.846 102.4 102.4 102.4s102.4-45.846 102.4-102.4v-153.6c0-56.554-45.846-102.4-102.4-102.4zM512 102.4c98.969-0 179.2 80.231 179.2 179.2v153.6c0 98.969-80.231 179.2-179.2 179.2s-179.2-80.231-179.2-179.2v-153.6c0-98.969 80.231-179.2 179.2-179.2z", + "M473.6 716.8v153.6h76.8v-153.6z", + "M358.4 870.4h307.2v51.2h-307.2v-51.2z", + "M217.603 410.070c2.746 224.36 103.388 345.13 294.397 345.13s291.651-120.77 294.397-345.13l-76.794-0.94c-2.268 185.24-72.292 269.27-217.603 269.27s-215.335-84.030-217.603-269.27l-76.794 0.94z" + ], + "attrs": [ + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "volume--dark" + ], + "colorPermutations": { + "2372372371291162451461152331": [ + { + "f": 0 + }, + { + "f": 0 + }, + { + "f": 0 + }, + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + }, + { + "fill": "rgb(29, 116, 245)" + } + ], + "properties": { + "order": 24, + "id": 4, + "name": "audio", + "prevSize": 32, + "code": 59653 + }, + "setIdx": 3, + "setId": 5, + "iconIdx": 4 + }, + { + "icon": { + "paths": [ + "M4.676 67.568c-7.948-17.050-4.542-38.646 10.218-53.423 13.625-13.64 34.062-18.186 53.363-10.23l1080.886 463.755c17.031 7.957 28.385 26.143 28.385 44.33 1.135 19.323-11.354 36.373-28.385 44.33l-1080.886 463.755c-19.302 7.957-39.738 3.41-53.363-10.23-14.76-14.777-19.302-35.236-10.218-53.423l196.421-444.432-196.421-444.432zM1007.221 512l-864.028-371.686 148.735 335.313 238.431 2.273c26.114-1.137 47.686 20.46 47.686 47.74 1.135 26.143-20.437 47.74-47.686 47.74h-249.785l-137.382 310.307 864.028-371.686z" + ], + "attrs": [ + { + "fill": "rgb(46, 115, 233)" + } + ], + "width": 1178, + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "teste" + ], + "colorPermutations": { + "2372372371291162451461152331": [ + { + "f": 1 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(46, 115, 233)" + } + ], + "properties": { + "order": 15, + "id": 0, + "name": "send", + "prevSize": 32, + "code": 59651 + }, + "setIdx": 3, + "setId": 5, + "iconIdx": 8 + } + ], + "height": 1024, + "metadata": { + "name": "icomoon" + }, + "preferences": { + "showGlyphs": true, + "showQuickUse": true, + "showQuickUse2": true, + "showSVGs": true, + "fontPref": { + "prefix": "icon-", + "metadata": { + "fontFamily": "icomoon", + "majorVersion": 1, + "minorVersion": 0 + }, + "metrics": { + "emSize": 1024, + "baseline": 6.25, + "whitespace": 50 + }, + "embed": false, + "autoHost": false, + "noie8": false, + "ie7": true, + "showSelector": false, + "showMetrics": false, + "showMetadata": false, + "showVersion": false + }, + "imagePref": { + "prefix": "icon-", + "png": true, + "useClassSelector": true, + "color": 0, + "bgColor": 16777215, + "classSelector": ".icon" + }, + "historySize": 50, + "showCodes": false, + "gridSize": 16, + "quickUsageToken": { + "UntitledProject": "NTdjODdjYjc0ZDI5MGY2MWFiYjIxMjg0ZmJlZTE1OTgjMSMxNTEyMTU3MDcxIyMj" + }, + "showLiga": false + } +} diff --git a/icons/20x20/at.svg b/icons/20x20/at.svg new file mode 100644 index 000000000..0af789c1a --- /dev/null +++ b/icons/20x20/at.svg @@ -0,0 +1,17 @@ + + + + 20x20/at--dark + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/icons/20x20/image.svg b/icons/20x20/image.svg new file mode 100644 index 000000000..8a1efb5ed --- /dev/null +++ b/icons/20x20/image.svg @@ -0,0 +1,17 @@ + + + + 20x20/image--dark + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/icons/20x20/location.svg b/icons/20x20/location.svg new file mode 100644 index 000000000..15acd1511 --- /dev/null +++ b/icons/20x20/location.svg @@ -0,0 +1,14 @@ + + + + 20x20/locaiton--dark + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/icons/20x20/video.svg b/icons/20x20/video.svg new file mode 100644 index 000000000..f40e7f246 --- /dev/null +++ b/icons/20x20/video.svg @@ -0,0 +1,16 @@ + + + + 20x20/video--dark + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/icons/20x20/volume.svg b/icons/20x20/volume.svg new file mode 100644 index 000000000..f3d22ea4d --- /dev/null +++ b/icons/20x20/volume.svg @@ -0,0 +1,20 @@ + + + + 20x20/volume--dark + Created with Sketch. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ios/RocketChatRN.xcodeproj/project.pbxproj b/ios/RocketChatRN.xcodeproj/project.pbxproj index 136e7b6a7..41056a1c2 100644 --- a/ios/RocketChatRN.xcodeproj/project.pbxproj +++ b/ios/RocketChatRN.xcodeproj/project.pbxproj @@ -5,7 +5,6 @@ }; objectVersion = 46; objects = { - /* Begin PBXBuildFile section */ 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; }; 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; }; @@ -51,6 +50,10 @@ 8ECBD927DDAC4987B98E102E /* libRCTVideo.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 20CE3E407E0D4D9E8C9885F2 /* libRCTVideo.a */; }; AE5D35882AE04CC29630FB3D /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = DC6EE17B5550465E98C70FF0 /* Entypo.ttf */; }; B88F586F1FBF57F600B352B8 /* libRCTPushNotification.a in Frameworks */ = {isa = PBXBuildFile; fileRef = B88F58461FBF55E200B352B8 /* libRCTPushNotification.a */; }; + B8C682A81FD850F4003A12C8 /* icomoon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B8C682611FD84CEF003A12C8 /* icomoon.ttf */; }; + B8C682AC1FD8511D003A12C8 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1B0746E708284151B8AD1198 /* Ionicons.ttf */; }; + B8C682AD1FD8511E003A12C8 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1B0746E708284151B8AD1198 /* Ionicons.ttf */; }; + B8C682AE1FD8511F003A12C8 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1B0746E708284151B8AD1198 /* Ionicons.ttf */; }; B8E79AF41F3CD167005B464F /* Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB61A68108700A75B9A /* Info.plist */; }; BED2B77AA660460E8BC9F8E0 /* libRNFetchBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 6533FB90166345D29F1B91C0 /* libRNFetchBlob.a */; }; C758F0BD5C3244E2BA073E61 /* libRNImagePicker.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3B696712EE2345A59F007A88 /* libRNImagePicker.a */; }; @@ -405,7 +408,7 @@ 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = RocketChatRN/Info.plist; sourceTree = ""; }; 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = RocketChatRN/main.m; sourceTree = ""; }; 146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = ""; }; - 1B0746E708284151B8AD1198 /* Ionicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Ionicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = ""; }; + 1B0746E708284151B8AD1198 /* Ionicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = file; name = Ionicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = ""; }; 20CE3E407E0D4D9E8C9885F2 /* libRCTVideo.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRCTVideo.a; sourceTree = ""; }; 22A8B76C8EBA443BB97CE82D /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNVectorIcons.xcodeproj; path = "../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj"; sourceTree = ""; }; 2D02E47B1E0B4A5D006451C7 /* RocketChatRN-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "RocketChatRN-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; }; @@ -430,6 +433,7 @@ AD0379F2BCE84C968538CDAF /* RCTVideo.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RCTVideo.xcodeproj; path = "../node_modules/react-native-video/ios/RCTVideo.xcodeproj"; sourceTree = ""; }; B37C79D9BD0742CE936B6982 /* libc++.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; }; B88F58361FBF55E200B352B8 /* RCTPushNotification.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTPushNotification.xcodeproj; path = "../node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj"; sourceTree = ""; }; + B8C682611FD84CEF003A12C8 /* icomoon.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = icomoon.ttf; path = ../resources/fonts/icomoon.ttf; sourceTree = ""; }; BAAE4B947F5D44959F0A9D5A /* libRNZeroconf.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNZeroconf.a; sourceTree = ""; }; C23AEF1D9EBE4A38A1A6B97B /* RNSVG.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNSVG.xcodeproj; path = "../node_modules/react-native-svg/ios/RNSVG.xcodeproj"; sourceTree = ""; }; DA50CE47374C4C35BE6D9D58 /* libRNSVG.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNSVG.a; sourceTree = ""; }; @@ -731,6 +735,7 @@ AF5E16F0398347E6A80C8CBE /* Resources */ = { isa = PBXGroup; children = ( + B8C682611FD84CEF003A12C8 /* icomoon.ttf */, DC6EE17B5550465E98C70FF0 /* Entypo.ttf */, A18EFC3B0CFE40E0918A8F0C /* EvilIcons.ttf */, 7A30DA4B2D474348824CD05B /* FontAwesome.ttf */, @@ -1328,6 +1333,7 @@ isa = PBXResourcesBuildPhase; buildActionMask = 2147483647; files = ( + B8C682AD1FD8511E003A12C8 /* Ionicons.ttf in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -1335,6 +1341,7 @@ isa = PBXResourcesBuildPhase; buildActionMask = 2147483647; files = ( + B8C682A81FD850F4003A12C8 /* icomoon.ttf in Resources */, 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */, AE5D35882AE04CC29630FB3D /* Entypo.ttf in Resources */, @@ -1356,6 +1363,7 @@ buildActionMask = 2147483647; files = ( 2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */, + B8C682AC1FD8511D003A12C8 /* Ionicons.ttf in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -1363,6 +1371,7 @@ isa = PBXResourcesBuildPhase; buildActionMask = 2147483647; files = ( + B8C682AE1FD8511F003A12C8 /* Ionicons.ttf in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/ios/RocketChatRN/Info.plist b/ios/RocketChatRN/Info.plist index 1dbf4f5bf..e17929b79 100644 --- a/ios/RocketChatRN/Info.plist +++ b/ios/RocketChatRN/Info.plist @@ -40,7 +40,7 @@ NSCameraUsageDescription Upload images from camera NSLocationWhenInUseUsageDescription - + NSPhotoLibraryUsageDescription Upload images from library UIAppFonts @@ -55,6 +55,7 @@ Octicons.ttf SimpleLineIcons.ttf Zocial.ttf + icomoon.ttf UILaunchStoryboardName LaunchScreen diff --git a/ios/icomoon.ttf b/ios/icomoon.ttf new file mode 100755 index 000000000..3601ae802 Binary files /dev/null and b/ios/icomoon.ttf differ diff --git a/package-lock.json b/package-lock.json index f7dc67eae..6f0fe7b99 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8389,11 +8389,6 @@ "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.1.9.tgz", "integrity": "sha1-lkojxU5IiUBbSGGlyfBIDUUUHfo=" }, - "keymirror": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/keymirror/-/keymirror-0.1.1.tgz", - "integrity": "sha1-kYiJ6hP40KQufFVyUO7nE63JXDU=" - }, "kind-of": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", @@ -12257,6 +12252,11 @@ "prop-types": "15.6.0" } }, + "react-native-card-view": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/react-native-card-view/-/react-native-card-view-0.0.3.tgz", + "integrity": "sha1-jbmsSj8B0I+L2feTQwgth/3wmQc=" + }, "react-native-compat": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/react-native-compat/-/react-native-compat-1.0.0.tgz", @@ -12406,14 +12406,6 @@ "resolved": "https://registry.npmjs.org/react-native-push-notification/-/react-native-push-notification-3.0.1.tgz", "integrity": "sha1-DiPbMC0Du0o/KNwHLcryqaEXjtg=" }, - "react-native-slider": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/react-native-slider/-/react-native-slider-0.11.0.tgz", - "integrity": "sha512-jV9K87eu9uWr0uJIyrSpBLnCKvVlOySC2wynq9TFCdV9oGgjt7Niq8Q1A8R8v+5GHsuBw/s8vEj1AAkkUi+u+w==", - "requires": { - "prop-types": "15.6.0" - } - }, "react-native-svg": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-6.0.0.tgz", @@ -12472,23 +12464,6 @@ } } }, - "react-native-video": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/react-native-video/-/react-native-video-2.0.0.tgz", - "integrity": "sha1-8z+m+35+PJOrV4eUTO/Vi/c1WGc=", - "requires": { - "keymirror": "0.1.1", - "prop-types": "15.6.0" - } - }, - "react-native-video-controls": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/react-native-video-controls/-/react-native-video-controls-2.0.0.tgz", - "integrity": "sha512-dejwvoR0mL3DQtP6BSO/tlGaUzOXfGlj3kWkBJm7q3pTGsHWDGJmEtpwVhyVtJBg95O8Fb5Nz15JwRqsjonagg==", - "requires": { - "lodash": "4.17.4" - } - }, "react-native-zeroconf": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-native-zeroconf/-/react-native-zeroconf-0.8.3.tgz", @@ -12848,11 +12823,6 @@ "symbol-observable": "1.0.4" } }, - "redux-enhancer-react-native-appstate": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/redux-enhancer-react-native-appstate/-/redux-enhancer-react-native-appstate-0.3.0.tgz", - "integrity": "sha1-+5Fwk3WM4J9DLNCytWPRNh6PV28=" - }, "redux-immutable-state-invariant": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/redux-immutable-state-invariant/-/redux-immutable-state-invariant-2.1.0.tgz", diff --git a/package.json b/package.json index 7e8c4ad58..5c3429de7 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,11 @@ "snyk-protect": "snyk protect", "prepare": "npm run snyk-protect" }, + "rnpm": { + "assets": [ + "resources/fonts" + ] + }, "dependencies": { "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-remove-console": "^6.8.5", diff --git a/resources/fonts/icomoon.ttf b/resources/fonts/icomoon.ttf new file mode 100755 index 000000000..3601ae802 Binary files /dev/null and b/resources/fonts/icomoon.ttf differ diff --git a/storybook/stories/Avatar.js b/storybook/stories/Avatar.js index e3dffec74..2f0e0de66 100644 --- a/storybook/stories/Avatar.js +++ b/storybook/stories/Avatar.js @@ -1,13 +1,21 @@ import React from 'react'; import { ScrollView } from 'react-native'; +import { Provider } from 'react-redux'; +import { createStore, combineReducers } from 'redux'; import Avatar from '../../app/containers/Avatar'; +const reducers = combineReducers({ settings: () => ({}) }); +const store = createStore(reducers); + + export default ( - - - - - - + + + + + + + + ); diff --git a/storybook/stories/index.js b/storybook/stories/index.js index 8575d1a64..0cc2abc02 100644 --- a/storybook/stories/index.js +++ b/storybook/stories/index.js @@ -1,6 +1,10 @@ /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ -// import React from 'react'; +import React from 'react'; +import { Provider } from 'react-redux'; + +import { createStore, combineReducers } from 'redux'; + import { storiesOf } from '@storybook/react-native'; // import { action } from '@storybook/addon-actions'; @@ -9,8 +13,11 @@ import { storiesOf } from '@storybook/react-native'; import DirectMessage from './Channels/DirectMessage'; import Avatar from './Avatar'; -storiesOf('Avatar', module).add('avatar', () => Avatar); -storiesOf('Channel Cell', module).add('Direct Messages', () => DirectMessage); +const reducers = combineReducers({ settings: () => ({}) }); +const store = createStore(reducers); + +storiesOf('Avatar', module).addDecorator(story => {story()}).add('avatar', () => Avatar); +storiesOf('Channel Cell', module).addDecorator(story => {story()}).add('Direct Messages', () => DirectMessage); // storiesOf('Welcome', module).add('to Storybook', () => );