>
}
const useStyles = makeStyles({
paper: { maxWidth: 500 },
@@ -82,8 +98,9 @@ const useStyles = makeStyles({
input: { flex: 1 },
button: { marginLeft: 8, padding: '2px 6px' },
})
-export function SelectPeopleUI(props: SelectPeopleUI) {
+export function SelectPeopleUI(props: SelectPeopleUIProps) {
const { people, frozenSelected, onSetSelected, selected, disabled, ignoreMyself } = props
+ const { hideSelectAll, hideSelectNone, showAtNetwork, maxSelection, classes: classesProp = {} } = props
const classes = useStyles()
const myself = useContext(CurrentUsingIdentityContext)
@@ -113,8 +130,12 @@ export function SelectPeopleUI(props: SelectPeopleUI) {
{geti18nString('select_none')}
)
+
+ const showSelectAll = !hideSelectAll && listAfterSearch.length > 0 && typeof maxSelection === 'undefined'
+ const showSelectNone = !hideSelectNone && selected.length > 0
+
return (
- <>
+
{frozenSelected.map(FrozenChip)}
{selected.map(RemovableChip)}
@@ -131,38 +152,39 @@ export function SelectPeopleUI(props: SelectPeopleUI) {
disabled={disabled}
/>
- {disabled ? (
- undefined
- ) : (
- <>
-
- {listAfterSearch.length > 0 && SelectAllButton}
- {selected.length > 0 && SelectNoneButton}
-
-
-
- {listBeforeSearch.length > 0 && listBeforeSearch.length === 0 && (
-
-
-
- )}
- {listAfterSearch.map(PeopleListItem)}
-
-
-
- )}
-
+
+ {showSelectAll && SelectAllButton}
+ {showSelectNone && SelectNoneButton}
+
+
+
+ {listBeforeSearch.length > 0 && listBeforeSearch.length === 0 && (
+
+
+
+ )}
+ {listAfterSearch.map(PeopleListItem)}
+
+
+
)
function PeopleListItem(person: Person) {
if (ignoreMyself && myself && person.identifier.equals(myself.identifier)) return null
return (
= 2 &&
+ frozenSelected.length + selected.length >= maxSelection)
+ }
onClick={() => {
- onSetSelected(selected.concat(person))
+ if (maxSelection === 1) onSetSelected([person])
+ else onSetSelected(selected.concat(person))
setSearch('')
}}
/>
diff --git a/src/components/InjectedComponents/SelectPeopleDialog.tsx b/src/components/InjectedComponents/SelectPeopleDialog.tsx
index d1b7af8272c..88f848e8a94 100644
--- a/src/components/InjectedComponents/SelectPeopleDialog.tsx
+++ b/src/components/InjectedComponents/SelectPeopleDialog.tsx
@@ -25,7 +25,7 @@ const useStyles = makeStyles({
content: { padding: '0 12px' },
progress: { marginRight: 6 },
})
-const ResponsiveDialog = withMobileDialog()(Dialog)
+const ResponsiveDialog = withMobileDialog({ breakpoint: 'xs' })(Dialog)
export function SelectPeopleDialog(props: Props) {
const classes = useStyles()
const [people, select] = useState([] as Person[])
diff --git a/src/components/Welcomes/0.tsx b/src/components/Welcomes/0.tsx
index 0820f0ab62c..a42575cee21 100644
--- a/src/components/Welcomes/0.tsx
+++ b/src/components/Welcomes/0.tsx
@@ -86,7 +86,7 @@ export default function Welcome({ create, restore, close }: Props) {
{geti18nString('welcome_0_new_user')}
- {geti18nString('welcome_0_connect_facebook')}
+ {geti18nString('welcome_0_connect_maskbook')}
diff --git a/src/components/Welcomes/1a1.tsx b/src/components/Welcomes/1a1.tsx
new file mode 100644
index 00000000000..498de4d8125
--- /dev/null
+++ b/src/components/Welcomes/1a1.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react'
+import { getUrl } from '../../utils/utils'
+import { geti18nString } from '../../utils/i18n'
+import { Typography, Button, makeStyles } from '@material-ui/core'
+import WelcomeContainer from './WelcomeContainer'
+import { SelectPeopleUI } from '../InjectedComponents/SelectPeople'
+import { useState } from 'react'
+import { Person } from '../../database'
+
+interface Props {
+ next(person: Person): void
+ didntFindAccount(): void
+ identities: Person[]
+}
+const useStyles = makeStyles(theme => ({
+ paper: {
+ padding: '2rem 1rem 1rem 1rem',
+ textAlign: 'center',
+ '& > *': {
+ marginBottom: theme.spacing(3),
+ },
+ },
+ button: {
+ minWidth: 180,
+ },
+ select: {
+ padding: '0 4em',
+ },
+}))
+export default function Welcome({ next, identities, didntFindAccount }: Props) {
+ const classes = useStyles()
+ const [selected, setSelect] = useState([])
+ return (
+
+ {geti18nString('welcome_1a1_title')}
+
+
+
+
+
+ )
+}
diff --git a/src/extension/options-page/Welcome/index.tsx b/src/extension/options-page/Welcome/index.tsx
index 90f3c55af8a..55d9063623a 100644
--- a/src/extension/options-page/Welcome/index.tsx
+++ b/src/extension/options-page/Welcome/index.tsx
@@ -127,7 +127,7 @@ function Welcome(props: Welcome) {
return
}
}
-const ResponsiveDialog = withMobileDialog()(Dialog)
+const ResponsiveDialog = withMobileDialog({ breakpoint: 'xs' })(Dialog)
const ProvePostRef = new ValueRef('')
const IdentifierRef = new ValueRef(PersonIdentifier.unknown)
const getMyProveBio = async () => {
diff --git a/src/stories/Welcome.tsx b/src/stories/Welcome.tsx
index a2fdced2a85..3c9fb3c0ba2 100644
--- a/src/stories/Welcome.tsx
+++ b/src/stories/Welcome.tsx
@@ -1,6 +1,7 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import Welcome0 from '../components/Welcomes/0'
+import Welcome1a1 from '../components/Welcomes/1a1'
import Welcome1a2 from '../components/Welcomes/1a2'
import Welcome1a3 from '../components/Welcomes/1a3'
import Welcome1a4v2 from '../components/Welcomes/1a4.v2'
@@ -12,8 +13,9 @@ import { action } from '@storybook/addon-actions'
import { BannerUI } from '../components/Welcomes/Banner'
import { withMobileDialog, Dialog } from '@material-ui/core'
import QRScanner from '../components/Welcomes/QRScanner'
+import { demoPeople } from './demoPeople'
-const ResponsiveDialog = withMobileDialog()(Dialog)
+const ResponsiveDialog = withMobileDialog({ breakpoint: 'xs' })(Dialog)
storiesOf('Welcome', module)
.add('Banner', () => (
@@ -22,11 +24,20 @@ storiesOf('Welcome', module)
))
+ .add('Step 1a-1', () => (
+
+ to('Welcome', 'Step 1a-2')}
+ identities={demoPeople}
+ didntFindAccount={action('didntFindAccount')}
+ />
+
+ ))
.add('Step 1a-2', () => (
diff --git a/src/stories/demoPeople.tsx b/src/stories/demoPeople.tsx
index d6de4de5dce..4c1e02eaff0 100644
--- a/src/stories/demoPeople.tsx
+++ b/src/stories/demoPeople.tsx
@@ -4,8 +4,8 @@ export const demoPeople: Person[] = [
{
fingerprint: 'FDFE333CE20ED446AD88F3C8BA3AD1AA5ECAF521',
avatar: 'https://avatars3.githubusercontent.com/u/5390719?s=460&v=4',
- nickname: 'Jack Works',
- identifier: new PersonIdentifier('localhost', 'test'),
+ nickname: '雨宮響也',
+ identifier: new PersonIdentifier('facebook.com', 'test'),
groups: [],
},
{
@@ -14,20 +14,20 @@ export const demoPeople: Person[] = [
.reverse()
.join(''),
avatar: 'https://avatars1.githubusercontent.com/u/3343358?s=460&v=4',
- nickname: 'Robot of the century',
- identifier: new PersonIdentifier('localhost', 'test'),
+ nickname: '赫胥黎',
+ identifier: new PersonIdentifier('twitter.com', 'test2'),
groups: [],
},
{
fingerprint: 'a2f7643cd1aed446ad88f3c8ba13843dfa2f321d',
- nickname: 'Material Design',
- identifier: new PersonIdentifier('localhost', 'test'),
+ nickname: '小樱茉莉',
+ identifier: new PersonIdentifier('mastodon@example.org', 'test3'),
groups: [],
},
{
fingerprint: 'a2f7643cd1aed446ad88f3c8ba13843dfa2f321d',
- nickname: 'コノハ',
- identifier: new PersonIdentifier('localhost', 'test'),
+ nickname: '温斯顿·史密斯',
+ identifier: new PersonIdentifier('gnu-social@example.org', 'test4'),
groups: [],
},
]