Skip to content

Commit

Permalink
WIP: Add accept privacy to the about dialog (#437)
Browse files Browse the repository at this point in the history
  • Loading branch information
@OlegMoshkovich
OlegMoshkovich committed Dec 13, 2022
1 parent 14665d2 commit 854c3a8
Show file tree
Hide file tree
Showing 8 changed files with 186 additions and 109 deletions.
159 changes: 85 additions & 74 deletions src/Components/AboutControl.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import React, {useState, useEffect, useContext} from 'react'
import Box from '@mui/material/Box'
import Slider from '@mui/material/Slider'
import Toggle from '../Components/Toggle'
import Typography from '@mui/material/Typography'
import {makeStyles} from '@mui/styles'
import * as Privacy from '../privacy/Privacy'
import debug from '../utils/debug'
import {ColorModeContext} from '../Context/ColorMode'
import Dialog from './Dialog'
import {ControlButton} from './Buttons'
import {ControlButton, RectangularButton} from './Buttons'
import AboutIcon from '../assets/2D_Icons/Information.svg'
import LogoB from '../assets/LogoB_4.svg'
import LogoB from '../assets/LogoB_3.svg'


/**
Expand Down Expand Up @@ -58,7 +57,7 @@ function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
headerText={<LogoB style={{width: '50px', height: '50px'}} />}
isDialogDisplayed={isDialogDisplayed}
setIsDialogDisplayed={setIsDialogDisplayed}
content={<AboutContent/>}
content={<AboutContent setIsDialogDisplayed={setIsDialogDisplayed}/>}
data-testid={'about-dialog'}
/>)
}
Expand All @@ -69,99 +68,118 @@ function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
*
* @return {object} React component
*/
function AboutContent() {
function AboutContent({setIsDialogDisplayed}) {
const classes = useStyles()
const theme = useContext(ColorModeContext)
const [privacySlider, setPrivacySlider] = useState(0)
const privacyLevelFunctional = 0
const privacyLevelUsage = 10
const privacyLevelSocial = 20
const bulletStyle = {textAlign: 'center', fontSize: '.9em'}
const [acceptCookies, setAcceptCookies] = useState(true)
const bulletStyle = {textAlign: 'center'}

useEffect(() => {
if (Privacy.isPrivacySocialEnabled()) {
setPrivacySlider(privacyLevelSocial)
} else if (Privacy.isPrivacyUsageEnabled()) {
setPrivacySlider(privacyLevelUsage)
setAcceptCookies(true)
} else {
setPrivacySlider(privacyLevelFunctional)
setAcceptCookies(false)
}
}, [])
const marks = [
{value: privacyLevelFunctional, label: 'Functional', info: 'Theme, UI state, cookie preference'},
{value: privacyLevelUsage, label: 'Usage', info: 'Stats from your use of Bldrs'},
{value: privacyLevelSocial, label: 'Social', info: 'Google\'s guess of your location and demographic'},
]
const setPrivacy = (event) => {
debug().log('AboutContent#setPrivacy: ', event.target.value)
switch (event.target.value) {
case privacyLevelUsage:
Privacy.setUsageAndSocialEnabled(true, false)
setPrivacySlider(privacyLevelUsage)
break
case privacyLevelSocial:
Privacy.setUsageAndSocialEnabled(true, true)
setPrivacySlider(privacyLevelSocial)
break
case 0:
default:
Privacy.setUsageAndSocialEnabled(false, false)
setPrivacySlider(privacyLevelFunctional)
}

const changePrivacy = () => {
setPrivacy(acceptCookies)
setAcceptCookies(!acceptCookies)
}

return (
<div className={classes.content}>
<Typography variant='h3'>Build Every Thing Together</Typography>
<Typography variant='h4'>Build Every Thing Together</Typography>
<Typography gutterBottom={false} >We are open source<br/>
<a href='https://github.com/bldrs-ai/Share' target='_new'>
github.com/bldrs-ai/Share
</a>
</Typography>
<Box sx={{
backgroundColor: theme.isDay() ? '#E8E8E8' : '#4C4C4C',
borderRadius: '5px',
borderRadius: '10px',
opacity: .8,
marginTop: '10px'}}
>
<ul>
<li><Typography sx={bulletStyle} variant='p'>Open IFC models from GitHub</Typography></li>
<li><Typography sx={bulletStyle} variant='p'>View IFC properties</Typography></li>
<li><Typography sx={bulletStyle} variant='p'>Search IFC models</Typography></li>
<li><Typography sx={bulletStyle} variant='p'>Share IFC models</Typography></li>
<li><Typography sx={bulletStyle} variant='h4'>
<a href='https://github.com/bldrs-ai/Share/wiki/GitHub-model-hosting' target='_new'>Open IFC models from Github</a>
</Typography></li>
<li><Typography sx={bulletStyle} variant='h4'>View IFC properties</Typography></li>
<li><Typography sx={bulletStyle} variant='h4'>Search IFC models</Typography></li>
<li><Typography sx={bulletStyle} variant='h4'>Share IFC models</Typography></li>
</ul>
</Box>

<div className={classes.settings}>
<Typography variant='p' sx={{marginBottom: '6px'}}>Privacy</Typography>
<Slider
onChange={setPrivacy}
marks={marks}
value={privacySlider}
step={10}
min={0}
max={20}
sx={{width: '80%', textAlign: 'center'}}
<Box sx={{
height: '140px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-around',
alignItems: 'center',
borderRadius: '10px',
}}
>
<Box sx={{
width: '100%',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Box
variant={'h4'}
sx={{
marginLeft: '10px',
textAlign: 'left',
marginTop: '6px',
marginBottom: '6px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'flex-start',
}}
>
<Typography variant={'h4'}>
Analytics cookies
</Typography>
<Typography variant={'h4'}>
<a href='https://github.com/bldrs-ai/Share/wiki/Design#privacy' target='_new'>
read more
</a>
</Typography>
</Box>
<Toggle checked={acceptCookies} onChange={changePrivacy}/>
</Box>
<RectangularButton
title='OK'
onClick={() => setIsDialogDisplayed(false)}
icon={<AboutIcon/> }
noBorder={false}
/>
</div>
</Box>
</div>)
}


const useStyles = makeStyles((theme) => (
{
content: {
'minHeight': '300px',
'maxWidth': '240px',
'minHeight': '330px',
'maxWidth': '250px',
'marginBottom': '10px',
'& .MuiTypography-body1': {
padding: '1em 0',
fontSize: '.9em',
},
'& ul': {
width: '100%',
marginTop: '-2px',
marginBottom: '15px',
padding: '4px 6px',
textAlign: 'left',
borderRadius: '8px',
borderRadius: '2px',
},
'& li': {
display: 'flex',
Expand All @@ -171,10 +189,10 @@ const useStyles = makeStyles((theme) => (
listStyleType: 'none',
},
'& a': {
color: 'grey',
paddingLeft: '4px',
paddingRight: '4px',
paddingBottom: '2px',
color: theme.palette.highlight.secondary,
borderBottom: `0.5px solid ${theme.palette.highlight.secondary}`,
},
'@media (max-width: 900px)': {
marginTop: '-10px',
Expand All @@ -187,26 +205,10 @@ const useStyles = makeStyles((theme) => (
'alignItems': 'center',
'textAlign': 'center',
'paddingTop': '10px',
'paddingBottom': '30px',
'@media (max-width: 900px)': {
paddingTop: '16px',
paddingBottom: '30px',
},
'& .MuiSlider-thumb': {
backgroundColor: theme.palette.highlight.main,
width: '18px',
height: '18px',
},
'& .MuiSlider-track': {
color: 'lightGray',
},
'& .MuiSlider-rail': {
color: 'lightGray',
},
'& .MuiSlider-markLabel': {
paddingTop: '4px',
fontSize: '1em',
},
},
iconContainer: {
width: '20px',
Expand All @@ -215,3 +217,12 @@ const useStyles = makeStyles((theme) => (
},
}
))


export const setPrivacy = (acceptCookies) => {
if (acceptCookies) {
Privacy.setUsageAndSocialEnabled(false, false)
} else {
Privacy.setUsageAndSocialEnabled(true, true)
}
}
32 changes: 32 additions & 0 deletions src/Components/AboutControl.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react'
import {render, fireEvent} from '@testing-library/react'
import * as Privacy from '../privacy/Privacy'
import {MockComponent} from '../__mocks__/MockComponent'
import AboutControl from './AboutControl'
import {setPrivacy} from './AboutControl'


describe('About control tests', () => {
test('renders the AboutControl button', () => {
const {getByTitle} = render(<MockComponent><AboutControl/></MockComponent>)
const aboutControl = getByTitle('About BLDRS')
expect(aboutControl).toBeInTheDocument()
})

test('renders AbotDialog when control is pressed', () => {
const {getByTitle, getByText} = render(<MockComponent><AboutControl/></MockComponent>)
const aboutControl = getByTitle('About BLDRS')
fireEvent.click(aboutControl)
const dialogTitle = getByText('Build Every Thing Together')
expect(dialogTitle).toBeInTheDocument()
})

test('sets privacy settings correctly', () => {
// Test setting privacy to disabled
setPrivacy(true)
expect(Privacy.isPrivacySocialEnabled()).toBe(false)
// Test setting privacy to enabled
setPrivacy(false)
expect(Privacy.isPrivacySocialEnabled()).toBe(true)
})
})
9 changes: 7 additions & 2 deletions src/Components/Buttons.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,16 +60,21 @@ export function RectangularButton({
title,
icon,
onClick,
noBorder = true,
noBackground = false,
}) {
assertDefined(title, icon, onClick)
const theme = useTheme()
return (
<Button
onClick={onClick}
variant='rectangular'
startIcon={icon}
sx={{
'border': `1px solid ${noBorder ? 'none' : theme.palette.highlight.heavy }`,
'backgroundColor': noBackground ? 'none' : theme.palette.highlight.main,
'& .MuiButton-startIcon': {position: 'absolute', left: '20px'},
'&.MuiButtonBase-root:hover': {bgcolor: 'none'},
'&.MuiButtonBase-root:hover': {bgcolor: theme.palette.highlight.secondary},
}}
>
{title}
Expand Down Expand Up @@ -124,7 +129,7 @@ const useStyles = makeStyles((theme) => ({
'& button': {
'width': '40px',
'height': '40px',
'border': 'none ',
'border': 'none',
'margin': '4px 0px 4px 0px',
'&.Mui-selected, &.Mui-selected:hover': {
backgroundColor: '#97979720',
Expand Down
11 changes: 9 additions & 2 deletions src/Components/Dialog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,18 @@ export default function Dialog({
>
<Typography
variant='h1'
sx={{marginTop: '40px'}}
sx={{marginTop: '24px'}}
>
{headerText}
</Typography>
<DialogContent>
<DialogContent sx={{
'marginTop': '10px',
'paddingTop': '0px',
'@media (max-width: 900px)': {
paddingTop: '10px',
},
}}
>
<Typography variant='p'>
{content}
</Typography>
Expand Down
20 changes: 8 additions & 12 deletions src/Components/OpenModelControl.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import ToggleButton from '@mui/material/ToggleButton'
import TextField from '@mui/material/TextField'
import {makeStyles, useTheme} from '@mui/styles'
import Dialog from './Dialog'
import {TooltipIconButton} from '../Components/Buttons'
import {RectangularButton} from '../Components/Buttons'
import {ColorModeContext} from '../Context/ColorMode'
import ModelsIcon from '../assets/2D_Icons/Model.svg'
import OpenIcon from '../assets/2D_Icons/Open.svg'
Expand Down Expand Up @@ -88,7 +88,7 @@ function OpenModelDialog({isDialogDisplayed, setIsDialogDisplayed, fileOpen}) {
return (
<Dialog
icon={<ModelsIcon/>}
headerText='Open'
headerText={<Typography variant='h2' sx={{margin: '10px 10px'}}>Open</Typography>}
isDialogDisplayed={isDialogDisplayed}
setIsDialogDisplayed={setIsDialogDisplayed}
content={
Expand Down Expand Up @@ -124,10 +124,12 @@ function OpenModelDialog({isDialogDisplayed, setIsDialogDisplayed, fileOpen}) {
</a>
</span> to learn more.
</p>
<TooltipIconButton
title='Open IFC file'
<RectangularButton
title='Open from local drive'
icon={<UploadIcon/>}
onClick={openFile}
noBackground={true}
noBorder={false}
/>
<p className={classes.bullet}>
Models opened from local drive cannot be saved or shared.
Expand All @@ -141,8 +143,8 @@ function OpenModelDialog({isDialogDisplayed, setIsDialogDisplayed, fileOpen}) {

const useStyles = makeStyles((theme) => ({
content: {
width: '270px',
marginTop: '6px',
width: '260px',
paddingTop: '6px',
},
snippet: {
textAlign: 'left',
Expand All @@ -158,12 +160,6 @@ const useStyles = makeStyles((theme) => ({
cursor: 'pointer',
borderBottom: `1px solid ${theme.palette.highlight.secondary}`,
},
openIcon: {
textAlign: 'center',
},
iconContainer: {
textTransform: 'Capitalize',
},
root: {
'& button': {
'width': '44px',
Expand Down

0 comments on commit 854c3a8

Please sign in to comment.