karaolidis/terminally-online
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor styles

Browse Source 
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
This commit is contained in:
Nick Karaolidis
2023-07-26 10:14:01 +03:00
parent caa98736e9
commit abe1c0847d
22 changed files with 261 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/screens/addMeme.tsx → src/screens/editors/addMeme.tsx
View File

@@ -1,7 +1,7 @@
import React, { useCallback, useRef, useState } from 'react';
import { Appbar, Button, useTheme } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';
import { ScrollView, StyleSheet, View } from 'react-native';
import { ScrollView, View } from 'react-native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { useRealm } from '@realm/react';
import { BSON } from 'realm';
@@ -13,23 +13,16 @@ import {
DocumentPickerResponse,
pickSingle,
} from 'react-native-document-picker';
import styles from '../styles';
import { ROUTE, RootStackParamList } from '../types';
import { Meme, Tag } from '../database';
import { RootState } from '../state';
import { allowedMimeTypes, getMemeType, validateMemeTitle } from '../utilities';
import { MemeEditor } from '../components';
const addMemeStyles = StyleSheet.create({
saveAndAddButton: {
flex: 1,
marginRight: 5,
},
saveButton: {
flex: 1,
marginLeft: 5,
},
});
import { ROUTE, RootStackParamList } from '../../types';
import { Meme, Tag } from '../../database';
import { RootState } from '../../state';
import {
allowedMimeTypes,
getMemeType,
validateMemeTitle,
} from '../../utilities';
import { MemeEditor } from '../../components';
import editorStyles from './editorStyles';
const AddMeme = ({
route,
@@ -104,15 +97,13 @@ const AddMeme = ({
</Appbar.Header>
<ScrollView
contentContainerStyle={[
editorStyles.scrollView,
orientation === 'portrait'
? styles.paddingVertical
: styles.smallPaddingVertical,
styles.paddingHorizontal,
styles.flexGrow,
styles.flexColumnSpaceBetween,
? editorStyles.scrollViewPortrait
: editorStyles.scrollViewLandscape,
{ backgroundColor: colors.background },
]}>
<View style={[styles.flex, styles.justifyStart]}>
<View style={editorStyles.editorView}>
<MemeEditor
memeUri={memeUri}
memeTitle={memeTitle}
@@ -121,7 +112,7 @@ const AddMeme = ({
setMemeTags={setMemeTags}
/>
</View>
<View style={[styles.flexRow, styles.fullWidth]}>
<View style={editorStyles.saveButtonView}>
<Button
mode="contained-tonal"
icon="plus"
@@ -139,7 +130,7 @@ const AddMeme = ({
}}
disabled={!memeTitle.valid || isSaving || isSavingAndAddingAnother}
loading={isSavingAndAddingAnother}
style={addMemeStyles.saveAndAddButton}>
style={editorStyles.saveAndAddButton}>
Save & Add
</Button>
<Button
@@ -153,7 +144,7 @@ const AddMeme = ({
}}
disabled={!memeTitle.valid || isSaving || isSavingAndAddingAnother}
loading={isSaving}
style={addMemeStyles.saveButton}>
style={editorStyles.saveButton}>
Save
</Button>
</View>

37
src/screens/addTag.tsx → src/screens/editors/addTag.tsx
View File

@@ -1,28 +1,17 @@
import React, { useCallback, useState } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { ScrollView, View } from 'react-native';
import { Appbar, Button, useTheme } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';
import { useRealm } from '@realm/react';
import { useDeviceOrientation } from '@react-native-community/hooks';
import styles from '../styles';
import {
generateRandomColor,
validateColor,
validateTagName,
} from '../utilities';
import { Tag } from '../database';
import { TagEditor } from '../components';
const addTagStyles = StyleSheet.create({
saveAndAddButton: {
flex: 1,
marginRight: 5,
},
saveButton: {
flex: 1,
marginLeft: 5,
},
});
} from '../../utilities';
import { Tag } from '../../database';
import { TagEditor } from '../../components';
import editorStyles from './editorStyles';
const AddTag = () => {
const { goBack } = useNavigation();
@@ -57,15 +46,13 @@ const AddTag = () => {
</Appbar.Header>
<ScrollView
contentContainerStyle={[
editorStyles.scrollView,
orientation === 'portrait'
? styles.paddingVertical
: styles.smallPaddingVertical,
styles.paddingHorizontal,
styles.flexGrow,
styles.flexColumnSpaceBetween,
? editorStyles.scrollViewPortrait
: editorStyles.scrollViewLandscape,
{ backgroundColor: colors.background },
]}>
<View style={[styles.flex, styles.justifyStart]}>
<View style={editorStyles.editorView}>
<TagEditor
tagName={tagName}
setTagName={setTagName}
@@ -73,7 +60,7 @@ const AddTag = () => {
setTagColor={setTagColor}
/>
</View>
<View style={[styles.flexRow, styles.fullWidth]}>
<View style={editorStyles.saveButtonView}>
<Button
mode="contained-tonal"
icon="plus"
@@ -86,7 +73,7 @@ const AddTag = () => {
}}
disabled={!tagName.valid || isSavingAndAddingAnother}
loading={isSavingAndAddingAnother}
style={addTagStyles.saveAndAddButton}>
style={editorStyles.saveAndAddButton}>
Save & Add
</Button>
<Button
@@ -97,7 +84,7 @@ const AddTag = () => {
goBack();
}}
disabled={!tagName.valid || isSavingAndAddingAnother}
style={addTagStyles.saveButton}>
style={editorStyles.saveButton}>
Save
</Button>
</View>

22
src/screens/editMeme.tsx → src/screens/editors/editMeme.tsx
View File

@@ -6,11 +6,11 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { useObject, useRealm } from '@realm/react';
import { useDeviceOrientation } from '@react-native-community/hooks';
import { BSON } from 'realm';
import styles from '../styles';
import { RootStackParamList, ROUTE } from '../types';
import { Tag, Meme } from '../database';
import { deleteMeme, favoriteMeme, validateMemeTitle } from '../utilities';
import { MemeEditor } from '../components';
import { RootStackParamList, ROUTE } from '../../types';
import { Tag, Meme } from '../../database';
import { deleteMeme, favoriteMeme, validateMemeTitle } from '../../utilities';
import { MemeEditor } from '../../components';
import editorStyles from './editorStyles';
const EditMeme = ({
route,
@@ -80,15 +80,13 @@ const EditMeme = ({
</Appbar.Header>
<ScrollView
contentContainerStyle={[
editorStyles.scrollView,
orientation === 'portrait'
? styles.paddingVertical
: styles.smallPaddingVertical,
styles.paddingHorizontal,
styles.flexGrow,
styles.flexColumnSpaceBetween,
? editorStyles.scrollViewPortrait
: editorStyles.scrollViewLandscape,
{ backgroundColor: colors.background },
]}>
<View style={[styles.flex, styles.justifyStart]}>
<View style={editorStyles.editorView}>
<MemeEditor
memeUri={meme.uri}
memeTitle={memeTitle}
@@ -97,7 +95,7 @@ const EditMeme = ({
setMemeTags={setMemeTags}
/>
</View>
<View style={[styles.flex, styles.justifyEnd]}>
<View style={editorStyles.saveButtonView}>
<Button
mode="contained"
icon="floppy"

22
src/screens/editTag.tsx → src/screens/editors/editTag.tsx
View File

@@ -6,11 +6,11 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { BSON } from 'realm';
import { useObject, useRealm } from '@realm/react';
import { useDeviceOrientation } from '@react-native-community/hooks';
import { TagEditor } from '../components';
import styles from '../styles';
import { ROUTE, RootStackParamList } from '../types';
import { Tag } from '../database';
import { deleteTag, validateColor, validateTagName } from '../utilities';
import { TagEditor } from '../../components';
import { ROUTE, RootStackParamList } from '../../types';
import { Tag } from '../../database';
import { deleteTag, validateColor, validateTagName } from '../../utilities';
import editorStyles from './editorStyles';
const EditTag = ({
route,
@@ -52,16 +52,14 @@ const EditTag = ({
</Appbar.Header>
<ScrollView
contentContainerStyle={[
editorStyles.scrollView,
orientation === 'portrait'
? styles.paddingVertical
: styles.smallPaddingVertical,
styles.paddingHorizontal,
styles.flexGrow,
styles.flexColumnSpaceBetween,
? editorStyles.scrollViewPortrait
: editorStyles.scrollViewLandscape,
{ backgroundColor: colors.background },
]}
nestedScrollEnabled>
<View style={[styles.flex, styles.justifyStart]}>
<View style={editorStyles.editorView}>
<TagEditor
tagName={tagName}
setTagName={setTagName}
@@ -69,7 +67,7 @@ const EditTag = ({
setTagColor={setTagColor}
/>
</View>
<View style={[styles.flex, styles.justifyEnd]}>
<View style={editorStyles.saveButtonView}>
<Button
mode="contained"
icon="floppy"

34
src/screens/editors/editorStyles.ts Normal file
View File

@@ -0,0 +1,34 @@
import { StyleSheet } from 'react-native';
const editorStyles = StyleSheet.create({
scrollView: {
flexGrow: 1,
flexDirection: 'column',
justifyContent: 'space-between',
paddingHorizontal: '4%',
},
scrollViewPortrait: {
paddingVertical: '4%',
},
scrollViewLandscape: {
paddingVertical: '2%',
},
editorView: {
flex: 1,
justifyContent: 'flex-start',
},
saveButtonView: {
flexDirection: 'row',
width: '100%',
},
saveAndAddButton: {
flex: 1,
marginRight: 5,
},
saveButton: {
flex: 1,
marginLeft: 5,
},
});
export default editorStyles;

8
src/screens/index.ts
View File

@@ -1,7 +1,7 @@
export { default as AddMeme } from './addMeme';
export { default as AddTag } from './addTag';
export { default as EditMeme } from './editMeme';
export { default as EditTag } from './editTag';
export { default as AddMeme } from './editors/addMeme';
export { default as AddTag } from './editors/addTag';
export { default as EditMeme } from './editors/editMeme';
export { default as EditTag } from './editors/editTag';
export { default as Memes } from './memes';
export { default as MemeView } from './memeView';
export { default as Settings } from './settings';

5
src/screens/memeView.tsx
View File

@@ -17,7 +17,6 @@ import {
shareMeme,
} from '../utilities';
import { NavigationProp, useNavigation } from '@react-navigation/native';
import styles from '../styles';
const memeViewStyles = StyleSheet.create({
// eslint-disable-next-line react-native/no-color-literals
@@ -36,6 +35,8 @@ const memeViewStyles = StyleSheet.create({
left: 0,
right: 0,
backgroundColor: 'transparent',
flexDirection: 'row',
justifyContent: 'space-evenly',
},
snackbar: {
marginBottom: 64,
@@ -88,7 +89,7 @@ const MemeView = ({
showsHorizontalScrollIndicator={false}
renderItem={({ item: meme }) => <MemeViewItem meme={meme} />}
/>
<Appbar style={[styles.flexRowSpaceEvenly, memeViewStyles.footer]}>
<Appbar style={memeViewStyles.footer}>
<Appbar.Action
icon={memes[index].isFavorite ? 'heart' : 'heart-outline'}
onPress={() => favoriteMeme(realm, memes[index])}

46
src/screens/memes.tsx
View File

@@ -3,6 +3,7 @@ import {
BackHandler,
NativeScrollEvent,
NativeSyntheticEvent,
StyleSheet,
View,
useWindowDimensions,
} from 'react-native';
@@ -16,13 +17,20 @@ import {
useNavigation,
} from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import styles from '../styles';
import { ROUTE, SORT_DIRECTION, memesSortQuery } from '../types';
import { RootState, setNavVisible } from '../state';
import { Meme } from '../database';
import { HideableHeader, MemesHeader, MemesList } from '../components';
import { useDeviceOrientation } from '@react-native-community/hooks';
const memesStyles = StyleSheet.create({
listView: {
paddingHorizontal: '4%',
width: '100%',
height: '100%',
},
});
const Memes = () => {
const { colors } = useTheme();
const { navigate } =
@@ -128,12 +136,7 @@ const Memes = () => {
);
return (
<View
style={[
styles.paddingHorizontal,
styles.fullSize,
{ backgroundColor: colors.background },
]}>
<>
<HideableHeader visible={navVisisble}>
<MemesHeader
search={search}
@@ -146,19 +149,22 @@ const Memes = () => {
}}
/>
</HideableHeader>
<MemesList
memes={memes}
flashListRef={flashListRef}
flashListPadding={flashListPadding}
handleScroll={handleScroll}
focusMeme={(index: number) => {
navigate(ROUTE.MEME_VIEW, {
ids: memes.map(meme => meme.id.toHexString()),
index,
});
}}
/>
</View>
<View
style={[memesStyles.listView, { backgroundColor: colors.background }]}>
<MemesList
memes={memes}
flashListRef={flashListRef}
flashListPadding={flashListPadding}
handleScroll={handleScroll}
focusMeme={(index: number) => {
navigate(ROUTE.MEME_VIEW, {
ids: memes.map(meme => meme.id.toHexString()),
index,
});
}}
/>
</View>
</>
);
};

35
src/screens/settings.tsx
View File

@@ -13,8 +13,6 @@ import {
import { openDocumentTree } from 'react-native-scoped-storage';
import { useDispatch, useSelector } from 'react-redux';
import type {} from 'redux-thunk/extend-redux';
import { useDeviceOrientation } from '@react-native-community/hooks';
import styles from '../styles';
import {
RootState,
setGridColumns,
@@ -24,17 +22,28 @@ import {
} from '../state';
const settingsStyles = StyleSheet.create({
scrollView: {
paddingHorizontal: '4%',
},
snackbar: {
marginBottom: 90,
},
marginBottom: {
marginBottom: 15,
},
columnSegmentedButtons: {
marginBottom: 15,
paddingHorizontal: '2%',
},
hideMediaSwitch: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: '2%',
},
});
const Settings = () => {
const { colors } = useTheme();
const orientation = useDeviceOrientation();
const noMedia = useSelector((state: RootState) => state.settings.noMedia);
const masonryColumns = useSelector(
(state: RootState) => state.settings.masonryColumns,
@@ -60,19 +69,12 @@ const Settings = () => {
<>
<ScrollView
contentContainerStyle={[
orientation === 'portrait'
? styles.paddingTop
: styles.smallPaddingTop,
styles.paddingHorizontal,
settingsStyles.scrollView,
{ backgroundColor: colors.background },
]}>
<List.Section>
<List.Subheader>Views</List.Subheader>
<Text
style={[
settingsStyles.marginBottom,
styles.smallPaddingHorizontal,
]}>
<Text style={settingsStyles.columnSegmentedButtons}>
Masonry Columns
</Text>
<SegmentedButtons
@@ -90,11 +92,7 @@ const Settings = () => {
]}
style={settingsStyles.marginBottom}
/>
<Text
style={[
settingsStyles.marginBottom,
styles.smallPaddingHorizontal,
]}>
<Text style={settingsStyles.columnSegmentedButtons}>
Grid Columns
</Text>
<SegmentedButtons
@@ -123,8 +121,7 @@ const Settings = () => {
}}>
Change External Storage Path
</Button>
<View
style={[styles.flexRowSpaceBetween, styles.smallPaddingHorizontal]}>
<View style={settingsStyles.hideMediaSwitch}>
<Text>Hide media from gallery</Text>
<Switch
value={noMedia}

71
src/screens/tags.tsx
View File

@@ -15,16 +15,21 @@ import { useDeviceOrientation } from '@react-native-community/hooks';
import { useSafeAreaFrame } from 'react-native-safe-area-context';
import { HideableHeader, TagRow, TagsHeader } from '../components';
import { Tag } from '../database';
import styles from '../styles';
import { RootState, setNavVisible } from '../state';
import { SORT_DIRECTION, tagSortQuery } from '../types';
const tagsStyles = StyleSheet.create({
listView: {
paddingHorizontal: '4%',
width: '100%',
height: '100%',
},
flashList: {
paddingBottom: 100,
},
helperText: {
marginVertical: 15,
textAlign: 'center',
},
});
@@ -104,12 +109,7 @@ const Tags = () => {
);
return (
<View
style={[
styles.paddingHorizontal,
styles.fullSize,
{ backgroundColor: colors.background },
]}>
<>
<HideableHeader visible={navVisisble}>
<TagsHeader
search={search}
@@ -119,34 +119,35 @@ const Tags = () => {
}}
/>
</HideableHeader>
<FlashList
ref={flashListRef}
data={tags}
estimatedItemSize={50}
estimatedListSize={{
height,
width: width * 0.92,
}}
showsVerticalScrollIndicator={false}
renderItem={({ item: tag }) => <TagRow tag={tag} />}
contentContainerStyle={{
paddingTop:
flashListPadding +
height * (orientation === 'portrait' ? 0.02 : 0.04),
...tagsStyles.flashList,
}}
ItemSeparatorComponent={() => <Divider />}
ListEmptyComponent={() => (
<HelperText
type={'info'}
style={[tagsStyles.helperText, styles.centerText]}>
No tags found
</HelperText>
)}
onScroll={handleScroll}
fadingEdgeLength={100}
/>
</View>
<View
style={[tagsStyles.listView, { backgroundColor: colors.background }]}>
<FlashList
ref={flashListRef}
data={tags}
estimatedItemSize={50}
estimatedListSize={{
height,
width: width * 0.92,
}}
showsVerticalScrollIndicator={false}
renderItem={({ item: tag }) => <TagRow tag={tag} />}
contentContainerStyle={{
paddingTop:
flashListPadding +
height * (orientation === 'portrait' ? 0.02 : 0.04),
...tagsStyles.flashList,
}}
ItemSeparatorComponent={() => <Divider />}
ListEmptyComponent={() => (
<HelperText type={'info'} style={tagsStyles.helperText}>
No tags found
</HelperText>
)}
onScroll={handleScroll}
fadingEdgeLength={100}
/>
</View>
</>
);
};

24
src/screens/welcome.tsx
View File

@@ -3,14 +3,19 @@ import { StyleSheet, View } from 'react-native';
import { Button, Text, useTheme } from 'react-native-paper';
import { useDispatch } from 'react-redux';
import { openDocumentTree } from 'react-native-scoped-storage';
import { useDeviceOrientation } from '@react-native-community/hooks';
import styles from '../styles';
import { noOp } from '../utilities';
import { setStorageUri } from '../state';
const welcomeStyles = StyleSheet.create({
view: {
paddingHorizontal: '4%',
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
text: {
marginBottom: 30,
textAlign: 'center',
},
button: {
marginBottom: 100,
@@ -19,7 +24,6 @@ const welcomeStyles = StyleSheet.create({
const Welcome = ({ onWelcomeComplete }: { onWelcomeComplete: () => void }) => {
const { colors } = useTheme();
const orientation = useDeviceOrientation();
const dispatch = useDispatch();
const selectStorageLocation = async () => {
@@ -30,18 +34,8 @@ const Welcome = ({ onWelcomeComplete }: { onWelcomeComplete: () => void }) => {
};
return (
<View
style={[
orientation === 'portrait' ? styles.paddingTop : styles.smallPaddingTop,
styles.paddingHorizontal,
styles.center,
styles.flex,
styles.fullSize,
{ backgroundColor: colors.background },
]}>
<Text
variant="displayMedium"
style={[welcomeStyles.text, styles.centerText]}>
<View style={[welcomeStyles.view, { backgroundColor: colors.background }]}>
<Text variant="displayMedium" style={welcomeStyles.text}>
Welcome to Terminally Online!
</Text>
<Button