verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

[IMPROVEMENT] Apply new mention colors (#2351) 

* New mention colors

* Increase letterSpacing for mentions

* Refactor

* UnreadBadge

* Add migration
This commit is contained in:
Diego Mello 2020-07-29 17:49:08 -03:00 committed by GitHub
parent b68b0b84df
commit 54bddf035d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 119 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
__tests__/__snapshots__/Storyshots.test.js.snap
View File

@ -584,13 +584,17 @@ exports[`Storyshots Markdown list Markdown 1`] = `
style={
Array [
Object {
"backgroundColor": "#1d74f5",
"color": "#ffffff",
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "500",
"letterSpacing": 0.5,
"padding": 5,
},
Object {
"backgroundColor": "#ffe9ec",
"color": "#f5455c",
},
]
}
>
@ -627,13 +631,17 @@ exports[`Storyshots Markdown list Markdown 1`] = `
style={
Array [
Object {
"backgroundColor": "#E8F2FF",
"color": "#1d74f5",
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "500",
"letterSpacing": 0.5,
"padding": 5,
},
Object {
"backgroundColor": "#fff6d6",
"color": "#b68d00",
},
]
}
>
@ -669,15 +677,16 @@ exports[`Storyshots Markdown list Markdown 1`] = `
style={
Array [
Object {
"backgroundColor": "#E8F2FF",
"color": "#ffffff",
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "500",
"letterSpacing": 0.5,
"padding": 5,
},
Object {
"backgroundColor": "#FF5B5A",
"backgroundColor": "#fde8d7",
"color": "#f38c39",
},
]
}
@ -714,15 +723,16 @@ exports[`Storyshots Markdown list Markdown 1`] = `
style={
Array [
Object {
"backgroundColor": "#E8F2FF",
"color": "#ffffff",
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "500",
"letterSpacing": 0.5,
"padding": 5,
},
Object {
"backgroundColor": "#FF5B5A",
"backgroundColor": "#fde8d7",
"color": "#f38c39",
},
]
}
@ -818,13 +828,17 @@ exports[`Storyshots Markdown list Markdown 1`] = `
style={
Array [
Object {
"backgroundColor": "#1d74f5",
"color": "#ffffff",
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "500",
"letterSpacing": 0.5,
"padding": 5,
},
Object {
"backgroundColor": "#ffe9ec",
"color": "#f5455c",
},
]
}
>
@ -861,13 +875,17 @@ exports[`Storyshots Markdown list Markdown 1`] = `
style={
Array [
Object {
"backgroundColor": "#E8F2FF",
"color": "#1d74f5",
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "500",
"letterSpacing": 0.5,
"padding": 5,
},
Object {
"backgroundColor": "#fff6d6",
"color": "#b68d00",
},
]
}
>
@ -903,15 +921,16 @@ exports[`Storyshots Markdown list Markdown 1`] = `
style={
Array [
Object {
"backgroundColor": "#E8F2FF",
"color": "#ffffff",
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "500",
"letterSpacing": 0.5,
"padding": 5,
},
Object {
"backgroundColor": "#FF5B5A",
"backgroundColor": "#fde8d7",
"color": "#f38c39",
},
]
}
@ -948,15 +967,16 @@ exports[`Storyshots Markdown list Markdown 1`] = `
style={
Array [
Object {
"backgroundColor": "#E8F2FF",
"color": "#ffffff",
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "500",
"letterSpacing": 0.5,
"padding": 5,
},
Object {
"backgroundColor": "#FF5B5A",
"backgroundColor": "#fde8d7",
"color": "#f38c39",
},
]
}
@ -1052,17 +1072,21 @@ exports[`Storyshots Markdown list Markdown 1`] = `
style={
Array [
Object {
"backgroundColor": "#E8F2FF",
"color": "#0072FE",
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "500",
"letterSpacing": 0.5,
"padding": 5,
},
Object {
"backgroundColor": "#fff6d6",
"color": "#b68d00",
},
]
}
>
test-channel
#test-channel
</Text>
<Text
accessibilityLabel=" "

19
app/constants/colors.js
View File

@ -10,6 +10,16 @@ export const SWITCH_TRACK_COLOR = {
true: '#2de0a5'
};
const mentions = {
unreadBackground: '#414852',
mentionMeColor: '#f5455c',
mentionMeBackground: '#ffe9ec',
mentionGroupColor: '#f38c39',
mentionGroupBackground: '#fde8d7',
mentionOtherColor: '#b68d00',
mentionOtherBackground: '#fff6d6'
};
export const themes = {
light: {
backgroundColor: '#ffffff',
@ -53,7 +63,8 @@ export const themes = {
passcodeDotEmpty: '#CBCED1',
passcodeDotFull: '#6C727A',
previewBackground: '#1F2329',
previewTintColor: '#ffffff'
previewTintColor: '#ffffff',
...mentions
},
dark: {
backgroundColor: '#030b1b',
@ -97,7 +108,8 @@ export const themes = {
passcodeDotEmpty: '#CBCED1',
passcodeDotFull: '#6C727A',
previewBackground: '#030b1b',
previewTintColor: '#ffffff'
previewTintColor: '#ffffff',
...mentions
},
black: {
backgroundColor: '#000000',
@ -141,6 +153,7 @@ export const themes = {
passcodeDotEmpty: '#CBCED1',
passcodeDotFull: '#6C727A',
previewBackground: '#000000',
previewTintColor: '#ffffff'
previewTintColor: '#ffffff',
...mentions
}
};

26
app/containers/markdown/AtMention.js
View File

@ -9,20 +9,32 @@ import styles from './styles';
const AtMention = React.memo(({
mention, mentions, username, navToRoomInfo, style = [], useRealName, theme
}) => {
let mentionStyle = { ...styles.mention, color: themes[theme].buttonText };
if (mention === 'all' || mention === 'here') {
return <Text style={[mentionStyle, styles.mentionAll, ...style]}>{mention}</Text>;
return (
<Text
style={[
styles.mention,
{
color: themes[theme].mentionGroupColor,
backgroundColor: themes[theme].mentionGroupBackground
},
...style
]}
>{mention}
</Text>
);
}
let mentionStyle = {};
if (mention === username) {
mentionStyle = {
...mentionStyle,
backgroundColor: themes[theme].actionTintColor
color: themes[theme].mentionMeColor,
backgroundColor: themes[theme].mentionMeBackground
};
} else {
mentionStyle = {
...mentionStyle,
color: themes[theme].actionTintColor
color: themes[theme].mentionOtherColor,
backgroundColor: themes[theme].mentionOtherBackground
};
}
@ -39,7 +51,7 @@ const AtMention = React.memo(({
if (user) {
return (
<Text
style={[mentionStyle, ...style]}
style={[styles.mention, mentionStyle, ...style]}
onPress={handlePress}
>
{useRealName && user.name ? user.name : user.username}

10
app/containers/markdown/Hashtag.js
View File

@ -21,10 +21,16 @@ const Hashtag = React.memo(({
if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) {
return (
<Text
style={[styles.mention, ...style]}
style={[
styles.mention,
{
color: themes[theme].mentionOtherColor,
backgroundColor: themes[theme].mentionOtherBackground
},
...style]}
onPress={handlePress}
>
{hashtag}
{`#${ hashtag }`}
</Text>
);
}

