mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-03-13 06:30:01 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

add expand button to account data dev tool option

Browse source
This commit is contained in:
Ajay Bura 2024-12-18 21:30:16 +05:30
parent ef8d09e2f2
commit 061f27a302
1 changed files with 44 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/app/features/settings/developer-tools/DevelopTools.tsx
View file

@ -12,7 +12,7 @@ import {
OverlayCenter, OverlayCenter,
Modal, Modal,
Chip, Chip,
config, Button,
} from 'folds'; } from 'folds';
import { MatrixEvent } from 'matrix-js-sdk'; import { MatrixEvent } from 'matrix-js-sdk';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
@ -29,6 +29,7 @@ import { stopPropagation } from '../../../utils/keyboard';
function AccountData() { function AccountData() {
const mx = useMatrixClient(); const mx = useMatrixClient();
const [view, setView] = useState(false);
const [accountData, setAccountData] = useState(() => Array.from(mx.store.accountData.values())); const [accountData, setAccountData] = useState(() => Array.from(mx.store.accountData.values()));
const [selectedEvent, selectEvent] = useState<MatrixEvent>(); const [selectedEvent, selectEvent] = useState<MatrixEvent>();
@ -60,28 +61,49 @@ function AccountData() {
direction="Column" direction="Column"
gap="400" gap="400"
> >
<SettingTile title="Global" description="Data stored in your global account data."> <SettingTile
<Box style={{ paddingTop: config.space.S200 }} direction="Column" gap="200"> title="Global"
<Text size="L400">Types</Text> description="Data stored in your global account data."
<Box gap="200" wrap="Wrap"> after={
{accountData.map((mEvent) => ( <Button
<Chip onClick={() => setView(!view)}
key={mEvent.getType()} variant="Secondary"
variant="Secondary" fill="Soft"
fill="Soft" size="300"
radii="Pill" radii="300"
outlined outlined
onClick={handleView} before={
data-event-type={mEvent.getType()} <Icon src={view ? Icons.ChevronTop : Icons.ChevronBottom} size="100" filled />
> }
<Text size="T200" truncate> >
{mEvent.getType()} <Text size="B300">{view ? 'Collapse' : 'Expand'}</Text>
</Text> </Button>
</Chip> }
))} />
{view && (
<SettingTile>
<Box direction="Column" gap="200">
<Text size="L400">Types</Text>
<Box gap="200" wrap="Wrap">
{accountData.map((mEvent) => (
<Chip
key={mEvent.getType()}
variant="Secondary"
fill="Soft"
radii="Pill"
outlined
onClick={handleView}
data-event-type={mEvent.getType()}
>
<Text size="T200" truncate>
{mEvent.getType()}
</Text>
</Chip>
))}
</Box>
</Box> </Box>
</Box> </SettingTile>
</SettingTile> )}
</SequenceCard> </SequenceCard>
{selectedEvent && ( {selectedEvent && (
<Overlay open backdrop={<OverlayBackdrop />}> <Overlay open backdrop={<OverlayBackdrop />}>