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

Merge pull request #542 from niikeec/closable-job-manager

Browse source 
Inner closable overlay panel
This commit is contained in:
Brendan Allan 2023-01-24 20:38:51 -08:00 committed by GitHub
parent 004837f108 8c4cdb1ede
commit 74fe603535
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 133 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/company/legal/privacy.md
View file

@ -1,4 +1,3 @@
# Privacy Policy
_This page has yet to be written out in full. Please check back later!_

11
docs/developers/architecture/database.md
View file

@ -7,13 +7,18 @@ index: 10
### Schema
Our data schema is defined using Prisma, you can [view it on GitHub](https://github.com/spacedriveapp/spacedrive/blob/main/core/prisma/schema.prisma).
![A cool screenshot of the Spacedrive schema](/schema.webp)
![A cool screenshot of the Spacedrive schema](/schema.webp)
### Prisma Client Rust
We use Prisma Client Rust as a database ORM, it allows us to use Prisma to define our schema and generate migrations based on modifications to that schema.
We use Prisma Client Rust as a database ORM, it allows us to use Prisma to define our schema and generate migrations based on modifications to that schema.
### Migrations
Migrations are run by the Prisma migration engine on app launch.
### Database file
The databases file is SQLite and can be opened in any SQL viewer.
![A Spacedrive library database file open in Table Plus](/database-table-plus.webp)
![A Spacedrive library database file open in Table Plus](/database-table-plus.webp)

4
docs/developers/architecture/explorer.md
View file

@ -4,14 +4,14 @@ index: 4
# Explorer
### Grid view
### List View
### Columns View
### Media View
### Timeline View
### Configuration
### Configuration

2
docs/developers/architecture/extensions.md
View file

@ -4,4 +4,4 @@ index: 10
# Extensions
Extensions are planned but nothing is yet set in stone.
Extensions are planned but nothing is yet set in stone.

3
docs/developers/architecture/libraries.md
View file

@ -8,5 +8,4 @@ A library is the database that Spacedrive stores all file structures and metadat
To learn how data is synchronized check out the documentation on [Sync](/docs/developers/architecture/sync).
Libraries can be encrypted with a passphrase set by the user.
Libraries can be encrypted with a passphrase set by the user.

2
docs/developers/clients/cli.md
View file

@ -4,4 +4,4 @@ index: 10
# CLI
A CLI is planned, it would allow a user or application to connect and control a running Spacedrive node on a local or remote system.
A CLI is planned, it would allow a user or application to connect and control a running Spacedrive node on a local or remote system.

2
docs/developers/clients/rust.md
View file

@ -4,4 +4,4 @@ index: 10
# Rust
This doc should just show how to import the core and use it in a Rust context.
This doc should just show how to import the core and use it in a Rust context.

2
docs/developers/prerequisites/welcome.md
View file

@ -8,4 +8,4 @@ index: 0
pub struct DeveloperDocumentation;
```
This documentation is a work in progress, you will find unfinished or empty sections.
This documentation is a work in progress, you will find unfinished or empty sections.

9
docs/product/getting-started/terminology.md
View file

@ -4,22 +4,25 @@ index: 0
---
# Terminology
Some useful Spacedrive related terminology.
### `Library`
A Library is the database that powers Spacedrive, all metadata and directory structures are saved in the Library. Libraries can be synced between devices and a user can have multiple libraries loaded in the Spacedrive app at once. [Learn more →](/docs/developers/architecture/libraries)
### `Object`
Objects are a fancy name for files, we call them Objects because we identify them uniquely based on a cryptographic hash of the contents. Objects in Spacedrive can come in a wide variety of kinds to provide a broad range of context. [Learn more →](/docs/developers/architecture/objects)
### `Location`
Locations are places Spacedrive will look for files, usually a directory on a mounted volume, but could also be a cloud service. [Learn more →](/docs/developers/architecture/locations)
Locations are places Spacedrive will look for files, usually a directory on a mounted volume, but could also be a cloud service. [Learn more →](/docs/developers/architecture/locations)
### `Node`
A Node is a device or server running the Spacedrive core. Nodes can host libraries and communicate with other Nodes to sync data. [Learn more →](/docs/developers/architecture/nodes)
### `Preview Media`
Preview media refers to highly compressed image or video content for an Object, it is generated by Spacedrive and synced between your devices. [Learn more →](/docs/developers/architecture/preview-media)

10
packages/interface/src/components/explorer/ExplorerTopBar.tsx
View file

@ -15,7 +15,7 @@ import {
import { forwardRef, useEffect, useRef } from 'react';
import { useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';
import { Button, Input, OverlayPanel, cva } from '@sd/ui';
import { Button, Input, Popover, cva } from '@sd/ui';
import { getExplorerStore, useExplorerStore } from '../../hooks/useExplorerStore';
import { useOperatingSystem } from '../../hooks/useOperatingSystem';
import { KeybindEvent } from '../../util/keybind';
@ -265,7 +265,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
<div className="flex mx-8 space-x-2">
<Tooltip label="Key Manager">
<OverlayPanel
<Popover
className="focus:outline-none"
trigger={
// <Tooltip label="Major Key Alert">
@ -278,7 +278,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
<div className="block w-[350px]">
<KeyManager className={TOP_BAR_ICON_STYLE} />
</div>
</OverlayPanel>
</Popover>
</Tooltip>
<Tooltip label="Tag Assign Mode">
<TopBarButton
@ -305,7 +305,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
</div>
<div className="flex mr-3 space-x-2">
<Tooltip label="File display options" position="left">
<OverlayPanel
<Popover
className="focus:outline-none"
trigger={
// <Tooltip label="Major Key Alert">
@ -318,7 +318,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
<div className="block w-[250px] ">
<ExplorerOptionsPanel />
</div>
</OverlayPanel>
</Popover>
</Tooltip>
<Tooltip

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

@ -8,7 +8,6 @@ import {
Eye,
Fingerprint,
Folder,
IconProps,
LockSimple,
LockSimpleOpen,
Pause,
@ -18,9 +17,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, Popover, PopoverClose, tw } from '@sd/ui';
import ProgressBar from '../primitive/ProgressBar';
import { Tooltip } from '../tooltip/Tooltip';
@ -117,11 +115,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="">

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

@ -18,7 +18,7 @@ import {
CategoryHeading,
Dropdown,
Loader,
OverlayPanel,
Popover,
Select,
SelectOption,
Switch,
@ -132,14 +132,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 +151,7 @@ export function Sidebar() {
<div className="block w-[430px] h-96">
<JobsManager />
</div>
</OverlayPanel>
</Popover>
</div>
{debugState.enabled && <DebugPanel />}
</SidebarFooter>
@ -177,7 +176,7 @@ function DebugPanel() {
const platform = usePlatform();
return (
<OverlayPanel
<Popover
className="p-4 focus:outline-none"
transformOrigin="bottom left"
trigger={
@ -246,7 +245,7 @@ function DebugPanel() {
</InputContainer>
)} */}
</div>
</OverlayPanel>
</Popover>
);
}

1
packages/ui/package.json
View file

@ -26,6 +26,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",

26
packages/ui/src/OverlayPanel.tsx → packages/ui/src/Popover.tsx
View file

@ -1,15 +1,15 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import * as Radix from '@radix-ui/react-popover';
import clsx from 'clsx';
import { PropsWithChildren, useState } from 'react';
import { animated, config, useTransition } from 'react-spring';
interface Props extends DropdownMenu.MenuContentProps {
interface Props extends Radix.PopoverContentProps {
trigger: React.ReactNode;
transformOrigin?: string;
disabled?: boolean;
className?: string;
}
export const OverlayPanel = ({
export const Popover = ({
trigger,
children,
disabled,
@ -31,13 +31,13 @@ export const OverlayPanel = ({
// });
return (
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
<DropdownMenu.Trigger disabled={disabled} asChild>
<Radix.Root open={open} onOpenChange={setOpen}>
<Radix.Trigger disabled={disabled} asChild>
{trigger}
</DropdownMenu.Trigger>
</Radix.Trigger>
{open && (
<DropdownMenu.Portal forceMount>
<DropdownMenu.Content forceMount asChild>
<Radix.Portal forceMount>
<Radix.Content forceMount asChild>
<div
className={clsx(
'flex flex-col',
@ -53,9 +53,11 @@ export const OverlayPanel = ({
>
{children}
</div>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</Radix.Content>
</Radix.Portal>
)}
</DropdownMenu.Root>
</Radix.Root>
);
};
export { Close as PopoverClose } from '@radix-ui/react-popover';

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

@ -1,16 +1,16 @@
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 './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

@ -531,6 +531,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
@ -578,6 +579,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
@ -619,7 +621,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:
@ -4048,7 +4050,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:
@ -4653,6 +4655,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:
@ -7410,7 +7440,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:
@ -7424,7 +7454,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:
@ -7447,7 +7477,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:
@ -19258,6 +19288,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==}