forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Separate alt/crop, use new icon (#5321)
authored by
Eric Bailey
and committed by
GitHub
0315814e
fddb1255
+41
-15
+41
-15
src/view/com/util/images/AutoSizedImage.tsx
+41
-15
src/view/com/util/images/AutoSizedImage.tsx
···
10
10
import {isNative} from '#/platform/detection'
11
11
import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
12
12
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
13
-
import {Crop_Stroke2_Corner0_Rounded as Crop} from '#/components/icons/Crop'
13
+
import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/components/icons/ArrowsDiagonal'
14
14
import {Text} from '#/components/Typography'
15
15
16
16
export function useImageAspectRatio({
···
147
147
style={[
148
148
a.absolute,
149
149
a.flex_row,
150
-
a.align_center,
151
-
a.rounded_xs,
152
-
t.atoms.bg_contrast_25,
153
150
{
154
-
gap: 3,
155
-
padding: 3,
156
151
bottom: a.p_xs.padding,
157
152
right: a.p_xs.padding,
158
-
opacity: 0.8,
153
+
gap: 3,
159
154
},
160
155
largeAlt && [
161
156
{
162
157
gap: 4,
163
-
padding: 5,
164
158
},
165
159
],
166
160
]}>
167
161
{isCropped && (
168
-
<Crop
169
-
fill={t.atoms.text_contrast_high.color}
170
-
width={largeAlt ? 18 : 12}
171
-
/>
162
+
<View
163
+
style={[
164
+
a.rounded_xs,
165
+
t.atoms.bg_contrast_25,
166
+
{
167
+
padding: 3,
168
+
opacity: 0.8,
169
+
},
170
+
largeAlt && [
171
+
{
172
+
padding: 5,
173
+
},
174
+
],
175
+
]}>
176
+
<Fullscreen
177
+
fill={t.atoms.text_contrast_high.color}
178
+
width={largeAlt ? 18 : 12}
179
+
/>
180
+
</View>
172
181
)}
173
182
{hasAlt && (
174
-
<Text style={[a.font_heavy, largeAlt ? a.text_xs : {fontSize: 8}]}>
175
-
ALT
176
-
</Text>
183
+
<View
184
+
style={[
185
+
a.justify_center,
186
+
a.rounded_xs,
187
+
t.atoms.bg_contrast_25,
188
+
{
189
+
padding: 3,
190
+
opacity: 0.8,
191
+
},
192
+
largeAlt && [
193
+
{
194
+
padding: 5,
195
+
},
196
+
],
197
+
]}>
198
+
<Text
199
+
style={[a.font_heavy, largeAlt ? a.text_xs : {fontSize: 8}]}>
200
+
ALT
201
+
</Text>
202
+
</View>
177
203
)}
178
204
</View>
179
205
) : null}