Skip to content

[IMPROVEMENT] Message attachment colors #2860

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
diegolmello merged 13 commits into from
Mar 18, 2021
Merged

[IMPROVEMENT] Message attachment colors #2860

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
dd6ede2
Added convertStrToHex function and updated Reply component
gerzonc Feb 1, 2021
687ade4
Removed convertStrtToHex function and added attachmentBackground
gerzonc Feb 2, 2021
4dbf668
Merge branch 'develop' into improve.msg-attachment-colors
diegolmello Feb 9, 2021
516daf2
Added color2k, removed transparent view and applied transparentize to…
gerzonc Feb 9, 2021
2b1df87
Added stories
gerzonc Mar 1, 2021
e17f777
Merge branch 'develop' into improve.msg-attachment-colors
gerzonc Mar 1, 2021
bf0e3d9
Update Reply stories
gerzonc Mar 1, 2021
f6356df
Update Reply stories
gerzonc Mar 1, 2021
7da5cde
Fix lint
gerzonc Mar 1, 2021
c7baf37
Update Reply stories
gerzonc Mar 2, 2021
16eddd8
Fix props
gerzonc Mar 2, 2021
1c25f9b
Merge branch 'develop' into improve.msg-attachment-colors
diegolmello Mar 9, 2021
ca4c9bc
Move tests to Message stories
diegolmello Mar 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 105 additions & 0 deletions __tests__/__snapshots__/Storyshots.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30989,6 +30989,21 @@ exports[`Storyshots Message list message 1`] = `
}
}
>
<View
style={
Array [
Object {
"backgroundColor": "transparent",
"opacity": 0.25,
},
Object {
"height": "100%",
"position": "absolute",
"width": "100%",
},
]
}
/>
<View
style={
Object {
Expand Down Expand Up @@ -31206,6 +31221,21 @@ exports[`Storyshots Message list message 1`] = `
}
}
>
<View
style={
Array [
Object {
"backgroundColor": "transparent",
"opacity": 0.25,
},
Object {
"height": "100%",
"position": "absolute",
"width": "100%",
},
]
}
/>
<View
style={
Object {
Expand Down Expand Up @@ -31628,6 +31658,21 @@ exports[`Storyshots Message list message 1`] = `
}
}
>
<View
style={
Array [
Object {
"backgroundColor": "transparent",
"opacity": 0.25,
},
Object {
"height": "100%",
"position": "absolute",
"width": "100%",
},
]
}
/>
<View
style={
Object {
Expand Down Expand Up @@ -31997,6 +32042,21 @@ exports[`Storyshots Message list message 1`] = `
}
}
>
<View
style={
Array [
Object {
"backgroundColor": "transparent",
"opacity": 0.25,
},
Object {
"height": "100%",
"position": "absolute",
"width": "100%",
},
]
}
/>
<View
style={
Object {
Expand Down Expand Up @@ -39152,6 +39212,21 @@ exports[`Storyshots Message list message 1`] = `
}
}
>
<View
style={
Array [
Object {
"backgroundColor": "transparent",
"opacity": 0.25,
},
Object {
"height": "100%",
"position": "absolute",
"width": "100%",
},
]
}
/>
<View
style={
Object {
Expand Down Expand Up @@ -39802,6 +39877,21 @@ exports[`Storyshots Message list message 1`] = `
}
}
>
<View
style={
Array [
Object {
"backgroundColor": "transparent",
"opacity": 0.25,
},
Object {
"height": "100%",
"position": "absolute",
"width": "100%",
},
]
}
/>
<View
style={
Object {
Expand Down Expand Up @@ -40042,6 +40132,21 @@ exports[`Storyshots Message list message 1`] = `
}
}
>
<View
style={
Array [
Object {
"backgroundColor": "transparent",
"opacity": 0.25,
},
Object {
"height": "100%",
"position": "absolute",
"width": "100%",
},
]
}
/>
<View
style={
Object {
Expand Down
38 changes: 23 additions & 15 deletions app/containers/message/Reply.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderRadius: 4
},
attachmentBackground: {
position: 'absolute',
width: '100%',
height: '100%'
},
attachmentContainer: {
flex: 1,
borderRadius: 4,
Expand Down Expand Up @@ -159,25 +164,28 @@ const Reply = React.memo(({
attachment.description && styles.marginBottom,
{
backgroundColor: themes[theme].chatComponentBackground,
borderColor: themes[theme].borderColor
borderColor: attachment.color || themes[theme].borderColor
}
]}
background={Touchable.Ripple(themes[theme].bannerBackground)}
>
<View style={styles.attachmentContainer}>
<Title
attachment={attachment}
timeFormat={timeFormat}
theme={theme}
/>
<Description
attachment={attachment}
timeFormat={timeFormat}
getCustomEmoji={getCustomEmoji}
theme={theme}
/>
<Fields attachment={attachment} theme={theme} />
</View>
<>
<View style={[{ backgroundColor: attachment.color || 'transparent', opacity: 0.25 }, styles.attachmentBackground]} />
Comment thread
diegolmello marked this conversation as resolved.
Outdated
<View style={styles.attachmentContainer}>
<Title
attachment={attachment}
timeFormat={timeFormat}
theme={theme}
/>
<Description
attachment={attachment}
timeFormat={timeFormat}
getCustomEmoji={getCustomEmoji}
theme={theme}
/>
<Fields attachment={attachment} theme={theme} />
</View>
</>
</Touchable>
<Markdown
msg={attachment.description}
Expand Down