Unverified Commit d04d0f27 authored by Diego Mello's avatar Diego Mello Committed by GitHub
Browse files

[NEW] Basic support to Teams (#3016)



* Database migration

* RoomItem icon

* Team icons

* Teams group

* Small tweak on RoomTypeIcon

* RoomView Header

* Add team's channels to RoomView header

* Starting TeamChannelsView

* Icon size

* o data found

* Update TeamChannelsView, add teams subscriptions and send params to TeamChannelsView

* Use teams.ListRooms endpoint, render rooms list, remove unused functions

* Show team main on TeamChannelsView

* Disable swipe

* Pagination working

* Fix blinking no data found

* Search working

* Refactor to use BackgroundContainer while loading

* Go to room

* Cleanup

* Go to actions

* Events

* Lint

* Add debounce to go room

* Fix for tablet

* i18n

* Small fix

* Minor refactor

* Use local data when it exists

* Show last message

* Force teams migration

* Add stories to BackgroundContainer

* Remove unused component

* Move RoomViewHeader into containers folder

* Refactoring

* Testing RoomHeader

* i18n

* Fix server endpoint version

* Fix events

Co-authored-by: default avatarGerzon Z <gerzonzcanario@gmail.com>
parent 5a96f1ff
import React from 'react';
import {
ImageBackground, StyleSheet, Text, View
ImageBackground, StyleSheet, Text, View, ActivityIndicator
} from 'react-native';
import PropTypes from 'prop-types';
import { withTheme } from '../../theme';
import sharedStyles from '../Styles';
import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors';
const styles = StyleSheet.create({
......@@ -29,15 +29,17 @@ const styles = StyleSheet.create({
}
});
const EmptyRoom = ({ theme, text }) => (
const BackgroundContainer = ({ theme, text, loading }) => (
<View style={styles.container}>
<ImageBackground source={{ uri: `message_empty_${ theme }` }} style={styles.image} />
<Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text>
{text ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null}
{loading ? <ActivityIndicator style={[styles.text, { color: themes[theme].auxiliaryTintColor }]} /> : null}
</View>
);
EmptyRoom.propTypes = {
BackgroundContainer.propTypes = {
text: PropTypes.string,
theme: PropTypes.string
theme: PropTypes.string,
loading: PropTypes.bool
};
export default withTheme(EmptyRoom);
export default withTheme(BackgroundContainer);
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import BackgroundContainer from '.';
import { ThemeContext } from '../../theme';
import { longText } from '../../../storybook/utils';
const stories = storiesOf('BackgroundContainer', module);
stories.add('basic', () => (
<BackgroundContainer />
));
stories.add('loading', () => (
<BackgroundContainer loading />
));
stories.add('text', () => (
<BackgroundContainer text='Text here' />
));
stories.add('long text', () => (
<BackgroundContainer text={longText} />
));
const ThemeStory = ({ theme, ...props }) => (
<ThemeContext.Provider
value={{ theme }}
>
<BackgroundContainer {...props} />
</ThemeContext.Provider>
);
stories.add('dark theme - loading', () => (
<ThemeStory theme='dark' loading />
));
stories.add('dark theme - text', () => (
<ThemeStory theme='dark' text={longText} />
));
stories.add('black theme - loading', () => (
<ThemeStory theme='black' loading />
));
stories.add('black theme - text', () => (
<ThemeStory theme='black' text={longText} />
));
......@@ -4,16 +4,21 @@ import {
View, Text, StyleSheet, TouchableOpacity
} from 'react-native';
import I18n from '../../../i18n';
import sharedStyles from '../../Styles';
import { themes } from '../../../constants/colors';
import Markdown from '../../../containers/markdown';
import RoomTypeIcon from '../../../containers/RoomTypeIcon';
import I18n from '../../i18n';
import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors';
import Markdown from '../markdown';
import RoomTypeIcon from '../RoomTypeIcon';
import { withTheme } from '../../theme';
const HIT_SLOP = {
top: 5, right: 5, bottom: 5, left: 5
};
const TITLE_SIZE = 16;
const SUBTITLE_SIZE = 12;
const getSubTitleSize = scale => SUBTITLE_SIZE * scale;
const styles = StyleSheet.create({
container: {
flex: 1,
......@@ -24,12 +29,12 @@ const styles = StyleSheet.create({
flexDirection: 'row'
},
title: {
...sharedStyles.textSemibold,
fontSize: TITLE_SIZE
flexShrink: 1,
...sharedStyles.textSemibold
},
subtitle: {
...sharedStyles.textRegular,
fontSize: 12
flexShrink: 1,
...sharedStyles.textRegular
},
typingUsers: {
...sharedStyles.textSemibold
......@@ -37,8 +42,9 @@ const styles = StyleSheet.create({
});
const SubTitle = React.memo(({
usersTyping, subtitle, renderFunc, theme
usersTyping, subtitle, renderFunc, theme, scale
}) => {
const fontSize = getSubTitleSize(scale);
// typing
if (usersTyping.length) {
let usersText;
......@@ -48,7 +54,7 @@ const SubTitle = React.memo(({
usersText = usersTyping.join(', ');
}
return (
<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
<Text style={[styles.subtitle, { fontSize, color: themes[theme].auxiliaryText }]} numberOfLines={1}>
<Text style={styles.typingUsers}>{usersText} </Text>
{ usersTyping.length > 1 ? I18n.t('are_typing') : I18n.t('is_typing') }...
</Text>
......@@ -66,7 +72,7 @@ const SubTitle = React.memo(({
<Markdown
preview
msg={subtitle}
style={[styles.subtitle, { color: themes[theme].auxiliaryText }]}
style={[styles.subtitle, { fontSize, color: themes[theme].auxiliaryText }]}
numberOfLines={1}
theme={theme}
/>
......@@ -80,18 +86,20 @@ SubTitle.propTypes = {
usersTyping: PropTypes.array,
theme: PropTypes.string,
subtitle: PropTypes.string,
renderFunc: PropTypes.func
renderFunc: PropTypes.func,
scale: PropTypes.number
};
const HeaderTitle = React.memo(({
title, tmid, prid, scale, theme
title, tmid, prid, scale, theme, testID
}) => {
const titleStyle = { fontSize: TITLE_SIZE * scale, color: themes[theme].headerTitleColor };
if (!tmid && !prid) {
return (
<Text
style={[styles.title, { fontSize: TITLE_SIZE * scale, color: themes[theme].headerTitleColor }]}
style={[styles.title, titleStyle]}
numberOfLines={1}
testID={`room-view-title-${ title }`}
testID={testID}
>
{title}
</Text>
......@@ -102,10 +110,10 @@ const HeaderTitle = React.memo(({
<Markdown
preview
msg={title}
style={[styles.title, { fontSize: TITLE_SIZE * scale, color: themes[theme].headerTitleColor }]}
style={[styles.title, titleStyle]}
numberOfLines={1}
theme={theme}
testID={`room-view-title-${ title }`}
testID={testID}
/>
);
});
......@@ -115,11 +123,12 @@ HeaderTitle.propTypes = {
tmid: PropTypes.string,
prid: PropTypes.string,
scale: PropTypes.number,
theme: PropTypes.string
theme: PropTypes.string,
testID: PropTypes.string
};
const Header = React.memo(({
title, subtitle, parentTitle, type, status, usersTyping, width, height, prid, tmid, connecting, goRoomActionsView, theme, isGroupChat
title, subtitle, parentTitle, type, status, usersTyping, width, height, prid, tmid, onPress, theme, isGroupChat, teamMain, testID
}) => {
const portrait = height > width;
let scale = 1;
......@@ -130,13 +139,11 @@ const Header = React.memo(({
}
}
const onPress = () => goRoomActionsView();
let renderFunc;
if (tmid) {
renderFunc = () => (
<View style={styles.titleContainer}>
<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} />
<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />
<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>{parentTitle}</Text>
</View>
);
......@@ -144,7 +151,7 @@ const Header = React.memo(({
return (
<TouchableOpacity
testID='room-view-header-actions'
testID='room-header'
accessibilityLabel={title}
onPress={onPress}
style={styles.container}
......@@ -152,17 +159,23 @@ const Header = React.memo(({
hitSlop={HIT_SLOP}
>
<View style={styles.titleContainer}>
{tmid ? null : <RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} />}
{tmid ? null : <RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />}
<HeaderTitle
title={title}
tmid={tmid}
prid={prid}
scale={scale}
connecting={connecting}
theme={theme}
testID={testID}
/>
</View>
<SubTitle usersTyping={tmid ? [] : usersTyping} subtitle={subtitle} theme={theme} renderFunc={renderFunc} />
<SubTitle
usersTyping={tmid ? [] : usersTyping}
subtitle={subtitle}
theme={theme}
renderFunc={renderFunc}
scale={scale}
/>
</TouchableOpacity>
);
});
......@@ -175,17 +188,18 @@ Header.propTypes = {
height: PropTypes.number.isRequired,
prid: PropTypes.string,
tmid: PropTypes.string,
teamMain: PropTypes.bool,
status: PropTypes.string,
theme: PropTypes.string,
usersTyping: PropTypes.array,
connecting: PropTypes.bool,
isGroupChat: PropTypes.bool,
parentTitle: PropTypes.string,
goRoomActionsView: PropTypes.func
onPress: PropTypes.func,
testID: PropTypes.string
};
Header.defaultProps = {
usersTyping: []
};
export default Header;
export default withTheme(Header);
This diff is collapsed.
This diff is collapsed.
......@@ -706,5 +706,8 @@
"Enter_workspace_URL": "Enter workspace URL",
"Workspace_URL_Example": "Ex. your-company.rocket.chat",
"This_room_encryption_has_been_enabled_by__username_": "This room's encryption has been enabled by {{username}}",
"This_room_encryption_has_been_disabled_by__username_": "This room's encryption has been disabled by {{username}}"
"This_room_encryption_has_been_disabled_by__username_": "This room's encryption has been disabled by {{username}}",
"Teams": "Teams",
"No_team_channels_found": "No channels found",
"Team_not_found": "Team not found"
}
\ No newline at end of file
......@@ -656,5 +656,8 @@
"This_room_encryption_has_been_disabled_by__username_": "A criptografia para essa sala foi desabilitada por {{username}}",
"Apply_Your_Certificate": "Aplicar certificado",
"Do_you_have_a_certificate": "Você tem um certificado?",
"Your_certificate": "Seu certificado"
"Your_certificate": "Seu certificado",
"Teams": "Times",
"No_team_channels_found": "Nenhum canal encontrado",
"Team_not_found": "Time não encontrado"
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment