Tweak radio styles, add Menu.LabelText

bluesky-social · Dec 18, 2024 · 8c273ab · 8c273ab
1 parent 66e4760
commit 8c273ab
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 9 deletions.
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
@@ -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: -10,
+        },
+      ]}>
+      {children}
+    </Text>
+  )
+}
+
 export function Group({children, style}: GroupProps) {
   const t = useTheme()
   return (

diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx
@@ -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
 }

diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx
@@ -42,7 +42,6 @@ import {Header} from '#/components/Layout'
 import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 import * as Menu from '#/components/Menu'
 import {Text} from '#/components/Typography'
-import {RadioCircle} from '../util/forms/RadioButton'
 import {PostThreadComposePrompt} from './PostThreadComposePrompt'
 import {PostThreadItem} from './PostThreadItem'
 import {PostThreadLoadMore} from './PostThreadLoadMore'
@@ -490,7 +489,7 @@ export function PostThread({uri}: {uri: string | undefined}) {
 
   return (
     <>
-      <Header.Outer sticky={true} headerRef={headerRef}>
+      <Header.Outer headerRef={headerRef}>
         <Header.BackButton />
         <Header.Content>
           <Header.TitleText>
@@ -572,6 +571,9 @@ let ThreadMenu = ({}: {}): React.ReactNode => {
         )}
       </Menu.Trigger>
       <Menu.Outer>
+        <Menu.LabelText>
+          <Trans>Thread display</Trans>
+        </Menu.LabelText>
         <Menu.Group>
           <Menu.Item
             label={_(msg`Show replies as a list`)}
@@ -583,7 +585,7 @@ let ThreadMenu = ({}: {}): React.ReactNode => {
             <Menu.ItemText>
               <Trans>Show replies as a list</Trans>
             </Menu.ItemText>
-            <RadioCircle isSelected={!treeViewEnabled} />
+            <Menu.ItemRadio selected={!treeViewEnabled} />
           </Menu.Item>
           <Menu.Item
             label={_(msg`Show replies as a tree`)}
@@ -595,10 +597,13 @@ let ThreadMenu = ({}: {}): React.ReactNode => {
             <Menu.ItemText>
               <Trans>Show replies as a tree</Trans>
             </Menu.ItemText>
-            <RadioCircle isSelected={treeViewEnabled} />
+            <Menu.ItemRadio selected={treeViewEnabled} />
           </Menu.Item>
         </Menu.Group>
         <Menu.Divider />
+        <Menu.LabelText>
+          <Trans>Reply sorting</Trans>
+        </Menu.LabelText>
         <Menu.Group>
           <Menu.Item
             label={_(msg`Hot replies first`)}
@@ -608,7 +613,7 @@ let ThreadMenu = ({}: {}): React.ReactNode => {
             <Menu.ItemText>
               <Trans>Hot replies first</Trans>
             </Menu.ItemText>
-            <RadioCircle isSelected={sortReplies === 'hotness'} />
+            <Menu.ItemRadio selected={sortReplies === 'hotness'} />
           </Menu.Item>
           <Menu.Item
             label={_(msg`Oldest replies first`)}
@@ -618,7 +623,7 @@ let ThreadMenu = ({}: {}): React.ReactNode => {
             <Menu.ItemText>
               <Trans>Oldest replies first</Trans>
             </Menu.ItemText>
-            <RadioCircle isSelected={sortReplies === 'oldest'} />
+            <Menu.ItemRadio selected={sortReplies === 'oldest'} />
           </Menu.Item>
           <Menu.Item
             label={_(msg`Newest replies first`)}
@@ -628,7 +633,7 @@ let ThreadMenu = ({}: {}): React.ReactNode => {
             <Menu.ItemText>
               <Trans>Newest replies first</Trans>
             </Menu.ItemText>
-            <RadioCircle isSelected={sortReplies === 'newest'} />
+            <Menu.ItemRadio selected={sortReplies === 'newest'} />
           </Menu.Item>
           <Menu.Item
             label={_(msg`Most-liked replies first`)}
@@ -638,7 +643,7 @@ let ThreadMenu = ({}: {}): React.ReactNode => {
             <Menu.ItemText>
               <Trans>Most-liked replies first</Trans>
             </Menu.ItemText>
-            <RadioCircle isSelected={sortReplies === 'most-likes'} />
+            <Menu.ItemRadio selected={sortReplies === 'most-likes'} />
           </Menu.Item>
           <Menu.Item
             label={_(msg`Random (aka "Poster's Roulette")`)}
@@ -648,7 +653,7 @@ let ThreadMenu = ({}: {}): React.ReactNode => {
             <Menu.ItemText>
               <Trans>Random (aka "Poster's Roulette")</Trans>
             </Menu.ItemText>
-            <RadioCircle isSelected={sortReplies === 'random'} />
+            <Menu.ItemRadio selected={sortReplies === 'random'} />
           </Menu.Item>
         </Menu.Group>
       </Menu.Outer>