Skip to content

Commit b206c54

Browse files
allison-truhlarallison-truhlar
authored
Merge pull request #49 from JaneliaSciComp/fix-sidebar-scroll
Fix sidebar scroll
2 parents 4c5617a + 69feeb3 commit b206c54

19 files changed

+97
-72
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,5 +134,8 @@ dmypy.json
134134
pixi.lock
135135
package-lock.json
136136

137+
# Zarr files
138+
*.zarr
139+
137140
# Converted Tailwind CSS
138141
style/tailwind_converted.css

‎src/components/Preferences.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default function Preferences() {
3636
<Card.Body className="flex flex-col gap-4 pb-4">
3737
<div className="flex items-center gap-2">
3838
<input
39-
className="w-4 h-4 checked:accent-secondary-light"
39+
className="icon-small checked:accent-secondary-light"
4040
type="radio"
4141
id="linux_path"
4242
value="linux_path"
@@ -58,7 +58,7 @@ export default function Preferences() {
5858

5959
<div className="flex items-center gap-2">
6060
<input
61-
className="w-4 h-4 checked:accent-secondary-light"
61+
className="icon-small checked:accent-secondary-light"
6262
type="radio"
6363
id="windows_path"
6464
value="windows_path"
@@ -79,7 +79,7 @@ export default function Preferences() {
7979

8080
<div className="flex items-center gap-2">
8181
<input
82-
className="w-4 h-4 checked:accent-secondary-light"
82+
className="icon-small checked:accent-secondary-light"
8383
type="radio"
8484
id="mac_path"
8585
value="mac_path"
@@ -106,7 +106,7 @@ export default function Preferences() {
106106
<Alert className="flex items-center gap-6 mt-6 bg-secondary-light/70 border-none">
107107
<Alert.Content>Preference updated!</Alert.Content>
108108
<XMarkIcon
109-
className="h-5 w-5 cursor-pointer"
109+
className="icon-default cursor-pointer"
110110
onClick={() => setShowPathPrefAlert(false)}
111111
/>
112112
</Alert>

‎src/components/ui/FileBrowser/Crumbs.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ export default function Crumbs(): ReactNode {
2323
<div className="w-full py-2 px-3">
2424
<Breadcrumb className="bg-transparent p-0">
2525
<div className="flex items-center gap-1 h-5">
26-
<Squares2X2Icon className="h-5 w-5 text-primary-light" />
27-
<ChevronRightIcon className="h-5 w-5" />
26+
<Squares2X2Icon className="icon-default text-primary-light" />
27+
<ChevronRightIcon className="icon-default" />
2828
</div>
2929

3030
{/* Path segments */}
@@ -57,7 +57,7 @@ export default function Crumbs(): ReactNode {
5757
</BreadcrumbLink>
5858
{/* Add separator since is not the last segment */}
5959
<BreadcrumbSeparator>
60-
<SlashIcon className="h-5 w-5" />
60+
<SlashIcon className="icon-default" />
6161
</BreadcrumbSeparator>
6262
</React.Fragment>
6363
);

‎src/components/ui/FileBrowser/Dialogs/ChangePermissions.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export default function ChangePermissions({
6767
setShowAlert(false);
6868
}}
6969
>
70-
<XMarkIcon className="h-5 w-5" />
70+
<XMarkIcon className="icon-default" />
7171
</IconButton>
7272
{targetItem ? (
7373
<form
@@ -181,7 +181,7 @@ export default function ChangePermissions({
181181
>
182182
<Alert.Content>{alertContent}</Alert.Content>
183183
<XMarkIcon
184-
className="h-5 w-5 cursor-pointer"
184+
className="icon-default cursor-pointer"
185185
onClick={() => {
186186
setShowAlert(false);
187187
}}

‎src/components/ui/FileBrowser/Dialogs/Delete.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default function DeleteDialog({
4040
setShowAlert(false);
4141
}}
4242
>
43-
<XMarkIcon className="h-5 w-5" />
43+
<XMarkIcon className="icon-default" />
4444
</IconButton>
4545
<Typography className="my-8 text-large">
4646
Are you sure you want to delete{' '}
@@ -63,7 +63,7 @@ export default function DeleteDialog({
6363
>
6464
<Alert.Content>{alertContent}</Alert.Content>
6565
<XMarkIcon
66-
className="h-5 w-5 cursor-pointer"
66+
className="icon-default cursor-pointer"
6767
onClick={() => {
6868
setShowAlert(false);
6969
setShowDeleteDialog(false);

‎src/components/ui/FileBrowser/Dialogs/NewFolderDialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default function NewFolderDialog({
4646
setShowAlert(false);
4747
}}
4848
>
49-
<XMarkIcon className="h-5 w-5" />
49+
<XMarkIcon className="icon-default" />
5050
</IconButton>
5151
<form
5252
onSubmit={event => {
@@ -83,7 +83,7 @@ export default function NewFolderDialog({
8383
>
8484
<Alert.Content>{alertContent}</Alert.Content>
8585
<XMarkIcon
86-
className="h-5 w-5 cursor-pointer"
86+
className="icon-default cursor-pointer"
8787
onClick={() => setShowAlert(false)}
8888
/>
8989
</Alert>

‎src/components/ui/FileBrowser/Dialogs/RenameDialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default function RenameDialog({
4646
setShowAlert(false);
4747
}}
4848
>
49-
<XMarkIcon className="h-5 w-5" />
49+
<XMarkIcon className="icon-default" />
5050
</IconButton>
5151
<form
5252
onSubmit={event => {
@@ -83,7 +83,7 @@ export default function RenameDialog({
8383
>
8484
<Alert.Content>{alertContent}</Alert.Content>
8585
<XMarkIcon
86-
className="h-5 w-5 cursor-pointer"
86+
className="icon-default cursor-pointer"
8787
onClick={() => setShowAlert(false)}
8888
/>
8989
</Alert>

‎src/components/ui/FileBrowser/FileRow.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,9 @@ export default function FileRow({
100100
{/* Type column */}
101101
<div className="flex items-center w-full gap-3 py-1 text-grey-700 overflow-x-auto">
102102
{file.is_dir ? (
103-
<FolderIcon className="text-foreground h-5 w-5" />
103+
<FolderIcon className="text-foreground icon-default" />
104104
) : (
105-
<DocumentIcon className="text-foreground h-5 w-5" />
105+
<DocumentIcon className="text-foreground icon-default" />
106106
)}
107107
<Typography variant="small" className="font-medium">
108108
{file.is_dir ? 'Folder' : 'File'}
@@ -137,7 +137,7 @@ export default function FileRow({
137137
}}
138138
>
139139
<IconButton variant="ghost">
140-
<EllipsisHorizontalCircleIcon className="h-5 w-5 text-foreground" />
140+
<EllipsisHorizontalCircleIcon className="icon-default text-foreground" />
141141
</IconButton>
142142
</div>
143143
</div>

‎src/components/ui/FileBrowser/Toolbar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ export default function Toolbar({
3636
onClick={() => setHideDotFiles((prev: boolean) => !prev)}
3737
>
3838
{hideDotFiles ? (
39-
<EyeSlashIcon className="h-5 w-5" />
39+
<EyeSlashIcon className="icon-default" />
4040
) : (
41-
<EyeIcon className="h-5 w-5" />
41+
<EyeIcon className="icon-default" />
4242
)}
4343
<Tooltip.Content className="px-2.5 py-1.5 text-primary-foreground">
4444
<Typography type="small" className="opacity-90">
@@ -58,7 +58,7 @@ export default function Toolbar({
5858
setShowNewFolderDialog(true);
5959
}}
6060
>
61-
<FolderPlusIcon className="h-5 w-5" />
61+
<FolderPlusIcon className="icon-default" />
6262
</Tooltip.Trigger>
6363
<Tooltip.Content className="px-2.5 py-1.5 text-primary-foreground">
6464
<Typography type="small" className="opacity-90">
@@ -75,7 +75,7 @@ export default function Toolbar({
7575
variant="outline"
7676
onClick={() => setShowPropertiesDrawer((prev: boolean) => !prev)}
7777
>
78-
<ListBulletIcon className="h-5 w-5" />
78+
<ListBulletIcon className="icon-default" />
7979
<Tooltip.Content className="px-2.5 py-1.5 text-primary-foreground">
8080
<Typography type="small" className="opacity-90">
8181
View file properties

‎src/components/ui/Navbar.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,11 @@ function NavList() {
5353
className="flex items-center dark:!text-foreground hover:bg-hover-gradient hover:dark:bg-hover-gradient-dark focus:bg-hover-gradient focus:dark:bg-hover-gradient-dark hover:!text-foreground focus:!text-foreground"
5454
>
5555
<List.ItemStart className="flex items-center mr-1.5">
56-
<Icon className="h-5 w-5" />
56+
<Icon className="icon-default x-short:icon-xsmall short-icon-xsmall" />
5757
</List.ItemStart>
58-
<Typography type="small">{title}</Typography>
58+
<Typography type="small" className="x-short:text-xs">
59+
{title}
60+
</Typography>
5961
</List.Item>
6062
))}
6163
</>
@@ -71,24 +73,24 @@ function ProfileMenu() {
7173
size="sm"
7274
variant="ghost"
7375
color="secondary"
74-
className="flex items-center justify-center p-1 rounded-full h-8 w-8 text-foreground dark:text-foreground hover:!text-foreground focus:!text-foreground hover:bg-hover-gradient focus:bg-hover-gradient focus:dark:bg-hover-gradient-dark"
76+
className="flex items-center justify-center p-1 rounded-full h-8 w-8 x-short:h-6 x-short:w-6 text-foreground dark:text-foreground hover:!text-foreground focus:!text-foreground hover:bg-hover-gradient focus:bg-hover-gradient focus:dark:bg-hover-gradient-dark"
7577
>
76-
<UserCircleIcon className="h-6 w-6" />
78+
<UserCircleIcon className="icon-large x-short:icon-default" />
7779
</Menu.Trigger>
7880
<Menu.Content>
7981
<Menu.Item
8082
as={Link}
8183
to="/profile"
8284
className="dark:text-foreground hover:bg-hover-gradient hover:dark:bg-hover-gradient-dark focus:bg-hover-gradient focus:dark:bg-hover-gradient-dark hover:!text-foreground focus:!text-foreground"
8385
>
84-
<UserCircleIcon className="mr-2 h-[18px] w-[18px]" /> Profile
86+
<UserCircleIcon className="mr-2 icon-default" /> Profile
8587
</Menu.Item>
8688
<Menu.Item
8789
as={Link}
8890
to="/preferences"
8991
className="dark:text-foreground hover:bg-hover-gradient hover:dark:bg-hover-gradient-dark focus:bg-hover-gradient focus:dark:bg-hover-gradient-dark hover:!text-foreground focus:!text-foreground"
9092
>
91-
<AdjustmentsHorizontalIcon className="mr-2 h-[18px] w-[18px]" />{' '}
93+
<AdjustmentsHorizontalIcon className="mr-2 icon-default" />{' '}
9294
Preferences
9395
</Menu.Item>
9496
<hr className="!my-1 -mx-1 border-surface" />
@@ -124,13 +126,13 @@ export default function FileglancerNavbar() {
124126
}, []);
125127

126128
return (
127-
<Navbar className="mx-auto w-full rounded-none bg-background p-4 dark:shadow-surface">
129+
<Navbar className="mx-auto w-full rounded-none bg-background p-4 short:py-3 x-short:py-1 dark:shadow-surface">
128130
<div className="flex items-center justify-between ">
129131
{/* Logo */}
130132
<Link to="/">
131133
<div className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent flex items-center">
132134
<svg
133-
className="w-6 h-6 text-primary"
135+
className="icon-large x-short:icon-small text-primary"
134136
viewBox="0 0 18 24"
135137
version="1.1"
136138
xmlns="http://www.w3.org/2000/svg"
@@ -158,7 +160,7 @@ export default function FileglancerNavbar() {
158160
</svg>
159161
<Typography
160162
type="h6"
161-
className="ml-2 mr-2 block font-semibold pointer-events-none"
163+
className="ml-2 mr-2 block font-semibold pointer-events-none x-short:text-base"
162164
>
163165
Janelia Fileglancer
164166
</Typography>
@@ -182,9 +184,9 @@ export default function FileglancerNavbar() {
182184
onClick={toggleTheme}
183185
>
184186
{isLightTheme ? (
185-
<SunIcon className="h-6 w-6" />
187+
<SunIcon className="icon-large x-short:icon-default" />
186188
) : (
187-
<MoonIcon className="h-6 w-6" />
189+
<MoonIcon className="icon-large x-short:icon-default" />
188190
)}
189191
</IconButton>
190192
<ProfileMenu />
@@ -197,9 +199,9 @@ export default function FileglancerNavbar() {
197199
className="mr-2 grid ml-auto text-foreground dark:text-foreground hover:!text-foreground focus:!text-foreground lg:hidden hover:bg-hover-gradient hover:dark:bg-hover-gradient-dark focus:bg-hover-gradient focus:dark:bg-hover-gradient-dark"
198200
>
199201
{openNav ? (
200-
<XMarkIcon className="h-6 w-6" />
202+
<XMarkIcon className="icon-large x-short:icon-default" />
201203
) : (
202-
<MenuIcon className="h-6 w-6" />
204+
<MenuIcon className="icon-large x-short:icon-default" />
203205
)}
204206
</IconButton>
205207
</div>

0 commit comments

Comments
 (0)