martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

contraining image asset popout height

Browse Source
This commit is contained in:
Roland Osborne 2022-05-10 14:02:14 -07:00
parent 3ab7cbcbff
commit 40dfa1fa95
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.jsx
View File

@ -13,7 +13,18 @@ export function ImageAsset({ thumbUrl, fullUrl }) {
}
const onPopOut = () => {
updateState({ popout: true });
if (state.width == 0 || state.height == 0) {
updateState({ popout: true, popWidth: '50%', popHeight: '50%' });
}
else {
if (state.width / state.height > window.innerWidth / window.innerHeight) {
updateState({ popout: true, popWidth: '80%', popHeight: 'auto' });
}
else {
let width = Math.floor(80 * state.width / state.height);
updateState({ popout: true, popWidth: width + '%', popHeight: 'auto' });
}
}
}
return (
@ -33,7 +44,7 @@ export function ImageAsset({ thumbUrl, fullUrl }) {
</div>
</div>
</div>
<Modal visible={state.popout} width={'80%'} bodyStyle={{ paddingBottom: 6, paddingTop: 6, paddingLeft: 6, paddingRight: 6, backgroundColor: '#dddddd' }} footer={null} destroyOnClose={true} closable={false} onCancel={() => { updateState({ popout: false })}}>
<Modal visible={state.popout} width={state.popWidth} height={state.popHeight} bodyStyle={{ width: '100%', height: 'auto', paddingBottom: 6, paddingTop: 6, paddingLeft: 6, paddingRight: 6, backgroundColor: '#dddddd' }} footer={null} destroyOnClose={true} closable={false} onCancel={() => { updateState({ popout: false })}}>
<img style={{ width: '100%', objectFit: 'contain' }} src={fullUrl} alt="" />
</Modal>
</ImageAssetWrapper>