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

popout images in mobile with single tap

Browse Source
This commit is contained in:
Roland Osborne 2022-08-26 15:10:07 -07:00
parent 987c1b87ab
commit a5e4e75e2d
3 changed files with 47 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
net/web/src/session/conversation/addTopic/AddTopic.jsx
View File

@ -16,8 +16,6 @@ export function AddTopic({ cardId, channelId }) {
const attachVideo = useRef(null); const attachVideo = useRef(null);
const msg = useRef(); const msg = useRef();
console.log(state);
const keyDown = (e) => { const keyDown = (e) => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
msg.current.blur(); msg.current.blur();

52
net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
View File

@ -3,26 +3,24 @@ import { Button, Modal } from 'antd';
import ReactResizeDetector from 'react-resize-detector'; import ReactResizeDetector from 'react-resize-detector';
import { SelectOutlined, ExpandOutlined, MinusCircleOutlined, PlayCircleOutlined } from '@ant-design/icons'; import { SelectOutlined, ExpandOutlined, MinusCircleOutlined, PlayCircleOutlined } from '@ant-design/icons';
import { ImageAssetWrapper } from './ImageAsset.styled'; import { ImageAssetWrapper } from './ImageAsset.styled';
import { useImageAsset } from './useImageAsset.hook';
export function ImageAsset({ thumbUrl, fullUrl }) { export function ImageAsset({ thumbUrl, fullUrl }) {
const [state, setState] = useState({ width: 0, height: 0, popout: false }); const { state, actions } = useImageAsset();
const [dimension, setDimension] = useState({ width: 0, height: 0 });
const updateState = (value) => { const popout = () => {
setState((s) => ({ ...s, ...value })); if (dimension.width == 0 || dimension.height == 0) {
} actions.setPopout('50%', '50%');
const onPopOut = () => {
if (state.width == 0 || state.height == 0) {
updateState({ popout: true, popWidth: '50%', popHeight: '50%' });
} }
else { else {
if (state.width / state.height > window.innerWidth / window.innerHeight) { if (dimension.width / dimension.height > window.innerWidth / window.innerHeight) {
updateState({ popout: true, popWidth: '80%', popHeight: 'auto' }); actions.setPopout('80%', 'auto');
} }
else { else {
let width = Math.floor(80 * (state.width / state.height) * (window.innerHeight / window.innerWidth)); let width = Math.floor(80 * (dimension.width / dimension.height) * (window.innerHeight / window.innerWidth));
updateState({ popout: true, popWidth: width + '%', popHeight: 'auto' }); actions.setPopout(width + '%', 'auto');
} }
} }
} }
@ -31,22 +29,32 @@ export function ImageAsset({ thumbUrl, fullUrl }) {
<ImageAssetWrapper> <ImageAssetWrapper>
<ReactResizeDetector handleWidth={true} handleHeight={true}> <ReactResizeDetector handleWidth={true} handleHeight={true}>
{({ width, height }) => { {({ width, height }) => {
if (width != state.width || height != state.height) { if (width != dimension.width || height != dimension.height) {
updateState({ width, height }); setDimension({ width, height });
} }
return <img style={{ height: '100%', objectFit: 'contain' }} src={thumbUrl} alt="" /> return <img style={{ height: '100%', objectFit: 'contain' }} src={thumbUrl} alt="" />
}} }}
</ReactResizeDetector> </ReactResizeDetector>
<div class="viewer"> { state.display !== 'small' && (
<div class="overlay" style={{ width: state.width, height: state.height }}> <div class="viewer">
<div class="expand" onClick={() => onPopOut()}> <div class="overlay" style={{ width: dimension.width, height: dimension.height }}>
<ExpandOutlined style={{ fontSize: 24, color: '#eeeeee', cursor: 'pointer' }} /> <div class="expand" onClick={popout}>
<ExpandOutlined style={{ fontSize: 24, color: '#eeeeee', cursor: 'pointer' }} />
</div>
</div> </div>
<Modal visible={state.popout} width={state.width} height={state.height} bodyStyle={{ width: '100%', height: 'auto', paddingBottom: 6, paddingTop: 6, paddingLeft: 6, paddingRight: 6, backgroundColor: '#dddddd' }} footer={null} destroyOnClose={true} closable={false} onCancel={actions.clearPopout}>
<img style={{ width: '100%', objectFit: 'contain' }} src={fullUrl} alt="" />
</Modal>
</div> </div>
</div> )}
<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 })}}> { state.display === 'small' && !state.popout && (
<img style={{ width: '100%', objectFit: 'contain' }} src={fullUrl} alt="" /> <div class="viewer" style={{ width: dimension.width, height: dimension.height }} onClick={popout} />
</Modal> )}
{ state.display === 'small' && state.popout && (
<div class="fullscreen" onClick={actions.clearPopout}>
<img class="image" src={fullUrl} />
</div>
)}
</ImageAssetWrapper> </ImageAssetWrapper>
) )
} }

17
net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
View File

@ -26,5 +26,22 @@ export const ImageAssetWrapper = styled.div`
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.fullscreen {
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
.image {
object-fit: contain;
width: 100%;
height: 100%;
}
}
`; `;