mirror of
https://github.com/tloncorp/landscape.git
synced 2024-11-28 12:14:31 +03:00
Switch from popover to dropdown
This commit is contained in:
Patrick O'Sullivan
parent
0afbcc4478
commit
a189c1a5ff
1488
ui/package-lock.json
generated
1488
ui/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -17,8 +17,8 @@
|
||||
"dependencies": {
|
||||
"@fingerprintjs/fingerprintjs": "^3.3.3",
|
||||
"@radix-ui/react-checkbox": "^0.1.5",
|
||||
"@radix-ui/react-dialog": "^0.0.20",
|
||||
"@radix-ui/react-dropdown-menu": "^0.0.23",
|
||||
"@radix-ui/react-dialog": "^1.0.2",
|
||||
"@radix-ui/react-dropdown-menu": "^2.0.1",
|
||||
"@radix-ui/react-icons": "^1.1.0",
|
||||
"@radix-ui/react-polymorphic": "^0.0.13",
|
||||
"@radix-ui/react-popover": "^1.0.3",
|
||||
|
||||
@ -3,49 +3,52 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
|
||||
import type * as Polymorphic from '@radix-ui/react-polymorphic';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export const Dialog: FC<DialogPrimitive.DialogOwnProps> = ({ children, ...props }) => {
|
||||
export const Dialog: FC<DialogPrimitive.DialogProps> = ({
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<DialogPrimitive.Root {...props}>
|
||||
<DialogPrimitive.Overlay className="fixed top-0 bottom-0 left-0 right-0 z-30 bg-black opacity-30 transform transform-gpu" />
|
||||
<DialogPrimitive.Overlay className="fixed top-0 bottom-0 left-0 right-0 z-30 transform-gpu bg-black opacity-30" />
|
||||
{children}
|
||||
</DialogPrimitive.Root>
|
||||
);
|
||||
};
|
||||
|
||||
type DialogContentComponent = Polymorphic.ForwardRefComponent<
|
||||
Polymorphic.IntrinsicElement<typeof DialogPrimitive.Content>,
|
||||
Polymorphic.OwnProps<typeof DialogPrimitive.Content> & {
|
||||
containerClass?: string;
|
||||
showClose?: boolean;
|
||||
}
|
||||
>;
|
||||
interface DialogContentProps extends DialogPrimitive.DialogContentProps {
|
||||
containerClass?: string;
|
||||
showClose?: boolean;
|
||||
}
|
||||
|
||||
export const DialogContent = React.forwardRef(
|
||||
({ showClose = true, containerClass, children, className, ...props }, forwardedRef) => (
|
||||
<DialogPrimitive.Content
|
||||
as="section"
|
||||
className={classNames('dialog-container', containerClass)}
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
>
|
||||
<div className={classNames('dialog', className)}>
|
||||
{children}
|
||||
{showClose && (
|
||||
<DialogPrimitive.Close className="absolute top-4 right-4 sm:top-7 sm:right-7 p-2 bg-gray-100 rounded-full default-ring">
|
||||
<svg
|
||||
className="w-3.5 h-3.5 stroke-current text-gray-500"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M4 4L20 20" strokeWidth="3" strokeLinecap="round" />
|
||||
<path d="M20 4L4 20" strokeWidth="3" strokeLinecap="round" />
|
||||
</svg>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</div>
|
||||
export const DialogContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
DialogContentProps
|
||||
>(
|
||||
(
|
||||
{ showClose = true, containerClass, children, className, ...props },
|
||||
forwardedRef
|
||||
) => (
|
||||
<DialogPrimitive.Content asChild {...props} ref={forwardedRef}>
|
||||
<section className={classNames('dialog-container', containerClass)}>
|
||||
<div className={classNames('dialog', className)}>
|
||||
{children}
|
||||
{showClose && (
|
||||
<DialogPrimitive.Close className="default-ring absolute top-4 right-4 rounded-full bg-gray-100 p-2 sm:top-7 sm:right-7">
|
||||
<svg
|
||||
className="h-3.5 w-3.5 stroke-current text-gray-500"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M4 4L20 20" strokeWidth="3" strokeLinecap="round" />
|
||||
<path d="M20 4L4 20" strokeWidth="3" strokeLinecap="round" />
|
||||
</svg>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</DialogPrimitive.Content>
|
||||
)
|
||||
) as DialogContentComponent;
|
||||
);
|
||||
|
||||
export const DialogTrigger = DialogPrimitive.Trigger;
|
||||
export const DialogClose = DialogPrimitive.Close;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import * as Popover from '@radix-ui/react-popover';
|
||||
import { setCalmSetting, SettingsState } from '../state/settings';
|
||||
import * as Dropdown from '@radix-ui/react-dropdown-menu';
|
||||
import { setCalmSetting } from '../state/settings';
|
||||
import { Dialog, DialogContent } from './Dialog';
|
||||
import { Button } from './Button';
|
||||
import { useCharges } from '../state/docket';
|
||||
@ -109,7 +109,7 @@ function LandscapeDescription() {
|
||||
/>
|
||||
<AppLink
|
||||
title="Terminal"
|
||||
description="Build or join Urbit-based communities"
|
||||
description="Pop open the hood of your urbit"
|
||||
link="/apps/webterm"
|
||||
image={charges.webterm?.image || ''}
|
||||
color={charges.webterm?.color || 'bg-black'}
|
||||
@ -155,50 +155,64 @@ export default function LandscapeWayfinding() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover.Root>
|
||||
<Dropdown.Root>
|
||||
<div className="absolute left-4 bottom-16 z-50">
|
||||
<Popover.Trigger className="relative" asChild>
|
||||
<Dropdown.Trigger className="relative" asChild>
|
||||
<button className="h-9 w-9 cursor-pointer rounded-lg bg-black text-xl text-white">
|
||||
?
|
||||
</button>
|
||||
</Popover.Trigger>
|
||||
<Popover.Content
|
||||
</Dropdown.Trigger>
|
||||
<Dropdown.Content
|
||||
side="bottom"
|
||||
sideOffset={8}
|
||||
className="mx-4 flex w-[208px] flex-col space-y-4 rounded-lg bg-white p-4 text-sm font-semibold text-black drop-shadow-lg"
|
||||
className="new-dropdown mx-4 flex w-[208px] flex-col space-y-2 rounded-lg bg-white p-4 text-sm font-semibold text-black drop-shadow-lg"
|
||||
>
|
||||
<span
|
||||
onClick={() => setShowModal(true)}
|
||||
className="cursor-pointer text-blue"
|
||||
>
|
||||
Basic Wayfinding
|
||||
</span>
|
||||
<hr className="my-2 border-[1px] border-gray-50" />
|
||||
<a
|
||||
className="no-underline"
|
||||
href="/apps/groups/groups/~nibset-napwyn/tlon"
|
||||
target="_blank"
|
||||
>
|
||||
Help & Support
|
||||
</a>
|
||||
<a
|
||||
className="no-underline"
|
||||
href="https://airtable.com/shrflFkf5UyDFKhmW"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Submit Feedback
|
||||
</a>
|
||||
<span className="cursor-pointer" onClick={handleHide}>
|
||||
Hide This Button
|
||||
</span>
|
||||
</Popover.Content>
|
||||
<Dropdown.Item asChild className="new-dropdown-item p-2">
|
||||
<span
|
||||
onClick={() => setShowModal(true)}
|
||||
className="cursor-pointer text-blue"
|
||||
>
|
||||
Basic Wayfinding
|
||||
</span>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Separator asChild>
|
||||
<hr className="my-2 border-[1px] border-gray-50" />
|
||||
</Dropdown.Separator>
|
||||
<Dropdown.Item asChild className="new-dropdown-item p-2">
|
||||
<a
|
||||
className="no-underline"
|
||||
href="/apps/groups/groups/~nibset-napwyn/tlon"
|
||||
target="_blank"
|
||||
>
|
||||
Help & Support
|
||||
</a>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item asChild className="new-dropdown-item p-2">
|
||||
<a
|
||||
className="no-underline"
|
||||
href="https://airtable.com/shrflFkf5UyDFKhmW"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Submit Feedback
|
||||
</a>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item asChild className="new-dropdown-item p-2">
|
||||
<span className="cursor-pointer" onClick={handleHide}>
|
||||
Hide This Button
|
||||
</span>
|
||||
</Dropdown.Item>
|
||||
</Dropdown.Content>
|
||||
</div>
|
||||
<Dialog open={showModal} onOpenChange={() => setShowModal(false)}>
|
||||
<DialogContent showClose={false}>
|
||||
<DialogContent
|
||||
// onOpenAutoFocus={(e) => e.preventDefault()}
|
||||
showClose={false}
|
||||
containerClass="focus:outline-none"
|
||||
>
|
||||
<LandscapeDescription />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Popover.Root>
|
||||
</Dropdown.Root>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user