Merge branch 'alexkuz-web-fix-fonts-and-image-box' into main
commit
f2fc654f34
|
@ -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 {
|
||||||
|
|
|
@ -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 = ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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,
|
||||||
})
|
})
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue