mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-06-30 12:33:31 +00:00
Add devices modal (#2540)
* add device modal changes * cleanup * tailwind typescript error fixes * enabled modal only for dev mode * no need for "any" * i18n title --------- Co-authored-by: ameer2468 <33054370+ameer2468@users.noreply.github.com>
This commit is contained in:
Matthew Yung
GitHub
parent
b4159d89f8
commit
7e8bfcd2b6
|
|
@ -0,0 +1,49 @@
|
|||
import { HardwareModel, NodeState } from '@sd/client';
|
||||
import { Dialog, Divider, Input, UseDialogProps, useDialog } from '@sd/ui';
|
||||
import { Icon } from '~/components';
|
||||
import { hardwareModelToIcon } from '~/util/hardware';
|
||||
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useLocale } from '~/hooks';
|
||||
|
||||
interface Props extends UseDialogProps {
|
||||
node?: NodeState
|
||||
}
|
||||
|
||||
const AddDeviceDialog = ({node, ...dialogProps}: Props) => {
|
||||
|
||||
const form = useForm();
|
||||
const { t } = useLocale();
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
dialog={useDialog(dialogProps)}
|
||||
form={form}
|
||||
title={t("add_device")}
|
||||
description={t("Add Device Description")}
|
||||
icon={<Icon
|
||||
name={hardwareModelToIcon(node?.device_model as HardwareModel)}
|
||||
size={28}
|
||||
/>}
|
||||
ctaLabel="Add"
|
||||
closeLabel="Close"
|
||||
>
|
||||
<div className="mt-4 flex flex-col items-center">
|
||||
<div className="size-32 rounded-lg bg-gray-600 shadow-lg" />
|
||||
</div>
|
||||
<div className="my-5 flex items-center space-x-3">
|
||||
<Divider className="grow" />
|
||||
<span className="my-1 text-xs text-ink-faint">OR</span>
|
||||
<Divider className="grow" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="accessCode" className="block text-sm text-gray-400">
|
||||
Enter and authenticate device UUID
|
||||
</label>
|
||||
<Input id="accessCode"/>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddDeviceDialog;
|
||||
|
|
@ -1,46 +1,46 @@
|
|||
import { HardwareModel, useBridgeQuery } from '@sd/client';
|
||||
import { Button, toast, Tooltip } from '@sd/ui';
|
||||
import { Button, Tooltip, dialogManager } from '@sd/ui';
|
||||
import { Icon } from '~/components';
|
||||
import { useLocale } from '~/hooks';
|
||||
import { hardwareModelToIcon } from '~/util/hardware';
|
||||
|
||||
import SidebarLink from '../../SidebarLayout/Link';
|
||||
import Section from '../../SidebarLayout/Section';
|
||||
import AddDeviceDialog from './AddDeviceDialog';
|
||||
|
||||
export default function DevicesSection() {
|
||||
const { data: node } = useBridgeQuery(['nodeState']);
|
||||
const { data: node } = useBridgeQuery(['nodeState']);
|
||||
const { t } = useLocale();
|
||||
|
||||
const { t } = useLocale();
|
||||
|
||||
return (
|
||||
<Section name={t('devices')}>
|
||||
{node && (
|
||||
<SidebarLink className="group relative w-full" to={`node/${node.id}`} key={node.id}>
|
||||
{node.device_model ? (
|
||||
<Icon
|
||||
name={hardwareModelToIcon(node.device_model as HardwareModel)}
|
||||
size={20}
|
||||
className="mr-1"
|
||||
/>
|
||||
) : (
|
||||
<Icon name="Laptop" className="mr-1" />
|
||||
)}
|
||||
|
||||
<span className="truncate">{node.name}</span>
|
||||
</SidebarLink>
|
||||
)}
|
||||
return (
|
||||
<Section name={t('devices')}>
|
||||
{node && (
|
||||
<SidebarLink className="group relative w-full" to={`node/${node.id}`} key={node.id}>
|
||||
{node.device_model ? (
|
||||
<Icon
|
||||
name={hardwareModelToIcon(node.device_model as HardwareModel)}
|
||||
size={20}
|
||||
className="mr-1"
|
||||
/>
|
||||
) : (
|
||||
<Icon name="Laptop" className="mr-1" />
|
||||
)}
|
||||
|
||||
<span className="truncate">{node.name}</span>
|
||||
</SidebarLink>
|
||||
)}
|
||||
<Tooltip label={t('devices_coming_soon_tooltip')} position="right">
|
||||
<Button
|
||||
onClick={() => {
|
||||
toast.info(t('coming_soon'));
|
||||
}}
|
||||
variant="dotted"
|
||||
className="mt-1 w-full opacity-70"
|
||||
>
|
||||
{t('add_device')}
|
||||
</Button>
|
||||
<Button disabled={!import.meta.env.DEV}
|
||||
onClick={() => dialogManager.create((dp) => (
|
||||
<AddDeviceDialog {...dp} />
|
||||
))}
|
||||
variant="dotted"
|
||||
className="mt-1 w-full opacity-70"
|
||||
>
|
||||
{t('add_device')}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Section>
|
||||
);
|
||||
</Section>
|
||||
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ export const SearchOptionSubMenu = (
|
|||
<SearchOptionItemInternals {...props}>{props.name}</SearchOptionItemInternals>
|
||||
</ContextMenuDivItem>
|
||||
}
|
||||
className={clsx(MENU_STYLES, 'max-h-80 explorer-scroll -mt-1.5', props.className)}
|
||||
className={clsx(MENU_STYLES, 'explorer-scroll -mt-1.5 max-h-80', props.className)}
|
||||
>
|
||||
{props.children}
|
||||
</DropdownMenu.SubMenu>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"Add Device Description": "Scan the QR code or authenticate your device UUID to add a device.",
|
||||
"about": "About",
|
||||
"about_vision_text": "Many of us have multiple cloud accounts, drives that aren’t backed up and data at risk of loss. We depend on cloud services like Google Photos and iCloud, but are locked in with limited capacity and almost zero interoperability between services and operating systems. Photo albums shouldn’t be stuck in a device ecosystem, or harvested for advertising data. They should be OS agnostic, permanent and personally owned. Data we create is our legacy, that will long outlive us—open source technology is the only way to ensure we retain absolute control over the data that defines our lives, at unlimited scale.",
|
||||
"about_vision_title": "Vision",
|
||||
|
|
|
|||
Loading…
Reference in a new issue