mirror of
https://github.com/meshtastic/meshtastic.git
synced 2025-01-29 23:00:46 -08:00
Resize and transitions
This commit is contained in:
Sacha Weatherstone
parent
0ea954ba9f
commit
84fd51a5c5
|
|
@ -8,7 +8,7 @@ import {
|
|||
VictoryTheme,
|
||||
} from 'victory';
|
||||
|
||||
import { Tab } from '@headlessui/react';
|
||||
import { Tab, Transition } from '@headlessui/react';
|
||||
import type { IDevice } from '@site/src/data/device';
|
||||
|
||||
import { Modal } from '../Modal';
|
||||
|
|
@ -31,9 +31,9 @@ export const HardwareModal = ({
|
|||
return (
|
||||
<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="flex flex-col md:flex-row">
|
||||
<div className="flex aspect-[3/2] flex-col md:flex-row">
|
||||
<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
|
||||
} ${hideDetails ? 'w-full' : ''}`}
|
||||
>
|
||||
|
|
@ -82,85 +82,103 @@ export const HardwareModal = ({
|
|||
>
|
||||
<FiX className="m-auto" />
|
||||
</div>
|
||||
{hideDetails ? (
|
||||
<div className="h-7 bg-base md:h-auto md:w-7"></div>
|
||||
) : (
|
||||
<div className="w-full">
|
||||
<div className="flex shadow-md md:pb-2">
|
||||
<VariantSelectButton options={device.variants} />
|
||||
</div>
|
||||
<div className="bg-base p-2 md:p-4">
|
||||
<Tab.Group as="div" className="rounded-2xl bg-primary p-2">
|
||||
<Tab.List className="flex gap-2">
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
||||
selected ? 'bg-secondary shadow-md' : ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
Info
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
||||
selected ? 'bg-secondary shadow-md' : ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
Power
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
||||
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] }}
|
||||
<div
|
||||
className={`transition-[width] duration-100 ease-linear ${
|
||||
hideDetails ? 'h-7 bg-base md:h-auto md:w-7' : 'w-full'
|
||||
}`}
|
||||
>
|
||||
<Transition
|
||||
appear
|
||||
as={'div'}
|
||||
className="flex h-full flex-col"
|
||||
show={!hideDetails}
|
||||
enter="ease-out duration-100 delay-100"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-100 delay-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<>
|
||||
<div className="flex shadow-md md:pb-2">
|
||||
<VariantSelectButton options={device.variants} />
|
||||
</div>
|
||||
<div className="flex h-full bg-base p-2 md:p-4">
|
||||
<Tab.Group
|
||||
as="div"
|
||||
className="flex-grow rounded-2xl bg-primary p-2"
|
||||
>
|
||||
<Tab.List className="flex gap-2">
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
||||
selected ? 'bg-secondary shadow-md' : ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
<VictoryPolarAxis
|
||||
dependentAxis
|
||||
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>
|
||||
</div>
|
||||
)}
|
||||
Info
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
||||
selected ? 'bg-secondary shadow-md' : ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
Power
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
||||
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
|
||||
dependentAxis
|
||||
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>
|
||||
</Modal>
|
||||
|
|
|
|||
Loading…
Reference in a new issue