mudhorn/meshtastic
1
0
Fork 0
mirror of https://github.com/meshtastic/meshtastic.git synced 2025-03-05 21:00:08 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Resize and transitions

Browse source
This commit is contained in:
Sacha Weatherstone 2022-04-03 02:20:59 +11:00
parent 0ea954ba9f
commit 84fd51a5c5
1 changed files with 99 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

180
src/components/hardware/HardwareModal.tsx
View file

@ -8,7 +8,7 @@ import {
VictoryTheme, VictoryTheme,
} from 'victory'; } from 'victory';
import { Tab } from '@headlessui/react'; import { Tab, Transition } from '@headlessui/react';
import type { IDevice } from '@site/src/data/device'; import type { IDevice } from '@site/src/data/device';
import { Modal } from '../Modal'; import { Modal } from '../Modal';
@ -31,9 +31,9 @@ export const HardwareModal = ({
return ( return (
<Modal open={open} onClose={close}> <Modal open={open} onClose={close}>
<div className="inline-block w-full max-w-md transform overflow-hidden rounded-2xl bg-base text-left align-middle transition-all md:max-w-2xl md:bg-primary lg:max-w-4xl xl:max-w-6xl"> <div className="inline-block w-full max-w-md transform overflow-hidden rounded-2xl bg-base text-left align-middle transition-all md:max-w-2xl md:bg-primary lg:max-w-4xl xl:max-w-6xl">
<div className="flex flex-col md:flex-row"> <div className="flex aspect-[3/2] flex-col md:flex-row">
<div <div
className={`relative flex aspect-[2/1] rounded-t-2xl bg-gradient-to-r md:rounded-l-2xl md:rounded-tr-none ${ className={`relative flex h-full rounded-t-2xl bg-gradient-to-r md:rounded-l-2xl md:rounded-tr-none ${
device.misc.Gradient device.misc.Gradient
} ${hideDetails ? 'w-full' : ''}`} } ${hideDetails ? 'w-full' : ''}`}
> >
@ -82,85 +82,103 @@ export const HardwareModal = ({
> >
<FiX className="m-auto" /> <FiX className="m-auto" />
</div> </div>
{hideDetails ? ( <div
<div className="h-7 bg-base md:h-auto md:w-7"></div> className={`transition-[width] duration-100 ease-linear ${
) : ( hideDetails ? 'h-7 bg-base md:h-auto md:w-7' : 'w-full'
<div className="w-full"> }`}
<div className="flex shadow-md md:pb-2"> >
<VariantSelectButton options={device.variants} /> <Transition
</div> appear
<div className="bg-base p-2 md:p-4"> as={'div'}
<Tab.Group as="div" className="rounded-2xl bg-primary p-2"> className="flex h-full flex-col"
<Tab.List className="flex gap-2"> show={!hideDetails}
<Tab enter="ease-out duration-100 delay-100"
className={({ selected }) => enterFrom="opacity-0"
`w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${ enterTo="opacity-100"
selected ? 'bg-secondary shadow-md' : '' leave="ease-in duration-100 delay-100"
}` leaveFrom="opacity-100"
} leaveTo="opacity-0"
> >
Info <>
</Tab> <div className="flex shadow-md md:pb-2">
<Tab <VariantSelectButton options={device.variants} />
className={({ selected }) => </div>
`w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${ <div className="flex h-full bg-base p-2 md:p-4">
selected ? 'bg-secondary shadow-md' : '' <Tab.Group
}` as="div"
} className="flex-grow rounded-2xl bg-primary p-2"
> >
Power <Tab.List className="flex gap-2">
</Tab> <Tab
<Tab className={({ selected }) =>
className={({ selected }) => `w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
`w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${ selected ? 'bg-secondary shadow-md' : ''
selected ? 'bg-secondary shadow-md' : '' }`
}` }
}
>
Pinout
</Tab>
</Tab.List>
<Tab.Panels as="div" className="">
<Tab.Panel className="h-32">Content 1</Tab.Panel>
<Tab.Panel className="h-96">
<VictoryChart
polar
theme={VictoryTheme.material}
domain={{ y: [0, 10] }}
> >
<VictoryPolarAxis Info
dependentAxis </Tab>
style={{ axis: { stroke: 'none' } }} <Tab
tickFormat={() => ''} className={({ selected }) =>
/> `w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
<VictoryPolarAxis selected ? 'bg-secondary shadow-md' : ''
tickValues={[ }`
0, }
Math.PI / 2, >
Math.PI, Power
(3 * Math.PI) / 2, </Tab>
]} <Tab
tickFormat={['2π', 'π/2', 'π', '3π/2']} className={({ selected }) =>
labelPlacement="vertical" `w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
/> selected ? 'bg-secondary shadow-md' : ''
{[5, 4, 3, 2, 1].map((val, i) => { }`
return ( }
<VictoryLine >
key={i} Pinout
samples={100} </Tab>
style={{ data: { stroke: colors[i] } }} </Tab.List>
y={(d) => val * (1 - Math.cos(d.x))} <Tab.Panels as="div" className="">
/> <Tab.Panel className="h-32">Content 1</Tab.Panel>
); <Tab.Panel className="h-96">
})} <VictoryChart
</VictoryChart> polar
</Tab.Panel> theme={VictoryTheme.material}
<Tab.Panel>Content 3</Tab.Panel> domain={{ y: [0, 10] }}
</Tab.Panels> >
</Tab.Group> <VictoryPolarAxis
</div> dependentAxis
</div> style={{ axis: { stroke: 'none' } }}
)} tickFormat={() => ''}
/>
<VictoryPolarAxis
tickValues={[
0,
Math.PI / 2,
Math.PI,
(3 * Math.PI) / 2,
]}
tickFormat={['2π', 'π/2', 'π', '3π/2']}
labelPlacement="vertical"
/>
{[5, 4, 3, 2, 1].map((val, i) => {
return (
<VictoryLine
key={i}
samples={100}
style={{ data: { stroke: colors[i] } }}
y={(d) => val * (1 - Math.cos(d.x))}
/>
);
})}
</VictoryChart>
</Tab.Panel>
<Tab.Panel>Content 3</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
</>
</Transition>
</div>
</div> </div>
</div> </div>
</Modal> </Modal>