Tune up custom feed uis on web
parent
216d301191
commit
651f3abc1f
|
@ -92,7 +92,7 @@ export function TabBar({
|
|||
hoverStyle={pal.viewLight}
|
||||
onPress={() => onPressItem(i)}>
|
||||
<Text
|
||||
type="lg-bold"
|
||||
type={isDesktopWeb ? 'xl-bold' : 'lg-bold'}
|
||||
testID={testID ? `${testID}-${item}` : undefined}
|
||||
style={selected ? pal.text : pal.textLight}>
|
||||
{item}
|
||||
|
@ -112,7 +112,7 @@ const styles = isDesktopWeb
|
|||
width: 598,
|
||||
},
|
||||
contentContainer: {
|
||||
columnGap: 14,
|
||||
columnGap: 8,
|
||||
marginLeft: 14,
|
||||
paddingRight: 14,
|
||||
backgroundColor: 'transparent',
|
||||
|
@ -120,6 +120,7 @@ const styles = isDesktopWeb
|
|||
item: {
|
||||
paddingTop: 14,
|
||||
paddingBottom: 12,
|
||||
paddingHorizontal: 10,
|
||||
borderBottomWidth: 3,
|
||||
borderBottomColor: 'transparent',
|
||||
},
|
||||
|
|
|
@ -22,6 +22,8 @@ import {s} from 'lib/styles'
|
|||
import {useAnalytics} from 'lib/analytics'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useTheme} from 'lib/ThemeContext'
|
||||
import {isDesktopWeb} from 'platform/detection'
|
||||
import {CogIcon} from 'lib/icons'
|
||||
|
||||
export const MultiFeed = observer(function Feed({
|
||||
multifeed,
|
||||
|
@ -81,6 +83,18 @@ export const MultiFeed = observer(function Feed({
|
|||
const renderItem = React.useCallback(
|
||||
({item}: {item: MultiFeedItem}) => {
|
||||
if (item.type === 'header') {
|
||||
if (isDesktopWeb) {
|
||||
return (
|
||||
<View style={[pal.view, pal.border, styles.headerDesktop]}>
|
||||
<Text type="2xl-bold" style={pal.text}>
|
||||
My Feeds
|
||||
</Text>
|
||||
<Link href="/settings/saved-feeds">
|
||||
<CogIcon strokeWidth={1.5} style={pal.icon} size={28} />
|
||||
</Link>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
return <View style={[styles.header, pal.border]} />
|
||||
} else if (item.type === 'feed-header') {
|
||||
return (
|
||||
|
@ -167,7 +181,11 @@ export const MultiFeed = observer(function Feed({
|
|||
/>
|
||||
}
|
||||
contentContainerStyle={s.contentContainer}
|
||||
style={[{paddingTop: headerOffset}, pal.viewLight, styles.container]}
|
||||
style={[
|
||||
{paddingTop: headerOffset},
|
||||
isDesktopWeb ? pal.view : pal.viewLight,
|
||||
styles.container,
|
||||
]}
|
||||
onScroll={onScroll}
|
||||
scrollEventThrottle={scrollEventThrottle}
|
||||
indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
|
||||
|
@ -192,6 +210,15 @@ const styles = StyleSheet.create({
|
|||
borderTopWidth: 1,
|
||||
marginBottom: 4,
|
||||
},
|
||||
headerDesktop: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
borderBottomWidth: 1,
|
||||
marginBottom: 4,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
feedHeader: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
|
|
|
@ -197,15 +197,6 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
|
|||
}
|
||||
label="Search"
|
||||
/>
|
||||
<NavItem
|
||||
href="/notifications"
|
||||
count={store.me.notifications.unreadCountLabel}
|
||||
icon={<BellIcon strokeWidth={2} size={24} style={pal.text} />}
|
||||
iconFilled={
|
||||
<BellIconSolid strokeWidth={1.5} size={24} style={pal.text} />
|
||||
}
|
||||
label="Notifications"
|
||||
/>
|
||||
<NavItem
|
||||
href="/feeds"
|
||||
icon={
|
||||
|
@ -224,6 +215,15 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
|
|||
}
|
||||
label="My Feeds"
|
||||
/>
|
||||
<NavItem
|
||||
href="/notifications"
|
||||
count={store.me.notifications.unreadCountLabel}
|
||||
icon={<BellIcon strokeWidth={2} size={24} style={pal.text} />}
|
||||
iconFilled={
|
||||
<BellIconSolid strokeWidth={1.5} size={24} style={pal.text} />
|
||||
}
|
||||
label="Notifications"
|
||||
/>
|
||||
<NavItem
|
||||
href="/moderation"
|
||||
icon={
|
||||
|
|
Loading…
Reference in New Issue