Skip to content

Commit

Permalink
iOS fixes #patch (#98)
Browse files Browse the repository at this point in the history 
* [ui] specifiy height for FlashList on ios
* [ui] fix add device form for ios
  • Loading branch information
@lts-po
lts-po authored Nov 28, 2022
1 parent 0ff98da commit f7623e6
Show file tree
Hide file tree
Showing 27 changed files with 455 additions and 438 deletions.
165 changes: 79 additions & 86 deletions frontend/src/components/Auth/AuthTokenList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
useColorModeValue
} from 'native-base'

import { FlashList } from "@shopify/flash-list";
import { FlashList } from '@shopify/flash-list'

import { authAPI } from 'api'
import { AlertContext } from 'AppContext'
Expand Down Expand Up @@ -108,7 +108,7 @@ const AuthTokenList = (props) => {
}

return (
<View mt={4}>
<View h={'100%'}>
<HStack justifyContent="space-between" alignItems="center" p={4}>
<Heading fontSize="md">API Tokens</Heading>

Expand All @@ -122,97 +122,90 @@ const AuthTokenList = (props) => {
</ModalForm>
</Box>
</HStack>
<Box
bg={useColorModeValue('backgroundCardLight', 'backgroundCardDark')}
_rounded={{ md: 'md' }}
width="100%"
p={4}
mb={4}
>
<FlashList
data={tokens}
renderItem={({ item }) => (
<Box
borderBottomWidth={1}
borderColor="muted.200"
_dark={{ borderColor: 'muted.600' }}
py={2}

<FlashList
data={tokens}
estimatedItemSize={100}
renderItem={({ item }) => (
<Box
bg="backgroundCardLight"
borderBottomWidth={1}
borderColor="muted.200"
_dark={{ bg: 'backgroundCardDark', borderColor: 'muted.600' }}
p={4}
>
<HStack
w="100%"
space={3}
alignItems="center"
__justifyContent="stretch"
>
<Text flex={1}>{item.Name}</Text>
<HStack
w="100%"
space={3}
flex={1}
minW={{ base: '1/6', md: '2/6' }}
alignItems="center"
__justifyContent="stretch"
justifyItems="flex-end"
>
<Text flex={1}>{item.Name}</Text>
<HStack
flex={1}
minW={{ base: '1/6', md: '2/6' }}
alignItems="center"
justifyItems="flex-end"
>
<Text>{item.Token}</Text>
<IconButton
variant="unstyled"
icon={<Icon size="4" icon={faCopy} color="muted.500" />}
onPress={() => copy(item.Token)}
display={showClipboard ? 'flex' : 'none'}
/>

{item.ScopedPaths != null && item.ScopedPaths.length > 0 ? (
<Text isTruncated>{JSON.stringify(item.ScopedPaths)}</Text>
) : (
<Text isTruncated></Text>
)}
</HStack>

<HStack
w={{ base: '3/6', md: '2/6' }}
space={1}
justifyContent="flex-end"
>
<Text color="muted.500">Expire</Text>
<Text
color={
tokenExpired(item.Expire) ? 'warning.400' : 'muted.500'
}
>
{item.Expire
? timeAgo(new Date(item.Expire * 1e3))
: 'Never'}
</Text>
</HStack>

<Text>{item.Token}</Text>
<IconButton
alignSelf="center"
size="sm"
variant="ghost"
colorScheme="secondary"
icon={<Icon icon={faXmark} />}
onPress={() => deleteListItem(item)}
variant="unstyled"
icon={<Icon size="4" icon={faCopy} color="muted.500" />}
onPress={() => copy(item.Token)}
display={showClipboard ? 'flex' : 'none'}
/>

{item.ScopedPaths != null && item.ScopedPaths.length > 0 ? (
<Text isTruncated>{JSON.stringify(item.ScopedPaths)}</Text>
) : (
<Text isTruncated></Text>
)}
</HStack>
</Box>
)}
keyExtractor={(item) => item.Token}
/>

<VStack>
{tokens !== null && tokens.length === 0 ? (
<Text alignSelf="center">There are no API tokens added yet</Text>
) : null}
<Button
display={{ base: 'flex', md: tokens.length ? 'none' : 'flex' }}
variant={useColorModeValue('subtle', 'solid')}
colorScheme="muted"
leftIcon={<Icon icon={faCirclePlus} />}
onPress={() => setIsModalOpen(true)}
mt={4}
>
Add token
</Button>
</VStack>
</Box>

<HStack
w={{ base: '3/6', md: '2/6' }}
space={1}
justifyContent="flex-end"
>
<Text color="muted.500">Expire</Text>
<Text
color={
tokenExpired(item.Expire) ? 'warning.400' : 'muted.500'
}
>
{item.Expire ? timeAgo(new Date(item.Expire * 1e3)) : 'Never'}
</Text>
</HStack>

<IconButton
alignSelf="center"
size="sm"
variant="ghost"
colorScheme="secondary"
icon={<Icon icon={faXmark} />}
onPress={() => deleteListItem(item)}
/>
</HStack>
</Box>
)}
keyExtractor={(item) => item.Token}
/>

<VStack>
{tokens !== null && tokens.length === 0 ? (
<Text alignSelf="center">There are no API tokens added yet</Text>
) : null}
<Button
display={{ base: 'flex', md: tokens.length ? 'none' : 'flex' }}
variant={useColorModeValue('subtle', 'solid')}
colorScheme="muted"
leftIcon={<Icon icon={faCirclePlus} />}
onPress={() => setIsModalOpen(true)}
mt={4}
>
Add token
</Button>
</VStack>
</View>
)
}
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/components/DNS/DNSBlocklist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import ModalConfirm from 'components/ModalConfirm'
import {
Badge,
Box,
FlatList,
Heading,
IconButton,
Menu,
Expand All @@ -27,7 +28,7 @@ import {
useColorModeValue
} from 'native-base'

import { FlashList } from "@shopify/flash-list";
import { FlashList } from '@shopify/flash-list'

export default class DNSBlocklist extends React.Component {
state = {
Expand Down Expand Up @@ -266,7 +267,7 @@ export default class DNSBlocklist extends React.Component {
p={4}
mb={4}
>
<FlashList
<FlatList
data={[...this.state.list, ...this.state.recommendedList]}
renderItem={({ item }) => (
<Box
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/components/DNS/DNSLogHistoryList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
Badge,
Box,
Button,
FlatList,
FormControl,
Heading,
IconButton,
Expand All @@ -40,7 +41,7 @@ import {
ScrollView
} from 'native-base'

import { FlashList } from "@shopify/flash-list";
import { FlashList } from '@shopify/flash-list'

const ListItem = ({ item, handleClickDomain, hideClient, triggerAlert }) => {
const colorByType = (type) => {
Expand Down Expand Up @@ -469,7 +470,7 @@ const DNSLogHistoryList = (props) => {
</HStack>
) : null*/}

<FlashList
<FlatList
h={{ base: '40%', md: 'auto' }}
data={listFiltered}
renderItem={({ item, index }) => (
Expand Down
24 changes: 10 additions & 14 deletions frontend/src/components/DNS/DNSLogList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
Box,
Button,
Divider,
FlatList,
Heading,
HStack,
IconButton,
Expand All @@ -25,7 +26,7 @@ import {
useColorModeValue
} from 'native-base'

import { FlashList } from "@shopify/flash-list";
import { FlashList } from '@shopify/flash-list'

const DNSLogList = ({ title, description, ...props }) => {
const context = useContext(AlertContext)
Expand Down Expand Up @@ -59,7 +60,7 @@ const DNSLogList = ({ title, description, ...props }) => {
let options = Object.values(devices)
let name_map = {}
for (let ident in devices) {
let d = devices[ident];
let d = devices[ident]
let key_ip = cleanIp(d.RecentIP)
let name_value = d.Name || d.RecentIP
name_map[key_ip] = name_value
Expand Down Expand Up @@ -134,13 +135,7 @@ const DNSLogList = ({ title, description, ...props }) => {
/>
</HStack>

<Box
bg={useColorModeValue('warmGray.50', 'blueGray.800')}
rounded={{ md: 'md' }}
width="100%"
p={4}
mb={4}
>
<Box rounded={{ md: 'md' }} width="100%" p={4} mb={4}>
{!list.length ? (
<VStack space={2}>
<Text alignSelf={'center'}>List is empty</Text>
Expand All @@ -154,18 +149,19 @@ const DNSLogList = ({ title, description, ...props }) => {
</Button>
</VStack>
) : null}
<FlashList
<FlatList
data={list}
keyExtractor={(item, index) => index}
estimatedItemSize={100}
renderItem={({ item }) => (
<HStack
py={4}
p={4}
borderBottomWidth={1}
_light={{ borderBottomColor: 'muted.200' }}
_dark={{ borderBottomColor: 'muted.600' }}
_light={{ bg: 'warmGray.50', borderBottomColor: 'muted.200' }}
_dark={{ bg: 'blueGray.800', borderBottomColor: 'muted.600' }}
>
<Text>{item}</Text>
<Text> {ip_to_name(item)}</Text>
<Text> {ip_to_name(item)}</Text>
<IconButton
variant="ghost"
colorScheme="secondary"
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/components/DNS/DNSOverrideList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,14 @@ import {
Heading,
IconButton,
Stack,
FlatList,
HStack,
VStack,
Text,
useColorModeValue
} from 'native-base'

import { FlashList } from "@shopify/flash-list";
import { FlashList } from '@shopify/flash-list'

const DNSOverrideList = (props) => {
const context = React.useContext(AlertContext)
Expand Down Expand Up @@ -76,7 +77,7 @@ const DNSOverrideList = (props) => {
{!list || !list.length ? (
<Text>{`No ${props.title.split(' ')[0]} rules configured`}</Text>
) : null}
<FlashList
<FlatList
data={list}
renderItem={({ item }) => (
<Box
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/components/Devices/AddDevice.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
HStack,
Input,
Radio,
ScrollView,
Stack,
Text
} from 'native-base'
Expand Down Expand Up @@ -160,9 +161,9 @@ const AddDevice = (props) => {
}

return (
<Stack space={4} width={['100%', '100%', '5/6']}>
<ScrollView space={2} width={['100%', '100%', '5/6']} h={'100%'}>
<Heading fontSize="lg">Add a new WiFi Device</Heading>
<Text color="muted.500" fontSize="xs" mt="-3">
<Text color="muted.500" fontSize="xs">
Wired devices do not need to be added
</Text>

Expand All @@ -185,7 +186,7 @@ const AddDevice = (props) => {
)}
</FormControl>

<Stack direction={{ base: 'column', md: 'row' }} space={4}>
<Stack space={2} minH={180}>
<FormControl flex="1" isInvalid={'mac' in errors}>
<FormControl.Label>MAC Address</FormControl.Label>
<Input
Expand Down Expand Up @@ -300,7 +301,7 @@ const AddDevice = (props) => {
<Button mt="4" color="primary" size="md" onPress={handleSubmit}>
Save
</Button>
</Stack>
</ScrollView>
)
}

Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/Devices/Device.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,6 +301,7 @@ const Device = ({ device, edit, notifyChange, ...props }) => {
<Stack
direction={{ base: 'column-reverse', md: 'row' }}
space={2}
bg={useColorModeValue('backgroundCardLight', 'backgroundCardDark')}
p={4}
w="100%"
key={device.MAC}
Expand Down
Loading

0 comments on commit f7623e6

Please sign in to comment.