urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-22 18:31:44 +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

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

@ -48,7 +48,7 @@ export default function DisplayForm(props: DisplayFormProps) {
let bgColor, bgUrl; let bgColor, bgUrl;
if (backgroundType === "url") { if (backgroundType === "url") {
bgUrl = background; bgUrl = background;
} }
if (backgroundType === "color") { if (backgroundType === "color") {
bgColor = background; bgColor = background;
@ -70,11 +70,11 @@ export default function DisplayForm(props: DisplayFormProps) {
promises.push(api.settings.putEntry('display', 'backgroundType', values.bgType)); promises.push(api.settings.putEntry('display', 'backgroundType', values.bgType));
promises.push( promises.push(
api.settings.putEntry('display', 'background', api.settings.putEntry('display', 'background',
values.bgType === "color" values.bgType === "color"
? `#${uxToHex(values.bgColor || "0x0")}` ? `#${uxToHex(values.bgColor || "0x0")}`
: values.bgType === "url" : values.bgType === "url"
? values.bgUrl || "" ? values.bgUrl || ""
: false : false
)); ));
@ -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" />}

51
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>
<NotificationPreferences {hash === "notifications" && (
{...props} <NotificationPreferences
graphConfig={props.notificationsGraphConfig} {...props}
/> graphConfig={props.notificationsGraphConfig}
</SettingsItem> />
<SettingsItem hash="display"> )}
<DisplayForm s3={props.s3} api={props.api} /> {hash === "display" && (
</SettingsItem> <DisplayForm s3={props.s3} api={props.api} />
<SettingsItem hash="s3"> )}
<S3Form s3={props.s3} api={props.api} /> {hash === "s3" && (
</SettingsItem> <S3Form s3={props.s3} api={props.api} />
<SettingsItem hash="leap"> )}
<LeapSettings api={props.api} /> {hash === "leap" && (
</SettingsItem> <LeapSettings api={props.api} />
<SettingsItem hash="calm"> )}
<CalmPrefs api={props.api} /> {hash === "calm" && (
</SettingsItem> <CalmPrefs api={props.api} />
<SettingsItem hash="security"> )}
<SecuritySettings api={props.api} /> {hash === "security" && (
<SecuritySettings api={props.api} />
)}
</SettingsItem> </SettingsItem>
</Col> </Col>
</Row> </Row>