Image fullscreen preview #181
Conversation
src/components/Widget/components/Conversation/components/Messages/index.tsx
Outdated
Show resolved
Hide resolved
| width: naturalWidth, | ||
| height: naturalHeight, | ||
| }; | ||
| dispatch(openFullscreenPreview(obj)) |
There was a problem hiding this comment.
I don't know if I'm on board with the Messages Container to be the one dispatching the full screen behavior. Why are you doing it in this component instead of creating some Image component? Though I really like the markdown approach, I think there could be a way to combine both. What do you think? 😄
There was a problem hiding this comment.
Do you mean to add a method like "addLinkSnippet"?
I think markdown syntax is more convenient and does not need to write too much "Snippet", we only need to write once.
What do you think?
There was a problem hiding this comment.
Yes, something like that addImage method, that should be like the Link Snippet, is what I had in mind. But of course the markdown solution is really clever and I really like it, my only issue with it is we are doing a lot of stuff in the Container and I wanted to decouple it a little. We can leave it to another version though 😄
src/components/Widget/components/FullScreenPreview/usePreview.ts
Outdated
Show resolved
Hide resolved
| width: naturalWidth, | ||
| height: naturalHeight, | ||
| }; | ||
| dispatch(openFullscreenPreview(obj)) |
There was a problem hiding this comment.
Do you mean to add a method like "addLinkSnippet"?
I think markdown syntax is more convenient and does not need to write too much "Snippet", we only need to write once.
What do you think?
| }) | ||
| } | ||
| > | ||
| {showChat && |
There was a problem hiding this comment.
bug fixed here.
but animation is not working.
I am looking for the solution
There was a problem hiding this comment.
Was the issue about the render of the component? The animation can be made via CSS and control the render of the component via state variables 🤔
There was a problem hiding this comment.
yep, I do this already. I try to use JS to control DOM, but it's not best solution for performance. So we can leave it to another version though ?
There was a problem hiding this comment.
Of course, animations are pretty rough so those are something to work on 😄
dev/App.tsx
Outdated
| @@ -29,14 +29,17 @@ export default class App extends Component { | |||
|
|
|||
| render() { | |||
| return ( | |||
| <div> | |||
| <button style={{position: 'absolute', right: 40, bottom: 150}}>test</button> | |||
| <Widget | |||
There was a problem hiding this comment.
There has a bug.
fixed at src/components/Widget/layout.tsx
|
@mcallegari10 Hi, would you have suggestion for this? |
src/components/Widget/layout.tsx
Outdated
| if(fullScreenMode) { | ||
| document.body.setAttribute('style', "overflow: hidden") | ||
| } else { | ||
| document.body.setAttribute('style', "overflow: auto") | ||
| } |
There was a problem hiding this comment.
You can do the same here:
document.body.setAttribute('style', `overflow: ${fullScreenMode ? 'hidden' : 'auto'}`);| }) | ||
| } | ||
| > | ||
| {showChat && |
There was a problem hiding this comment.
Was the issue about the render of the component? The animation can be made via CSS and control the render of the component via state variables 🤔
| width: naturalWidth, | ||
| height: naturalHeight, | ||
| }; | ||
| dispatch(openFullscreenPreview(obj)) |
There was a problem hiding this comment.
Yes, something like that addImage method, that should be like the Link Snippet, is what I had in mind. But of course the markdown solution is really clever and I really like it, my only issue with it is we are doing a lot of stuff in the Container and I wanted to decouple it a little. We can leave it to another version though 😄
|
Sorry for the delay, last week so busy.😅 |
Features
New "imagePreview" Widget props support message image preview