urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-28 13:54:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

system-prefs: better mobile styles

Browse Source
This commit is contained in:
Hunter Miller 2021-09-23 17:30:18 -05:00
parent 1f69b175e9
commit 421155285f
2 changed files with 82 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
pkg/grid/src/components/icons/LeftArrow.tsx Normal file
View File

@ -0,0 +1,15 @@
import React, { HTMLAttributes } from 'react';
type LeftArrowProps = HTMLAttributes<SVGSVGElement>;
export const LeftArrow = (props: LeftArrowProps) => (
<svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M16 8.5H1M1 8.5L7.5 2M1 8.5L7.5 15"
className="stroke-current"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

112
pkg/grid/src/nav/SystemPreferences.tsx
View File

@ -11,6 +11,8 @@ import { useCharges } from '../state/docket';
import { AppPrefs } from './preferences/AppPrefs';
import { DocketImage } from '../components/DocketImage';
import { ErrorAlert } from '../components/ErrorAlert';
import { useMedia } from '../logic/useMedia';
import { LeftArrow } from '../components/icons/LeftArrow';
interface SystemPreferencesSectionProps {
url: string;
@ -43,9 +45,15 @@ export const SystemPreferences = (props: RouteComponentProps<{ submenu: string }
`${match.url}/:submenu/:desk?`
);
const charges = useCharges();
const isMobile = useMedia('(max-width: 639px)');
const settingsPath = isMobile ? `${match.url}/:submenu` : '/';
const matchSub = useCallback(
(target: string, desk?: string) => {
if (isMobile) {
return false;
}
if (!subMatch && target === 'notifications') {
return true;
}
@ -66,54 +74,68 @@ export const SystemPreferences = (props: RouteComponentProps<{ submenu: string }
FallbackComponent={ErrorAlert}
onReset={() => history.push('/leap/system-preferences')}
>
<div className="flex h-full overflow-y-auto">
<aside className="flex-none self-start min-w-60 py-8 font-semibold border-r-2 border-gray-50">
<nav className="px-6">
<ul className="space-y-1">
<SystemPreferencesSection
url={subUrl('notifications')}
active={matchSub('notifications')}
>
<img className="w-8 h-8 mr-3" src={notificationsSVG} alt="" />
Notifications
</SystemPreferencesSection>
<SystemPreferencesSection
url={subUrl('system-updates')}
active={matchSub('system-updates')}
>
<img className="w-8 h-8 mr-3" src={systemUpdatesSVG} alt="" />
System Updates
</SystemPreferencesSection>
<SystemPreferencesSection url={subUrl('interface')} active={matchSub('interface')}>
<img className="w-8 h-8 mr-3" src={systemUpdatesSVG} alt="" />
Interface Settings
</SystemPreferencesSection>
</ul>
</nav>
<hr className="my-4 border-t-2 border-gray-50" />
<nav className="px-6">
<ul className="space-y-1">
{Object.values(charges).map((charge) => (
<div className="sm:flex h-full overflow-y-auto">
<Route exact={isMobile} path={match.url}>
<aside className="flex-none self-start w-full sm:w-auto min-w-60 py-4 sm:py-8 font-semibold border-r-2 border-gray-50">
<nav className="px-2 sm:px-6">
<h2 className="sm:hidden h3 mb-4 px-2">System Preferences</h2>
<ul className="space-y-1">
<SystemPreferencesSection
key={charge.desk}
url={subUrl(`apps/${charge.desk}`)}
active={matchSub('apps', charge.desk)}
url={subUrl('notifications')}
active={matchSub('notifications')}
>
<DocketImage size="small" className="mr-3" {...charge} />
{charge.title}
<img className="w-8 h-8 mr-3" src={notificationsSVG} alt="" />
Notifications
</SystemPreferencesSection>
))}
</ul>
</nav>
</aside>
<section className="flex-1 min-h-[600px] p-8 text-black">
<Switch>
<Route path={`${match.url}/apps/:desk`} component={AppPrefs} />
<Route path={`${match.url}/system-updates`} component={SystemUpdatePrefs} />
<Route path={`${match.url}/interface`} component={InterfacePrefs} />
<Route path={[`${match.url}/notifications`, match.url]} component={NotificationPrefs} />
</Switch>
</section>
<SystemPreferencesSection
url={subUrl('system-updates')}
active={matchSub('system-updates')}
>
<img className="w-8 h-8 mr-3" src={systemUpdatesSVG} alt="" />
System Updates
</SystemPreferencesSection>
<SystemPreferencesSection url={subUrl('interface')} active={matchSub('interface')}>
<img className="w-8 h-8 mr-3" src={systemUpdatesSVG} alt="" />
Interface Settings
</SystemPreferencesSection>
</ul>
</nav>
<hr className="my-4 border-t-2 border-gray-50" />
<nav className="px-2 sm:px-6">
<ul className="space-y-1">
{Object.values(charges).map((charge) => (
<SystemPreferencesSection
key={charge.desk}
url={subUrl(`apps/${charge.desk}`)}
active={matchSub('apps', charge.desk)}
>
<DocketImage size="small" className="mr-3" {...charge} />
{charge.title}
</SystemPreferencesSection>
))}
</ul>
</nav>
</aside>
</Route>
<Route path={settingsPath}>
<section className="flex-1 flex flex-col min-h-[60vh] p-4 sm:p-8 text-black">
<Switch>
<Route path={`${match.url}/apps/:desk`} component={AppPrefs} />
<Route path={`${match.url}/system-updates`} component={SystemUpdatePrefs} />
<Route path={`${match.url}/interface`} component={InterfacePrefs} />
<Route
path={[`${match.url}/notifications`, match.url]}
component={NotificationPrefs}
/>
</Switch>
<Link
to={match.url}
className="inline-flex sm:hidden items-center sm:none mt-auto pt-4 h4 text-gray-400"
>
<LeftArrow className="w-3 h-3 mr-2" /> Back
</Link>
</section>
</Route>
</div>
</ErrorBoundary>
);