From 544af1936cc78084d72bc2783a4eba870b9824e3 Mon Sep 17 00:00:00 2001 From: Zhiyuan Zheng Date: Mon, 22 Mar 2021 00:04:47 +0100 Subject: [PATCH 1/2] Small fixes --- demo/statuses.json | 176 -------------------- demo/statuses.ts | 185 ++++++++++++++++++++++ src/components/Timeline/Shared/Poll.tsx | 17 +- src/i18n/en/components/instance.ts | 2 +- src/i18n/en/components/relativeTime.ts | 3 +- src/i18n/en/components/timeline.ts | 2 +- src/i18n/en/screens/meSettingsFontsize.ts | 2 +- src/i18n/en/screens/meSwitch.ts | 2 +- src/screens/Compose/Root/Footer/Poll.tsx | 2 +- 9 files changed, 205 insertions(+), 186 deletions(-) delete mode 100644 demo/statuses.json create mode 100644 demo/statuses.ts diff --git a/demo/statuses.json b/demo/statuses.json deleted file mode 100644 index 104f9e7c..00000000 --- a/demo/statuses.json +++ /dev/null @@ -1,176 +0,0 @@ -{ - "pageParams": [], - "pages": [ - [ - { - "id": "999", - "created_at": "2021-01-24T11:50:00.901Z", - "sensitive": false, - "visibility": "public", - "replies_count": 9, - "reblogs_count": 15, - "favourites_count": 8, - "favourited": false, - "reblogged": true, - "muted": false, - "bookmarked": false, - "content": "

Would you like to try out this simple and open-source mobile app for Mastodon? 😊

", - "reblog": null, - "application": { - "name": "tooot", - "website": "https://tooot.app" - }, - "account": { - "id": "999", - "username": "tooot📱", - "acct": "tooot@xmflsct.com", - "display_name": "tooot📱", - "avatar_static": "https://avatars.githubusercontent.com/u/77554750?s=200&v=4" - }, - "media_attachments": [], - "poll": { - "id": "1", - "expires_at": "2021-01-31T11:50:00.901Z", - "expired": false, - "multiple": false, - "votes_count": 10, - "voters_count": null, - "voted": false, - "own_votes": null, - "options": [ - { - "title": "I would love to!", - "votes_count": 6 - }, - { - "title": "Why not give it a go?", - "votes_count": 4 - } - ], - "emojis": [] - }, - "mentions": [] - }, - { - "id": "1000", - "created_at": "2021-01-24T10:50:00.901Z", - "sensitive": false, - "spoiler_text": "", - "visibility": "public", - "replies_count": 5, - "reblogs_count": 6, - "favourites_count": 11, - "favourited": true, - "reblogged": false, - "muted": false, - "bookmarked": false, - "content": "

Mastodon is a free and open-source self-hosted social networking service. It allows anyone to host their own server node in the network, and its various separately operated user bases are federated across many different servers. These nodes are referred to as \"instances\" by Mastodon users.

", - "reblog": null, - "application": { - "name": "Web", - "website": null - }, - "account": { - "id": "1000", - "username": "Mastodon", - "acct": "mastodon", - "display_name": "Mastodon", - "avatar_static": "https://cdn.dnaindia.com/sites/default/files/styles/full/public/2017/04/06/563120-123.jpg" - }, - "media_attachments": [], - "card": { - "url": "https://joinmastodon.org/", - "title": "Giving social networking back to you - Mastodon", - "description": "Mastodon is an open source decentralized social network - by the people for the people. Join the federation and take back control of your social media!", - "type": "link", - "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Mastodon_Logotype_%28Simple%29.svg/1200px-Mastodon_Logotype_%28Simple%29.svg.png" - }, - "mentions": [] - }, - { - "id": "1001", - "created_at": "2021-01-24T09:50:00.901Z", - "spoiler_text": "", - "visibility": "public", - "replies_count": 2, - "reblogs_count": null, - "favourites_count": 3, - "favourited": false, - "reblogged": false, - "muted": false, - "bookmarked": true, - "content": "

These servers are connected as a federated social network, allowing users from different servers to interact with each other seamlessly. Once a Mastodon server knows another Mastodon server, it \"federates\" with the other Mastodon server. Mastodon is a part of the wider Fediverse, allowing its users to also interact with users on different open platforms that support the same protocol, such as PeerTube and Friendica.

", - "reblog": null, - "application": { - "name": "Web", - "website": null - }, - "account": { - "id": "1001", - "username": "Fediverse", - "acct": "fediverse", - "display_name": "Fediverse", - "avatar_static": "https://e7.pngegg.com/pngimages/667/514/png-clipart-mastodon-fediverse-social-media-free-software-logo-social-media-blue-text.png" - }, - "media_attachments": [], - "mentions": [] - }, - { - "id": "1002", - "created_at": "2021-01-24T08:50:00.901Z", - "sensitive": false, - "visibility": "public", - "replies_count": 0, - "reblogs_count": 0, - "favourites_count": 0, - "favourited": true, - "reblogged": false, - "muted": false, - "bookmarked": false, - "content": "

tooot is an open source, simple mobile client for Mastodon. Focusing on your connections while being able to explore the Fediverse.

", - "reblog": null, - "application": { - "name": "tooot", - "website": "https://tooot.app" - }, - "account": { - "id": "1002", - "username": "tooot📱", - "acct": "tooot@xmflsct.com", - "display_name": "tooot📱", - "avatar_static": "https://avatars.githubusercontent.com/u/77554750?s=200&v=4" - }, - "media_attachments": [], - "mentions": [] - }, - { - "id": "1003", - "created_at": "2021-01-24T07:50:00.901Z", - "sensitive": false, - "visibility": "public", - "replies_count": 0, - "reblogs_count": 0, - "favourites_count": 0, - "favourited": true, - "reblogged": false, - "muted": false, - "bookmarked": false, - "content": "

- tooot supports multiple accounts
- tooot supports browsing external instance
- tooot aims to support multiple languages

", - "reblog": null, - "application": { - "name": "tooot", - "website": "https://tooot.app" - }, - "account": { - "id": "1003", - "username": "tooot📱", - "acct": "tooot@xmflsct.com", - "display_name": "tooot📱", - "avatar_static": "https://avatars.githubusercontent.com/u/77554750?s=200&v=4" - }, - "media_attachments": [], - "mentions": [] - } - ] - ] -} \ No newline at end of file diff --git a/demo/statuses.ts b/demo/statuses.ts new file mode 100644 index 00000000..63d5e47a --- /dev/null +++ b/demo/statuses.ts @@ -0,0 +1,185 @@ +const demoStatuses = [ + { + id: '1', + created_at: new Date().toISOString(), + sensitive: false, + visibility: 'public', + replies_count: 9, + reblogs_count: 15, + favourites_count: 8, + favourited: true, + reblogged: false, + muted: false, + bookmarked: false, + content: + '

Would you like to try out this simple, beautiful and open-source mobile app for Mastodon? 😊

', + reblog: null, + application: { + name: 'tooot', + website: 'https://tooot.app' + }, + account: { + id: '999', + username: 'tooot📱', + acct: 'tooot@xmflsct.com', + display_name: 'tooot📱', + avatar_static: + 'https://avatars.githubusercontent.com/u/77554750?s=200&v=4' + }, + media_attachments: [], + poll: { + id: '1', + expires_at: new Date().setDate(new Date().getDate() + 5), + expired: false, + multiple: false, + votes_count: 10, + voters_count: null, + voted: false, + own_votes: null, + options: [ + { + title: 'I would love to!', + votes_count: 6 + }, + { + title: 'Why not give it a go?', + votes_count: 4 + } + ], + emojis: [] + }, + mentions: [] + }, + { + id: '2', + created_at: new Date().setMinutes(new Date().getMinutes() - 2), + sensitive: false, + spoiler_text: '', + visibility: 'public', + replies_count: 5, + reblogs_count: 6, + favourites_count: 11, + favourited: true, + reblogged: false, + muted: false, + bookmarked: false, + content: + '

Mastodon is a free and open-source self-hosted social networking service. It allows anyone to host their own server node in the network, and its various separately operated user bases are federated across many different servers. These nodes are referred to as "instances" by Mastodon users.

', + reblog: null, + application: { + name: 'Web', + website: null + }, + account: { + id: '1000', + username: 'Mastodon', + acct: 'mastodon', + display_name: 'Mastodon', + avatar_static: + 'https://mastodon.social/apple-touch-icon.png' + }, + media_attachments: [], + card: { + url: 'https://joinmastodon.org/', + title: 'Giving social networking back to you - Mastodon', + description: + 'Mastodon is an open source decentralized social network - by the people for the people. Join the federation and take back control of your social media!', + type: 'link', + image: + 'https://mastodon.social/apple-touch-icon.png' + }, + mentions: [] + }, + { + id: '3', + created_at: '2021-01-24T09:50:00.901Z', + spoiler_text: '', + visibility: 'public', + replies_count: 2, + reblogs_count: null, + favourites_count: 3, + favourited: false, + reblogged: false, + muted: false, + bookmarked: true, + content: + '

These servers are connected as a federated social network, allowing users from different servers to interact with each other seamlessly. Once a Mastodon server knows another Mastodon server, it "federates" with the other Mastodon server. Mastodon is a part of the wider Fediverse, allowing its users to also interact with users on different open platforms that support the same protocol, such as PeerTube and Friendica.

', + reblog: null, + application: { + name: 'Web', + website: null + }, + account: { + id: '1001', + username: 'Fediverse', + acct: 'fediverse', + display_name: 'Fediverse', + avatar_static: + 'https://e7.pngegg.com/pngimages/667/514/png-clipart-mastodon-fediverse-social-media-free-software-logo-social-media-blue-text.png' + }, + media_attachments: [], + mentions: [] + }, + { + id: '4', + created_at: '2021-01-24T08:50:00.901Z', + sensitive: false, + visibility: 'public', + replies_count: 0, + reblogs_count: 0, + favourites_count: 0, + favourited: true, + reblogged: false, + muted: false, + bookmarked: false, + content: + '

tooot is an open source, simple mobile client for Mastodon. Focusing on your connections while being able to explore the Fediverse.

', + reblog: null, + application: { + name: 'tooot', + website: 'https://tooot.app' + }, + account: { + id: '1002', + username: 'tooot📱', + acct: 'tooot@xmflsct.com', + display_name: 'tooot📱', + avatar_static: + 'https://avatars.githubusercontent.com/u/77554750?s=200&v=4' + }, + media_attachments: [], + mentions: [] + }, + { + id: '5', + created_at: '2021-01-24T07:50:00.901Z', + sensitive: false, + visibility: 'public', + replies_count: 0, + reblogs_count: 0, + favourites_count: 0, + favourited: true, + reblogged: false, + muted: false, + bookmarked: false, + content: + '

- tooot supports multiple accounts
- tooot supports browsing external instance
- tooot aims to support multiple languages

', + reblog: null, + application: { + name: 'tooot', + website: 'https://tooot.app' + }, + account: { + id: '1003', + username: 'tooot📱', + acct: 'tooot@xmflsct.com', + display_name: 'tooot📱', + avatar_static: + 'https://avatars.githubusercontent.com/u/77554750?s=200&v=4' + }, + media_attachments: [], + mentions: [] + } +] + +export default demoStatuses diff --git a/src/components/Timeline/Shared/Poll.tsx b/src/components/Timeline/Shared/Poll.tsx index 8e2edc59..7c88395c 100644 --- a/src/components/Timeline/Shared/Poll.tsx +++ b/src/components/Timeline/Shared/Poll.tsx @@ -37,7 +37,7 @@ const TimelinePoll: React.FC = ({ sameAccount }) => { const { mode, theme } = useTheme() - const { t } = useTranslation('componentTimeline') + const { t, i18n } = useTranslation('componentTimeline') const [allOptions, setAllOptions] = useState( new Array(poll.options.length).fill(false) @@ -136,7 +136,14 @@ const TimelinePoll: React.FC = ({ ) } } - }, [mode, poll.expired, poll.voted, allOptions, mutation.isLoading]) + }, [ + mode, + i18n.language, + poll.expired, + poll.voted, + allOptions, + mutation.isLoading + ]) const pollExpiration = useMemo(() => { if (poll.expired) { @@ -155,7 +162,7 @@ const TimelinePoll: React.FC = ({ ) } - }, [mode, poll.expired, poll.expires_at]) + }, [mode, i18n.language, poll.expired, poll.expires_at]) const isSelected = useCallback( (index: number): string => @@ -186,7 +193,9 @@ const TimelinePoll: React.FC = ({ - + {poll.votes_count ? Math.round( (option.votes_count / diff --git a/src/i18n/en/components/instance.ts b/src/i18n/en/components/instance.ts index ecaae16b..c7c29001 100644 --- a/src/i18n/en/components/instance.ts +++ b/src/i18n/en/components/instance.ts @@ -13,7 +13,7 @@ export default { }, disclaimer: { base: - "Logging in process uses system broswer that, your account informationo won't be visible to tooot app. Read more ", + "Logging in process uses system broswer that, your account information won't be visible to tooot app. Read more ", privacy: 'privacy policy' } }, diff --git a/src/i18n/en/components/relativeTime.ts b/src/i18n/en/components/relativeTime.ts index 06ccbced..fccddd52 100644 --- a/src/i18n/en/components/relativeTime.ts +++ b/src/i18n/en/components/relativeTime.ts @@ -3,7 +3,8 @@ export default { prefixAgo: null, prefixFromNow: null, suffixAgo: 'ago', - suffixFromNow: 'from now', + // suffixFromNow: 'from now', + suffixFromNow: null, seconds: '%d seconds', minute: 'about a minute', minutes: '%d minutes', diff --git a/src/i18n/en/components/timeline.ts b/src/i18n/en/components/timeline.ts index b1faeccb..e58be39e 100644 --- a/src/i18n/en/components/timeline.ts +++ b/src/i18n/en/components/timeline.ts @@ -152,7 +152,7 @@ export default { }, expiration: { expired: 'Vote expired', - until: 'Open until <0 />' + until: 'Expires in <0 />' } } } diff --git a/src/i18n/en/screens/meSettingsFontsize.ts b/src/i18n/en/screens/meSettingsFontsize.ts index 16a24b55..09e6143d 100644 --- a/src/i18n/en/screens/meSettingsFontsize.ts +++ b/src/i18n/en/screens/meSettingsFontsize.ts @@ -1,5 +1,5 @@ export default { - heading: 'Toot font size', + heading: 'Toot Font Size', content: { showcase: 'Example toot', demo: diff --git a/src/i18n/en/screens/meSwitch.ts b/src/i18n/en/screens/meSwitch.ts index 39abf287..6e2dd498 100644 --- a/src/i18n/en/screens/meSwitch.ts +++ b/src/i18n/en/screens/meSwitch.ts @@ -1,5 +1,5 @@ export default { - heading: 'Switch account', + heading: 'Switch Account', content: { existing: 'Choose from logged in', new: 'Log in to instance' diff --git a/src/screens/Compose/Root/Footer/Poll.tsx b/src/screens/Compose/Root/Footer/Poll.tsx index 917150d6..37bf9359 100644 --- a/src/screens/Compose/Root/Footer/Poll.tsx +++ b/src/screens/Compose/Root/Footer/Poll.tsx @@ -62,7 +62,7 @@ const ComposePoll: React.FC = () => { ? t('content.root.footer.poll.option.placeholder.multiple') : t('content.root.footer.poll.option.placeholder.single') } - placeholderTextColor={theme.secondary} + placeholderTextColor={theme.disabled} maxLength={50} // @ts-ignore value={options[i]} From 6da2f545f694604b1756a9a24430503176fd0f3d Mon Sep 17 00:00:00 2001 From: Zhiyuan Zheng Date: Mon, 22 Mar 2021 00:25:53 +0100 Subject: [PATCH 2/2] Fix header buttons --- src/components/Header/Left.tsx | 21 +++++++++++++++------ src/components/Header/Right.tsx | 21 +++++++++++++++------ src/screens/Tabs/Shared/Account.tsx | 1 + src/screens/Tabs/Shared/sharedScreens.tsx | 4 +++- 4 files changed, 34 insertions(+), 13 deletions(-) diff --git a/src/components/Header/Left.tsx b/src/components/Header/Left.tsx index 4269383b..b89c8ead 100644 --- a/src/components/Header/Left.tsx +++ b/src/components/Header/Left.tsx @@ -8,6 +8,7 @@ export interface Props { type?: 'icon' | 'text' content?: string native?: boolean + background?: boolean onPress: () => void } @@ -16,6 +17,7 @@ const HeaderLeft: React.FC = ({ type = 'icon', content, native = true, + background = false, onPress }) => { const { theme } = useTheme() @@ -47,11 +49,19 @@ const HeaderLeft: React.FC = ({ style={[ styles.base, { - backgroundColor: theme.backgroundOverlayDefault, + backgroundColor: background + ? theme.backgroundOverlayDefault + : undefined, + minHeight: 44, + minWidth: 44, + marginLeft: native + ? -StyleConstants.Spacing.S + : StyleConstants.Spacing.S, ...(type === 'icon' && { - height: 44, - width: 44, - marginLeft: native ? -9 : 9 + borderRadius: 100 + }), + ...(type === 'text' && { + paddingHorizontal: StyleConstants.Spacing.S }) } ]} @@ -63,8 +73,7 @@ const styles = StyleSheet.create({ base: { flexDirection: 'row', justifyContent: 'center', - alignItems: 'center', - borderRadius: 100 + alignItems: 'center' }, text: { ...StyleConstants.FontStyle.M diff --git a/src/components/Header/Right.tsx b/src/components/Header/Right.tsx index 1e40f44a..d1e3c0f0 100644 --- a/src/components/Header/Right.tsx +++ b/src/components/Header/Right.tsx @@ -9,6 +9,7 @@ export interface Props { type?: 'icon' | 'text' content: string native?: boolean + background?: boolean loading?: boolean disabled?: boolean @@ -20,6 +21,7 @@ const HeaderRight: React.FC = ({ type = 'icon', content, native = true, + background = false, loading, disabled, onPress @@ -79,11 +81,19 @@ const HeaderRight: React.FC = ({ style={[ styles.base, { - backgroundColor: theme.backgroundOverlayDefault, + backgroundColor: background + ? theme.backgroundOverlayDefault + : undefined, + minHeight: 44, + minWidth: 44, + marginLeft: native + ? -StyleConstants.Spacing.S + : StyleConstants.Spacing.S, ...(type === 'icon' && { - height: 44, - width: 44, - marginRight: native ? -9 : 9 + borderRadius: 100 + }), + ...(type === 'text' && { + paddingHorizontal: StyleConstants.Spacing.S }) } ]} @@ -95,8 +105,7 @@ const styles = StyleSheet.create({ base: { flexDirection: 'row', justifyContent: 'center', - alignItems: 'center', - borderRadius: 100 + alignItems: 'center' }, text: { ...StyleConstants.FontStyle.M diff --git a/src/screens/Tabs/Shared/Account.tsx b/src/screens/Tabs/Shared/Account.tsx index 3db86fb3..a75d0954 100644 --- a/src/screens/Tabs/Shared/Account.tsx +++ b/src/screens/Tabs/Shared/Account.tsx @@ -49,6 +49,7 @@ const TabSharedAccount: React.FC = ({ account }) }} + background /> ) }) diff --git a/src/screens/Tabs/Shared/sharedScreens.tsx b/src/screens/Tabs/Shared/sharedScreens.tsx index b7172a2b..cb3426d0 100644 --- a/src/screens/Tabs/Shared/sharedScreens.tsx +++ b/src/screens/Tabs/Shared/sharedScreens.tsx @@ -74,7 +74,9 @@ const sharedScreens = ( backgroundColor: `rgba(255, 255, 255, 0)` }, headerCenter: () => null, - headerLeft: () => navigation.goBack()} /> + headerLeft: () => ( + navigation.goBack()} background /> + ) } }} />,