Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-08 06:02:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

popover

Browse source
This commit is contained in:
nikec 2023-01-24 23:54:01 +01:00
parent a90cc42385
commit cd3b95bc3d
6 changed files with 123 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/interface/src/components/jobs/JobManager.tsx
View file

@ -3,11 +3,9 @@ import dayjs from 'dayjs';
import {
ArrowsClockwise,
Camera,
DotsThree,
Eye,
Fingerprint,
Folder,
IconProps,
LockSimple,
LockSimpleOpen,
Pause,
@ -16,9 +14,8 @@ import {
TrashSimple,
X
} from 'phosphor-react';
import { useLibraryMutation, useLibraryQuery } from '@sd/client';
import { JobReport } from '@sd/client';
import { Button, CategoryHeading, tw } from '@sd/ui';
import { JobReport, useLibraryMutation, useLibraryQuery } from '@sd/client';
import { Button, CategoryHeading, PopoverClose, tw } from '@sd/ui';
import ProgressBar from '../primitive/ProgressBar';
import { Tooltip } from '../tooltip/Tooltip';
@ -103,11 +100,13 @@ export function JobsManager() {
<Trash className="w-5 h-5" />
</Tooltip>
</Button>
<Button size="icon">
<Tooltip label="Close">
<X className="w-5 h-5" />
</Tooltip>
</Button>
<PopoverClose asChild>
<Button size="icon">
<Tooltip label="Close">
<X className="w-5 h-5" />
</Tooltip>
</Button>
</PopoverClose>
</HeaderContainer>
<div className="h-full mr-1 overflow-x-hidden custom-scroll inspector-scroll">
<div className="">

8
packages/interface/src/components/layout/Sidebar.tsx
View file

@ -19,6 +19,7 @@ import {
Dropdown,
Loader,
OverlayPanel,
Popover,
Select,
SelectOption,
Switch,
@ -132,14 +133,13 @@ export function Sidebar() {
<Gear className="w-5 h-5" />
</Tooltip>
</ButtonLink>
<OverlayPanel
transformOrigin="bottom left"
disabled={!library}
<Popover
trigger={
<Button
size="icon"
variant="outline"
className="radix-state-open:bg-sidebar-selected/50 text-ink-faint ring-offset-sidebar"
disabled={!library}
>
{library && (
<Tooltip label="Recent Jobs">
@ -152,7 +152,7 @@ export function Sidebar() {
<div className="block w-[430px] h-96">
<JobsManager />
</div>
</OverlayPanel>
</Popover>
</div>
{debugState.enabled && <DebugPanel />}
</SidebarFooter>

1
packages/ui/package.json
View file

@ -25,6 +25,7 @@
"@radix-ui/react-context-menu": "^1.0.0",
"@radix-ui/react-dialog": "^1.0.0",
"@radix-ui/react-dropdown-menu": "^1.0.0",
"@radix-ui/react-popover": "^1.0.3",
"@radix-ui/react-select": "^1.1.2",
"@radix-ui/react-switch": "^1.0.1",
"@radix-ui/react-tabs": "^1.0.1",

31
packages/ui/src/Popover.tsx Normal file
View file

@ -0,0 +1,31 @@
import * as DP from '@radix-ui/react-popover';
import clsx from 'clsx';
import { PropsWithChildren, ReactNode } from 'react';
interface Props extends PropsWithChildren, DP.PopoverContentProps {
trigger: ReactNode;
}
export const Popover = ({ trigger, children, className, ...props }: Props) => {
return (
<DP.Root>
<DP.Trigger asChild>{trigger}</DP.Trigger>
<DP.Portal>
<DP.Content
align="center"
sideOffset={4}
collisionPadding={10}
className={clsx(
'rounded-lg text-sm text-ink select-none cursor-default bg-app-overlay border border-app-line shadow-2xl shadow-black/60',
className
)}
{...props}
>
{children}
</DP.Content>
</DP.Portal>
</DP.Root>
);
};
export * from '@radix-ui/react-popover';

17
packages/ui/src/index.ts
View file

@ -1,16 +1,17 @@
export { cva, cx } from 'class-variance-authority';
export * from './Button';
export * as Dropdown from './Dropdown';
export * from './Dialog';
export * from './Loader';
export * from './Layout';
export * from './CheckBox';
export * as ContextMenu from './ContextMenu';
export * from './OverlayPanel';
export * from './Dialog';
export * as Dropdown from './Dropdown';
export * from './Input';
export * from './Layout';
export * from './Loader';
export * from './OverlayPanel';
export * from './Popover';
export * from './Select';
export * from './Switch';
export * as Tabs from './Tabs';
export * from './Typography';
export * from './utils';
export * from './CheckBox';
export * as forms from './forms';
export { cva, cx } from 'class-variance-authority';
export * from './utils';

74
pnpm-lock.yaml
View file

@ -527,6 +527,7 @@ importers:
'@radix-ui/react-context-menu': ^1.0.0
'@radix-ui/react-dialog': ^1.0.0
'@radix-ui/react-dropdown-menu': ^1.0.0
'@radix-ui/react-popover': ^1.0.3
'@radix-ui/react-select': ^1.1.2
'@radix-ui/react-switch': ^1.0.1
'@radix-ui/react-tabs': ^1.0.1
@ -574,6 +575,7 @@ importers:
'@radix-ui/react-context-menu': 1.0.0_5ndqzdd6t4rivxsukjv3i3ak2q
'@radix-ui/react-dialog': 1.0.2_5ndqzdd6t4rivxsukjv3i3ak2q
'@radix-ui/react-dropdown-menu': 1.0.0_5ndqzdd6t4rivxsukjv3i3ak2q
'@radix-ui/react-popover': 1.0.3_5ndqzdd6t4rivxsukjv3i3ak2q
'@radix-ui/react-select': 1.2.0_5ndqzdd6t4rivxsukjv3i3ak2q
'@radix-ui/react-switch': 1.0.1_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-tabs': 1.0.2_biqbaboplfbrettd7655fr4n2y
@ -615,7 +617,7 @@ importers:
storybook: 6.5.15_o4scbtliisanygemawej7x2d6i
storybook-tailwind-dark-mode: 1.0.15_biqbaboplfbrettd7655fr4n2y
style-loader: 3.3.1
tailwindcss: 3.2.4
tailwindcss: 3.2.4_postcss@8.4.21
typescript: 4.9.4
packages:
@ -4044,7 +4046,7 @@ packages:
peerDependencies:
tailwindcss: ^3.0
dependencies:
tailwindcss: 3.2.4
tailwindcss: 3.2.4_postcss@8.4.21
dev: false
/@hookform/resolvers/2.9.10_react-hook-form@7.42.1:
@ -4649,6 +4651,34 @@ packages:
- '@types/react'
dev: false
/@radix-ui/react-popover/1.0.3_5ndqzdd6t4rivxsukjv3i3ak2q:
resolution: {integrity: sha512-YwedSukfWsyJs3/yP3yXUq44k4/JBe3jqU63Z8v2i19qZZ3dsx32oma17ztgclWPNuqp3A+Xa9UiDlZHyVX8Vg==}
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.7
'@radix-ui/primitive': 1.0.0
'@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
'@radix-ui/react-context': 1.0.0_react@18.2.0
'@radix-ui/react-dismissable-layer': 1.0.2_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-focus-guards': 1.0.0_react@18.2.0
'@radix-ui/react-focus-scope': 1.0.1_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-id': 1.0.0_react@18.2.0
'@radix-ui/react-popper': 1.1.0_5ndqzdd6t4rivxsukjv3i3ak2q
'@radix-ui/react-portal': 1.0.1_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-slot': 1.0.1_react@18.2.0
'@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
aria-hidden: 1.2.2_3stiutgnnbnfnf3uowm5cip22i
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
react-remove-scroll: 2.5.5_3stiutgnnbnfnf3uowm5cip22i
transitivePeerDependencies:
- '@types/react'
dev: false
/@radix-ui/react-popper/1.0.0_5ndqzdd6t4rivxsukjv3i3ak2q:
resolution: {integrity: sha512-k2dDd+1Wl0XWAMs9ZvAxxYsB9sOsEhrFQV4CINd7IUZf0wfdye4OHen9siwxvZImbzhgVeKTJi68OQmPRvVdMg==}
peerDependencies:
@ -7406,7 +7436,7 @@ packages:
tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
dependencies:
mini-svg-data-uri: 1.4.4
tailwindcss: 3.2.4
tailwindcss: 3.2.4_postcss@8.4.21
dev: false
/@tailwindcss/line-clamp/0.4.2:
@ -7420,7 +7450,7 @@ packages:
peerDependencies:
tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
dependencies:
tailwindcss: 3.2.4
tailwindcss: 3.2.4_postcss@8.4.21
dev: true
/@tailwindcss/typography/0.5.9:
@ -7443,7 +7473,7 @@ packages:
lodash.isplainobject: 4.0.6
lodash.merge: 4.6.2
postcss-selector-parser: 6.0.10
tailwindcss: 3.2.4
tailwindcss: 3.2.4_postcss@8.4.21
dev: true
/@tanstack/match-sorter-utils/8.7.6:
@ -19231,6 +19261,40 @@ packages:
resolve: 1.22.1
transitivePeerDependencies:
- ts-node
dev: false
/tailwindcss/3.2.4_postcss@8.4.21:
resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
engines: {node: '>=12.13.0'}
hasBin: true
peerDependencies:
postcss: ^8.0.9
dependencies:
arg: 5.0.2
chokidar: 3.5.3
color-name: 1.1.4
detective: 5.2.1
didyoumean: 1.2.2
dlv: 1.1.3
fast-glob: 3.2.12
glob-parent: 6.0.2
is-glob: 4.0.3
lilconfig: 2.0.6
micromatch: 4.0.5
normalize-path: 3.0.0
object-hash: 3.0.0
picocolors: 1.0.0
postcss: 8.4.21
postcss-import: 14.1.0_postcss@8.4.21
postcss-js: 4.0.0_postcss@8.4.21
postcss-load-config: 3.1.4_postcss@8.4.21
postcss-nested: 6.0.0_postcss@8.4.21
postcss-selector-parser: 6.0.11
postcss-value-parser: 4.2.0
quick-lru: 5.1.1
resolve: 1.22.1
transitivePeerDependencies:
- ts-node
/tapable/1.1.3:
resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}