zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Show bold icons in footer based on state

zio/stable
Paul Frazee 2022-11-16 18:04:21 -06:00
parent 361789975f
commit 362478f793
3 changed files with 136 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/view/index.ts
View File

@ -20,7 +20,8 @@ import {faBookmark as farBookmark} from '@fortawesome/free-regular-svg-icons/faB
import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck'
import {faCircleCheck} from '@fortawesome/free-regular-svg-icons/faCircleCheck'
import {faCircleUser} from '@fortawesome/free-regular-svg-icons/faCircleUser'
import {faClone} from '@fortawesome/free-regular-svg-icons/faClone'
import {faClone} from '@fortawesome/free-solid-svg-icons/faClone'
import {faClone as farClone} from '@fortawesome/free-regular-svg-icons/faClone'
import {faComment} from '@fortawesome/free-regular-svg-icons/faComment'
import {faCompass} from '@fortawesome/free-regular-svg-icons/faCompass'
import {faEllipsis} from '@fortawesome/free-solid-svg-icons/faEllipsis'
@ -78,6 +79,7 @@ export function setup() {
faCircleCheck,
faCircleUser,
faClone,
farClone,
faComment,
faCompass,
faEllipsis,

89
src/view/lib/icons.tsx
View File

@ -2,7 +2,13 @@ import React from 'react'
import {StyleProp, ViewStyle} from 'react-native'
import Svg, {Path} from 'react-native-svg'
export function GridIcon({style}: {style?: StyleProp<ViewStyle>}) {
export function GridIcon({
style,
solid,
}: {
style?: StyleProp<ViewStyle>
solid?: boolean
}) {
const DIM = 4
const ARC = 2
return (
@ -11,25 +17,32 @@ export function GridIcon({style}: {style?: StyleProp<ViewStyle>}) {
d={`M4,1 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
strokeWidth={2}
stroke="#000"
fill={solid ? '#000' : undefined}
/>
<Path
d={`M16,1 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
strokeWidth={2}
stroke="#000"
fill={solid ? '#000' : undefined}
/>
<Path
d={`M4,13 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
strokeWidth={2}
stroke="#000"
fill={solid ? '#000' : undefined}
/>
<Path
d={`M16,13 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
strokeWidth={2}
stroke="#000"
fill={solid ? '#000' : undefined}
/>
</Svg>
)
}
export function GridIconSolid({style}: {style?: StyleProp<ViewStyle>}) {
return <GridIcon style={style} solid />
}
export function HomeIcon({
style,
@ -53,6 +66,29 @@ export function HomeIcon({
)
}
export function HomeIconSolid({
style,
size,
}: {
style?: StyleProp<ViewStyle>
size?: string | number
}) {
return (
<Svg
viewBox="0 0 48 48"
width={size || 24}
height={size || 24}
stroke="currentColor"
style={style}>
<Path
strokeWidth={2}
fill="currentColor"
d="M 23.951 2 C 23.631 2.011 23.323 2.124 23.072 2.322 L 8.859 13.52 C 7.055 14.941 6 17.114 6 19.41 L 6 38.5 C 6 39.864 7.136 41 8.5 41 L 18.5 41 C 19.864 41 21 39.864 21 38.5 L 21 28.5 C 21 28.205 21.205 28 21.5 28 L 26.5 28 C 26.795 28 27 28.205 27 28.5 L 27 38.5 C 27 39.864 28.136 41 29.5 41 L 39.5 41 C 40.864 41 42 39.864 42 38.5 L 42 19.41 C 42 17.114 40.945 14.941 39.141 13.52 L 24.928 2.322 C 24.65 2.103 24.304 1.989 23.951 2 Z"
/>
</Svg>
)
}
// Copyright (c) 2020 Refactoring UI Inc.
// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
export function MangifyingGlassIcon({
@ -80,6 +116,33 @@ export function MangifyingGlassIcon({
)
}
// Copyright (c) 2020 Refactoring UI Inc.
// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
export function MangifyingGlassIconSolid({
style,
size,
}: {
style?: StyleProp<ViewStyle>
size?: string | number
}) {
return (
<Svg
fill="none"
viewBox="0 0 24 24"
strokeWidth={3}
stroke="currentColor"
width={size || 24}
height={size || 24}
style={style}>
<Path
strokeLinecap="round"
strokeLinejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
/>
</Svg>
)
}
// https://github.com/Remix-Design/RemixIcon/blob/master/License
export function BellIcon({
style,
@ -104,6 +167,30 @@ export function BellIcon({
)
}
// https://github.com/Remix-Design/RemixIcon/blob/master/License
export function BellIconSolid({
style,
size,
}: {
style?: StyleProp<ViewStyle>
size?: string | number
}) {
return (
<Svg
fill="none"
viewBox="0 0 24 24"
width={size || 24}
height={size || 24}
style={style}>
<Path fill="none" d="M0 0h24v24H0z" />
<Path
fill="currentColor"
d="M 20 17 L 22 17 L 22 19 L 2 19 L 2 17 L 4 17 L 4 10 C 4 3.842 10.667 -0.007 16 3.072 C 18.475 4.501 20 7.142 20 10 L 20 17 Z M 9 21 L 15 21 L 15 23 L 9 23 L 9 21 Z"
/>
</Svg>
)
}
// Copyright (c) 2020 Refactoring UI Inc.
// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
export function UserGroupIcon({

52
src/view/shell/mobile/index.tsx
View File

@ -35,9 +35,13 @@ import {Composer} from './Composer'
import {s, colors} from '../../lib/styles'
import {
GridIcon,
GridIconSolid,
HomeIcon,
HomeIconSolid,
MangifyingGlassIcon,
MangifyingGlassIconSolid,
BellIcon,
BellIconSolid,
} from '../../lib/icons'
const SWIPE_GESTURE_DIST_TRIGGER = 0.4
@ -50,7 +54,16 @@ const Btn = ({
onPress,
onLongPress,
}: {
icon: IconProp | 'menu' | 'house' | 'bell' | 'search'
icon:
| IconProp
| 'menu'
| 'menu-solid'
| 'home'
| 'home-solid'
| 'bell'
| 'bell-solid'
| 'search'
| 'search-solid'
inactive?: boolean
notificationCount?: number
onPress?: (event: GestureResponderEvent) => void
@ -61,17 +74,30 @@ const Btn = ({
let IconEl
if (icon === 'menu') {
IconEl = GridIcon
} else if (icon === 'house') {
} else if (icon === 'menu-solid') {
IconEl = GridIconSolid
} else if (icon === 'home') {
IconEl = HomeIcon
size = 24
} else if (icon === 'home-solid') {
IconEl = HomeIconSolid
size = 24
} else if (icon === 'search') {
IconEl = MangifyingGlassIcon
size = 24
addedStyles = {position: 'relative', top: -1} as ViewStyle
} else if (icon === 'search-solid') {
IconEl = MangifyingGlassIconSolid
size = 24
addedStyles = {position: 'relative', top: -1} as ViewStyle
} else if (icon === 'bell') {
IconEl = BellIcon
size = 24
addedStyles = {position: 'relative', top: -1} as ViewStyle
} else if (icon === 'bell-solid') {
IconEl = BellIconSolid
size = 24
addedStyles = {position: 'relative', top: -1} as ViewStyle
} else {
IconEl = FontAwesomeIcon
}
@ -207,6 +233,9 @@ export const MobileShell: React.FC = observer(() => {
)
}
const isAtHome = store.nav.tab.current.url === '/'
const isAtSearch = store.nav.tab.current.url === '/search'
const isAtNotifications = store.nav.tab.current.url === '/notifications'
return (
<View style={styles.outerContainer}>
<SafeAreaView style={styles.innerContainer}>
@ -251,15 +280,24 @@ export const MobileShell: React.FC = observer(() => {
onClose={() => toggleTabsMenu(false)}
/>
<SafeAreaView style={styles.bottomBar}>
<Btn icon="house" onPress={onPressHome} />
<Btn icon="search" onPress={onPressSearch} />
<Btn icon="menu" onPress={onPressMenu} />
<Btn icon={isAtHome ? 'home-solid' : 'home'} onPress={onPressHome} />
<Btn
icon="bell"
icon={isAtSearch ? 'search-solid' : 'search'}
onPress={onPressSearch}
/>
<Btn
icon={isMainMenuActive ? 'menu-solid' : 'menu'}
onPress={onPressMenu}
/>
<Btn
icon={isAtNotifications ? 'bell-solid' : 'bell'}
onPress={onPressNotifications}
notificationCount={store.me.notificationCount}
/>
<Btn icon={['far', 'clone']} onPress={onPressTabs} />
<Btn
icon={isTabsSelectorActive ? 'clone' : ['far', 'clone']}
onPress={onPressTabs}
/>
</SafeAreaView>
<MainMenu
active={isMainMenuActive}