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

1st design completed

Browse source
This commit is contained in:
berbaroovez 2022-06-26 12:25:23 -05:00
parent 2cc3f3d95d
commit 90b18e1c42
6 changed files with 91 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/interface/package.json
View file

@ -23,6 +23,7 @@
"@radix-ui/react-icons": "^1.1.1",
"@radix-ui/react-progress": "^0.1.4",
"@radix-ui/react-slider": "^0.1.4",
"@radix-ui/react-tooltip": "^0.1.7",
"@sd/client": "workspace:*",
"@sd/core": "workspace:*",
"@sd/ui": "workspace:*",

8
packages/interface/src/components/device/Device.tsx
View file

@ -8,6 +8,7 @@ import { Rings } from 'react-loading-icons';
import FileItem from '../file/FileItem';
import Loader from '../primitive/Loader';
import ProgressBar from '../primitive/ProgressBar';
import { Tooltip } from '../tooltip/Tooltip';
export interface DeviceProps {
name: string;
@ -56,12 +57,19 @@ export function Device(props: DeviceProps) {
</div>
)}
<div className="flex flex-row ml-3 space-x-1">
<Tooltip label="Encrypt">
<Button className="!p-1 ">
<KeyIcon className="w-5 h-5" />
</Button>
</Tooltip>
<Tooltip label="Settings">
<Button className="!p-1 ">
<CogIcon className="w-5 h-5" />
</Button>
</Tooltip>
</div>
</div>
{/* <hr className="border-gray-700" />

10
packages/interface/src/components/file/Inspector.tsx
View file

@ -8,6 +8,7 @@ import React, { useEffect } from 'react';
import { default as types } from '../../constants/file-types.json';
import { useInspectorState } from '../../hooks/useInspectorState';
import { Tooltip } from '../tooltip/Tooltip';
import FileThumb from './FileThumb';
interface MetaItemProps {
@ -86,15 +87,24 @@ export const Inspector = (props: {
</div>
<h3 className="pt-3 pl-3 text-base font-bold">{file_path?.name}</h3>
<div className="flex flex-row m-3 space-x-2">
<Tooltip label='Favorite'>
<Button size="sm" noPadding>
<Heart className="w-[18px] h-[18px]" />
</Button>
</Tooltip>
<Tooltip label="Share">
<Button size="sm" noPadding>
<ShareIcon className="w-[18px] h-[18px]" />
</Button>
</Tooltip>
<Tooltip label="Link">
<Button size="sm" noPadding>
<Link className="w-[18px] h-[18px]" />
</Button>
</Tooltip>
</div>
{file_path?.file?.cas_id && (
<MetaItem title="Unique Content ID" value={file_path.file.cas_id as string} />

12
packages/interface/src/components/layout/TopBar.tsx
View file

@ -1,4 +1,5 @@
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/outline';
import { Tooltip } from '../tooltip/Tooltip';
import { useBridgeCommand } from '@sd/client';
import { Dropdown } from '@sd/ui';
import clsx from 'clsx';
@ -84,9 +85,18 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
</div> */}
<div data-tauri-drag-region className="flex flex-row justify-center flex-grow ">
<div className="flex mx-8 space-x-2 pointer-events-auto">
<TopBarButton icon={Tag} />
<Tooltip label="View Tags">
<TopBarButton icon={Tag} />
</Tooltip>
<Tooltip label="Create Folder">
<TopBarButton icon={FolderPlus} />
</Tooltip>
<Tooltip label="Open Terminal">
<TopBarButton icon={TerminalWindow} />
</Tooltip>
</div>
<div className="relative flex h-7">
<input

24
packages/interface/src/components/tooltip/Tooltip.tsx Normal file
View file

@ -0,0 +1,24 @@
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import React from 'react';
export const Tooltip = ({children,label}: {children:React.ReactNode, label:string})=>{
return (
<TooltipPrimitive.Provider >
<TooltipPrimitive.Root >
<TooltipPrimitive.Trigger asChild >
<span>
{children}
</span>
</TooltipPrimitive.Trigger>
<TooltipPrimitive.Content className='text-sm rounded px-2 py-1 mb-[2px] bg-gray-300 dark:!bg-gray-500 dark:text-gray-100'>
<TooltipPrimitive.Arrow className='fill-gray-300 dark:!fill-gray-500'/>
{label}
</TooltipPrimitive.Content>
</TooltipPrimitive.Root>
</TooltipPrimitive.Provider>
)
}