6
app/containers/markdown/styles.js
View File

@ -54,13 +54,9 @@ export default StyleSheet.create({
temp: { opacity: 0.3 },
mention: {
fontSize: 16,
color: '#0072FE',
padding: 5,
...sharedStyles.textMedium,
backgroundColor: '#E8F2FF'
},
mentionAll: {
backgroundColor: '#FF5B5A'
letterSpacing: 0.5
},
paragraph: {
marginTop: 0,

2
app/lib/database/model/Subscription.js
View File

@ -40,6 +40,8 @@ export default class Subscription extends Model {
@field('user_mentions') userMentions;
@field('group_mentions') groupMentions;
@date('room_updated_at') roomUpdatedAt;
@field('ro') ro;

11
app/lib/database/model/migrations.js
View File

@ -118,6 +118,17 @@ export default schemaMigrations({
]
})
]
},
{
toVersion: 9,
steps: [
addColumns({
table: 'subscriptions',
columns: [
{ name: 'group_mentions', type: 'number', isOptional: true }
]
})
]
}
]
});

3
app/lib/database/schema/app.js
View File

@ -1,7 +1,7 @@
import { appSchema, tableSchema } from '@nozbe/watermelondb';
export default appSchema({
version: 8,
version: 9,
tables: [
tableSchema({
name: 'subscriptions',
@ -19,6 +19,7 @@ export default appSchema({
{ name: 'roles', type: 'string', isOptional: true },
{ name: 'unread', type: 'number' },
{ name: 'user_mentions', type: 'number' },
{ name: 'group_mentions', type: 'number' },
{ name: 'room_updated_at', type: 'number' },
{ name: 'ro', type: 'boolean' },
{ name: 'last_open', type: 'number', isOptional: true },

17
app/presentation/RoomItem/UnreadBadge.js
View File

@ -6,7 +6,7 @@ import styles from './styles';
import { themes } from '../../constants/colors';
const UnreadBadge = React.memo(({
theme, unread, userMentions, type
theme, unread, userMentions, groupMentions
}) => {
if (!unread || unread <= 0) {
return;
@ -14,19 +14,26 @@ const UnreadBadge = React.memo(({
if (unread >= 1000) {
unread = '999+';
}
const mentioned = userMentions > 0 && type !== 'd';
let backgroundColor = themes[theme].unreadBackground;
const color = themes[theme].buttonText;
if (userMentions > 0) {
backgroundColor = themes[theme].mentionMeColor;
} else if (groupMentions > 0) {
backgroundColor = themes[theme].mentionGroupColor;
}
return (
<View
style={[
styles.unreadNumberContainer,
{ backgroundColor: mentioned ? themes[theme].tintColor : themes[theme].borderColor }
{ backgroundColor }
]}
>
<Text
style={[
styles.unreadText,
{ color: mentioned ? themes[theme].buttonText : themes[theme].bodyText }
{ color }
]}
>{ unread }
</Text>
@ -38,7 +45,7 @@ UnreadBadge.propTypes = {
theme: PropTypes.string,
unread: PropTypes.number,
userMentions: PropTypes.number,
type: PropTypes.string
groupMentions: PropTypes.number
};
export default UnreadBadge;

2
app/presentation/RoomItem/index.js
View File

@ -189,7 +189,7 @@ const RoomItem = React.memo(({
<UnreadBadge
unread={item.unread}
userMentions={item.userMentions}
type={item.t}
groupMentions={item.groupMentions}
theme={theme}
/>
</View>