Tune up custom feed uis on web

zio/stable
Paul Frazee 2023-05-25 20:19:49 -05:00
parent 216d301191
commit 651f3abc1f
3 changed files with 40 additions and 12 deletions

View File

@ -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',
},

View File

@ -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,

View File

@ -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={