mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-05-04 13:26:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

more styles

Browse Source
This commit is contained in:
Jamie Pine
2022-10-24 03:04:52 -07:00
parent 01c29dadf4
commit 8933e2bf1d
10 changed files with 100 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.cspell/project_words.txt
View File

@@ -14,6 +14,7 @@ Flac
haden
haoyuan
haris
Iconoir
josephjacks
justinhoffman
Keychain

15
packages/interface/src/AppLayout.tsx
View File

@@ -1,5 +1,6 @@
import { useCurrentLibrary } from '@sd/client';
import clsx from 'clsx';
import { IconoirProvider } from 'iconoir-react';
import { Suspense } from 'react';
import { Outlet } from 'react-router-dom';
@@ -32,9 +33,17 @@ export function AppLayout() {
>
<Sidebar />
<div className="relative flex w-full">
<Suspense fallback={<div className="w-screen h-screen bg-app" />}>
<Outlet />
</Suspense>
<IconoirProvider
iconProps={{
strokeWidth: 1.8,
width: '1em',
height: '1em'
}}
>
<Suspense fallback={<div className="w-screen h-screen bg-app" />}>
<Outlet />
</Suspense>
</IconoirProvider>
</div>
<Toasts />
</div>

4
packages/interface/src/components/jobs/JobManager.tsx
View File

@@ -68,9 +68,7 @@ export function JobsManager() {
<HeaderContainer>
<CategoryHeading className="ml-2">Recent Jobs</CategoryHeading>
<div className="flex-grow" />
<Button size="icon">
<EllipsisHorizontalIcon className="w-5" />
</Button>
<Button size="icon">
<EllipsisHorizontalIcon className="w-5" />
</Button>

85
packages/interface/src/components/layout/Sidebar.tsx
View File

@@ -16,6 +16,7 @@ import {
ButtonLink,
CategoryHeading,
Dropdown,
Loader,
OverlayPanel,
Switch,
cva,
@@ -44,58 +45,54 @@ export function Sidebar() {
return (
<div
className={clsx(
'flex relative flex-col flex-grow-0 flex-shrink-0 w-44 min-h-full border-r border-sidebar-divider bg-sidebar',
'flex relative flex-col flex-grow-0 flex-shrink-0 w-44 min-h-full border-r border-sidebar-divider bg-sidebar',
macOnly(os, 'bg-opacity-[0.80]')
)}
>
<WindowControls />
<div className="flex flex-col px-2.5 flex-grow pt-1 pb-10 overflow-x-hidden overflow-y-scroll no-scrollbar mask-fade-out">
<Dropdown.Root
// usually this panel is styled with bg-menu, but as the dark theme sidebar is dark, we need to override it for dark:
// itemsClassName="dark:bg-sidebar-box"
button={
<Dropdown.Button
variant="gray"
className={clsx(
`w-full mb-1 mt-1 -mr-0.5`,
` !bg-sidebar-box !border-sidebar-line/50 active:!border-sidebar-line active:!bg-sidebar-button ui-open:!bg-sidebar-button ui-open:!border-sidebar-line text-ink`,
(library === null || isLoadingLibraries) && '!text-ink-faint'
// macOnly(os, '!bg-opacity-80 !border-opacity-40')
)}
>
<span className="truncate">
{isLoadingLibraries ? 'Loading...' : library ? library.config.name : ' '}
</span>
</Dropdown.Button>
}
>
<Dropdown.Section>
{libraries?.map((lib) => (
<Dropdown.Item
selected={lib.uuid === library?.uuid}
key={lib.uuid}
onClick={() => switchLibrary(lib.uuid)}
>
{lib.config.name}
</Dropdown.Item>
))}
</Dropdown.Section>
<Dropdown.Section>
<Dropdown.Item icon={CogIcon} to="settings/library">
Library Settings
</Dropdown.Item>
<CreateLibraryDialog>
<Dropdown.Item icon={PlusIcon}>Add Library</Dropdown.Item>
</CreateLibraryDialog>
<Dropdown.Root
className="mt-1 mx-2.5"
button={
<Dropdown.Button
variant="gray"
className={clsx(
`w-full text-ink !bg-sidebar-box !border-sidebar-line/50 active:!border-sidebar-line`,
`active:!bg-sidebar-button ui-open:!bg-sidebar-button ui-open:!border-sidebar-line `,
(library === null || isLoadingLibraries) && '!text-ink-faint'
// macOnly(os, '!bg-opacity-80 !border-opacity-40')
)}
>
<span className="truncate">
{isLoadingLibraries ? 'Loading...' : library ? library.config.name : ' '}
</span>
</Dropdown.Button>
}
>
<Dropdown.Section>
{libraries?.map((lib) => (
<Dropdown.Item
icon={LockClosedIcon}
onClick={() => alert('TODO: Not implemented yet!')}
selected={lib.uuid === library?.uuid}
key={lib.uuid}
onClick={() => switchLibrary(lib.uuid)}
>
Lock
{lib.config.name}
</Dropdown.Item>
</Dropdown.Section>
</Dropdown.Root>
))}
</Dropdown.Section>
<Dropdown.Section>
<Dropdown.Item icon={CogIcon} to="settings/library">
Library Settings
</Dropdown.Item>
<CreateLibraryDialog>
<Dropdown.Item icon={PlusIcon}>Add Library</Dropdown.Item>
</CreateLibraryDialog>
<Dropdown.Item icon={LockClosedIcon} onClick={() => alert('TODO: Not implemented yet!')}>
Lock
</Dropdown.Item>
</Dropdown.Section>
</Dropdown.Root>
<div className="flex flex-col px-2.5 flex-grow pt-1 pb-10 overflow-x-hidden overflow-y-scroll no-scrollbar mask-fade-out">
<div className="pt-1">
<SidebarLink to="/overview">
<Icon component={Planet} />

27
packages/interface/src/components/location/LocationListItem.tsx
View File

@@ -33,25 +33,24 @@ export default function LocationListItem({ location }: LocationListItemProps) {
<Folder size={30} className="mr-3" />
<div className="grid grid-cols-1 min-w-[110px]">
<h1 className="pt-0.5 text-sm font-semibold">{location.name}</h1>
<p className="mt-0.5 text-sm truncate select-text text-gray-250">
<span className="py-[1px] px-1 bg-app-button rounded mr-1">{location.node.name}</span>
<p className="mt-0.5 text-sm truncate select-text text-ink-dull">
<span className="py-[1px] px-1 bg-app-selected rounded mr-1">{location.node.name}</span>
{location.local_path}
</p>
</div>
<div className="flex flex-grow" />
<div className="flex h-[45px] p-2 space-x-2">
<Button disabled variant="gray" className="!py-1.5 !px-2 pointer-events-none flex">
<>
<div
className={clsx(
'w-2 h-2 rounded-full',
location.is_online ? 'bg-green-500' : 'bg-red-500'
)}
/>
<span className="ml-1.5 text-xs text-ink-dull">
{location.is_online ? 'Online' : 'Offline'}
</span>
</>
{/* This is a fake button, do not add disabled prop pls */}
<Button variant="gray" className="!py-1.5 !px-2 pointer-events-none flex">
<div
className={clsx(
'w-2 h-2 rounded-full',
location.is_online ? 'bg-green-500' : 'bg-red-500'
)}
/>
<span className="ml-1.5 text-xs text-ink-dull">
{location.is_online ? 'Online' : 'Offline'}
</span>
</Button>
<Dialog
title="Delete Location"

9
packages/interface/src/screens/settings/library/LocationSettings.tsx
View File

@@ -1,6 +1,7 @@
import { useLibraryMutation, useLibraryQuery, usePlatform } from '@sd/client';
import { LocationCreateArgs } from '@sd/client';
import { Button } from '@sd/ui';
import { Button, Input } from '@sd/ui';
import { MagnifyingGlass } from 'phosphor-react';
import LocationListItem from '../../../components/location/LocationListItem';
import { SettingsContainer } from '../../../components/settings/SettingsContainer';
@@ -18,7 +19,11 @@ export default function LocationSettings() {
title="Locations"
description="Manage your storage locations."
rightArea={
<div className="flex-row space-x-2">
<div className="flex flex-row items-center space-x-5">
<div className="relative hidden lg:block">
<MagnifyingGlass className="absolute w-[18px] h-auto top-[8px] left-[11px] text-gray-350" />
<Input className="!p-0.5 !pl-9" placeholder="Search locations" />
</div>
<Button
variant="accent"
size="sm"

9
packages/ui/src/Button.tsx
View File

@@ -42,11 +42,14 @@ const styles = cva(
'border-transparent hover:border-app-line active:border-app-line'
],
outline: [
'border-transparent hover:border-app-line/50 active:border-app-box active:bg-app-box/30'
'border-transparent hover:border-app-line/50 active:border-app-line active:bg-app-box/30'
],
gray: [
'bg-app-button active:bg-app-selected hover:bg-app-hover',
'border-app-line hover:border-app-line active:border-app-active'
],
gray: ['bg-app-button active:bg-app-hover', 'border-app-line hover:border-app-line'],
accent: [
'bg-accent text-white active:bg-accent hover:bg-accent-faint border-accent-faint hover:border-accent active:border-accent-deep shadow-md shadow-app-shade/10'
'bg-accent text-white active:bg-accent hover:bg-accent-faint border-accent-deep hover:border-accent active:border-accent-deep shadow-md shadow-app-shade/10'
],
colored: ['text-white shadow-sm hover:bg-opacity-90 active:bg-opacity-100'],
bare: ''

2
packages/ui/src/OverlayPanel.tsx
View File

@@ -46,7 +46,7 @@ export const OverlayPanel = ({
'min-w-[11rem] z-50 m-2 space-y-1',
'select-none cursor-default rounded-lg',
'text-left text-sm text-ink',
'bg-app-overlay/90 backdrop-blur',
'bg-app-overlay/80 backdrop-blur',
// 'border border-app-overlay',
'shadow-2xl shadow-black/60 ',
className

32
packages/ui/style/colors.scss
View File

@@ -22,20 +22,21 @@
--color-sidebar-selected: var(--dark-hue), 15%, 24%;
--color-sidebar-shade: var(--dark-hue), 15%, 23%;
// main
--color-app: var(--dark-hue), 16%, 13%;
--color-app-box: var(--dark-hue), 15%, 18%;
--color-app-overlay: var(--dark-hue), 15%, 14%;
--color-app: var(--dark-hue), 19%, 14%;
--color-app-box: var(--dark-hue), 15%, 19%;
--color-app-overlay: var(--dark-hue), 17%, 18%;
--color-app-input: var(--dark-hue), 15%, 20%;
--color-app-focus: var(--dark-hue), 15%, 10%;
--color-app-line: var(--dark-hue), 15%, 26%;
--color-app-button: var(--dark-hue), 15%, 23%;
--color-app-divider: var(--dark-hue), 15%, 5%;
--color-app-selected: var(--dark-hue), 15%, 23%;
--color-app-hover: var(--dark-hue), 15%, 20%;
--color-app-button: var(--dark-hue), 15%, 23%;
--color-app-hover: var(--dark-hue), 15%, 25%;
--color-app-selected: var(--dark-hue), 15%, 27%;
--color-app-active: var(--dark-hue), 15%, 30%;
--color-app-shade: var(--dark-hue), 15%, 0%;
--color-app-frame: var(--dark-hue), 15%, 25%;
// menu
--color-menu: var(--dark-hue), 15%, 7%;
--color-menu: var(--dark-hue), 25%, 5%;
--color-menu-line: var(--dark-hue), 15%, 7%;
--color-menu-ink: var(--dark-hue), 5%, 100%;
--color-menu-faint: var(--dark-hue), 5%, 80%;
@@ -75,7 +76,8 @@
--color-app-button: var(--light-hue), 5%, 100%;
--color-app-divider: var(--light-hue), 5%, 80%;
--color-app-selected: var(--light-hue), 5%, 93%;
--color-app-hover: var(--light-hue), 5%, 100%;
--color-app-hover: var(--light-hue), 5%, 97%;
--color-app-active: var(--light-hue), 5%, 87%;
--color-app-shade: var(--light-hue), 15%, 50%;
--color-app-frame: 0, 0%, 100%;
// menu
@@ -87,12 +89,12 @@
--color-menu-selected: var(--light-hue), 5%, 30%;
--color-menu-shade: var(--light-hue), 5%, 0%;
--color-menu: var(--light-hue), 16%, 99%;
--color-menu-line: var(--light-hue), 5%, 90%;
--color-menu-ink: var(--light-hue), 5%, 30%;
--color-menu-faint: var(--light-hue), 5%, 80%;
--color-menu-hover: var(--light-hue), 15%, 20%;
--color-menu-selected: var(--light-hue), 5%, 30%;
--color-menu-shade: var(--light-hue), 5%, 0%;
// --color-menu: var(--light-hue), 16%, 99%;
// --color-menu-line: var(--light-hue), 5%, 90%;
// --color-menu-ink: var(--light-hue), 5%, 30%;
// --color-menu-faint: var(--light-hue), 5%, 80%;
// --color-menu-hover: var(--light-hue), 15%, 20%;
// --color-menu-selected: var(--light-hue), 5%, 30%;
// --color-menu-shade: var(--light-hue), 5%, 0%;
}
}

1
packages/ui/style/tailwind.js
View File

@@ -67,6 +67,7 @@ module.exports = function (app, options) {
button: alpha('--color-app-button'),
selected: alpha('--color-app-selected'),
hover: alpha('--color-app-hover'),
active: alpha('--color-app-active'),
shade: alpha('--color-app-shade'),
frame: alpha('--color-app-frame')
},