mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-18 08:29:12 +00:00
1st design completed
This commit is contained in:
parent
2cc3f3d95d
commit
90b18e1c42
|
@ -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,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" />
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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">
|
||||
<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
24
packages/interface/src/components/tooltip/Tooltip.tsx
Normal 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>
|
||||
|
||||
)
|
||||
}
|
|
@ -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:
|
||||
|
|
Loading…
Reference in a new issue