git.iko.soy/bridge
on master help sign in
Merge pull request #309 from urbit/logout-text
73bfaf9Anthony Arroyo
src/components/NavHeader.jsnew file+9
compare with master
unifiedsplit
@@ -0,0 +1,9 @@
1+import React from 'react';
2+import { createTeleporter } from 'react-teleporter';
3+
4+const NavHeaderTeleporter = createTeleporter();
5+
6+const NavHeader = NavHeaderTeleporter.Source;
7+NavHeader.Target = props => <NavHeaderTeleporter.Target as="div" {...props} />;
8+
9+export default NavHeader;
src/components/View.js+29−2
@@ -6,6 +6,7 @@ import Footer from './Footer';
6import useBreakpoints from 'lib/useBreakpoints';
6import useBreakpoints from 'lib/useBreakpoints';
7import MiniBackButton from './MiniBackButton';
7import MiniBackButton from './MiniBackButton';
8import { useHistory } from 'store/history';
8import { useHistory } from 'store/history';
9+import NavHeader from './NavHeader';
9
10
10const EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH = 2;
11const EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH = 2;
11
12
@@ -29,9 +30,32 @@ function View({
29
30
30 const goBack = useCallback(() => pop(), [pop]);
31 const goBack = useCallback(() => pop(), [pop]);
31
32
33+ const goLogout = useCallback(() => pop(size - 1), [pop, size]);
34+
32 const showBackButton = size > 1 && !!pop;
35 const showBackButton = size > 1 && !!pop;
33 const backIsLogout = size === EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH;
36 const backIsLogout = size === EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH;
34
37
38+ const Header = useCallback(
39+ ({ logout }) => {
40+ return showBackButton ? (
41+ <Flex.Item
42+ as={Flex}
43+ className={cn(insetPadding, 'flex-row-r justify-between pb5')}>
44+ <Flex.Item
45+ onClick={goLogout}
46+ as="a"
47+ className="f5 gray4 underline mr2 pointer">
48+ Logout
49+ </Flex.Item>
50+ <Flex.Item as={NavHeader.Target} />
51+ </Flex.Item>
52+ ) : (
53+ <Flex.Item className={insetPadding} as={NavHeader.Target} />
54+ );
55+ },
56+ [insetPadding, showBackButton]
57+ );
58+
35 return (
59 return (
36 <Flex
60 <Flex
37 row={!isMobile}
61 row={!isMobile}
@@ -51,7 +75,7 @@ function View({
51 col
75 col
52 style={{ width: '48px' }}
76 style={{ width: '48px' }}
53 className={cn(insetPadding)}>
77 className={cn(insetPadding)}>
54− {showBackButton && (
78+ {showBackButton && !backIsLogout && (
55 <MiniBackButton
79 <MiniBackButton
56 hpadding={!isMobile}
80 hpadding={!isMobile}
57 vpadding={isMobile}
81 vpadding={isMobile}
@@ -62,7 +86,10 @@ function View({
62 </Flex.Item>
86 </Flex.Item>
63
87
64 <Flex.Item flex={1} as={Flex} col justify="between">
88 <Flex.Item flex={1} as={Flex} col justify="between">
65− <Flex.Item className={cn('pb5', insetPadding)}>{children}</Flex.Item>
89+ <Flex.Item className="pb5 ">
90+ <Header logout={goBack} />
91+ {children}
92+ </Flex.Item>
66 <Flex.Item as={Footer.Target} />
93 <Flex.Item as={Footer.Target} />
67 </Flex.Item>
94 </Flex.Item>
68
95
src/views/Points.js+8−6
@@ -21,6 +21,7 @@ import Passport from 'components/Passport';
21import Footer from 'components/Footer';
21import Footer from 'components/Footer';
22import { ForwardButton } from 'components/Buttons';
22import { ForwardButton } from 'components/Buttons';
23import CopiableAddress from 'components/CopiableAddress';
23import CopiableAddress from 'components/CopiableAddress';
24+import NavHeader from 'components/NavHeader';
24
25
25const maybeGetResult = (obj, key, defaultValue) =>
26const maybeGetResult = (obj, key, defaultValue) =>
26 obj.matchWith({
27 obj.matchWith({
@@ -227,13 +228,14 @@ export default function Points() {
227
228
228 return (
229 return (
229 <View pop={pop} inset>
230 <View pop={pop} inset>
231+ <NavHeader>
232+ <CopiableAddress
233+ text={address}
234+ className="f6 mono gray4 mb4 us-none pointer">
235+ {abbreviateAddress(address)}
236+ </CopiableAddress>
237+ </NavHeader>
230 <Grid>
238 <Grid>
231− <Grid.Item full as={H1} className="f6 mono gray4 mb4 us-none pointer">
232− <CopiableAddress text={address}>
233− {abbreviateAddress(address)}
234− </CopiableAddress>
235− </Grid.Item>
236−
237 {displayEmptyState && (
239 {displayEmptyState && (
238 <Grid.Item full as={HelpText} className="mt8 t-center">
240 <Grid.Item full as={HelpText} className="mt8 t-center">
239 No points to display. This wallet is not the owner or proxy for any
241 No points to display. This wallet is not the owner or proxy for any