From 0e3b2633b9876ac3aea39897cdb8831da8c3c1bd Mon Sep 17 00:00:00 2001 From: Alexander K Date: Sun, 17 Mar 2024 21:34:52 +0100 Subject: [PATCH 1/3] Add 'Liberation Sans' font for FireFox on Linux; lightbox buttons adjustments --- bskyweb/templates/base.html | 4 +- .../components/ImageDefaultHeader.tsx | 49 +++++++++++------ src/view/com/lightbox/Lightbox.web.tsx | 54 +++++++++++++++---- .../com/util/forms/NativeDropdown.web.tsx | 2 +- src/view/com/util/text/Text.tsx | 15 +++++- web/index.html | 4 +- 6 files changed, 94 insertions(+), 34 deletions(-) diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index c7c5ec0f..678729ff 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -44,7 +44,7 @@ scrollbar-gutter: stable both-edges; } 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 */ @@ -141,7 +141,7 @@ /* 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; } .ProseMirror-dark { diff --git a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx index 3401adaf..b23dfedc 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx @@ -7,8 +7,15 @@ */ import React from 'react' 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 {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {usePalette} from '#/lib/hooks/usePalette' type Props = { onRequestClose: () => void @@ -16,20 +23,24 @@ type Props = { const HIT_SLOP = createHitslop(16) -const ImageDefaultHeader = ({onRequestClose}: Props) => ( - - - ✕ - - -) +const ImageDefaultHeader = ({onRequestClose}: Props) => { + const pal = usePalette('default') + + return ( + + + + + + ) +} const styles = StyleSheet.create({ root: { @@ -37,8 +48,8 @@ const styles = StyleSheet.create({ pointerEvents: 'box-none', }, closeButton: { - marginRight: 8, - marginTop: 8, + marginRight: 10, + marginTop: 10, width: 44, height: 44, alignItems: 'center', @@ -53,6 +64,10 @@ const styles = StyleSheet.create({ color: '#FFF', includeFontPadding: false, }, + blurredBackground: { + backdropFilter: 'blur(10px)', + WebkitBackdropFilter: 'blur(10px)', + } as ViewStyle, }) export default ImageDefaultHeader diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx index fb97c30a..942c9a68 100644 --- a/src/view/com/lightbox/Lightbox.web.tsx +++ b/src/view/com/lightbox/Lightbox.web.tsx @@ -7,6 +7,7 @@ import { StyleSheet, View, Pressable, + ViewStyle, } from 'react-native' import { FontAwesomeIcon, @@ -24,6 +25,7 @@ import { ProfileImageLightbox, } from '#/state/lightbox' import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' interface Img { uri: string @@ -111,6 +113,14 @@ function LightboxInner({ return () => window.removeEventListener('keydown', 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 ( )} {canGoRight && ( )} @@ -213,20 +233,30 @@ const styles = StyleSheet.create({ }, btn: { position: 'absolute', - backgroundColor: '#000', - width: 50, - height: 50, + backgroundColor: '#00000077', justifyContent: 'center', alignItems: 'center', + }, + btnTablet: { + width: 50, + height: 50, borderRadius: 25, + left: 30, + right: 30, + }, + btnMobile: { + width: 44, + height: 44, + borderRadius: 22, + left: 20, + right: 20, }, leftBtn: { - left: 30, + right: 'auto', top: '50%', }, rightBtn: { - position: 'absolute', - right: 30, + left: 'auto', top: '50%', }, footer: { @@ -234,4 +264,8 @@ const styles = StyleSheet.create({ paddingVertical: 24, backgroundColor: colors.black, }, + blurredBackground: { + backdropFilter: 'blur(10px)', + WebkitBackdropFilter: 'blur(10px)', + } as ViewStyle, }) diff --git a/src/view/com/util/forms/NativeDropdown.web.tsx b/src/view/com/util/forms/NativeDropdown.web.tsx index 6abeb16c..94591d39 100644 --- a/src/view/com/util/forms/NativeDropdown.web.tsx +++ b/src/view/com/util/forms/NativeDropdown.web.tsx @@ -237,7 +237,7 @@ const styles = StyleSheet.create({ paddingRight: 12, borderRadius: 8, 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, border: 0, }, diff --git a/src/view/com/util/text/Text.tsx b/src/view/com/util/text/Text.tsx index ccb51bfc..37d66558 100644 --- a/src/view/com/util/text/Text.tsx +++ b/src/view/com/util/text/Text.tsx @@ -2,7 +2,7 @@ import React from 'react' import {Text as RNText, TextProps} from 'react-native' import {s, lh} from 'lib/styles' 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' export type CustomTextProps = TextProps & { @@ -13,6 +13,11 @@ export type CustomTextProps = TextProps & { selectable?: boolean } +const fontFamilyStyle = { + fontFamily: + '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif', +} + export function Text({ type = 'md', children, @@ -39,7 +44,13 @@ export function Text({ return ( Date: Sun, 17 Mar 2024 22:20:50 +0100 Subject: [PATCH 2/3] remove scrollbar gutter for Chrome when body scroll is locked --- src/lib/hooks/useWebBodyScrollLock.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/lib/hooks/useWebBodyScrollLock.ts b/src/lib/hooks/useWebBodyScrollLock.ts index 585f193f..0dcf911f 100644 --- a/src/lib/hooks/useWebBodyScrollLock.ts +++ b/src/lib/hooks/useWebBodyScrollLock.ts @@ -6,6 +6,7 @@ let refCount = 0 function incrementRefCount() { if (refCount === 0) { document.body.style.overflow = 'hidden' + document.documentElement.style.scrollbarGutter = 'auto' } refCount++ } @@ -14,6 +15,7 @@ function decrementRefCount() { refCount-- if (refCount === 0) { document.body.style.overflow = '' + document.documentElement.style.scrollbarGutter = '' } } From e433a1c968af548327c15bcc2e7fcb5a80760d36 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Tue, 19 Mar 2024 14:06:04 -0700 Subject: [PATCH 3/3] Remove dead style --- .../ImageViewing/components/ImageDefaultHeader.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx index 3a040b5d..88476c8e 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx @@ -57,13 +57,6 @@ const styles = StyleSheet.create({ borderRadius: 22, backgroundColor: '#00000077', }, - closeText: { - lineHeight: 22, - fontSize: 19, - textAlign: 'center', - color: '#FFF', - includeFontPadding: false, - }, blurredBackground: { backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',