Merge branch 'alexkuz-web-fix-fonts-and-image-box' into main

zio/stable
Paul Frazee 2024-03-19 14:07:36 -07:00
commit f2fc654f34
7 changed files with 79 additions and 29 deletions

View File

@ -44,7 +44,7 @@
scrollbar-gutter: stable both-edges; scrollbar-gutter: stable both-edges;
} }
html, body { html, body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
} }
/* Buttons and inputs have a font set by UA, so we'll have to reset that */ /* Buttons and inputs have a font set by UA, so we'll have to reset that */
@ -141,7 +141,7 @@
/* ProseMirror */ /* ProseMirror */
.ProseMirror { .ProseMirror {
font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
min-height: 140px; min-height: 140px;
} }
.ProseMirror-dark { .ProseMirror-dark {

View File

@ -6,6 +6,7 @@ let refCount = 0
function incrementRefCount() { function incrementRefCount() {
if (refCount === 0) { if (refCount === 0) {
document.body.style.overflow = 'hidden' document.body.style.overflow = 'hidden'
document.documentElement.style.scrollbarGutter = 'auto'
} }
refCount++ refCount++
} }
@ -14,6 +15,7 @@ function decrementRefCount() {
refCount-- refCount--
if (refCount === 0) { if (refCount === 0) {
document.body.style.overflow = '' document.body.style.overflow = ''
document.documentElement.style.scrollbarGutter = ''
} }
} }

View File

@ -6,7 +6,13 @@
* *
*/ */
import React from 'react' import React from 'react'
import {SafeAreaView, Text, TouchableOpacity, StyleSheet} from 'react-native' import {
SafeAreaView,
TouchableOpacity,
StyleSheet,
ViewStyle,
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
@ -23,14 +29,14 @@ const ImageDefaultHeader = ({onRequestClose}: Props) => {
return ( return (
<SafeAreaView style={styles.root}> <SafeAreaView style={styles.root}>
<TouchableOpacity <TouchableOpacity
style={styles.closeButton} style={[styles.closeButton, styles.blurredBackground]}
onPress={onRequestClose} onPress={onRequestClose}
hitSlop={HIT_SLOP} hitSlop={HIT_SLOP}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel={_(msg`Close image`)} accessibilityLabel={_(msg`Close image`)}
accessibilityHint={_(msg`Closes viewer for header image`)} accessibilityHint={_(msg`Closes viewer for header image`)}
onAccessibilityEscape={onRequestClose}> onAccessibilityEscape={onRequestClose}>
<Text style={styles.closeText}></Text> <FontAwesomeIcon icon="close" color={'#fff'} size={22} />
</TouchableOpacity> </TouchableOpacity>
</SafeAreaView> </SafeAreaView>
) )
@ -42,8 +48,8 @@ const styles = StyleSheet.create({
pointerEvents: 'box-none', pointerEvents: 'box-none',
}, },
closeButton: { closeButton: {
marginRight: 8, marginRight: 10,
marginTop: 8, marginTop: 10,
width: 44, width: 44,
height: 44, height: 44,
alignItems: 'center', alignItems: 'center',
@ -51,13 +57,10 @@ const styles = StyleSheet.create({
borderRadius: 22, borderRadius: 22,
backgroundColor: '#00000077', backgroundColor: '#00000077',
}, },
closeText: { blurredBackground: {
lineHeight: 22, backdropFilter: 'blur(10px)',
fontSize: 19, WebkitBackdropFilter: 'blur(10px)',
textAlign: 'center', } as ViewStyle,
color: '#FFF',
includeFontPadding: false,
},
}) })
export default ImageDefaultHeader export default ImageDefaultHeader

View File

@ -7,6 +7,7 @@ import {
StyleSheet, StyleSheet,
View, View,
Pressable, Pressable,
ViewStyle,
} from 'react-native' } from 'react-native'
import { import {
FontAwesomeIcon, FontAwesomeIcon,
@ -24,6 +25,7 @@ import {
ProfileImageLightbox, ProfileImageLightbox,
} from '#/state/lightbox' } from '#/state/lightbox'
import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
interface Img { interface Img {
uri: string uri: string
@ -111,6 +113,14 @@ function LightboxInner({
return () => window.removeEventListener('keydown', onKeyDown) return () => window.removeEventListener('keydown', onKeyDown)
}, [onKeyDown]) }, [onKeyDown])
const {isTabletOrDesktop} = useWebMediaQueries()
const btnStyle = React.useMemo(() => {
return isTabletOrDesktop ? styles.btnTablet : styles.btnMobile
}, [isTabletOrDesktop])
const iconSize = React.useMemo(() => {
return isTabletOrDesktop ? 32 : 24
}, [isTabletOrDesktop])
return ( return (
<View style={styles.mask}> <View style={styles.mask}>
<TouchableWithoutFeedback <TouchableWithoutFeedback
@ -130,28 +140,38 @@ function LightboxInner({
{canGoLeft && ( {canGoLeft && (
<TouchableOpacity <TouchableOpacity
onPress={onPressLeft} onPress={onPressLeft}
style={[styles.btn, styles.leftBtn]} style={[
styles.btn,
btnStyle,
styles.leftBtn,
styles.blurredBackground,
]}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel={_(msg`Previous image`)} accessibilityLabel={_(msg`Previous image`)}
accessibilityHint=""> accessibilityHint="">
<FontAwesomeIcon <FontAwesomeIcon
icon="angle-left" icon="angle-left"
style={styles.icon as FontAwesomeIconStyle} style={styles.icon as FontAwesomeIconStyle}
size={40} size={iconSize}
/> />
</TouchableOpacity> </TouchableOpacity>
)} )}
{canGoRight && ( {canGoRight && (
<TouchableOpacity <TouchableOpacity
onPress={onPressRight} onPress={onPressRight}
style={[styles.btn, styles.rightBtn]} style={[
styles.btn,
btnStyle,
styles.rightBtn,
styles.blurredBackground,
]}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel={_(msg`Next image`)} accessibilityLabel={_(msg`Next image`)}
accessibilityHint=""> accessibilityHint="">
<FontAwesomeIcon <FontAwesomeIcon
icon="angle-right" icon="angle-right"
style={styles.icon as FontAwesomeIconStyle} style={styles.icon as FontAwesomeIconStyle}
size={40} size={iconSize}
/> />
</TouchableOpacity> </TouchableOpacity>
)} )}
@ -213,20 +233,30 @@ const styles = StyleSheet.create({
}, },
btn: { btn: {
position: 'absolute', position: 'absolute',
backgroundColor: '#000', backgroundColor: '#00000077',
width: 50,
height: 50,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
},
btnTablet: {
width: 50,
height: 50,
borderRadius: 25, borderRadius: 25,
left: 30,
right: 30,
},
btnMobile: {
width: 44,
height: 44,
borderRadius: 22,
left: 20,
right: 20,
}, },
leftBtn: { leftBtn: {
left: 30, right: 'auto',
top: '50%', top: '50%',
}, },
rightBtn: { rightBtn: {
position: 'absolute', left: 'auto',
right: 30,
top: '50%', top: '50%',
}, },
footer: { footer: {
@ -234,4 +264,8 @@ const styles = StyleSheet.create({
paddingVertical: 24, paddingVertical: 24,
backgroundColor: colors.black, backgroundColor: colors.black,
}, },
blurredBackground: {
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
} as ViewStyle,
}) })

View File

@ -237,7 +237,7 @@ const styles = StyleSheet.create({
paddingRight: 12, paddingRight: 12,
borderRadius: 8, borderRadius: 8,
fontFamily: fontFamily:
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif', '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif',
outline: 0, outline: 0,
border: 0, border: 0,
}, },

View File

@ -2,7 +2,7 @@ import React from 'react'
import {Text as RNText, TextProps} from 'react-native' import {Text as RNText, TextProps} from 'react-native'
import {s, lh} from 'lib/styles' import {s, lh} from 'lib/styles'
import {useTheme, TypographyVariant} from 'lib/ThemeContext' import {useTheme, TypographyVariant} from 'lib/ThemeContext'
import {isIOS} from 'platform/detection' import {isIOS, isWeb} from 'platform/detection'
import {UITextView} from 'react-native-ui-text-view' import {UITextView} from 'react-native-ui-text-view'
export type CustomTextProps = TextProps & { export type CustomTextProps = TextProps & {
@ -13,6 +13,11 @@ export type CustomTextProps = TextProps & {
selectable?: boolean selectable?: boolean
} }
const fontFamilyStyle = {
fontFamily:
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif',
}
export function Text({ export function Text({
type = 'md', type = 'md',
children, children,
@ -39,7 +44,13 @@ export function Text({
return ( return (
<RNText <RNText
style={[s.black, typography, lineHeightStyle, style]} style={[
s.black,
typography,
isWeb && fontFamilyStyle,
lineHeightStyle,
style,
]}
// @ts-ignore web only -esb // @ts-ignore web only -esb
dataSet={Object.assign({tooltip: title}, dataSet || {})} dataSet={Object.assign({tooltip: title}, dataSet || {})}
selectable={selectable} selectable={selectable}

View File

@ -48,7 +48,7 @@
scrollbar-gutter: stable both-edges; scrollbar-gutter: stable both-edges;
} }
html, body { html, body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
} }
/* Buttons and inputs have a font set by UA, so we'll have to reset that */ /* Buttons and inputs have a font set by UA, so we'll have to reset that */
@ -145,7 +145,7 @@
/* ProseMirror */ /* ProseMirror */
.ProseMirror { .ProseMirror {
font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
min-height: 140px; min-height: 140px;
} }
.ProseMirror-dark { .ProseMirror-dark {