From a8a150a191f4bd6e193e7025eb8f0f3d99edfd4c Mon Sep 17 00:00:00 2001 From: "wolfmoyaers@gmail.com" Date: Sun, 31 Oct 2021 16:58:49 +0100 Subject: [PATCH] dimentions --- .../groceries/styles/listedItem.js | 1 - .../GroceryList/products/ListedProduct.js | 15 ++++--- .../GroceryList/products/ProductButtons.js | 8 ++-- .../GroceryList/products/ProductsList.js | 25 ++++------- .../GroceryList/products/styles/buttons.js | 45 +++++-------------- .../GroceryList/products/styles/list.js | 3 -- .../products/styles/listedProduct.js | 23 +++------- .../groceryList/storageManagement/Products.js | 2 +- 8 files changed, 38 insertions(+), 84 deletions(-) diff --git a/src/components/GroceryList/groceries/styles/listedItem.js b/src/components/GroceryList/groceries/styles/listedItem.js index 564c874..2242c8f 100644 --- a/src/components/GroceryList/groceries/styles/listedItem.js +++ b/src/components/GroceryList/groceries/styles/listedItem.js @@ -90,7 +90,6 @@ export const TextPerson = styled(Text)` ` export const StyledImage = styled(Image)` position: absolute; - resize-mode: contain; opacity: 0.05; height: 100%; width: 200px; diff --git a/src/components/GroceryList/products/ListedProduct.js b/src/components/GroceryList/products/ListedProduct.js index d6d6f97..f5e4b12 100644 --- a/src/components/GroceryList/products/ListedProduct.js +++ b/src/components/GroceryList/products/ListedProduct.js @@ -1,11 +1,12 @@ import React from 'react' //components //styling -import { Wrapper, WrapperProduct, WrapperButton, CheckButton, WrapperText, TextProductName, TextTag, TextPrice, StyledImage, IconCheck} from './styles/listedProduct' +import { Wrapper, WrapperProduct, WrapperButton, WrapperText, TextProductName, TextTag, TextPrice, StyledImage, IconCheck } from './styles/listedProduct' //redux -import { useSelector, useDispatch, shallowEqual} from 'react-redux'; -import { selectProductById, checkToggle, modalToggle} from '../../../redux/slices/groceryList/productsSlice' +import { useSelector, useDispatch, shallowEqual } from 'react-redux'; +import { selectProductById, checkToggle, modalToggle } from '../../../redux/slices/groceryList/productsSlice' import { findTag } from '../../../redux/slices/groceryList/tagsSlice' +import { CheckButton } from '../../../styles/componentBlueprints'; const ListedProduct = React.memo((props) => { const dispatch = useDispatch() @@ -13,15 +14,15 @@ const ListedProduct = React.memo((props) => { const tag = useSelector(state => findTag(state, product.tag)) return ( - {props.setVisible(true); return dispatch(modalToggle(product._id))}}> + { props.setVisible(true); return dispatch(modalToggle(product._id)) }}> {product.productName} {tag.tagName} - {/* {product.price !== 0&& € {product.price}} */} + {product.price !== 0 && € {product.price}} - {/* {product.image && } */} + {product.image != "" && } - dispatch(checkToggle(product._id))} > + dispatch(checkToggle(product._id))} > {/* */} diff --git a/src/components/GroceryList/products/ProductButtons.js b/src/components/GroceryList/products/ProductButtons.js index 7e753e1..300b1df 100644 --- a/src/components/GroceryList/products/ProductButtons.js +++ b/src/components/GroceryList/products/ProductButtons.js @@ -40,7 +40,7 @@ const DownloadProductsButton = (props) => { } } return ( - + {/* */} ) @@ -55,7 +55,7 @@ const RemoveProductsButton = (props) => { } } return ( - + {/* */} ) @@ -67,7 +67,7 @@ export const ContainerButtons = (props) => { - setVisible(!visible)}> + setVisible(!visible)}> {/* */} @@ -79,7 +79,7 @@ export const AddProductButton = (props) => { const closeModal = () => setVisible(false) return ( <> - setVisible(true)}> + setVisible(true)}> {/* */} diff --git a/src/components/GroceryList/products/ProductsList.js b/src/components/GroceryList/products/ProductsList.js index 01040d2..96595de 100644 --- a/src/components/GroceryList/products/ProductsList.js +++ b/src/components/GroceryList/products/ProductsList.js @@ -8,35 +8,28 @@ import { selectAllSortedProducts } from '../../../redux/slices/groceryList/produ //styles import { WrapperList } from './styles/list' import ModalEditProduct from '../../modals/groceries/ModalEditProduct'; -import { View } from 'react-native'; +import { ScrollView, View } from 'react-native'; +import HeaderPadding from '../../Header'; const ProductsList = (props) => { const products = useSelector(selectAllSortedProducts) - const [count, setCount] = useState(11) - const [hasMore, setHasMore] = useState(true); - const [visible, setVisible] = useState(false); - const productList = products.slice(0, count).map((product, index) => { + const productList = products.map((product, index) => { return ( ) }) - // const [current, setCurrent] = useState()) - const getMoreData = () => { - if (productList.length === products.length) { - setHasMore(false); - return; - } - setCount((prevState) => prevState + 10) - } return ( - {productList} - - {products.find(product => product.modalVisible) && } + + + {productList} + + {products.find(product => product.modalVisible) && } + ) } diff --git a/src/components/GroceryList/products/styles/buttons.js b/src/components/GroceryList/products/styles/buttons.js index 6589ec9..c112392 100644 --- a/src/components/GroceryList/products/styles/buttons.js +++ b/src/components/GroceryList/products/styles/buttons.js @@ -9,45 +9,27 @@ import { TextInput } from 'react-native' export const WrapperButtons = styled(Button)` position:absolute; background-color: ${({ theme }) => theme.colors.primary}; - bottom:50px; - left:20px; - @media ${({ theme }) => theme.mediaQueries.below768}{ - bottom:70px; - left:10px; - } + bottom:70px; + left:10px; ` export const WrapperAddProduct = styled(Button)` position:absolute; background-color: ${({ theme }) => theme.colors.primary}; - bottom:50px; - right:20px; - @media ${({ theme }) => theme.mediaQueries.below768}{ - bottom:70px; - right:10px; - } + bottom:70px; + right:10px; ` export const WrapperRemove = styled(Button)` position:absolute; background-color: ${({ theme }) => theme.colors.error}; - left:20px; - @media ${({ theme }) => theme.mediaQueries.below768}{ - left:10px; - bottom: ${(props) => props.visible ? '140px' : '70px'}; - } - - bottom: ${(props) => props.visible ? '140px' : '50px'}; + left:10px; + bottom: ${(props) => props.visible ? '140px' : '70px'}; ` export const WrapperUpload = styled(Button)` position:absolute; background-color: #ddb5e4; - left:20px; - @media ${({ theme }) => theme.mediaQueries.below768}{ - left:10px; - bottom: ${(props) => props.visible ? '280px' : '70px'}; - } - - bottom: ${(props) => props.visible ? '320px' : '50px'}; + left:10px; + bottom: ${(props) => props.visible ? '280px' : '70px'}; ` export const UploadInput = styled(TextInput)` @@ -58,16 +40,11 @@ export const UploadInput = styled(TextInput)` height:80px; ` - export const WrapperDownload = styled(Button)` +export const WrapperDownload = styled(Button)` position:absolute; background-color: #fff7ad; - left:20px; - @media ${({ theme }) => theme.mediaQueries.below768}{ - left:10px; - bottom: ${(props) => props.visible ? '210px' : '70px'}; - } - - bottom: ${(props) => props.visible ? '230px' : '50px'}; + left:10px; + bottom: ${(props) => props.visible ? '210px' : '70px'}; ` diff --git a/src/components/GroceryList/products/styles/list.js b/src/components/GroceryList/products/styles/list.js index a5b5b92..e1389b6 100644 --- a/src/components/GroceryList/products/styles/list.js +++ b/src/components/GroceryList/products/styles/list.js @@ -3,7 +3,4 @@ import styled from 'styled-components' export const WrapperList = styled(View)` width:100%; - display: flex; - flex-direction: column; - align-items: center; ` \ No newline at end of file diff --git a/src/components/GroceryList/products/styles/listedProduct.js b/src/components/GroceryList/products/styles/listedProduct.js index b28a598..f122e88 100644 --- a/src/components/GroceryList/products/styles/listedProduct.js +++ b/src/components/GroceryList/products/styles/listedProduct.js @@ -9,16 +9,16 @@ import LightenDarken from '../../../../functions' export const Wrapper = styled(View)` display: flex; flex-direction: row; - width: 768px; + width: 100%; align-items: flex-start; - @media ${({ theme }) => theme.mediaQueries.below768}{ - width: 100vw; - } + justify-content: flex-start; ` export const WrapperProduct = styled(TouchableOpacity)` box-shadow: ${({theme})=> theme.colors.shadow}; display: flex; flex: 1; + width: 100%; + min-height: 70px; position: relative; flex-direction: row; justify-content: center; @@ -32,20 +32,8 @@ export const WrapperButton = styled(TouchableOpacity)` height: 60px; width: 40px; ` -export const CheckButton = styled(View)` - display:flex; - justify-content: center; - align-items: center; - height: 30px; - min-width: 30px; - border: 1px solid ${props => props.checked ? props.theme.colors.selected : props.theme.colors.dp04}; - border-radius: 15px; - margin: 0px 5px ; - background-color: ${props => props.checked ? props.theme.colors.selected : props.theme.colors.buttonGrey}; - ` - -export const WrapperText = styled(Text)` +export const WrapperText = styled(View)` flex:1; max-width:600px; @media ${({ theme }) => theme.mediaQueries.below768}{ @@ -80,7 +68,6 @@ export const StyledImage = styled(Image)` position: absolute; top:0; right:0; - resize-mode: contain; width: 100px; height: 100%; max-height:120px; diff --git a/src/pages/groceryList/storageManagement/Products.js b/src/pages/groceryList/storageManagement/Products.js index 3c371c5..bcb3675 100644 --- a/src/pages/groceryList/storageManagement/Products.js +++ b/src/pages/groceryList/storageManagement/Products.js @@ -16,7 +16,7 @@ import { useSelector } from 'react-redux' const Products = () => { const statusProducts = useSelector(state => state.products.status) return ( - + {statusProducts === 'loading' ? : }