acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Merge remote-tracking branch 'origin/main' into neue/font-loading

Browse Source 
* origin/main:
  Adjust toggle components sizing (#5408)
  [Neue] Copy and spacing tweaks (#5428)
  [Neue] Ligatures & composer (#5427)
  Remove expo/vector-icons from EditImage modal (#5422)
  Revert provider stacking changes (#5423)
  Fix ext embeds in DMs (#5419)
  Fix font loading on web (#5412)
This commit is contained in:
Eric Bailey
2024-09-19 17:15:24 -05:00
parent f02f62ad3c c8184e823d
commit a55d3660bf
20 changed files with 237 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/aspectRatio11_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v14h14V5H5Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 229 B

assets/icons/aspectRatio34_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 2c0-.552.41-1 .917-1h14.666c.507 0 .917.448.917 1v20c0 .552-.41 1-.917 1H4.917C4.41 23 4 22.552 4 22V2Zm1.833 1v18h12.834V3H5.833Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

assets/icons/aspectRatio43_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 20.5c-.552 0-1-.41-1-.917V4.917C1 4.41 1.448 4 2 4h20c.552 0 1 .41 1 .917v14.666c0 .507-.448.917-1 .917H2Zm1-1.833h18V5.833H3v12.834Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 279 B

assets/icons/flipHorizontal_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 21a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5v2H5v14h4v2H4Zm9-20v22h-2V1h2Zm7.707 2.293A1 1 0 0 1 21 4v1h-2V3h1a1 1 0 0 1 .707.293ZM19 7h2v2h-2V7Zm0 4h2v2h-2v-2Zm0 4h2v2h-2v-2Zm0 4h2v1a1 1 0 0 1-1 1h-1v-2Zm-2 0v2h-2v-2h2ZM15 5h2V3h-2v2Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 371 B

assets/icons/flipVertical_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v5h-2V5H5v4H3V4Zm20 9H1v-2h22v2Zm-2.293 7.707A1 1 0 0 1 20 21h-1v-2h2v1a1 1 0 0 1-.293.707ZM17 19v2h-2v-2h2Zm-4 0v2h-2v-2h2Zm-4 0v2H7v-2h2Zm-4 0v2H4a1 1 0 0 1-1-1v-1h2Zm0-2H3v-2h2v2Zm14-2v2h2v-2h-2Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 376 B

bskyweb/templates/base.html
-1
View File
@@ -247,7 +247,6 @@
/* ProseMirror */
.ProseMirror {
font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
min-height: 140px;
}
.ProseMirror-dark {
src/App.native.tsx
+43 -40
View File
@@ -106,48 +106,51 @@ function InnerApp() {
}, [_])
return (
<StatsigProvider
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<Alf theme={theme}>
<ThemeProvider theme={theme}>
<Splash isReady={isReady && hasCheckedReferrer}>
<RootSiblingParent>
<VideoVolumeProvider>
<Alf theme={theme}>
<ThemeProvider theme={theme}>
<Splash isReady={isReady && hasCheckedReferrer}>
<RootSiblingParent>
<VideoVolumeProvider>
<React.Fragment
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<QueryProvider currentDid={currentAccount?.did}>
<MessagesProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LabelDefsProvider>
<ModerationOptsProvider>
<LoggedOutViewProvider>
<SelectedFeedProvider>
<HiddenRepliesProvider>
<UnreadNotifsProvider>
<BackgroundNotificationPreferencesProvider>
<MutedThreadsProvider>
<ProgressGuideProvider>
<GestureHandlerRootView style={s.h100pct}>
<TestCtrls />
<Shell />
<NuxDialogs />
</GestureHandlerRootView>
</ProgressGuideProvider>
</MutedThreadsProvider>
</BackgroundNotificationPreferencesProvider>
</UnreadNotifsProvider>
</HiddenRepliesProvider>
</SelectedFeedProvider>
</LoggedOutViewProvider>
</ModerationOptsProvider>
</LabelDefsProvider>
</MessagesProvider>
<StatsigProvider>
<MessagesProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LabelDefsProvider>
<ModerationOptsProvider>
<LoggedOutViewProvider>
<SelectedFeedProvider>
<HiddenRepliesProvider>
<UnreadNotifsProvider>
<BackgroundNotificationPreferencesProvider>
<MutedThreadsProvider>
<ProgressGuideProvider>
<GestureHandlerRootView
style={s.h100pct}>
<TestCtrls />
<Shell />
<NuxDialogs />
</GestureHandlerRootView>
</ProgressGuideProvider>
</MutedThreadsProvider>
</BackgroundNotificationPreferencesProvider>
</UnreadNotifsProvider>
</HiddenRepliesProvider>
</SelectedFeedProvider>
</LoggedOutViewProvider>
</ModerationOptsProvider>
</LabelDefsProvider>
</MessagesProvider>
</StatsigProvider>
</QueryProvider>
</VideoVolumeProvider>
</RootSiblingParent>
</Splash>
</ThemeProvider>
</Alf>
</StatsigProvider>
</React.Fragment>
</VideoVolumeProvider>
</RootSiblingParent>
</Splash>
</ThemeProvider>
</Alf>
)
}
src/App.web.tsx
+41 -39
View File
@@ -96,48 +96,50 @@ function InnerApp() {
return (
<KeyboardProvider enabled={false}>
<StatsigProvider
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<Alf theme={theme}>
<ThemeProvider theme={theme}>
<RootSiblingParent>
<VideoVolumeProvider>
<ActiveVideoProvider>
<Alf theme={theme}>
<ThemeProvider theme={theme}>
<RootSiblingParent>
<VideoVolumeProvider>
<ActiveVideoProvider>
<React.Fragment
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<QueryProvider currentDid={currentAccount?.did}>
<MessagesProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LabelDefsProvider>
<ModerationOptsProvider>
<LoggedOutViewProvider>
<SelectedFeedProvider>
<HiddenRepliesProvider>
<UnreadNotifsProvider>
<BackgroundNotificationPreferencesProvider>
<MutedThreadsProvider>
<SafeAreaProvider>
<ProgressGuideProvider>
<Shell />
<NuxDialogs />
</ProgressGuideProvider>
</SafeAreaProvider>
</MutedThreadsProvider>
</BackgroundNotificationPreferencesProvider>
</UnreadNotifsProvider>
</HiddenRepliesProvider>
</SelectedFeedProvider>
</LoggedOutViewProvider>
</ModerationOptsProvider>
</LabelDefsProvider>
</MessagesProvider>
<StatsigProvider>
<MessagesProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LabelDefsProvider>
<ModerationOptsProvider>
<LoggedOutViewProvider>
<SelectedFeedProvider>
<HiddenRepliesProvider>
<UnreadNotifsProvider>
<BackgroundNotificationPreferencesProvider>
<MutedThreadsProvider>
<SafeAreaProvider>
<ProgressGuideProvider>
<Shell />
<NuxDialogs />
</ProgressGuideProvider>
</SafeAreaProvider>
</MutedThreadsProvider>
</BackgroundNotificationPreferencesProvider>
</UnreadNotifsProvider>
</HiddenRepliesProvider>
</SelectedFeedProvider>
</LoggedOutViewProvider>
</ModerationOptsProvider>
</LabelDefsProvider>
</MessagesProvider>
</StatsigProvider>
</QueryProvider>
<ToastContainer />
</ActiveVideoProvider>
</VideoVolumeProvider>
</RootSiblingParent>
</ThemeProvider>
</Alf>
</StatsigProvider>
</React.Fragment>
</ActiveVideoProvider>
</VideoVolumeProvider>
</RootSiblingParent>
</ThemeProvider>
</Alf>
</KeyboardProvider>
)
}
src/alf/fonts.ts
+6
View File
@@ -109,4 +109,10 @@ export function applyFonts(
style.fontFamily = style.fontFamily || FAMILIES
}
}
/**
* Disable contextual ligatures
* {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant}
*/
style.fontVariant = ['no-contextual']
}
src/components/dialogs/nuxs/NeueTypography.tsx
+5 -6
View File
@@ -49,19 +49,18 @@ export function NeueTypography() {
<View style={[a.gap_xl]}>
<View style={[a.gap_md]}>
<Text style={[a.text_3xl, {fontWeight: '900'}]}>
<Trans>Introducing new font settings ✨</Trans>
<Trans>New font settings ✨</Trans>
</Text>
<Text style={[a.text_lg, a.leading_snug]}>
<Text style={[a.text_lg, a.leading_snug, {maxWidth: 400}]}>
<Trans>
To the ensure the best possible experience, we're introducing a
new theme font, along with adjustable font sizing settings.
We're introducing a new theme font, along with adjustable font
sizing.
</Trans>
</Text>
<Text
style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
<Trans>
Defaults are shown below. You can edit these in your Appearance
Settings later.
You can adjust these in your Appearance Settings later.
</Trans>
</Text>
</View>
src/components/forms/Toggle.tsx
+10 -10
View File
@@ -351,8 +351,8 @@ export function Checkbox() {
t.atoms.border_contrast_high,
{
borderWidth: 1,
height: 20,
width: 20,
height: 24,
width: 24,
},
baseStyles,
hovered ? baseHoverStyles : {},
@@ -383,9 +383,9 @@ export function Switch() {
t.atoms.border_contrast_high,
{
borderWidth: 1,
height: 20,
width: 32,
padding: 2,
height: 24,
width: 36,
padding: 3,
},
baseStyles,
hovered ? baseHoverStyles : {},
@@ -395,8 +395,8 @@ export function Switch() {
style={[
a.rounded_full,
{
height: 14,
width: 14,
height: 16,
width: 16,
},
selected
? {
@@ -436,8 +436,8 @@ export function Radio() {
t.atoms.border_contrast_high,
{
borderWidth: 1,
height: 20,
width: 20,
height: 24,
width: 24,
},
baseStyles,
hovered ? baseHoverStyles : {},
@@ -447,7 +447,7 @@ export function Radio() {
style={[
a.absolute,
a.rounded_full,
{height: 12, width: 12},
{height: 16, width: 16},
selected
? {
backgroundColor: t.palette.primary_500,
src/components/icons/AspectRatio.tsx
+13
View File
@@ -0,0 +1,13 @@
import {createSinglePathSVG} from './TEMPLATE'
export const AspectRatio11_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v14h14V5H5Z',
})
export const AspectRatio43_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M2 20.5c-.552 0-1-.41-1-.917V4.917C1 4.41 1.448 4 2 4h20c.552 0 1 .41 1 .917v14.666c0 .507-.448.917-1 .917H2Zm1-1.833h18V5.833H3v12.834Z',
})
export const AspectRatio34_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M4 2c0-.552.41-1 .917-1h14.666c.507 0 .917.448.917 1v20c0 .552-.41 1-.917 1H4.917C4.41 23 4 22.552 4 22V2Zm1.833 1v18h12.834V3H5.833Z',
})
src/components/icons/FlipImage.tsx
+9
View File
@@ -0,0 +1,9 @@
import {createSinglePathSVG} from './TEMPLATE'
export const FlipVertical_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v5h-2V5H5v4H3V4Zm20 9H1v-2h22v2Zm-2.293 7.707A1 1 0 0 1 20 21h-1v-2h2v1a1 1 0 0 1-.293.707ZM17 19v2h-2v-2h2Zm-4 0v2h-2v-2h2Zm-4 0v2H7v-2h2Zm-4 0v2H4a1 1 0 0 1-1-1v-1h2Zm0-2H3v-2h2v2Zm14-2v2h2v-2h-2Z',
})
export const FlipHorizontal_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M4 21a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5v2H5v14h4v2H4Zm9-20v22h-2V1h2Zm7.707 2.293A1 1 0 0 1 21 4v1h-2V3h1a1 1 0 0 1 .707.293ZM19 7h2v2h-2V7Zm0 4h2v2h-2v-2Zm0 4h2v2h-2v-2Zm0 4h2v1a1 1 0 0 1-1 1h-1v-2Zm-2 0v2h-2v-2h2ZM15 5h2V3h-2v2Z',
})
src/lib/embeds.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import {
AppBskyFeedDefs,
AppBskyEmbedRecord,
AppBskyEmbedRecordWithMedia,
AppBskyFeedDefs,
} from '@atproto/api'
export function isEmbedByEmbedder(
src/screens/Settings/AppearanceSettings.tsx
+1 -1
View File
@@ -205,7 +205,7 @@ export function AppearanceToggleButtonGroup({
}) {
const t = useTheme()
return (
<View style={[a.gap_md]}>
<View style={[a.gap_sm]}>
<View style={[a.gap_xs]}>
<View style={[a.flex_row, a.align_center, a.gap_md]}>
<Icon style={t.atoms.text} />
src/view/com/composer/text-input/TextInput.tsx
+34 -19
View File
@@ -19,6 +19,7 @@ import PasteInput, {
PasteInputRef,
} from '@mattermost/react-native-paste-input'
import {isAndroid} from '#/platform/detection'
import {POST_IMG_MAX} from 'lib/constants'
import {usePalette} from 'lib/hooks/usePalette'
import {downloadAndResize} from 'lib/media/manip'
@@ -26,12 +27,13 @@ import {isUriImage} from 'lib/media/util'
import {cleanError} from 'lib/strings/errors'
import {getMentionAt, insertMentionAt} from 'lib/strings/mention-manip'
import {useTheme} from 'lib/ThemeContext'
import {isIOS} from 'platform/detection'
import {
LinkFacetMatch,
suggestLinkCardUri,
} from 'view/com/composer/text-input/text-input-util'
import {Text} from 'view/com/util/text/Text'
import {atoms as a, useAlf} from '#/alf'
import {normalizeTextStyles} from '#/components/Typography'
import {Autocomplete} from './mobile/Autocomplete'
export interface TextInputRef {
@@ -67,6 +69,7 @@ export const TextInput = forwardRef(function TextInputImpl(
}: TextInputProps,
ref,
) {
const {theme: t, fonts} = useAlf()
const pal = usePalette('default')
const textInput = useRef<PasteInputRef>(null)
const textInputSelection = useRef<Selection>({start: 0, end: 0})
@@ -180,6 +183,33 @@ export const TextInput = forwardRef(function TextInputImpl(
[onChangeText, richtext, setAutocompletePrefix],
)
const inputTextStyle = React.useMemo(() => {
const style = normalizeTextStyles(
[a.text_xl, a.leading_snug, t.atoms.text],
{
fontScale: fonts.scaleMultiplier,
fontFamily: fonts.family,
flags: {},
},
)
/*
* `PasteInput` appears to prefer no `lineHeight`
*/
style.lineHeight = undefined
/*
* Android impl of `PasteInput` doesn't support the array syntax for `fontVariant`
*/
if (isAndroid) {
// @ts-ignore
style.fontVariant = style.fontVariant
? style.fontVariant.join(' ')
: undefined
}
return style
}, [t, fonts])
const textDecorated = useMemo(() => {
let i = 0
@@ -187,15 +217,12 @@ export const TextInput = forwardRef(function TextInputImpl(
return (
<Text
key={i++}
style={[
segment.facet ? pal.link : pal.text,
styles.textInputFormatting,
]}>
style={[inputTextStyle, segment.facet ? pal.link : pal.text]}>
{segment.text}
</Text>
)
})
}, [richtext, pal.link, pal.text])
}, [richtext, pal.link, pal.text, inputTextStyle])
return (
<View style={styles.container}>
@@ -213,12 +240,7 @@ export const TextInput = forwardRef(function TextInputImpl(
multiline
scrollEnabled={false}
numberOfLines={4}
style={[
pal.text,
styles.textInput,
styles.textInputFormatting,
{textAlignVertical: 'top'},
]}
style={[inputTextStyle, styles.textInput, {textAlignVertical: 'top'}]}
{...props}>
{textDecorated}
</PasteInput>
@@ -242,11 +264,4 @@ const styles = StyleSheet.create({
marginLeft: 8,
alignSelf: 'flex-start',
},
textInputFormatting: {
fontSize: 18,
letterSpacing: 0.2,
fontWeight: '400',
// This is broken on ios right now, so don't set it there.
lineHeight: isIOS ? undefined : 23.4, // 1.3*16
},
})
src/view/com/composer/text-input/TextInput.web.tsx
+26 -4
View File
@@ -22,7 +22,9 @@ import {
LinkFacetMatch,
suggestLinkCardUri,
} from 'view/com/composer/text-input/text-input-util'
import {atoms as a, useAlf} from '#/alf'
import {Portal} from '#/components/Portal'
import {normalizeTextStyles} from '#/components/Typography'
import {Text} from '../../util/text/Text'
import {createSuggestion} from './web/Autocomplete'
import {Emoji} from './web/EmojiPicker.web'
@@ -58,6 +60,7 @@ export const TextInput = React.forwardRef(function TextInputImpl(
TextInputProps,
ref,
) {
const {theme: t, fonts} = useAlf()
const autocomplete = useActorAutocompleteFn()
const pal = usePalette('default')
const modeClass = useColorSchemeStyle('ProseMirror-light', 'ProseMirror-dark')
@@ -247,13 +250,32 @@ export const TextInput = React.forwardRef(function TextInputImpl(
},
}))
const inputStyle = React.useMemo(() => {
const style = normalizeTextStyles(
[a.text_lg, a.leading_snug, t.atoms.text],
{
fontScale: fonts.scaleMultiplier,
fontFamily: fonts.family,
flags: {},
},
)
/*
* TipTap component isn't a RN View and while it seems to convert
* `fontSize` to `px`, it doesn't convert `lineHeight`.
*
* `lineHeight` should always be defined here, this is defensive.
*/
style.lineHeight = style.lineHeight
? ((style.lineHeight + 'px') as unknown as number)
: undefined
return style
}, [t, fonts])
return (
<>
<View style={styles.container}>
<EditorContent
editor={editor}
style={{color: pal.text.color as string}}
/>
{/* @ts-ignore inputStyle is fine */}
<EditorContent editor={editor} style={inputStyle} />
</View>
{isDropping && (
src/view/com/modals/EditImage.tsx
+42 -64
View File
@@ -2,7 +2,6 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
import {Pressable, StyleSheet, View} from 'react-native'
import {useWindowDimensions} from 'react-native'
import {LinearGradient} from 'expo-linear-gradient'
import {MaterialIcons} from '@expo/vector-icons'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {Slider} from '@miblanchard/react-native-slider'
@@ -13,13 +12,24 @@ import {useModalControls} from '#/state/modals'
import {MAX_ALT_TEXT} from 'lib/constants'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons'
import {enforceLen} from 'lib/strings/helpers'
import {gradients, s} from 'lib/styles'
import {useTheme} from 'lib/ThemeContext'
import {getKeys} from 'lib/type-assertions'
import {GalleryModel} from 'state/models/media/gallery'
import {ImageModel} from 'state/models/media/image'
import {atoms as a} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {
AspectRatio11_Stroke2_Corner0_Rounded as A11,
AspectRatio34_Stroke2_Corner0_Rounded as A34,
AspectRatio43_Stroke2_Corner0_Rounded as A43,
} from '#/components/icons/AspectRatio'
import {CircleBanSign_Stroke2_Corner0_Rounded as Ban} from '#/components/icons/CircleBanSign'
import {
FlipHorizontal_Stroke2_Corner0_Rounded as FlipHorizontal,
FlipVertical_Stroke2_Corner0_Rounded as FlipVertical,
} from '#/components/icons/FlipImage'
import {Text} from '../util/text/Text'
import {TextInput} from './util'
@@ -27,18 +37,16 @@ export const snapPoints = ['80%']
const RATIOS = {
'4:3': {
Icon: RectWideIcon,
icon: A43,
},
'1:1': {
Icon: SquareIcon,
icon: A11,
},
'3:4': {
Icon: RectTallIcon,
icon: A34,
},
None: {
label: 'None',
Icon: MaterialIcons,
name: 'do-not-disturb-alt',
icon: Ban,
},
} as const
@@ -112,12 +120,12 @@ export const Component = observer(function EditImageImpl({
// },
// },
{
name: 'flip' as const,
icon: FlipHorizontal,
label: _(msg`Flip horizontal`),
onPress: onFlipHorizontal,
},
{
name: 'flip' as const,
icon: FlipVertical,
label: _(msg`Flip vertically`),
onPress: onFlipVertical,
},
@@ -165,17 +173,6 @@ export const Component = observer(function EditImageImpl({
onCloseModal()
}, [altText, image, position, scale, onCloseModal])
const getLabelIconSize = useCallback((as: AspectRatio) => {
switch (as) {
case 'None':
return 22
case '1:1':
return 32
default:
return 26
}
}, [])
if (image.cropped === undefined) {
return null
}
@@ -231,7 +228,7 @@ export const Component = observer(function EditImageImpl({
maximumValue={3}
/>
</View>
<View>
<View style={[a.gap_sm]}>
{!isMobile ? (
<Text type="sm-bold" style={pal.text}>
<Trans>Ratios</Trans>
@@ -239,31 +236,25 @@ export const Component = observer(function EditImageImpl({
) : null}
<View style={imgControlStyles}>
{getKeys(RATIOS).map(ratio => {
const {Icon, ...props} = RATIOS[ratio]
const labelIconSize = getLabelIconSize(ratio)
const {icon} = RATIOS[ratio]
const isSelected = aspectRatio === ratio
return (
<Pressable
<Button
key={ratio}
label={ratio}
size="large"
shape="square"
variant="outline"
color={isSelected ? 'primary' : 'secondary'}
onPress={() => {
onSetRatio(ratio)
}}
accessibilityLabel={ratio}
accessibilityHint="">
<Icon
size={labelIconSize}
style={[styles.imgControl, isSelected ? s.blue3 : pal.text]}
color={(isSelected ? s.blue3 : pal.text).color}
{...props}
/>
<Text
type={isSelected ? 'xs-bold' : 'xs-medium'}
style={[isSelected ? s.blue3 : pal.text, s.textCenter]}>
{ratio}
</Text>
</Pressable>
}}>
<View style={[a.align_center, a.gap_2xs]}>
<ButtonIcon icon={icon} />
<ButtonText style={[a.text_xs]}>{ratio}</ButtonText>
</View>
</Button>
)
})}
</View>
@@ -273,24 +264,17 @@ export const Component = observer(function EditImageImpl({
</Text>
) : null}
<View style={imgControlStyles}>
{adjustments.map(({label, name, onPress}) => (
<Pressable
{adjustments.map(({label, icon, onPress}) => (
<Button
key={label}
onPress={onPress}
accessibilityLabel={label}
accessibilityHint=""
style={styles.flipBtn}>
<MaterialIcons
name={name}
size={label?.startsWith('Flip') ? 22 : 24}
style={[
pal.text,
label === _(msg`Flip vertically`)
? styles.flipVertical
: undefined,
]}
/>
</Pressable>
label={label}
size="large"
shape="square"
variant="outline"
color="secondary"
onPress={onPress}>
<ButtonIcon icon={icon} />
</Button>
))}
</View>
</View>
@@ -362,12 +346,6 @@ const styles = StyleSheet.create({
paddingVertical: 8,
paddingHorizontal: 24,
},
imgControl: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: 40,
},
imgEditor: {
maxWidth: '100%',
},
src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export const ExternalLinkEmbed = ({
}
return (
<View style={[a.flex_col, a.rounded_sm]}>
<View style={[a.flex_col, a.w_full]}>
<LinkWrapper link={link} onOpen={onOpen} style={style}>
{imageUri && !embedPlayerParams ? (
<View>
web/index.html
-1
View File
@@ -252,7 +252,6 @@
/* ProseMirror */
.ProseMirror {
font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
min-height: 140px;
}
.ProseMirror-dark {