Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-13 08:24:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

slider :)

Browse source
This commit is contained in:
Jamie 2022-03-01 03:49:18 -08:00
parent b6e94a2b2b
commit 593197c538
7 changed files with 95 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/desktop/package.json
View file

@ -32,6 +32,7 @@
"@headlessui/react": "^1.4.0",
"@heroicons/react": "^1.0.4",
"@radix-ui/react-dialog": "^0.1.5",
"@radix-ui/react-slider": "^0.1.4",
"@tauri-apps/api": "^1.0.0-beta.5",
"@types/pretty-bytes": "^5.2.0",
"@types/react-table": "^7.7.6",

2
apps/desktop/src/components/file/Sidebar.tsx
View file

@ -106,7 +106,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
{locations.map((location, index) => {
return (
<div key={index} className="flex flex-row items-center">
<SidebarLink className="relative group" to={`/app/explorer/${location.name}`}>
<SidebarLink className="relative w-full group" to={`/app/explorer/${location.name}`}>
<Icon component={ServerIcon} />
{location.name}
<div className="flex-grow" />

16
apps/desktop/src/components/primitive/Slider.tsx Normal file
View file

@ -0,0 +1,16 @@
import React from 'react';
import * as SliderPrimitive from '@radix-ui/react-slider';
const Slider = () => (
<SliderPrimitive.Root className="relative flex items-center w-full h-6 select-none">
<SliderPrimitive.Track className="relative flex-grow h-2 bg-gray-500 rounded-full outline-none">
<SliderPrimitive.Range className="absolute h-full rounded-full outline-none bg-primary-500" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb
className="z-50 block w-5 h-5 font-bold transition rounded-full shadow-lg outline-none shadow-black bg-primary-500 ring-primary-500 ring-opacity-30 focus:ring-4"
data-tip="1.0"
/>
</SliderPrimitive.Root>
);
export default Slider;

2
apps/desktop/src/screens/Overview.tsx
View file

@ -11,7 +11,7 @@ interface StatItemProps {
const StatItem: React.FC<StatItemProps> = (props) => {
return (
<div className="flex flex-col p-4 mt-2 rounded-md bg-gray-50 dark:bg-gray-600">
<div className="flex flex-col p-4 mt-2 rounded-md bg-gray-50 dark:bg-gray-550">
<span className="text-sm text-gray-400">{props.name}</span>
<span className="text-2xl font-bold">
{props.value}

8
apps/desktop/src/screens/settings/GeneralSettings.tsx
View file

@ -7,6 +7,7 @@ import { useAppState } from '../../store/global';
import Listbox from '../../components/primitive/Listbox';
import { useLocations } from '../../store/locations';
import ReactJson from 'react-json-view';
import Slider from '../../components/primitive/Slider';
export default function GeneralSettings() {
const locations = useLocations();
@ -41,7 +42,6 @@ export default function GeneralSettings() {
/>
<Button
className="ml-2"
size="sm"
variant="primary"
onClick={async () => {
await invoke('scan_dir', {
@ -72,6 +72,12 @@ export default function GeneralSettings() {
</Button>
</div>
</InputContainer>
<InputContainer
title="Locations"
description="Local cache storage for media previews and thumbnails."
>
<Slider />
</InputContainer>
<InputContainer
title="Media cache directory"
description="Local cache storage for media previews and thumbnails."

8
packages/ui/style/tailwind.config.js
View file

@ -40,7 +40,7 @@ module.exports = {
350: '#A6AABF',
400: '#9196A8',
450: '#71758A',
500: '#2E313B',
500: '#303544',
550: '#20222d',
600: '#171720',
650: '#121219',
@ -82,9 +82,9 @@ module.exports = {
'in-out-circ': 'cubic-bezier(0.85, 0, 0.15, 1)',
'in-back': 'cubic-bezier(0.36, 0, 0.66, -0.56)',
'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
'in-out-back': 'cubic-bezier(0.68, -0.6, 0.32, 1.6)',
},
},
'in-out-back': 'cubic-bezier(0.68, -0.6, 0.32, 1.6)'
}
}
}
},
variants: {

65
yarn.lock
View file

@ -769,6 +769,13 @@
"@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0"
"@radix-ui/number@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-0.1.0.tgz#73ad13d5cc5f75fa5e147d72e5d5d5e50d688256"
integrity sha512-rpf6QiOWLHAkM4FEMYu9i+5Jr8cKT893+R4mPpcdsy4LD7omr9JfdOqj/h/xPA5+EcVrpMMlU6rrRYpUB5UI8g==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/primitive@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-0.1.0.tgz#6206b97d379994f0d1929809db035733b337e543"
@ -776,6 +783,17 @@
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-collection@0.1.4":
version "0.1.4"
resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-0.1.4.tgz#734061ffd5bb93e88889d49b87391a73a63824c9"
integrity sha512-3muGI15IdgaDFjOcO7xX8a35HQRBRF6LH9pS6UCeZeRmbslkVeHyJRQr2rzICBUoX7zgIA0kXyMDbpQnJGyJTA==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-compose-refs" "0.1.0"
"@radix-ui/react-context" "0.1.1"
"@radix-ui/react-primitive" "0.1.4"
"@radix-ui/react-slot" "0.1.2"
"@radix-ui/react-compose-refs@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz#cff6e780a0f73778b976acff2c2a5b6551caab95"
@ -875,6 +893,32 @@
"@babel/runtime" "^7.13.10"
"@radix-ui/react-slot" "0.1.2"
"@radix-ui/react-primitive@0.1.4":
version "0.1.4"
resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz#6c233cf08b0cb87fecd107e9efecb3f21861edc1"
integrity sha512-6gSl2IidySupIMJFjYnDIkIWRyQdbu/AHK7rbICPani+LW4b0XdxBXc46og/iZvuwW8pjCS8I2SadIerv84xYA==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-slot" "0.1.2"
"@radix-ui/react-slider@^0.1.4":
version "0.1.4"
resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-0.1.4.tgz#a7b7a480ee00158195794b08cd3f1583cf102518"
integrity sha512-0z3bCcdrAi+FIcoLXS6r0ESVWuuyMnUJoCsFm7tC7Rtv95x34YtaI8YfSyQmzuMVS4rTsNtCCTZ/s727uRaVkQ==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/number" "0.1.0"
"@radix-ui/primitive" "0.1.0"
"@radix-ui/react-collection" "0.1.4"
"@radix-ui/react-compose-refs" "0.1.0"
"@radix-ui/react-context" "0.1.1"
"@radix-ui/react-primitive" "0.1.4"
"@radix-ui/react-use-controllable-state" "0.1.0"
"@radix-ui/react-use-direction" "0.1.0"
"@radix-ui/react-use-layout-effect" "0.1.0"
"@radix-ui/react-use-previous" "0.1.1"
"@radix-ui/react-use-size" "0.1.1"
"@radix-ui/react-slot@0.1.2":
version "0.1.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.1.2.tgz#e6f7ad9caa8ce81cc8d532c854c56f9b8b6307c8"
@ -906,6 +950,13 @@
"@babel/runtime" "^7.13.10"
"@radix-ui/react-use-callback-ref" "0.1.0"
"@radix-ui/react-use-direction@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-direction/-/react-use-direction-0.1.0.tgz#97ac1d52e497c974389e7988f809238ed72e7df7"
integrity sha512-NajpY/An9TCPSfOVkgWIdXJV+VuWl67PxB6kOKYmtNAFHvObzIoh8o0n9sAuwSAyFCZVq211FEf9gvVDRhOyiA==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-use-escape-keydown@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-0.1.0.tgz#dc80cb3753e9d1bd992adbad9a149fb6ea941874"
@ -921,6 +972,20 @@
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-use-previous@0.1.1":
version "0.1.1"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0"
integrity sha512-O/ZgrDBr11dR8rhO59ED8s5zIXBRFi8MiS+CmFGfi7MJYdLbfqVOmQU90Ghf87aifEgWe6380LA69KBneaShAg==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-use-size@0.1.1":
version "0.1.1"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-0.1.1.tgz#f6b75272a5d41c3089ca78c8a2e48e5f204ef90f"
integrity sha512-pTgWM5qKBu6C7kfKxrKPoBI2zZYZmp2cSXzpUiGM3qEBQlMLtYhaY2JXdXUCxz+XmD1YEjc8oRwvyfsD4AG4WA==
dependencies:
"@babel/runtime" "^7.13.10"
"@reach/skip-nav@^0.11.2":
version "0.11.2"
resolved "https://registry.yarnpkg.com/@reach/skip-nav/-/skip-nav-0.11.2.tgz#015498b2125ad8ef1e48cb8ab33dca93925fcbc8"