urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-23 02:41:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

settings: switch to multipage layout

Browse Source
This commit is contained in:
Matilde Park 2021-02-26 13:07:09 -05:00
parent 639372e58f
commit 9841e92325
7 changed files with 44 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx
View File

@ -66,7 +66,7 @@ export function CalmPrefs(props: {
return ( return (
<Formik initialValues={initialValues} onSubmit={onSubmit}> <Formik initialValues={initialValues} onSubmit={onSubmit}>
<Form> <Form>
<Col borderBottom="1" borderBottomColor="washedGray" p="5" gapY="5"> <Col borderBottom="1" borderBottomColor="washedGray" p="5" pt="4" gapY="5">
<Col gapY="1"> <Col gapY="1">
<Text color="black" fontSize={2} fontWeight="medium"> <Text color="black" fontSize={2} fontWeight="medium">
CalmEngine CalmEngine

2
pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx
View File

@ -86,7 +86,7 @@ export default function DisplayForm(props: DisplayFormProps) {
> >
{(props) => ( {(props) => (
<Form> <Form>
<Col p="5" gapY="5"> <Col p="5" pt="4" gapY="5">
<Col gapY="2"> <Col gapY="2">
<Text color="black" fontSize={2} fontWeight="medium"> <Text color="black" fontSize={2} fontWeight="medium">
Display Preferences Display Preferences

8
pkg/interface/src/views/apps/settings/components/lib/LeapSettings.tsx
View File

@ -74,19 +74,19 @@ export function LeapSettings(props: { api: GlobalApi; }) {
}; };
return ( return (
<Col p="5" gapY="5"> <Col p="5" pt="4" gapY="5">
<Col gapY="2"> <Col gapY="1">
<Text fontSize="2" fontWeight="medium"> <Text fontSize="2" fontWeight="medium">
Leap Leap
</Text> </Text>
<Text fontSize="0" gray> <Text gray>
Customize Leap ordering, omit modules or results Customize Leap ordering, omit modules or results
</Text> </Text>
</Col> </Col>
<FormikOnBlur initialValues={initialValues} onSubmit={onSubmit}> <FormikOnBlur initialValues={initialValues} onSubmit={onSubmit}>
<Form> <Form>
<Col gapY="4"> <Col gapY="4">
<Text fontWeight="medium" fontSize="0"> <Text fontWeight="medium">
Customize default Leap sections Customize default Leap sections
</Text> </Text>
<ShuffleFields name="categories"> <ShuffleFields name="categories">

2
pkg/interface/src/views/apps/settings/components/lib/NotificationPref.tsx
View File

@ -51,7 +51,7 @@ export function NotificationPreferences(props: {
}, [api]); }, [api]);
return ( return (
<Col p="5" gapY="5"> <Col p="5" pt="4" gapY="5">
<Col gapY="1"> <Col gapY="1">
<Text fontSize="2" fontWeight="medium"> <Text fontSize="2" fontWeight="medium">
Notification Preferences Notification Preferences

4
pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx
View File

@ -48,7 +48,7 @@ export default function S3Form(props: S3FormProps): ReactElement {
); );
return ( return (
<> <>
<Col p="5" borderBottom="1" borderBottomColor="washedGray"> <Col p="5" pt="4" borderBottom="1" borderBottomColor="washedGray">
<Formik <Formik
initialValues={ initialValues={
{ {
@ -62,7 +62,7 @@ export default function S3Form(props: S3FormProps): ReactElement {
onSubmit={onSubmit} onSubmit={onSubmit}
> >
<Form> <Form>
<Col mt="5" maxWidth="600px" gapY="5"> <Col maxWidth="600px" gapY="5">
<Col gapY="1"> <Col gapY="1">
<Text color="black" fontSize={2} fontWeight="medium"> <Text color="black" fontSize={2} fontWeight="medium">
S3 Storage Setup S3 Storage Setup

10
pkg/interface/src/views/apps/settings/components/lib/Security.tsx
View File

@ -16,8 +16,8 @@ interface SecuritySettingsProps {
export default function SecuritySettings({ api }: SecuritySettingsProps) { export default function SecuritySettings({ api }: SecuritySettingsProps) {
const [allSessions, setAllSessions] = useState(false); const [allSessions, setAllSessions] = useState(false);
return ( return (
<Col gapY="5" p="5"> <Col gapY="5" p="5" pt="4">
<Col> <Col gapY="1">
<Text fontSize={2} fontWeight="medium"> <Text fontSize={2} fontWeight="medium">
Security Preferences Security Preferences
</Text> </Text>
@ -26,10 +26,10 @@ export default function SecuritySettings({ api }: SecuritySettingsProps) {
</Text> </Text>
</Col> </Col>
<Col gapY="1"> <Col gapY="1">
<Text color="black" fontSize={0}> <Text color="black">
Log out of this session Log out of this session
</Text> </Text>
<Text mb="3" fontSize={0} gray> <Text mb="3" gray>
{allSessions {allSessions
? "You will be logged out of all browsers that have currently logged into your Urbit." ? "You will be logged out of all browsers that have currently logged into your Urbit."
: "You will be logged out of your Urbit on this browser."} : "You will be logged out of your Urbit on this browser."}
@ -39,7 +39,7 @@ export default function SecuritySettings({ api }: SecuritySettingsProps) {
selected={allSessions} selected={allSessions}
onChange={() => setAllSessions((s) => !s)} onChange={() => setAllSessions((s) => !s)}
> >
<Text fontSize="0">Log out of all sessions</Text> <Text>Log out of all sessions</Text>
</StatelessCheckboxField> </StatelessCheckboxField>
<form method="post" action="/~/logout"> <form method="post" action="/~/logout">
{allSessions && <input type="hidden" name="all" />} {allSessions && <input type="hidden" name="all" />}

33
pkg/interface/src/views/apps/settings/settings.tsx
View File

@ -50,11 +50,11 @@ function SidebarItem(props: { hash: string } & Omit<BaseProps, ProvSideProps>) {
); );
} }
function SettingsItem(props: { hash: string; children: ReactNode }) { function SettingsItem(props: { children: ReactNode }) {
const { hash, children } = props; const { children } = props;
return ( return (
<Box borderBottom="1" borderBottomColor="washedGray" id={hash}> <Box borderBottom="1" borderBottomColor="washedGray">
{children} {children}
</Box> </Box>
); );
@ -62,7 +62,8 @@ function SettingsItem(props: { hash: string; children: ReactNode }) {
export default function SettingsScreen(props: any) { export default function SettingsScreen(props: any) {
useHashLink(); const location = useLocation();
const hash = location.hash.slice(1)
return ( return (
<> <>
@ -106,26 +107,28 @@ export default function SettingsScreen(props: any) {
</Col> </Col>
</Col> </Col>
<Col flexGrow={1} overflowY="auto"> <Col flexGrow={1} overflowY="auto">
<SettingsItem hash="notifications"> <SettingsItem>
{hash === "notifications" && (
<NotificationPreferences <NotificationPreferences
{...props} {...props}
graphConfig={props.notificationsGraphConfig} graphConfig={props.notificationsGraphConfig}
/> />
</SettingsItem> )}
<SettingsItem hash="display"> {hash === "display" && (
<DisplayForm s3={props.s3} api={props.api} /> <DisplayForm s3={props.s3} api={props.api} />
</SettingsItem> )}
<SettingsItem hash="s3"> {hash === "s3" && (
<S3Form s3={props.s3} api={props.api} /> <S3Form s3={props.s3} api={props.api} />
</SettingsItem> )}
<SettingsItem hash="leap"> {hash === "leap" && (
<LeapSettings api={props.api} /> <LeapSettings api={props.api} />
</SettingsItem> )}
<SettingsItem hash="calm"> {hash === "calm" && (
<CalmPrefs api={props.api} /> <CalmPrefs api={props.api} />
</SettingsItem> )}
<SettingsItem hash="security"> {hash === "security" && (
<SecuritySettings api={props.api} /> <SecuritySettings api={props.api} />
)}
</SettingsItem> </SettingsItem>
</Col> </Col>
</Row> </Row>