37
pnpm-lock.yaml
View file

@ -264,6 +264,7 @@ importers:
'@radix-ui/react-icons': ^1.1.1
'@radix-ui/react-progress': ^0.1.4
'@radix-ui/react-slider': ^0.1.4
'@radix-ui/react-tooltip': ^0.1.7
'@sd/client': workspace:*
'@sd/core': workspace:*
'@sd/ui': workspace:*
@ -323,6 +324,7 @@ importers:
'@radix-ui/react-icons': 1.1.1_react@18.1.0
'@radix-ui/react-progress': 0.1.4_react@18.1.0
'@radix-ui/react-slider': 0.1.4_react@18.1.0
'@radix-ui/react-tooltip': 0.1.7_ef5jwxihqo6n7gxfmzogljlgcm
'@sd/client': link:../client
'@sd/core': link:../../core
'@sd/ui': link:../ui
@ -3151,6 +3153,31 @@ packages:
react: 18.1.0
dev: false
/@radix-ui/react-tooltip/0.1.7_ef5jwxihqo6n7gxfmzogljlgcm:
resolution: {integrity: sha512-eiBUsVOHenZ0JR16tl970bB0DafJBz6mFgSGfIGIVpflFj0LIsIDiLMsYyvYdx1KwwsIUDTEZtxcPm/sWjPzqA==}
peerDependencies:
react: ^16.8 || ^17.0
react-dom: ^16.8 || ^17.0
dependencies:
'@babel/runtime': 7.18.3
'@radix-ui/primitive': 0.1.0
'@radix-ui/react-compose-refs': 0.1.0_react@18.1.0
'@radix-ui/react-context': 0.1.1_react@18.1.0
'@radix-ui/react-id': 0.1.5_react@18.1.0
'@radix-ui/react-popper': 0.1.4_react@18.1.0
'@radix-ui/react-portal': 0.1.4_ef5jwxihqo6n7gxfmzogljlgcm
'@radix-ui/react-presence': 0.1.2_react@18.1.0
'@radix-ui/react-primitive': 0.1.4_react@18.1.0
'@radix-ui/react-slot': 0.1.2_react@18.1.0
'@radix-ui/react-use-controllable-state': 0.1.0_react@18.1.0
'@radix-ui/react-use-escape-keydown': 0.1.0_react@18.1.0
'@radix-ui/react-use-previous': 0.1.1_react@18.1.0
'@radix-ui/react-use-rect': 0.1.1_react@18.1.0
'@radix-ui/react-visually-hidden': 0.1.4_react@18.1.0
react: 18.1.0
react-dom: 18.1.0_react@18.1.0
dev: false
/@radix-ui/react-use-body-pointer-events/0.1.1_react@18.1.0:
resolution: {integrity: sha512-R8leV2AWmJokTmERM8cMXFHWSiv/fzOLhG/JLmRBhLTAzOj37EQizssq4oW0Z29VcZy2tODMi9Pk/htxwb+xpA==}
peerDependencies:
@ -3236,6 +3263,16 @@ packages:
react: 18.1.0
dev: false
/@radix-ui/react-visually-hidden/0.1.4_react@18.1.0:
resolution: {integrity: sha512-K/q6AEEzqeeEq/T0NPChvBqnwlp8Tl4NnQdrI/y8IOY7BRR+Ug0PEsVk6g48HJ7cA1//COugdxXXVVK/m0X1mA==}
peerDependencies:
react: ^16.8 || ^17.0
dependencies:
'@babel/runtime': 7.18.3
'@radix-ui/react-primitive': 0.1.4_react@18.1.0
react: 18.1.0
dev: false
/@radix-ui/rect/0.1.1:
resolution: {integrity: sha512-g3hnE/UcOg7REdewduRPAK88EPuLZtaq7sA9ouu8S+YEtnyFRI16jgv6GZYe3VMoQLL1T171ebmEPtDjyxWLzw==}
dependencies: