fix sidebar, ui tweaks

This commit is contained in:
Jamie Pine 2022-04-18 20:35:19 -07:00
parent 3540471bf6
commit 9e55e100db
9 changed files with 21 additions and 3047 deletions

View file

@ -7,7 +7,7 @@ type Props = {
title?: string;
};
const Layout = ({ children, title = 'This is the default title' }: Props) => (
const Layout = ({ children, title = 'Spacedrive' }: Props) => (
<>
<Head>
<title>{title}</title>
@ -21,7 +21,9 @@ const Layout = ({ children, title = 'This is the default title' }: Props) => (
</Link>{' '}
</nav> */}
</header>
<div className="flex flex-col items-center p-1 ">{children as any}</div>
<div className="flex flex-col items-center h-screen p-1 bg-[#0B0B10] text-white">
{children as any}
</div>
{/* <footer className="bg-gray-100 ">
<span>Version 0.1.0</span>
</footer> */}

View file

@ -5,9 +5,9 @@ import Layout from '../components/Layout';
const IndexPage = () => (
<Layout title="Home | Next.js + TypeScript Example">
<h1 className="my-8 text-4xl font-black">A file explorer from the future</h1>
<h1 className="my-16 text-6xl font-black">The file explorer from the future</h1>
<iframe
style={{ border: 'none', borderRadius: 5 }}
className="border border-gray-800 rounded-lg shadow-2xl"
width={1200}
height={600}
src="http://localhost:8002?library_id=9068c6ec-cf90-451b-bb30-4174781e7bc6"

View file

@ -6,8 +6,9 @@
"prep": "pnpm db:gen && pnpm core codegen && pnpm build-packages",
"build-packages": "pnpm client build && pnpm ui build && pnpm interface build",
"build": "turbo run build",
"dev:desktop": "turbo run dev --parallel --filter=@sd/desktop --filter=@sd/client --filter=@sd/ui --filter=@sd/interface",
"dev:desktop": "turbo run dev --parallel --filter=@sd/desktop --filter=@sd/client --filter=@sd/ui && pnpm interface dev:build",
"dev:ui": "turbo run dev --parallel --filter=@sd/client --filter=@sd/ui --filter=@sd/interface",
"dev:landing": "turbo run dev --parallel --filter=@sd/client --filter=@sd/ui --filter=@sd/web --filter=@sd/landing && pnpm interface dev:build",
"db:migrate": "pnpm core prisma migrate dev",
"db:gen": "pnpm core prisma generate",
"lint": "turbo run lint",

View file

@ -25,6 +25,7 @@ import { RedirectPage } from './screens/Redirect';
import { QueryClient, QueryClientProvider } from 'react-query';
import { BaseTransport, ClientProvider, setTransport } from '@sd/client';
import { CoreEvent } from '@sd/core';
import clsx from 'clsx';
const queryClient = new QueryClient();
@ -46,19 +47,24 @@ export interface AppProps {
function AppLayout() {
const appPropsContext = useContext(AppPropsContext);
const [isWindowRounded, setIsWindowRounded] = useState(false);
const [hasWindowBorder, setHasWindowBorder] = useState(true);
useEffect(() => {
if (appPropsContext?.platform === 'macOS') {
setIsWindowRounded(true);
}
if (appPropsContext?.platform === 'browser') {
setHasWindowBorder(false);
}
}, []);
return (
<div
className={
'flex flex-row h-screen overflow-hidden text-gray-900 bg-white border border-gray-200 select-none dark:border-gray-500 dark:text-white dark:bg-gray-650' +
(isWindowRounded ? ' rounded-xl' : '')
}
className={clsx(
'flex flex-row h-screen overflow-hidden text-gray-900 bg-white select-none dark:text-white dark:bg-gray-650',
isWindowRounded && 'rounded-xl',
hasWindowBorder && 'border border-gray-200 dark:border-gray-500'
)}
>
<Sidebar />
<div className="flex flex-col w-full min-h-full">

File diff suppressed because one or more lines are too long

View file

@ -70,7 +70,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
];
return (
<div className="flex flex-col w-56 min-h-full px-3 pb-1 overflow-x-hidden overflow-y-scroll border-r border-gray-100 bg-gray-50 dark:bg-gray-850 dark:border-gray-600">
<div className="flex flex-col flex-shrink-0 min-h-full px-3 pb-1 overflow-x-hidden overflow-y-scroll border-r border-gray-100 w-46 bg-gray-50 dark:bg-gray-850 dark:border-gray-600">
{appPropsContext?.platform === 'macOS' ? (
<>
<MacOSTrafficLights /> <div className="mt-6" />
@ -79,7 +79,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
<Dropdown
buttonProps={{
justifyLeft: true,
className: `flex mb-1 shadow-xs rounded flex-shrink-0 w-[175px]
className: `flex mb-1 mt-1 shadow-xs rounded flex-shrink-0 w-[175px]
!bg-gray-50
border-gray-150
hover:!bg-gray-1000

View file

@ -33,23 +33,10 @@ export const OverviewScreen: React.FC<{}> = (props) => {
<div data-tauri-drag-region className="flex flex-shrink-0 w-full h-7" />
<div className="flex flex-col w-full h-screen px-5 pb-3 overflow-scroll">
<div className="flex items-center justify-center w-full">
<div className="flex space-x-2">
<div className="flex flex-wrap">
<StatItem name="Total capacity" value="26.5" unit="TB" />
<StatItem name="Index size" value="103" unit="MB" />
<StatItem name="Preview media" value="23.5" unit="GB" />
</div>
<div className="flex flex-col items-center w-56">
{/* <img
alt="spacedrive-logo"
src="/images/spacedrive_logo.png"
className="pointer-events-none w-28 h-28"
/> */}
{/* <span className="text-lg font-bold heading-1">Spacedrive</span>
<span className="mt-0.5 text-sm text-gray-400 mb-5">v1.0.11 (pre-alpha)</span> */}
{/* <span className="font-bold text-gray-400 text-md heading-1">Jamie's Library</span>
<span className="mt-1 text-xs text-gray-500 ">lib-71230e11c869</span> */}
</div>
<div className="flex space-x-2">
<StatItem name="Free space" value="9.2" unit="TB" />
<StatItem name="Total at-risk" value="1.5" unit="TB" />
<StatItem name="Total backed up" value="25.3" unit="TB" />