tloncorp/landscape
1
1
Fork 0
mirror of https://github.com/tloncorp/landscape.git synced 2025-01-05 23:56:54 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #24 from urbit/t/ux-enhancements

Browse Source 
ux: Preferences enhancements
This commit is contained in:
james acklin 2022-12-12 16:02:29 -05:00 committed by GitHub
commit 9fe6cbee69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/nav/Nav.tsx
View File

@ -150,7 +150,7 @@ export const Nav: FunctionComponent<NavProps> = ({ menu }) => {
<DialogContent
onInteractOutside={preventClose}
onOpenAutoFocus={onOpen}
className="fixed bottom-0 sm:top-0 sm:bottom-auto scroll-left-50 flex flex-col justify-end sm:justify-start scroll-full-width h-full sm:h-auto max-w-[882px] px-4 sm:pb-4 text-gray-400 -translate-x-1/2 outline-none"
className="max-h-full fixed bottom-0 sm:top-0 sm:bottom-auto scroll-left-50 flex flex-col justify-end sm:justify-start scroll-full-width h-full sm:h-auto max-w-[882px] px-4 sm:pb-4 text-gray-400 -translate-x-1/2 outline-none"
role="combobox"
aria-controls="leap-items"
aria-owns="leap-items"

28
ui/src/preferences/SystemPreferences.tsx
View File

@ -106,9 +106,9 @@ export const SystemPreferences = (
FallbackComponent={ErrorAlert}
onReset={() => history.push('/leap/system-preferences')}
>
<div className="h-full overflow-y-auto bg-gray-50 sm:flex">
<div className="system-preferences-grid bg-gray-50">
<Route exact={isMobile} path={match.url}>
<aside className="w-full min-w-60 flex-none self-start border-r-2 border-gray-50 bg-white py-4 font-semibold text-black sm:w-auto sm:py-8 sm:text-gray-600">
<aside className="system-preferences-aside min-h-fit max-h-[85vh] w-full min-w-60 flex flex-col border-r-2 border-gray-50 bg-white py-4 font-semibold text-black sm:w-auto sm:py-8 sm:text-gray-600">
<nav className="flex flex-col px-2 sm:px-6">
<SearchSystemPreferences subUrl={subUrl} />
<span className="pt-1 pl-2 pb-3 text-sm font-semibold text-gray-400">
@ -195,22 +195,24 @@ export const SystemPreferences = (
Installed App Settings
</span>
<ul className="space-y-1">
{filteredCharges.map((charge) => (
<SystemPreferencesSection
key={charge.desk}
url={subUrl(`apps/${charge.desk}`)}
active={matchSub('apps', charge.desk)}
>
<DocketImage size="small" className="mr-3" {...charge} />
{getAppName(charge)}
</SystemPreferencesSection>
))}
{filteredCharges
.sort((a, b) => getAppName(a).localeCompare(getAppName(b)))
.map((charge) => (
<SystemPreferencesSection
key={charge.desk}
url={subUrl(`apps/${charge.desk}`)}
active={matchSub('apps', charge.desk)}
>
<DocketImage size="small" className="mr-3" {...charge} />
{getAppName(charge)}
</SystemPreferencesSection>
))}
</ul>
</nav>
</aside>
</Route>
<Route path={settingsPath}>
<section className="flex min-h-[60vh] flex-1 flex-col bg-gray-50 p-4 text-gray-800 sm:p-8">
<section className="system-preferences-content flex min-h-[60vh] flex-1 flex-col bg-gray-50 p-4 text-gray-800 sm:p-8">
<Switch>
<Route path={`${match.url}/apps/:desk`} component={AppPrefs} />
<Route path={`${match.url}/help`} component={Help} />

15
ui/src/styles/grids.css
View File

@ -63,3 +63,18 @@
'icon head actions';
}
}
.system-preferences-grid {
display: grid;
grid-template-columns: 20rem 1fr;
grid-template-rows: auto;
}
.system-preferences-aside {
overflow-y: scroll;
}
.system-preferences-content {
overflow-y: scroll;
}