diff --git a/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap b/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap
index f8bfadc08..7202ed8da 100644
--- a/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap
+++ b/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap
@@ -13,6 +13,7 @@ Object {
Object {
"value": Object {
"height": 40,
+ "marginVertical": 2,
"opacity": 1,
},
}
@@ -21,6 +22,7 @@ Object {
style={
Object {
"height": 40,
+ "marginVertical": 2,
"opacity": 1,
}
}
@@ -46,10 +48,10 @@ Object {
diff --git a/app/components/channel_list/categories/body/category_body.tsx b/app/components/channel_list/categories/body/category_body.tsx
index c27f2ac00..2961cf21f 100644
--- a/app/components/channel_list/categories/body/category_body.tsx
+++ b/app/components/channel_list/categories/body/category_body.tsx
@@ -41,7 +41,7 @@ const CategoryBody = ({currentChannelId, sortedIds, category, hiddenChannelIds,
collapsed={category.collapsed}
/>
);
- }, [currentChannelId]);
+ }, [currentChannelId, category.collapsed]);
return (
-
- 10
-
-
-`;
diff --git a/app/components/channel_list/categories/body/channel/__snapshots__/channel_list_item.test.tsx.snap b/app/components/channel_list/categories/body/channel/__snapshots__/channel_list_item.test.tsx.snap
index 9f969d335..ddfdff33a 100644
--- a/app/components/channel_list/categories/body/channel/__snapshots__/channel_list_item.test.tsx.snap
+++ b/app/components/channel_list/categories/body/channel/__snapshots__/channel_list_item.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`components/channel_list/categories/body/channel/item should match snaps
Object {
"value": Object {
"height": 40,
+ "marginVertical": 2,
"opacity": 1,
},
}
@@ -14,6 +15,7 @@ exports[`components/channel_list/categories/body/channel/item should match snaps
style={
Object {
"height": 40,
+ "marginVertical": 2,
"opacity": 1,
}
}
@@ -39,10 +41,10 @@ exports[`components/channel_list/categories/body/channel/item should match snaps
diff --git a/app/components/channel_list/categories/body/channel/badge.test.tsx b/app/components/channel_list/categories/body/channel/badge.test.tsx
deleted file mode 100644
index 0696f225e..000000000
--- a/app/components/channel_list/categories/body/channel/badge.test.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-
-import {renderWithIntlAndTheme} from '@test/intl-test-helper';
-
-import Badge from './badge';
-
-describe('components/channel_list/categories/body/channel/badge', () => {
- it('should match snapshot', () => {
- const wrapper = renderWithIntlAndTheme(
- ,
- );
- expect(wrapper.toJSON()).toMatchSnapshot();
- });
-});
diff --git a/app/components/channel_list/categories/body/channel/badge.tsx b/app/components/channel_list/categories/body/channel/badge.tsx
deleted file mode 100644
index 7a7270f38..000000000
--- a/app/components/channel_list/categories/body/channel/badge.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {useMemo} from 'react';
-import {Text, View} from 'react-native';
-
-import {useTheme} from '@context/theme';
-import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
-import {typography} from '@utils/typography';
-
-const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
- badge: {
- backgroundColor: theme.mentionBg,
- borderRadius: 10,
- height: 20,
- marginTop: 5,
- paddingHorizontal: 8,
- alignItems: 'center',
- justifyContent: 'center',
- textAlignVertical: 'center',
- },
- text: {
- color: theme.mentionColor,
- ...typography('Body', 75),
- },
- mutedBadge: {
- backgroundColor: changeOpacity(theme.mentionBg, 0.4),
- },
- mutedText: {
- color: changeOpacity(theme.mentionColor, 0.4),
- },
-}));
-
-const Badge = ({count, muted}: {count: number; muted: boolean}) => {
- const theme = useTheme();
- const styles = getStyleSheet(theme);
-
- const viewStyle = useMemo(() => [
- styles.badge,
- muted && styles.mutedBadge,
- ], [muted]);
-
- const textStyle = useMemo(() => [
- styles.text,
-
- muted && styles.mutedText,
- ], [muted]);
-
- if (!count) {
- return null;
- }
-
- return (
-
-
- {`${count}`}
-
-
- );
-};
-
-export default Badge;
diff --git a/app/components/channel_list/categories/body/channel/channel_list_item.tsx b/app/components/channel_list/categories/body/channel/channel_list_item.tsx
index 475035688..1e458be25 100644
--- a/app/components/channel_list/categories/body/channel/channel_list_item.tsx
+++ b/app/components/channel_list/categories/body/channel/channel_list_item.tsx
@@ -8,6 +8,7 @@ import {TouchableOpacity} from 'react-native-gesture-handler';
import Animated, {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
import {switchToChannelById} from '@actions/remote/channel';
+import Badge from '@components/badge';
import ChannelIcon from '@components/channel_icon';
import {General} from '@constants';
import {useServerUrl} from '@context/server';
@@ -15,17 +16,15 @@ import {useTheme} from '@context/theme';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {typography} from '@utils/typography';
-import Badge from './badge';
-
import type ChannelModel from '@typings/database/models/servers/channel';
import type MyChannelModel from '@typings/database/models/servers/my_channel';
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
container: {
flexDirection: 'row',
- marginBottom: 8,
paddingLeft: 2,
- paddingVertical: 4,
+ height: 40,
+ alignItems: 'center',
},
icon: {
fontSize: 24,
@@ -44,6 +43,16 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
muted: {
color: changeOpacity(theme.sidebarText, 0.4),
},
+ badge: {
+ position: 'relative',
+ borderWidth: 0,
+ left: 0,
+ top: 0,
+ alignSelf: undefined,
+ },
+ mutedBadge: {
+ opacity: 0.4,
+ },
}));
const textStyle = StyleSheet.create({
@@ -77,6 +86,7 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan
const animatedStyle = useAnimatedStyle(() => {
return {
+ marginVertical: withTiming(sharedValue.value ? 0 : 2, {duration: 500}),
height: withTiming(sharedValue.value ? 0 : 40, {duration: 500}),
opacity: withTiming(sharedValue.value ? 0 : 1, {duration: 500, easing: Easing.inOut(Easing.exp)}),
};
@@ -87,7 +97,6 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan
if (channel.type === General.GM_CHANNEL) {
return channel.displayName?.split(',').length;
}
-
return 0;
}, [channel.type, channel.displayName]);
@@ -128,13 +137,11 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan
>
{displayName}
- {myChannel.mentionsCount > 0 &&
-
- }
-
+ 0}
+ value={myChannel.mentionsCount}
+ style={[styles.badge, isMuted && styles.mutedBadge]}
+ />