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

28
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,8 +61,28 @@ 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"
description="Data stored in your global account data."
after={
<Button
onClick={() => setView(!view)}
variant="Secondary"
fill="Soft"
size="300"
radii="300"
outlined
before={
<Icon src={view ? Icons.ChevronTop : Icons.ChevronBottom} size="100" filled />
}
>
<Text size="B300">{view ? 'Collapse' : 'Expand'}</Text>
</Button>
}
/>
{view && (
<SettingTile>
<Box direction="Column" gap="200">
<Text size="L400">Types</Text> <Text size="L400">Types</Text>
<Box gap="200" wrap="Wrap"> <Box gap="200" wrap="Wrap">
{accountData.map((mEvent) => ( {accountData.map((mEvent) => (
@ -82,6 +103,7 @@ function AccountData() {
</Box> </Box>
</Box> </Box>
</SettingTile> </SettingTile>
)}
</SequenceCard> </SequenceCard>
{selectedEvent && ( {selectedEvent && (
<Overlay open backdrop={<OverlayBackdrop />}> <Overlay open backdrop={<OverlayBackdrop />}>