Add 'Liberation Sans' font for FireFox on Linux; lightbox buttons adjustments

zio/stable
Alexander K 2024-03-17 21:34:52 +01:00
parent 98bca69ae9
commit 0e3b2633b9
6 changed files with 94 additions and 34 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

@ -7,8 +7,15 @@
*/ */
import React from 'react' import React from 'react'
import {createHitslop} from 'lib/constants' import {createHitslop} from 'lib/constants'
import {SafeAreaView, Text, TouchableOpacity, StyleSheet} from 'react-native' import {
SafeAreaView,
TouchableOpacity,
StyleSheet,
ViewStyle,
} from 'react-native'
import {t} from '@lingui/macro' import {t} from '@lingui/macro'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {usePalette} from '#/lib/hooks/usePalette'
type Props = { type Props = {
onRequestClose: () => void onRequestClose: () => void
@ -16,20 +23,24 @@ type Props = {
const HIT_SLOP = createHitslop(16) const HIT_SLOP = createHitslop(16)
const ImageDefaultHeader = ({onRequestClose}: Props) => ( const ImageDefaultHeader = ({onRequestClose}: Props) => {
<SafeAreaView style={styles.root}> const pal = usePalette('default')
<TouchableOpacity
style={styles.closeButton} return (
onPress={onRequestClose} <SafeAreaView style={styles.root}>
hitSlop={HIT_SLOP} <TouchableOpacity
accessibilityRole="button" style={[styles.closeButton, styles.blurredBackground]}
accessibilityLabel={t`Close image`} onPress={onRequestClose}
accessibilityHint={t`Closes viewer for header image`} hitSlop={HIT_SLOP}
onAccessibilityEscape={onRequestClose}> accessibilityRole="button"
<Text style={styles.closeText}></Text> accessibilityLabel={t`Close image`}
</TouchableOpacity> accessibilityHint={t`Closes viewer for header image`}
</SafeAreaView> onAccessibilityEscape={onRequestClose}>
) <FontAwesomeIcon icon="close" color={pal.colors.text} size={22} />
</TouchableOpacity>
</SafeAreaView>
)
}
const styles = StyleSheet.create({ const styles = StyleSheet.create({
root: { root: {
@ -37,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',
@ -53,6 +64,10 @@ const styles = StyleSheet.create({
color: '#FFF', color: '#FFF',
includeFontPadding: false, includeFontPadding: false,
}, },
blurredBackground: {
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
} as ViewStyle,
}) })
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 {