From fe92c63a6026f512d1c91fd88c8dd4e763c772a3 Mon Sep 17 00:00:00 2001 From: austinried <4966622+austinried@users.noreply.github.com> Date: Thu, 8 Jul 2021 17:56:05 +0900 Subject: [PATCH] refactored text styles, not enough shared --- app/components/AlbumArt.tsx | 4 +- app/components/Button.tsx | 44 +++--- app/components/ImageGradientScrollView.tsx | 29 ++-- app/components/NowPlayingBar.tsx | 6 +- app/components/PressableOpacity.tsx | 4 +- app/navigation/BottomTabBar.tsx | 76 +++++---- app/navigation/LibraryTopTabNavigator.tsx | 119 ++++++++------ app/screens/AlbumView.tsx | 172 ++++++++++----------- app/screens/ArtistView.tsx | 30 ++-- app/screens/LibraryAlbums.tsx | 63 +++++--- app/screens/LibraryArtists.tsx | 37 +++-- app/screens/NowPlayingLayout.tsx | 13 +- app/screens/Settings.tsx | 13 +- app/styles/dimensions.ts | 14 ++ app/styles/font.ts | 7 + app/styles/text.ts | 73 --------- 16 files changed, 358 insertions(+), 346 deletions(-) create mode 100644 app/styles/dimensions.ts create mode 100644 app/styles/font.ts delete mode 100644 app/styles/text.ts diff --git a/app/components/AlbumArt.tsx b/app/components/AlbumArt.tsx index 5f69bc0..dbabc66 100644 --- a/app/components/AlbumArt.tsx +++ b/app/components/AlbumArt.tsx @@ -9,8 +9,8 @@ import CoverArt from '@app/components/CoverArt' interface AlbumArtProps { id: string - height: number - width: number + height: string | number + width: string | number } const AlbumArt: React.FC = ({ id, height, width }) => { diff --git a/app/components/Button.tsx b/app/components/Button.tsx index 3ed135c..658c5e0 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -1,31 +1,33 @@ -import React, { useState } from 'react' -import { GestureResponderEvent, Pressable, Text } from 'react-native' import colors from '@app/styles/colors' -import text from '@app/styles/text' +import font from '@app/styles/font' +import React from 'react' +import { GestureResponderEvent, StyleSheet, Text } from 'react-native' +import PressableOpacity from './PressableOpacity' const Button: React.FC<{ title: string onPress: (event: GestureResponderEvent) => void }> = ({ title, onPress }) => { - const [opacity, setOpacity] = useState(1) - return ( - setOpacity(0.6)} - onPressOut={() => setOpacity(1)} - onLongPress={() => setOpacity(1)} - style={{ - backgroundColor: colors.accent, - paddingHorizontal: 24, - minHeight: 42, - justifyContent: 'center', - borderRadius: 1000, - opacity, - }}> - {title} - + + {title} + ) } -export default Button +const styles = StyleSheet.create({ + container: { + backgroundColor: colors.accent, + paddingHorizontal: 24, + minHeight: 42, + justifyContent: 'center', + borderRadius: 1000, + }, + text: { + fontSize: 15, + fontFamily: font.bold, + color: colors.text.primary, + }, +}) + +export default React.memo(Button) diff --git a/app/components/ImageGradientScrollView.tsx b/app/components/ImageGradientScrollView.tsx index 041720a..b7c7f64 100644 --- a/app/components/ImageGradientScrollView.tsx +++ b/app/components/ImageGradientScrollView.tsx @@ -1,27 +1,26 @@ -import React, { useState } from 'react' -import { LayoutRectangle, ScrollView, ScrollViewProps } from 'react-native' -import colors from '@app/styles/colors' import ImageGradientBackground from '@app/components/ImageGradientBackground' +import colors from '@app/styles/colors' +import dimensions from '@app/styles/dimensions' +import React from 'react' +import { ScrollView, ScrollViewProps, useWindowDimensions } from 'react-native' const ImageGradientScrollView: React.FC = props => { - const [layout, setLayout] = useState(undefined) + const layout = useWindowDimensions() - props.style = props.style || {} - if (typeof props.style === 'object' && props.style !== null) { - props.style = { - ...props.style, - backgroundColor: colors.gradient.low, - } - } + const minHeight = layout.height - (dimensions.top() + dimensions.bottom()) return ( { - setLayout(event.nativeEvent.layout) - }}> - + style={[ + props.style, + { + backgroundColor: colors.gradient.low, + }, + ]} + contentContainerStyle={[{ minHeight }, props.contentContainerStyle]}> + {props.children} ) diff --git a/app/components/NowPlayingBar.tsx b/app/components/NowPlayingBar.tsx index a3fa1ac..16a91c7 100644 --- a/app/components/NowPlayingBar.tsx +++ b/app/components/NowPlayingBar.tsx @@ -5,7 +5,7 @@ import { useAtomValue } from 'jotai/utils' import { currentTrackAtom, playerStateAtom, usePause, usePlay, useProgress } from '@app/state/trackplayer' import CoverArt from '@app/components/CoverArt' import colors from '@app/styles/colors' -import { Font } from '@app/styles/text' +import font from '@app/styles/font' import { State } from 'react-native-track-player' import PressableOpacity from '@app/components/PressableOpacity' import IconFA5 from 'react-native-vector-icons/FontAwesome5' @@ -110,12 +110,12 @@ const styles = StyleSheet.create({ marginLeft: 10, }, detailsTitle: { - fontFamily: Font.semiBold, + fontFamily: font.semiBold, fontSize: 13, color: colors.text.primary, }, detailsAlbum: { - fontFamily: Font.regular, + fontFamily: font.regular, fontSize: 13, color: colors.text.secondary, }, diff --git a/app/components/PressableOpacity.tsx b/app/components/PressableOpacity.tsx index 9a8b1ec..10e4d4e 100644 --- a/app/components/PressableOpacity.tsx +++ b/app/components/PressableOpacity.tsx @@ -3,6 +3,7 @@ import { LayoutRectangle, Pressable, PressableProps } from 'react-native' type PressableOpacityProps = PressableProps & { ripple?: boolean + rippleColor?: string } const PressableOpacity: React.FC = props => { @@ -20,8 +21,9 @@ const PressableOpacity: React.FC = props => { android_ripple={ props.ripple ? { - color: 'rgba(255,255,255,0.26)', + color: props.rippleColor || 'rgba(255,255,255,0.26)', radius: dimensions ? dimensions.width / 2 : undefined, + borderless: true, } : undefined } diff --git a/app/navigation/BottomTabBar.tsx b/app/navigation/BottomTabBar.tsx index 9e51565..9afc99b 100644 --- a/app/navigation/BottomTabBar.tsx +++ b/app/navigation/BottomTabBar.tsx @@ -1,12 +1,19 @@ -import React, { useState } from 'react' -import { Text, View, Pressable } from 'react-native' +import React from 'react' +import { Text, View, StyleSheet } from 'react-native' import { BottomTabBarProps } from '@react-navigation/bottom-tabs' -import textStyles from '@app/styles/text' import colors from '@app/styles/colors' import FastImage from 'react-native-fast-image' import NowPlayingBar from '@app/components/NowPlayingBar' +import PressableOpacity from '@app/components/PressableOpacity' +import font from '@app/styles/font' +import dimensions from '@app/styles/dimensions' -const icons: { [key: string]: any } = { +type TabButtonImage = { + regular: number + fill: number +} + +const icons: { [key: string]: TabButtonImage } = { home: { regular: require('@res/icons/home.png'), fill: require('@res/icons/home-fill.png'), @@ -30,11 +37,9 @@ const BottomTabButton: React.FC<{ label: string name: string isFocused: boolean - img: { regular: number; fill: number } + img: TabButtonImage navigation: any }> = ({ routeKey, label, name, isFocused, img, navigation }) => { - const [opacity, setOpacity] = useState(1) - const onPress = () => { const event = navigation.emit({ type: 'tabPress', @@ -48,47 +53,30 @@ const BottomTabButton: React.FC<{ } return ( - setOpacity(0.6)} - onPressOut={() => setOpacity(1)} - style={{ - alignItems: 'center', - flex: 1, - opacity, - }}> + // + {label} - + ) } +const MemoBottomTabButton = React.memo(BottomTabButton) const BottomTabBar: React.FC = ({ state, descriptors, navigation }) => { return ( - + {state.routes.map((route, index) => { const { options } = descriptors[route.key] as any const label = @@ -99,7 +87,7 @@ const BottomTabBar: React.FC = ({ state, descriptors, navigat : route.name return ( - = ({ state, descriptors, navigat ) } +const styles = StyleSheet.create({ + container: { + height: dimensions.tabBar, + backgroundColor: colors.gradient.high, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-around', + paddingHorizontal: 28, + }, + button: { + alignItems: 'center', + flex: 1, + height: '100%', + }, + image: { + height: 26, + width: 26, + }, + text: { + fontSize: 10, + fontFamily: font.regular, + }, +}) + export default BottomTabBar diff --git a/app/navigation/LibraryTopTabNavigator.tsx b/app/navigation/LibraryTopTabNavigator.tsx index 030f7cb..a36eb1f 100644 --- a/app/navigation/LibraryTopTabNavigator.tsx +++ b/app/navigation/LibraryTopTabNavigator.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { StatusBar, View } from 'react-native' +import { StatusBar, StyleSheet, View } from 'react-native' import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs' import AlbumsTab from '@app/screens/LibraryAlbums' import ArtistsTab from '@app/screens/LibraryArtists' @@ -7,36 +7,10 @@ import PlaylistsTab from '@app/screens/LibraryPlaylists' import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-native-screens/native-stack' import AlbumView from '@app/screens/AlbumView' import { RouteProp } from '@react-navigation/native' -import text from '@app/styles/text' +import font from '@app/styles/font' import colors from '@app/styles/colors' import ArtistView from '@app/screens/ArtistView' - -const Tab = createMaterialTopTabNavigator() - -const LibraryTopTabNavigator = () => ( - - - - - -) +import dimensions from '@app/styles/dimensions' type LibraryStackParamList = { LibraryTopTabs: undefined @@ -66,28 +40,73 @@ const ArtistScreen: React.FC = ({ route }) => ( ) -const Stack = createNativeStackNavigator() +const Tab = createMaterialTopTabNavigator() -const itemScreenOptions = { - title: '', - headerStyle: { - backgroundColor: colors.gradient.high, - }, - headerHideShadow: true, - headerTintColor: 'white', - headerTitleStyle: { - ...text.header, - } as any, -} - -const LibraryStackNavigator = () => ( - - - - - - - +const LibraryTopTabNavigator = () => ( + + + + + ) +const Stack = createNativeStackNavigator() + +const LibraryStackNavigator = () => { + const itemScreenOptions = { + title: '', + headerStyle: styles.stackheaderStyle, + headerHideShadow: true, + headerTintColor: 'white', + headerTitleStyle: styles.stackheaderTitleStyle, + } + + return ( + + + + + + + + ) +} + +const styles = StyleSheet.create({ + stackContainer: { + flex: 1, + }, + stackheaderStyle: { + backgroundColor: colors.gradient.high, + }, + stackheaderTitleStyle: { + fontSize: 18, + fontFamily: font.semiBold, + color: colors.text.primary, + }, + tabBar: { + height: dimensions.header, + marginTop: StatusBar.currentHeight, + backgroundColor: colors.gradient.high, + elevation: 0, + justifyContent: 'center', + }, + tablabelStyle: { + fontSize: 18, + fontFamily: font.semiBold, + color: colors.text.primary, + textTransform: null as any, + marginTop: 0, + marginHorizontal: 2, + }, + tabindicatorStyle: { + backgroundColor: colors.text.primary, + }, +}) + export default LibraryStackNavigator diff --git a/app/screens/AlbumView.tsx b/app/screens/AlbumView.tsx index cc32c29..9de4953 100644 --- a/app/screens/AlbumView.tsx +++ b/app/screens/AlbumView.tsx @@ -1,13 +1,13 @@ import { useNavigation } from '@react-navigation/native' import { useAtomValue } from 'jotai/utils' import React, { useEffect } from 'react' -import { ActivityIndicator, GestureResponderEvent, StyleSheet, Text, useWindowDimensions, View } from 'react-native' +import { ActivityIndicator, GestureResponderEvent, StyleSheet, Text, View } from 'react-native' import IconFA from 'react-native-vector-icons/FontAwesome' import IconMat from 'react-native-vector-icons/MaterialIcons' import { albumAtomFamily } from '@app/state/music' import { currentTrackAtom, useSetQueue } from '@app/state/trackplayer' import colors from '@app/styles/colors' -import text, { Font } from '@app/styles/text' +import font from '@app/styles/font' import AlbumArt from '@app/components/AlbumArt' import Button from '@app/components/Button' import GradientBackground from '@app/components/GradientBackground' @@ -46,7 +46,6 @@ const SongItem: React.FC<{ const songStyles = StyleSheet.create({ container: { marginTop: 20, - marginLeft: 10, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', @@ -54,14 +53,15 @@ const songStyles = StyleSheet.create({ text: { flex: 1, alignItems: 'flex-start', + width: 100, }, title: { fontSize: 16, - fontFamily: Font.semiBold, + fontFamily: font.semiBold, }, subtitle: { fontSize: 14, - fontFamily: Font.regular, + fontFamily: font.regular, color: colors.text.secondary, }, controls: { @@ -78,101 +78,59 @@ const AlbumDetails: React.FC<{ id: string }> = ({ id }) => { const album = useAtomValue(albumAtomFamily(id)) - const layout = useWindowDimensions() const setQueue = useSetQueue() - const coverSize = layout.width - layout.width / 2.5 - if (!album) { - return No Album + return <> } return ( - - - {album.name} - - - - {album.artist} - {album.year ? ` • ${album.year}` : ''} - - - -