UNPKG

@oxyhq/services

Version:

OxyHQ Expo/React Native SDK — UI components, screens, and native features

861 lines (858 loc) 19.6 kB
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.interBold, letterSpacing: -0.5, lineHeight: 28, }, headerSubtitle: { fontSize: 13, fontWeight: '500', fontFamily: fontFamilies.interMedium, 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.inter, 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.interBold, letterSpacing: -0.5, lineHeight: 24, }, statLabel: { fontSize: 12, fontWeight: '500', fontFamily: fontFamilies.interMedium, 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.interBold, 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.interSemiBold, }, 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.interBold, 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.interBold, }, 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.interSemiBold, marginBottom: 4, }, uploadPreviewMeta: { fontSize: 13, fontFamily: fontFamilies.inter, }, uploadPreviewRemove: { padding: 4, }, uploadPreviewFooter: { padding: 16, borderTopWidth: 1, }, uploadPreviewStats: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 16, }, uploadPreviewStatsText: { fontSize: 15, fontWeight: '600', fontFamily: fontFamilies.interSemiBold, }, 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.interSemiBold, }, uploadPreviewConfirmButton: { flex: 2, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: 14, borderRadius: 12, gap: 8, }, uploadPreviewConfirmText: { color: '#FFFFFF', fontSize: 16, fontWeight: '600', fontFamily: fontFamilies.interSemiBold, }, 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.interSemiBold, 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.interBold, 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.interSemiBold, 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, }, });