SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix small images style (#7310)

Browse Source
This commit is contained in:
Elias Nahum
2023-04-28 20:56:03 -04:00
committed by GitHub
parent 1ce69f20fb
commit 712d8465a7
2 changed files with 86 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
app/components/files/file.tsx
View File

@@ -99,95 +99,109 @@ const File = ({
onOptionsPress?.(file);
}, [file, onOptionsPress]);
const optionsButton = (
<FileOptionsIcon
onPress={handleOnOptionsPress}
selected={optionSelected}
/>
);
const fileInfo = (
<FileInfo
file={file}
showDate={showDate}
channelName={channelName}
onPress={handlePreviewPress}
/>
);
const renderImageFileOverlay = (
<ImageFileOverlay
value={nonVisibleImagesCount}
/>
);
const renderImageFile = (
<TouchableWithoutFeedback onPress={onGestureEvent}>
<Animated.View style={[styles, asCard ? style.imageVideo : null]}>
<ImageFile
file={file}
forwardRef={ref}
inViewPort={inViewPort}
isSingleImage={isSingleImage}
resizeMode={'cover'}
wrapperWidth={wrapperWidth}
/>
{Boolean(nonVisibleImagesCount) && renderImageFileOverlay}
</Animated.View>
</TouchableWithoutFeedback>
);
const renderVideoFile = (
<TouchableWithoutFeedback onPress={onGestureEvent}>
<Animated.View style={[styles, asCard ? style.imageVideo : null]}>
<VideoFile
file={file}
forwardRef={ref}
inViewPort={inViewPort}
isSingleImage={isSingleImage}
resizeMode={'cover'}
wrapperWidth={wrapperWidth}
updateFileForGallery={updateFileForGallery}
index={index}
/>
{Boolean(nonVisibleImagesCount) && renderImageFileOverlay}
</Animated.View>
</TouchableWithoutFeedback>
);
const renderDocumentFile = (
<View style={style.iconWrapper}>
<DocumentFile
ref={document}
canDownloadFiles={canDownloadFiles}
file={file}
/>
</View>
);
const renderCardWithImage = (fileIcon: JSX.Element) => {
const fileInfo = (
<FileInfo
file={file}
showDate={showDate}
channelName={channelName}
onPress={handlePreviewPress}
/>
);
return (
<View style={[style.fileWrapper]}>
<View style={style.iconWrapper}>
{fileIcon}
</View>
{fileInfo}
{onOptionsPress && optionsButton}
{onOptionsPress &&
<FileOptionsIcon
onPress={handleOnOptionsPress}
selected={optionSelected}
/>
}
</View>
);
};
let fileComponent;
if (isVideo(file) && publicLinkEnabled) {
const renderVideoFile = (
<TouchableWithoutFeedback onPress={onGestureEvent}>
<Animated.View style={[styles, asCard ? style.imageVideo : null]}>
<VideoFile
file={file}
forwardRef={ref}
inViewPort={inViewPort}
isSingleImage={isSingleImage}
resizeMode={'cover'}
wrapperWidth={wrapperWidth}
updateFileForGallery={updateFileForGallery}
index={index}
/>
{Boolean(nonVisibleImagesCount) &&
<ImageFileOverlay
value={nonVisibleImagesCount}
/>
}
</Animated.View>
</TouchableWithoutFeedback>
);
fileComponent = asCard ? renderCardWithImage(renderVideoFile) : renderVideoFile;
} else if (isImage(file)) {
const renderImageFile = (
<TouchableWithoutFeedback onPress={onGestureEvent}>
<Animated.View style={[styles, asCard ? style.imageVideo : null]}>
<ImageFile
file={file}
forwardRef={ref}
inViewPort={inViewPort}
isSingleImage={isSingleImage}
resizeMode={'cover'}
wrapperWidth={wrapperWidth}
/>
{Boolean(nonVisibleImagesCount) &&
<ImageFileOverlay
value={nonVisibleImagesCount}
/>
}
</Animated.View>
</TouchableWithoutFeedback>
);
fileComponent = asCard ? renderCardWithImage(renderImageFile) : renderImageFile;
} else if (isDocument(file)) {
const renderDocumentFile = (
<View style={style.iconWrapper}>
<DocumentFile
ref={document}
canDownloadFiles={canDownloadFiles}
file={file}
/>
</View>
);
const fileInfo = (
<FileInfo
file={file}
showDate={showDate}
channelName={channelName}
onPress={handlePreviewPress}
/>
);
fileComponent = (
<View style={[style.fileWrapper]}>
{renderDocumentFile}
{fileInfo}
{onOptionsPress && optionsButton}
{onOptionsPress &&
<FileOptionsIcon
onPress={handleOnOptionsPress}
selected={optionSelected}
/>
}
</View>
);
} else {

8
app/components/files/image_file.tsx
View File

@@ -63,15 +63,14 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
borderRadius: 5,
},
smallImageOverlay: {
...StyleSheet.absoluteFillObject,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
position: 'absolute',
},
singleSmallImageWrapper: {
height: SMALL_IMAGE_MAX_HEIGHT,
width: SMALL_IMAGE_MAX_WIDTH,
overflow: 'hidden',
},
}));
@@ -118,7 +117,8 @@ const ImageFile = ({
return props;
};
if (file.height <= SMALL_IMAGE_MAX_HEIGHT || file.width <= SMALL_IMAGE_MAX_WIDTH) {
const imageDimensions = getImageDimensions();
if (imageDimensions && (imageDimensions.height <= SMALL_IMAGE_MAX_HEIGHT || imageDimensions.width <= SMALL_IMAGE_MAX_WIDTH)) {
let wrapperStyle: StyleProp<ViewStyle> = style.fileImageWrapper;
if (isSingleImage) {
wrapperStyle = style.singleSmallImageWrapper;
@@ -169,7 +169,6 @@ const ImageFile = ({
);
}
const imageDimensions = getImageDimensions();
image = (
<ProgressiveImage
id={file.id!}
@@ -215,6 +214,7 @@ const ImageFile = ({
</View>
);
}
return (
<View
style={style.fileImageWrapper}