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

Add reply sorting in-thread (#7156)

Browse Source 
* Add button

* Extract component

* Make it work

* Extract and use RadioCircle

* Add tree/list setting

* Prefer local state

* Factor out threadViewPrefs

* Fix optimistic stuff

* Revert RadioButton changes

* Tweak radio styles, add Menu.LabelText

* Labels

* Margins

* Update copy

---------

Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
dan
2024-12-18 19:50:37 +00:00
committed by GitHub
parent 4097fe07c5
commit a7f763faf2
4 changed files with 281 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Menu/index.tsx
+49
View File
@@ -190,6 +190,55 @@ export function ItemIcon({icon: Comp}: ItemIconProps) {
)
}
export function ItemRadio({selected}: {selected: boolean}) {
const t = useTheme()
return (
<View
style={[
a.justify_center,
a.align_center,
a.rounded_full,
t.atoms.border_contrast_high,
{
borderWidth: 1,
height: 24,
width: 24,
},
]}>
{selected ? (
<View
style={[
a.absolute,
a.rounded_full,
{height: 16, width: 16},
selected
? {
backgroundColor: t.palette.primary_500,
}
: {},
]}
/>
) : null}
</View>
)
}
export function LabelText({children}: {children: React.ReactNode}) {
const t = useTheme()
return (
<Text
style={[
a.font_bold,
t.atoms.text_contrast_medium,
{
marginBottom: -8,
},
]}>
{children}
</Text>
)
}
export function Group({children, style}: GroupProps) {
const t = useTheme()
return (
src/components/Menu/index.web.tsx
+51
View File
@@ -304,6 +304,57 @@ export function ItemIcon({icon: Comp, position = 'left'}: ItemIconProps) {
)
}
export function ItemRadio({selected}: {selected: boolean}) {
const t = useTheme()
return (
<View
style={[
a.justify_center,
a.align_center,
a.rounded_full,
t.atoms.border_contrast_high,
{
borderWidth: 1,
height: 24,
width: 24,
},
]}>
{selected ? (
<View
style={[
a.absolute,
a.rounded_full,
{height: 16, width: 16},
selected
? {
backgroundColor: t.palette.primary_500,
}
: {},
]}
/>
) : null}
</View>
)
}
export function LabelText({children}: {children: React.ReactNode}) {
const t = useTheme()
return (
<Text
style={[
a.font_bold,
a.pt_lg,
a.pb_sm,
t.atoms.text_contrast_low,
{
paddingHorizontal: 10,
},
]}>
{children}
</Text>
)
}
export function Group({children}: GroupProps) {
return children
}