martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +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 = () => { 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 ( return (
@ -33,7 +44,7 @@ export function ImageAsset({ thumbUrl, fullUrl }) {
</div> </div>
</div> </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="" /> <img style={{ width: '100%', objectFit: 'contain' }} src={fullUrl} alt="" />
</Modal> </Modal>
</ImageAssetWrapper> </ImageAssetWrapper>