From 787419417193856b86f6782c8b28424ddf1ff1c4 Mon Sep 17 00:00:00 2001 From: mgsecure <125900659+mgsecure@users.noreply.github.com> Date: Thu, 14 Nov 2024 10:24:16 -0500 Subject: [PATCH 1/5] expose individual icons in compact view --- src/entries/CollectionButton.jsx | 187 +++++++++++++++++------------ src/entries/RecordingControls.jsx | 189 ++++++++++++++++++------------ src/locks/CompactEntries.jsx | 2 +- src/misc/LoadingDisplaySmall.jsx | 56 +++++++++ 4 files changed, 285 insertions(+), 149 deletions(-) create mode 100644 src/misc/LoadingDisplaySmall.jsx diff --git a/src/entries/CollectionButton.jsx b/src/entries/CollectionButton.jsx index dc928c3cb0..7fd3c6a03d 100644 --- a/src/entries/CollectionButton.jsx +++ b/src/entries/CollectionButton.jsx @@ -17,12 +17,17 @@ import collectionOptions from '../data/collectionTypes' import useWindowSize from '../util/useWindowSize' import RecordingControls from './RecordingControls' import LoadingDisplay from '../misc/LoadingDisplay' +import LoadingDisplaySmall from '../misc/LoadingDisplaySmall' +import LockIcon from '@mui/icons-material/Lock' +import LockOpenOutlinedIcon from '@mui/icons-material/LockOpenOutlined' +import SavingsOutlinedIcon from '@mui/icons-material/SavingsOutlined' +import VideocamOutlinedIcon from '@mui/icons-material/VideocamOutlined' -function CollectionButton({id, dense}) { +function CollectionButton({id, dense, exposed}) { const {isLoggedIn} = useContext(AuthContext) const {lockCollection, addToLockCollection, removeFromLockCollection} = useContext(DBContext) const [anchorEl, setAnchorEl] = useState(null) - const [checkboxUpdating, setCheckboxUpdating] = useState(false) + const [checkboxUpdating, setCheckboxUpdating] = useState(null) const open = Boolean(anchorEl) const handleOpen = useCallback(event => setAnchorEl(event.currentTarget), []) const handleClose = useCallback(() => setAnchorEl(null), []) @@ -31,91 +36,123 @@ function CollectionButton({id, dense}) { const collected = collectionOptions.locks.getCollected(lockCollection)?.includes(id) const isChecked = useCallback(key => !!lockCollection[key] && !!lockCollection[key].includes(id), [id, lockCollection]) - const handleChange = useCallback(key => async (event, checked) => { + const handleChange = useCallback((key, collected) => async (event, checked) => { + console.log('handleChange', collected) event.preventDefault() - setCheckboxUpdating(true) - if (checked) { + setCheckboxUpdating(key) + if (checked || !collected) { await addToLockCollection(key, id) } else { await removeFromLockCollection(key, id) } - setCheckboxUpdating(false) + setCheckboxUpdating(null) }, [id, addToLockCollection, removeFromLockCollection]) + // + + const listIcons = { + own: , + picked: , + wishlist: , + recordedLocks: + } + return ( - - { - dense - ? - - - : - } - - - - - - {checkboxUpdating ? - - : - - - {collectionOptions.locks.map.filter(c => c.entry === 'checkbox').map(({key, label}) => - - } - label={label} - /> - )} - + + )} + + + } + {!exposed && + + + { + dense + ? + + + : + } + + + + + + {checkboxUpdating ? + + : + + + {collectionOptions.locks.map.filter(c => c.entry === 'checkbox') + .map(({key, label}) => + + } + label={label} + /> + )} + - {isLoggedIn && - + {isLoggedIn && + + } + } - - } - -
- -
- - + +
+ +
+ + + + } ) } diff --git a/src/entries/RecordingControls.jsx b/src/entries/RecordingControls.jsx index b4b8c11235..458ef873d3 100644 --- a/src/entries/RecordingControls.jsx +++ b/src/entries/RecordingControls.jsx @@ -14,8 +14,10 @@ import CardHeader from '@mui/material/CardHeader' import CardContent from '@mui/material/CardContent' import HighlightOffIcon from '@mui/icons-material/HighlightOff' import ScoringContext from '../context/ScoringContext.jsx' +import VideocamOutlinedIcon from '@mui/icons-material/VideocamOutlined' + +function RecordingControls({lockId, dense}) { -function RecordingControls({lockId}) { const {isLoggedIn} = useContext(AuthContext) const [editRecId, setEditRecId] = useState(null) const {scoredActivity} = useContext(ScoringContext) @@ -27,6 +29,7 @@ function RecordingControls({lockId}) { }) const handleOverlayOpen = useCallback(id => { + console.log('handleOverlayOpen', id) setEditRecId(id) }, []) @@ -35,79 +38,66 @@ function RecordingControls({lockId}) { }, []) return ( - { - recordings.map((rec, index) => { - return ( -
- - {index===0 && - - 0} - onChange={() => handleOverlayOpen(rec.id)} - /> - } - label={'Scorecard'} - /> - - } - {index > 0 && -
Duplicate
- } - handleOverlayOpen(rec.id)}> - - - - - theme.zIndex.drawer + 1}} - open={editRecId === rec.id} onClick={null} - > - - } style={{paddingBottom: 0}} onClick={handleOverlayClose}/> - - - - - + -
- ) - - }).concat([ - recordings.length === 0 && -
- setEditRecId(0)}> - - 0} - onClick={() => handleOverlayOpen(0)} - /> + {recordings.map((rec, index) => { + return ( +
+ + {index === 0 && + + {dense && + + {recordings.map((rec, index) => { + return ( +
+ {index === 0 && + handleOverlayOpen(rec.id)} + style={{color: '#18aa18', padding:4}}> + + + } +
+ ) + } + )} + } - label={'Scorecard'} - /> - + {!dense && + + 0} + onChange={() => handleOverlayOpen(rec.id)} + /> + } + label={'Scorecard'} + /> + + } + + + } + {index > 0 && +
Duplicate
+ } + {!dense && + + handleOverlayOpen(rec.id)}> + + + + + } theme.zIndex.drawer + 1}} - open={editRecId === 0} onClick={null} + open={editRecId === rec.id} onClick={null} > } - style={{paddingBottom: 0}} - onClick={handleOverlayClose}/> + action={} + style={{paddingBottom: 0}} onClick={handleOverlayClose}/> - +
+ ) + + }).concat([ + recordings.length === 0 && +
+ {dense && +
+ handleOverlayOpen(0)} style={{padding:4}}> + + +
+ } + {!dense && + setEditRecId(0)}> + + 0} + onClick={() => handleOverlayOpen(0)} + /> + } + label={'Scorecard'} + /> + + + } + theme.zIndex.drawer + 1}} + open={editRecId === 0} onClick={null} + > + + } + style={{paddingBottom: 0}} + onClick={handleOverlayClose}/> + + + + + + +
])} ) diff --git a/src/locks/CompactEntries.jsx b/src/locks/CompactEntries.jsx index 9e66c46e1b..6fa96b2b1e 100644 --- a/src/locks/CompactEntries.jsx +++ b/src/locks/CompactEntries.jsx @@ -29,7 +29,7 @@ function CompactEntries({entries}) { /> - + )} diff --git a/src/misc/LoadingDisplaySmall.jsx b/src/misc/LoadingDisplaySmall.jsx new file mode 100644 index 0000000000..ffc8053f17 --- /dev/null +++ b/src/misc/LoadingDisplaySmall.jsx @@ -0,0 +1,56 @@ +import React from 'react' +import CircularProgress from '@mui/material/CircularProgress' +import Box from '@mui/material/Box' +import {circularProgressClasses} from '@mui/material' + +function LoadingDisplaySmall() { + return ( + +
+
+ + + theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800] + }} + size={22} + thickness={5} + value={100} + /> + (theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8'), + animationDuration: '550ms', + position: 'absolute', + left: 0, + [`& .${circularProgressClasses.circle}`]: { + strokeLinecap: 'round' + } + }} + size={22} + thickness={5} + /> + +
+
+ + ) +} + +export default LoadingDisplaySmall From f0af75ec8040d18ff0638ba323f11316a549aa18 Mon Sep 17 00:00:00 2001 From: mgsecure <125900659+mgsecure@users.noreply.github.com> Date: Sun, 17 Nov 2024 07:56:41 -0500 Subject: [PATCH 2/5] Expose collection icons in Compact view --- src/entries/CollectionButton.jsx | 17 ++--- src/entries/RecordingControls.jsx | 122 +++++++++++++++--------------- src/locks/CompactEntries.jsx | 9 +-- 3 files changed, 74 insertions(+), 74 deletions(-) diff --git a/src/entries/CollectionButton.jsx b/src/entries/CollectionButton.jsx index 7fd3c6a03d..1d39f742fd 100644 --- a/src/entries/CollectionButton.jsx +++ b/src/entries/CollectionButton.jsx @@ -26,7 +26,7 @@ import VideocamOutlinedIcon from '@mui/icons-material/VideocamOutlined' function CollectionButton({id, dense, exposed}) { const {isLoggedIn} = useContext(AuthContext) const {lockCollection, addToLockCollection, removeFromLockCollection} = useContext(DBContext) - const [anchorEl, setAnchorEl] = useState(null) + const [anchorEl, setAnchorEl] = useState(() => undefined) const [checkboxUpdating, setCheckboxUpdating] = useState(null) const open = Boolean(anchorEl) const handleOpen = useCallback(event => setAnchorEl(event.currentTarget), []) @@ -48,18 +48,17 @@ function CollectionButton({id, dense, exposed}) { setCheckboxUpdating(null) }, [id, addToLockCollection, removeFromLockCollection]) - // - const listIcons = { - own: , - picked: , - wishlist: , - recordedLocks: + own: , + picked: , + wishlist: , + recordedLocks: } + const iconPadding = isMobile ? 5 : 7 + return ( - {exposed && isLoggedIn &&
{collectionOptions.locks.map.filter(c => c.entry === 'checkbox').map(({key}) => @@ -67,7 +66,7 @@ function CollectionButton({id, dense, exposed}) { {checkboxUpdating === key ? : + style={{color: isChecked(key) ? '#18aa18' : undefined, padding: iconPadding}}> {listIcons[key]} } diff --git a/src/entries/RecordingControls.jsx b/src/entries/RecordingControls.jsx index 458ef873d3..4dba71d52e 100644 --- a/src/entries/RecordingControls.jsx +++ b/src/entries/RecordingControls.jsx @@ -15,12 +15,14 @@ import CardContent from '@mui/material/CardContent' import HighlightOffIcon from '@mui/icons-material/HighlightOff' import ScoringContext from '../context/ScoringContext.jsx' import VideocamOutlinedIcon from '@mui/icons-material/VideocamOutlined' +import useWindowSize from '../util/useWindowSize.jsx' function RecordingControls({lockId, dense}) { const {isLoggedIn} = useContext(AuthContext) const [editRecId, setEditRecId] = useState(null) const {scoredActivity} = useContext(ScoringContext) + const {isMobile} = useWindowSize() const recordings = scoredActivity .filter(evid => evid.matchId === lockId) @@ -53,8 +55,8 @@ function RecordingControls({lockId, dense}) {
{index === 0 && handleOverlayOpen(rec.id)} - style={{color: '#18aa18', padding:4}}> - + style={{color: '#18aa18', padding: isMobile ? 5 : 7}}> + }
@@ -95,9 +97,63 @@ function RecordingControls({lockId, dense}) { } + {editRecId === rec.id && + theme.zIndex.drawer + 1}} + open={editRecId === rec.id} onClick={null} + > + + } + style={{paddingBottom: 0}} onClick={handleOverlayClose}/> + + + + + + } +
+ ) + + }).concat([ + recordings.length === 0 && +
+ {dense && +
+ handleOverlayOpen(0)} style={{padding: isMobile ? 5 : 7}}> + + +
+ } + {!dense && + setEditRecId(0)}> + + 0} + onClick={() => handleOverlayOpen(0)} + /> + } + label={'Scorecard'} + /> + + + } + {editRecId === 0 && theme.zIndex.drawer + 1}} - open={editRecId === rec.id} onClick={null} + open={editRecId === 0} onClick={null} > } - style={{paddingBottom: 0}} onClick={handleOverlayClose}/> + style={{paddingBottom: 0}} + onClick={handleOverlayClose}/> - + - -
- ) - - }).concat([ - recordings.length === 0 && -
- {dense && -
- handleOverlayOpen(0)} style={{padding:4}}> - - -
} - {!dense && - setEditRecId(0)}> - - 0} - onClick={() => handleOverlayOpen(0)} - /> - } - label={'Scorecard'} - /> - - - } - theme.zIndex.drawer + 1}} - open={editRecId === 0} onClick={null} - > - - } - style={{paddingBottom: 0}} - onClick={handleOverlayClose}/> - - - - - -
])} diff --git a/src/locks/CompactEntries.jsx b/src/locks/CompactEntries.jsx index 6fa96b2b1e..5ed246f037 100644 --- a/src/locks/CompactEntries.jsx +++ b/src/locks/CompactEntries.jsx @@ -1,9 +1,8 @@ +import React from 'react' import Card from '@mui/material/Card' import List from '@mui/material/List' import ListItem from '@mui/material/ListItem' -import ListItemIcon from '@mui/material/ListItemIcon' import ListItemText from '@mui/material/ListItemText' -import React from 'react' import BeltStripe from '../entries/BeltStripe' import CollectionButton from '../entries/CollectionButton' import entryName from '../entries/entryName' @@ -11,6 +10,7 @@ import Divider from '@mui/material/Divider' import Tracker from '../app/Tracker.jsx' function CompactEntries({entries}) { + return ( @@ -27,10 +27,7 @@ function CompactEntries({entries}) { secondary={entry.version} style={{padding: '0px 0px 0px 10px'}} /> - - - - + )} From 78eaefdeb5524de33dc41b3ecc30eb011e242ad1 Mon Sep 17 00:00:00 2001 From: mgsecure <125900659+mgsecure@users.noreply.github.com> Date: Sun, 17 Nov 2024 08:02:45 -0500 Subject: [PATCH 3/5] Remove console.log --- src/admin/systemMessageAdmin/SystemMessageForm.jsx | 1 - src/entries/CollectionButton.jsx | 1 - src/entries/RecordingControls.jsx | 1 - src/scorecard/ImportPreview.jsx | 1 - src/scorecard/ImportPreviewDisplay.jsx | 2 -- 5 files changed, 6 deletions(-) diff --git a/src/admin/systemMessageAdmin/SystemMessageForm.jsx b/src/admin/systemMessageAdmin/SystemMessageForm.jsx index c6319bb04e..02f5cc5396 100644 --- a/src/admin/systemMessageAdmin/SystemMessageForm.jsx +++ b/src/admin/systemMessageAdmin/SystemMessageForm.jsx @@ -229,7 +229,6 @@ export default function SystemMessageForm({message, temp, setTemp, updated, setU color='secondary' onChange={e => { const idArray = e.target.value.split(',') - console.log('idArray', idArray) setTemp({...temp, pageIds: idArray}) setUpdated(true) }} diff --git a/src/entries/CollectionButton.jsx b/src/entries/CollectionButton.jsx index 1d39f742fd..4c4636be09 100644 --- a/src/entries/CollectionButton.jsx +++ b/src/entries/CollectionButton.jsx @@ -37,7 +37,6 @@ function CollectionButton({id, dense, exposed}) { const isChecked = useCallback(key => !!lockCollection[key] && !!lockCollection[key].includes(id), [id, lockCollection]) const handleChange = useCallback((key, collected) => async (event, checked) => { - console.log('handleChange', collected) event.preventDefault() setCheckboxUpdating(key) if (checked || !collected) { diff --git a/src/entries/RecordingControls.jsx b/src/entries/RecordingControls.jsx index 4dba71d52e..623f32ec50 100644 --- a/src/entries/RecordingControls.jsx +++ b/src/entries/RecordingControls.jsx @@ -31,7 +31,6 @@ function RecordingControls({lockId, dense}) { }) const handleOverlayOpen = useCallback(id => { - console.log('handleOverlayOpen', id) setEditRecId(id) }, []) diff --git a/src/scorecard/ImportPreview.jsx b/src/scorecard/ImportPreview.jsx index ea3366362d..aeb9cd1be1 100644 --- a/src/scorecard/ImportPreview.jsx +++ b/src/scorecard/ImportPreview.jsx @@ -83,7 +83,6 @@ function ImportPreview({syncStatus, syncResult, service}) { return null } - console.log('syncStatus', syncStatus) return ( { const re = service === 'Reddit' From 5f7a85ebfb03dd7a866046df278220296e441bc4 Mon Sep 17 00:00:00 2001 From: mgsecure <125900659+mgsecure@users.noreply.github.com> Date: Sun, 17 Nov 2024 08:07:01 -0500 Subject: [PATCH 4/5] lint fix (unused variable) --- src/scorecard/ImportPreviewDisplay.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scorecard/ImportPreviewDisplay.jsx b/src/scorecard/ImportPreviewDisplay.jsx index 3aa17a70ff..e51f67a576 100644 --- a/src/scorecard/ImportPreviewDisplay.jsx +++ b/src/scorecard/ImportPreviewDisplay.jsx @@ -11,7 +11,7 @@ import usePageTitle from '../util/usePageTitle.jsx' import {useNavigate} from 'react-router-dom' import Link from '@mui/material/Link' -function ImportPreviewDisplay({profile, importResults, syncStatus, service}) { +function ImportPreviewDisplay({profile, importResults, service}) { usePageTitle('Import Results') const {isMobile} = useWindowSize() const navigate = useNavigate() From 5139e667340fdaf4376e7d9d18a28a31d0623f2d Mon Sep 17 00:00:00 2001 From: mgsecure <125900659+mgsecure@users.noreply.github.com> Date: Sun, 17 Nov 2024 11:20:07 -0500 Subject: [PATCH 5/5] move compact, setCompact to AppContext --- src/app/AppContext.jsx | 10 +++++++--- src/filters/SortTextButton.jsx | 3 ++- src/locks/Entries.jsx | 4 +++- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/app/AppContext.jsx b/src/app/AppContext.jsx index 56f3b5de21..59eef0c738 100644 --- a/src/app/AppContext.jsx +++ b/src/app/AppContext.jsx @@ -1,4 +1,4 @@ -import React, {useCallback, useMemo, useContext, useEffect} from 'react' +import React, {useCallback, useMemo, useContext, useEffect, useState} from 'react' import {useLocalStorage} from 'usehooks-ts' import DBContext from './DBContext' @@ -27,12 +27,16 @@ export function AppProvider({children}) { } }, [setAdmin, adminRole]) + const [compact, setCompact] = useState(false) + const value = useMemo(() => ({ beta, setBeta: handleSetBeta, admin, - setAdmin: handleSetAdmin - }), [beta, handleSetBeta, admin, handleSetAdmin]) + setAdmin: handleSetAdmin, + compact, + setCompact + }), [beta, handleSetBeta, admin, handleSetAdmin, compact, setCompact]) return ( diff --git a/src/filters/SortTextButton.jsx b/src/filters/SortTextButton.jsx index 4373e332be..1a8925c657 100644 --- a/src/filters/SortTextButton.jsx +++ b/src/filters/SortTextButton.jsx @@ -7,6 +7,7 @@ import FilterContext from '../context/FilterContext' import Divider from '@mui/material/Divider' import LockListContext from '../locks/LockListContext.jsx' import Button from '@mui/material/Button' +import AppContext from '../app/AppContext.jsx' function SortTextButton({sortValues}) { const [anchorEl, setAnchorEl] = useState(null) @@ -16,7 +17,7 @@ function SortTextButton({sortValues}) { const {filters, addFilter} = useContext(FilterContext) const {sort} = filters - const {compact, setCompact} = useContext(LockListContext) + const {compact, setCompact} = useContext(AppContext) const handleCompactClick = useCallback(value => () => { handleClose() diff --git a/src/locks/Entries.jsx b/src/locks/Entries.jsx index c3e2c7f47c..3fa7826bdd 100644 --- a/src/locks/Entries.jsx +++ b/src/locks/Entries.jsx @@ -12,9 +12,11 @@ import SlideshowButton from './SlideshowButton' import ExportButton from './ExportButton' import Footer from '../nav/Footer' import FilterContext from '../context/FilterContext.jsx' +import AppContext from '../app/AppContext.jsx' function Entries({profile}) { - const {compact, tab, expanded} = useContext(LockListContext) + const {tab, expanded} = useContext(LockListContext) + const {compact} = useContext(AppContext) const {visibleEntries = []} = useContext(DataContext) const {filterCount, isSearch} = useContext(FilterContext)