@oxyhq/services 5.14.0 → 5.15.1

package/src/ui/components/fileManagement/styles.ts

@@ -0,0 +1,860 @@
+import { StyleSheet } from 'react-native';
+import { fontFamilies } from '../../styles/fonts';
+
+export const fileManagementStyles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    selectionBadge: {
+        position: 'absolute',
+        top: 4,
+        right: 4,
+        backgroundColor: 'rgba(0,0,0,0.4)',
+        borderRadius: 12,
+        padding: 2,
+    },
+    loadingMoreBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 12,
+        gap: 8,
+    },
+    loadingMoreText: {
+        fontSize: 13,
+        fontWeight: '500',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderBottomWidth: 1,
+        position: 'relative',
+    },
+    backButton: {
+        padding: 12,
+        borderRadius: 999,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: 44,
+        minHeight: 44,
+    },
+    headerTitleContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginHorizontal: 16,
+    },
+    headerTitle: {
+        fontSize: 22,
+        fontWeight: '700',
+        fontFamily: fontFamilies.phuduBold,
+        letterSpacing: -0.5,
+        lineHeight: 28,
+    },
+    headerSubtitle: {
+        fontSize: 13,
+        fontWeight: '500',
+        fontFamily: fontFamilies.phuduMedium,
+        marginTop: 2,
+        letterSpacing: 0.2,
+    },
+    uploadButton: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    uploadProgress: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    uploadProgressText: {
+        color: '#FFFFFF',
+        fontSize: 10,
+        fontWeight: '600',
+        marginTop: 2,
+    },
+    uploadBannerContainer: {
+        position: 'absolute',
+        top: 72,
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        zIndex: 50,
+    },
+    uploadBanner: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        borderRadius: 24,
+        gap: 10,
+        borderWidth: 1,
+        shadowColor: '#000',
+        shadowOpacity: 0.1,
+        shadowRadius: 6,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 2,
+        minWidth: 200,
+    },
+    uploadBannerContent: {
+        flex: 1,
+        gap: 6,
+    },
+    uploadBannerText: {
+        fontSize: 13,
+        fontWeight: '500',
+    },
+    uploadProgressBarContainer: {
+        height: 3,
+        backgroundColor: 'rgba(0,0,0,0.1)',
+        borderRadius: 2,
+        overflow: 'hidden',
+    },
+    uploadProgressBar: {
+        height: '100%',
+        borderRadius: 2,
+    },
+    searchContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        marginHorizontal: 12,
+        marginTop: 0,
+        marginBottom: 12,
+        borderRadius: 999,
+        gap: 10,
+    },
+    searchInput: {
+        flex: 1,
+        fontSize: 16,
+        fontFamily: fontFamilies.phudu,
+        lineHeight: 20,
+    },
+    searchClearButton: {
+        padding: 4,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    statsContainer: {
+        flexDirection: 'row',
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        marginHorizontal: 12,
+        marginTop: 0,
+        marginBottom: 12,
+        borderRadius: 18,
+    },
+    statItem: {
+        flex: 1,
+        alignItems: 'center',
+        paddingVertical: 4,
+    },
+    statValue: {
+        fontSize: 20,
+        fontWeight: '800',
+        fontFamily: fontFamilies.phuduBold,
+        letterSpacing: -0.5,
+        lineHeight: 24,
+    },
+    statLabel: {
+        fontSize: 12,
+        fontWeight: '500',
+        fontFamily: fontFamilies.phuduMedium,
+        marginTop: 2,
+        letterSpacing: 0.2,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContainer: {
+        paddingHorizontal: 12,
+        paddingTop: 0,
+        paddingBottom: 12,
+    },
+    fileItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+        marginBottom: 8,
+        borderRadius: 10,
+        borderWidth: 1,
+    },
+    fileContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+    },
+    fileIconContainer: {
+        width: 50,
+        height: 50,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 12,
+    },
+    filePreviewContainer: {
+        width: 52,
+        height: 52,
+        marginRight: 10,
+    },
+    filePreview: {
+        width: '100%',
+        height: '100%',
+        borderRadius: 8,
+        backgroundColor: 'transparent',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        position: 'relative',
+    },
+    previewImage: {
+        width: '100%',
+        height: '100%',
+        borderRadius: 8,
+    },
+    pdfPreview: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        backgroundColor: '#FF6B6B20',
+    },
+    pdfLabel: {
+        fontSize: 8,
+        fontWeight: 'bold',
+        marginTop: 2,
+    },
+    videoPreviewWrapper: {
+        width: '100%',
+        height: '100%',
+        borderRadius: 8,
+        overflow: 'hidden',
+        backgroundColor: '#000000',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    videoPosterImage: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: '100%',
+        height: '100%',
+    },
+    videoOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0,0,0,0.25)',
+    },
+    fallbackIcon: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'transparent',
+        borderRadius: 8,
+    },
+    groupedActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        marginLeft: 12,
+    },
+    groupedActionBtn: {
+        width: 34,
+        height: 34,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    groupedDescription: {
+        fontSize: 12,
+        lineHeight: 16,
+        marginTop: 6,
+    },
+    fileInfo: {
+        flex: 1,
+    },
+    fileName: {
+        fontSize: 16,
+        fontWeight: '600',
+        marginBottom: 4,
+    },
+    fileDetails: {
+        fontSize: 14,
+        marginBottom: 2,
+    },
+    fileDescription: {
+        fontSize: 12,
+        fontStyle: 'italic',
+    },
+    fileActions: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    actionButton: {
+        width: 36,
+        height: 36,
+        borderRadius: 999,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyState: {
+        alignItems: 'center',
+        paddingVertical: 40,
+        paddingHorizontal: 24,
+    },
+    emptyStateTitle: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        fontFamily: fontFamilies.phuduBold,
+        marginTop: 16,
+        marginBottom: 8,
+    },
+    emptyStateDescription: {
+        fontSize: 16,
+        textAlign: 'center',
+        lineHeight: 24,
+        marginBottom: 32,
+    },
+    emptyStateButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 24,
+        gap: 8,
+    },
+    emptyStateButtonText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    modalContainer: {
+        flex: 1,
+    },
+    modalHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderBottomWidth: 1,
+    },
+    modalCloseButton: {
+        padding: 8,
+    },
+    modalTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    modalPlaceholder: {
+        width: 40,
+    },
+    modalContent: {
+        flex: 1,
+        padding: 16,
+    },
+    fileDetailCard: {
+        padding: 18,
+        borderRadius: 14,
+        borderWidth: 1,
+        alignItems: 'center',
+    },
+    fileDetailIcon: {
+        marginBottom: 16,
+    },
+    fileDetailName: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        fontFamily: fontFamilies.phuduBold,
+        textAlign: 'center',
+        marginBottom: 24,
+    },
+    fileDetailInfo: {
+        width: '100%',
+        marginBottom: 32,
+    },
+    detailRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        marginBottom: 12,
+        flexWrap: 'wrap',
+    },
+    detailLabel: {
+        fontSize: 16,
+        fontWeight: '500',
+        flex: 1,
+        minWidth: 100,
+    },
+    detailValue: {
+        fontSize: 16,
+        flex: 2,
+        textAlign: 'right',
+    },
+    modalActions: {
+        flexDirection: 'row',
+        gap: 12,
+        width: '100%',
+    },
+    modalActionButton: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 16,
+        borderRadius: 12,
+        gap: 8,
+    },
+    modalActionText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    uploadPreviewContainer: {
+        flex: 1,
+    },
+    uploadPreviewHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        borderBottomWidth: 1,
+    },
+    uploadPreviewTitle: {
+        fontSize: 20,
+        fontWeight: '700',
+        fontFamily: fontFamilies.phuduBold,
+    },
+    uploadPreviewList: {
+        flex: 1,
+        padding: 16,
+    },
+    uploadPreviewItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        borderRadius: 12,
+        borderWidth: 1,
+        marginBottom: 12,
+        gap: 12,
+    },
+    uploadPreviewThumbnail: {
+        width: 60,
+        height: 60,
+        borderRadius: 8,
+    },
+    uploadPreviewIconContainer: {
+        width: 60,
+        height: 60,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    uploadPreviewInfo: {
+        flex: 1,
+        minWidth: 0,
+    },
+    uploadPreviewName: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        marginBottom: 4,
+    },
+    uploadPreviewMeta: {
+        fontSize: 13,
+        fontFamily: fontFamilies.phudu,
+    },
+    uploadPreviewRemove: {
+        padding: 4,
+    },
+    uploadPreviewFooter: {
+        padding: 16,
+        borderTopWidth: 1,
+    },
+    uploadPreviewStats: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginBottom: 16,
+    },
+    uploadPreviewStatsText: {
+        fontSize: 15,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    uploadPreviewActions: {
+        flexDirection: 'row',
+        gap: 12,
+    },
+    uploadPreviewCancelButton: {
+        flex: 1,
+        paddingVertical: 14,
+        borderRadius: 12,
+        borderWidth: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    uploadPreviewCancelText: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    uploadPreviewConfirmButton: {
+        flex: 2,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 14,
+        borderRadius: 12,
+        gap: 8,
+    },
+    uploadPreviewConfirmText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    fileViewerContainer: {
+        flex: 1,
+        position: 'relative',
+    },
+    backgroundImage: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: 0,
+    },
+    backgroundOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 1,
+    },
+    fileViewerHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        borderBottomWidth: 1,
+        position: 'relative',
+        zIndex: 2,
+    },
+    fileViewerTitleContainer: {
+        flex: 1,
+        marginHorizontal: 12,
+    },
+    fileViewerTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        marginBottom: 2,
+    },
+    fileViewerSubtitle: {
+        fontSize: 14,
+    },
+    fileViewerActions: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    fileViewerContent: {
+        flex: 1,
+        position: 'relative',
+        zIndex: 2,
+    },
+    fileViewerContentWithDetails: {
+        paddingBottom: 20,
+    },
+    fileViewerContentContainer: {
+        flexGrow: 1,
+        paddingHorizontal: 12,
+        paddingTop: 0,
+        paddingBottom: 8,
+    },
+    fileViewerLoading: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    fileViewerLoadingText: {
+        fontSize: 16,
+        marginTop: 16,
+    },
+    imageContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+        marginTop: 56,
+        marginBottom: 8,
+        paddingHorizontal: 12,
+    },
+    imageWrapper: {
+        borderRadius: 24,
+        overflow: 'hidden',
+        alignSelf: 'center',
+    },
+    floatingBackButton: {
+        position: 'absolute',
+        top: 12,
+        left: 12,
+        width: 40,
+        height: 40,
+        borderRadius: 999,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 10,
+    },
+    floatingDownloadButton: {
+        position: 'absolute',
+        top: 12,
+        right: 12,
+        width: 40,
+        height: 40,
+        borderRadius: 999,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 10,
+    },
+    textContainer: {
+        flex: 1,
+        borderRadius: 18,
+        borderWidth: 0,
+        padding: 12,
+        minHeight: 180,
+        maxHeight: '80%',
+    },
+    textContent: {
+        fontSize: 14,
+        fontFamily: 'monospace',
+        lineHeight: 20,
+    },
+    unsupportedFileContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingVertical: 32,
+        paddingHorizontal: 24,
+    },
+    unsupportedFileTitle: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        fontFamily: fontFamilies.phuduBold,
+        marginTop: 16,
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    unsupportedFileDescription: {
+        fontSize: 16,
+        textAlign: 'center',
+        lineHeight: 24,
+        marginBottom: 32,
+    },
+    downloadButtonLarge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 18,
+        paddingVertical: 12,
+        borderRadius: 999,
+        gap: 8,
+    },
+    downloadButtonText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    pdfContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    mediaContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 20,
+    },
+    unsupportedText: {
+        fontSize: 16,
+        textAlign: 'center',
+        fontStyle: 'italic',
+    },
+    fileDetailsSection: {
+        marginHorizontal: 12,
+        marginTop: 8,
+        marginBottom: 12,
+        padding: 0,
+        borderRadius: 18,
+        borderWidth: 0,
+        overflow: 'hidden',
+        position: 'relative',
+        zIndex: 2,
+    },
+    fileDetailsSectionContent: {
+        paddingHorizontal: 12,
+        paddingBottom: 8,
+    },
+    fileDetailsSectionTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        flex: 1,
+    },
+    fileDetailsSectionHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingTop: 10,
+        paddingBottom: 6,
+    },
+    fileDetailsSectionToggle: {
+        padding: 4,
+    },
+    fileDetailsActions: {
+        flexDirection: 'row',
+        gap: 12,
+        marginTop: 8,
+        paddingHorizontal: 12,
+        paddingBottom: 10,
+    },
+    fileDetailsActionButton: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 12,
+        borderRadius: 999,
+        gap: 6,
+    },
+    fileDetailsActionText: {
+        color: '#FFFFFF',
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    controlsBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingTop: 12,
+        paddingBottom: 12,
+        gap: 12,
+    },
+    viewModeScroll: {
+        flex: 1,
+        maxWidth: '80%',
+    },
+    viewModeToggle: {
+        flexDirection: 'row',
+        borderRadius: 999,
+        padding: 2,
+        overflow: 'hidden',
+    },
+    viewModeButton: {
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+        borderRadius: 999,
+        minWidth: 36,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginHorizontal: 1,
+    },
+    sortButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+        borderRadius: 999,
+        minWidth: 36,
+        gap: 4,
+    },
+    photoScrollContainer: {
+        padding: 10,
+    },
+    photoItem: {
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+    photoContainer: {
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+    photoImage: {
+        width: '100%',
+        height: '100%',
+    },
+    dimensionsLoadingIndicator: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 16,
+        gap: 8,
+    },
+    dimensionsLoadingText: {
+        fontSize: 14,
+        fontStyle: 'italic',
+    },
+    justifiedPhotoItem: {
+        borderRadius: 6,
+        overflow: 'hidden',
+        position: 'relative',
+    },
+    justifiedPhotoContainer: {
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        borderRadius: 6,
+        overflow: 'hidden',
+        backgroundColor: 'transparent',
+    },
+    justifiedPhotoImage: {
+        width: '100%',
+        height: '100%',
+        borderRadius: 6,
+    },
+    simplePhotoItem: {
+        borderRadius: 8,
+        overflow: 'hidden',
+        backgroundColor: 'transparent',
+    },
+    simplePhotoContainer: {
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+    simplePhotoImage: {
+        width: '100%',
+        height: '100%',
+        borderRadius: 8,
+    },
+});
+