Franknoirot/multi file (#844)
* Fix unrelated bug, settings button in the home sidebar
doesn't go to the home settings after my previous fixes to routes
* Turn on "Replay Onboarding" button in home settings
* Add icons
* Add Tooltip component
* Rough-in of sidebar styling and add initial File Tree
* Polish basic styling
* Show nested files and directories
* Add tests
* use camelCase for entrypointMetadata
* Add ability to switch files via links
* Revert "Improve Prop Typings for Modals. Remove instances of `any`. (… (#813)
Revert "Improve Prop Typings for Modals. Remove instances of `any`. (#792)"
This reverts commit 629f326f4c.
* ffmpeg instructions (#814)
* Formatting
* Remove folder names from display in app header
* Highlight current file, open folders it's within
* Navigate on double click, delete on Cmd + Esc
+ highlight focused folders
* Migrate to an XState machine, add create new file
* Add ability to create folders (with naive names)
+ remove command bar stuff for now
* Use route loader data to instantiate the kcl code
* Clean up some unused things
* Add ability to rename files
* Add ability to rename folders
* Add keyboard shortcuts for creating files/folders
* Tooltip style tweaks
* Polish + re-execute when switching files with a connection
* Reset code before navigating via file tree
* Don't invoke `readProject` if you're in a browser
* Show files and folders for projects on home page
* Don't highlight folders further down the file tree
* @jgomez720 and @jessfraz feedback:
+ indentation markers
+ proper file icon
+ bump down font size
+ touch up colors
* Tune down spacing, allow scroll overflow
* Fix formatting
* Update src/lib/tauriFS.ts
* Add a confirmation dialog when deleting
Signed-off-by: Frank Noirot <frank@kittycad.io>
---------
Signed-off-by: Frank Noirot <frank@kittycad.io>
Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>
This commit is contained in:
Frank Noirot
GitHub
@ -1,18 +1,21 @@
|
||||
import { Popover, Transition } from '@headlessui/react'
|
||||
import { ActionButton } from './ActionButton'
|
||||
import { faHome } from '@fortawesome/free-solid-svg-icons'
|
||||
import { ProjectWithEntryPointMetadata, paths } from '../Router'
|
||||
import { IndexLoaderData, paths } from '../Router'
|
||||
import { isTauri } from '../lib/isTauri'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { ExportButton } from './ExportButton'
|
||||
import { Fragment } from 'react'
|
||||
import { FileTree } from './FileTree'
|
||||
|
||||
const ProjectSidebarMenu = ({
|
||||
project,
|
||||
file,
|
||||
renderAsLink = false,
|
||||
}: {
|
||||
renderAsLink?: boolean
|
||||
project?: Partial<ProjectWithEntryPointMetadata>
|
||||
project?: IndexLoaderData['project']
|
||||
file?: IndexLoaderData['file']
|
||||
}) => {
|
||||
return renderAsLink ? (
|
||||
<Link
|
||||
@ -43,9 +46,18 @@ const ProjectSidebarMenu = ({
|
||||
alt="KittyCAD App"
|
||||
className="h-full w-auto"
|
||||
/>
|
||||
<span className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap hidden lg:block">
|
||||
{isTauri() && project?.name ? project.name : 'KittyCAD Modeling App'}
|
||||
</span>
|
||||
<div className="flex flex-col items-start py-0.5">
|
||||
<span className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap hidden lg:block">
|
||||
{isTauri() && file?.name
|
||||
? file.name.slice(file.name.lastIndexOf('/') + 1)
|
||||
: 'KittyCAD Modeling App'}
|
||||
</span>
|
||||
{isTauri() && project?.name && (
|
||||
<span className="text-xs text-chalkboard-70 dark:text-chalkboard-40 whitespace-nowrap hidden lg:block">
|
||||
{project.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Popover.Button>
|
||||
<Transition
|
||||
enter="duration-200 ease-out"
|
||||
@ -68,54 +80,74 @@ const ProjectSidebarMenu = ({
|
||||
leaveTo="opacity-0 -translate-x-4"
|
||||
as={Fragment}
|
||||
>
|
||||
<Popover.Panel className="fixed inset-0 right-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-energy-100 dark:border-energy-100/50 shadow-md rounded-r-lg overflow-hidden">
|
||||
<div className="flex items-center gap-4 px-4 py-3 bg-energy-100">
|
||||
<img
|
||||
src="/kitt-8bit-winking.svg"
|
||||
alt="KittyCAD App"
|
||||
className="h-9 w-auto"
|
||||
/>
|
||||
<Popover.Panel
|
||||
className="fixed inset-0 right-auto z-30 w-64 h-screen max-h-screen grid grid-cols-1 bg-chalkboard-10 dark:bg-chalkboard-100 border border-energy-100 dark:border-energy-100/50 shadow-md rounded-r-lg"
|
||||
style={{ gridTemplateRows: 'auto 1fr auto' }}
|
||||
>
|
||||
{({ close }) => (
|
||||
<>
|
||||
<div className="flex items-center gap-4 px-4 py-3 bg-energy-10/25 dark:bg-energy-110">
|
||||
<img
|
||||
src="/kitt-8bit-winking.svg"
|
||||
alt="KittyCAD App"
|
||||
className="h-9 w-auto"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<p
|
||||
className="m-0 text-energy-10 text-mono"
|
||||
data-testid="projectName"
|
||||
>
|
||||
{project?.name ? project.name : 'KittyCAD Modeling App'}
|
||||
</p>
|
||||
{project?.entrypoint_metadata && (
|
||||
<p
|
||||
className="m-0 text-energy-40 text-xs"
|
||||
data-testid="createdAt"
|
||||
>
|
||||
Created{' '}
|
||||
{project?.entrypoint_metadata.createdAt.toLocaleDateString()}
|
||||
</p>
|
||||
<div>
|
||||
<p
|
||||
className="m-0 text-chalkboard-100 dark:text-energy-10 text-mono"
|
||||
data-testid="projectName"
|
||||
>
|
||||
{project?.name ? project.name : 'KittyCAD Modeling App'}
|
||||
</p>
|
||||
{project?.entrypointMetadata && (
|
||||
<p
|
||||
className="m-0 text-chalkboard-100 dark:text-energy-40 text-xs"
|
||||
data-testid="createdAt"
|
||||
>
|
||||
Created{' '}
|
||||
{project.entrypointMetadata.createdAt.toLocaleDateString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{isTauri() ? (
|
||||
<FileTree
|
||||
file={file}
|
||||
className="overflow-hidden border-0 border-y border-energy-40 dark:border-energy-70"
|
||||
closePanel={close}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex-1 overflow-hidden" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 flex flex-col gap-2">
|
||||
<ExportButton
|
||||
className={{
|
||||
button:
|
||||
'border-transparent dark:border-transparent dark:hover:border-energy-60',
|
||||
}}
|
||||
>
|
||||
Export Model
|
||||
</ExportButton>
|
||||
{isTauri() && (
|
||||
<ActionButton
|
||||
Element="link"
|
||||
to={paths.HOME}
|
||||
icon={{
|
||||
icon: faHome,
|
||||
}}
|
||||
className="border-transparent dark:border-transparent dark:hover:border-energy-60"
|
||||
>
|
||||
Go to Home
|
||||
</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4 flex flex-col gap-2 bg-energy-10/25 dark:bg-energy-110">
|
||||
<ExportButton
|
||||
className={{
|
||||
button:
|
||||
'border-transparent dark:border-transparent hover:border-energy-60',
|
||||
icon: 'text-energy-10 dark:text-energy-120',
|
||||
bg: 'bg-energy-120 dark:bg-energy-10',
|
||||
}}
|
||||
>
|
||||
Export Model
|
||||
</ExportButton>
|
||||
{isTauri() && (
|
||||
<ActionButton
|
||||
Element="link"
|
||||
to={paths.HOME}
|
||||
icon={{
|
||||
icon: faHome,
|
||||
iconClassName: 'text-energy-10 dark:text-energy-120',
|
||||
bgClassName: 'bg-energy-120 dark:bg-energy-10',
|
||||
}}
|
||||
className="border-transparent dark:border-transparent hover:border-energy-60"
|
||||
>
|
||||
Go to Home
|
||||
</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</Popover>
|
||||
|
||||
Reference in New Issue
Block a user