zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Separate alt/crop, use new icon (#5321)

zio/dev^2
Eric Bailey 2024-09-13 08:56:54 -05:00 committed by GitHub
parent fddb1255ec
commit 0315814edd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 41 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/view/com/util/images/AutoSizedImage.tsx
View File

@ -10,7 +10,7 @@ import {Dimensions} from '#/lib/media/types'
import {isNative} from '#/platform/detection'
import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {Crop_Stroke2_Corner0_Rounded as Crop} from '#/components/icons/Crop'
import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/components/icons/ArrowsDiagonal'
import {Text} from '#/components/Typography'
export function useImageAspectRatio({
@ -147,33 +147,59 @@ export function AutoSizedImage({
style={[
a.absolute,
a.flex_row,
a.align_center,
a.rounded_xs,
t.atoms.bg_contrast_25,
{
gap: 3,
padding: 3,
bottom: a.p_xs.padding,
right: a.p_xs.padding,
opacity: 0.8,
gap: 3,
},
largeAlt && [
{
gap: 4,
padding: 5,
},
],
]}>
{isCropped && (
<Crop
fill={t.atoms.text_contrast_high.color}
width={largeAlt ? 18 : 12}
/>
<View
style={[
a.rounded_xs,
t.atoms.bg_contrast_25,
{
padding: 3,
opacity: 0.8,
},
largeAlt && [
{
padding: 5,
},
],
]}>
<Fullscreen
fill={t.atoms.text_contrast_high.color}
width={largeAlt ? 18 : 12}
/>
</View>
)}
{hasAlt && (
<Text style={[a.font_heavy, largeAlt ? a.text_xs : {fontSize: 8}]}>
ALT
</Text>
<View
style={[
a.justify_center,
a.rounded_xs,
t.atoms.bg_contrast_25,
{
padding: 3,
opacity: 0.8,
},
largeAlt && [
{
padding: 5,
},
],
]}>
<Text
style={[a.font_heavy, largeAlt ? a.text_xs : {fontSize: 8}]}>
ALT
</Text>
</View>
)}
</View>
) : null}