diff --git a/src/frontend/components/FloatingActionButton.ts b/src/frontend/components/FloatingActionButton.ts index 1141fe33..c247651f 100644 --- a/src/frontend/components/FloatingActionButton.ts +++ b/src/frontend/components/FloatingActionButton.ts @@ -13,25 +13,22 @@ import {Palette} from '~frontend/global-styles/palette'; import {withTitle} from './withTitle'; const FIXED_PROPS: IFloatingActionProps = { - distanceToEdge: { - vertical: - Dimensions.verticalSpaceTiny + Dimensions.verticalSpaceNormal + 24, - horizontal: Dimensions.horizontalSpaceBig, - }, iconHeight: Dimensions.iconSizeNormal, iconWidth: Dimensions.iconSizeNormal, overlayColor: Palette.transparencyDark, + overrideWithAction: true, }; export interface Props - extends Omit< - IFloatingActionProps, - | 'distanceToEdge' - | 'iconHeight' - | 'iconWidth' - | 'overlayColor' - | 'overrideWithAction' - > { + extends Pick< + IFloatingActionProps, + | 'color' + | 'distanceToEdge' + | 'floatingIcon' + | 'overrideWithAction' + | 'visible' + >, + Required> { sel: string; title: string; } diff --git a/src/frontend/screens/central/connections-tab/fab.ts b/src/frontend/screens/central/connections-tab/fab.ts index bd68af9b..94e6677d 100644 --- a/src/frontend/screens/central/connections-tab/fab.ts +++ b/src/frontend/screens/central/connections-tab/fab.ts @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2021-2022 The Manyverse Authors +// SPDX-FileCopyrightText: 2021-2023 The Manyverse Authors // // SPDX-License-Identifier: MPL-2.0 @@ -7,18 +7,15 @@ import {Palette} from '~frontend/global-styles/palette'; import {Dimensions} from '~frontend/global-styles/dimens'; import {Images} from '~frontend/global-styles/images'; import {t} from '~frontend/drivers/localization'; -import {FabProps} from '../fab'; +import {Props as FabProps} from '~frontend/components/FloatingActionButton'; import {FAB_VERTICAL_DISTANCE_TO_EDGE} from '../styles'; export default function floatingAction(): Stream { - return xs.of({ + return xs.of({ sel: 'fab', color: Palette.backgroundCTA, visible: false, actions: [], - iconHeight: 24, - iconWidth: 24, - overlayColor: Palette.transparencyDark, title: t('connections.floating_action_button.add_connection'), distanceToEdge: { vertical: FAB_VERTICAL_DISTANCE_TO_EDGE, diff --git a/src/frontend/screens/central/connections-tab/index.ts b/src/frontend/screens/central/connections-tab/index.ts index 9b0eb8d3..cf3bf271 100644 --- a/src/frontend/screens/central/connections-tab/index.ts +++ b/src/frontend/screens/central/connections-tab/index.ts @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2021-2022 The Manyverse Authors +// SPDX-FileCopyrightText: 2021-2023 The Manyverse Authors // // SPDX-License-Identifier: MPL-2.0 @@ -7,6 +7,7 @@ import {ReactElement} from 'react'; import {Reducer, StateSource} from '@cycle/state'; import {ReactSource} from '@cycle/react'; import {Command, NavSource} from 'cycle-native-navigation'; +import {Props as FabProps} from '~frontend/components/FloatingActionButton'; import {State as AppState} from '~frontend/drivers/appstate'; import {NetworkSource} from '~frontend/drivers/network'; import {SSBSource} from '~frontend/drivers/ssb'; @@ -18,7 +19,6 @@ import view from './view'; import navigation from './navigation'; import floatingAction from './fab'; import model from './model'; -import {FabProps} from '../fab'; export interface Sources { screen: ReactSource; diff --git a/src/frontend/screens/central/fab.d.ts b/src/frontend/screens/central/fab.d.ts deleted file mode 100644 index 68cb8d48..00000000 --- a/src/frontend/screens/central/fab.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -// SPDX-FileCopyrightText: 2022 The Manyverse Authors -// -// SPDX-License-Identifier: MPL-2.0 - -import {IFloatingActionProps} from 'react-native-floating-action'; - -export type FabProps = IFloatingActionProps & {sel: string; title: string}; diff --git a/src/frontend/screens/central/private-tab/fab.ts b/src/frontend/screens/central/private-tab/fab.ts index 0ef0e609..694c843c 100644 --- a/src/frontend/screens/central/private-tab/fab.ts +++ b/src/frontend/screens/central/private-tab/fab.ts @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2020-2022 The Manyverse Authors +// SPDX-FileCopyrightText: 2020-2023 The Manyverse Authors // // SPDX-License-Identifier: MPL-2.0 @@ -8,32 +8,30 @@ import {Palette} from '~frontend/global-styles/palette'; import {Dimensions} from '~frontend/global-styles/dimens'; import {t} from '~frontend/drivers/localization'; import {Images} from '~frontend/global-styles/images'; -import {FabProps} from '../fab'; +import {Props as FabProps} from '~frontend/components/FloatingActionButton'; import {FAB_VERTICAL_DISTANCE_TO_EDGE} from '../styles'; export default function floatingAction( state$: Stream, ): Stream { - return state$.map((state) => ({ - sel: 'fab', - color: Palette.backgroundCTA, - visible: !!state.getPrivateFeedReadable, - actions: [ - { - color: Palette.backgroundCTA, - name: 'recipients-input', - icon: Images.messagePlus, - text: t('private.floating_action_button.compose'), + return state$.map( + (state): FabProps => ({ + sel: 'fab', + color: Palette.backgroundCTA, + visible: !!state.getPrivateFeedReadable, + actions: [ + { + color: Palette.backgroundCTA, + name: 'recipients-input', + icon: Images.messagePlus, + text: t('private.floating_action_button.compose'), + }, + ], + title: t('private.floating_action_button.compose'), + distanceToEdge: { + vertical: FAB_VERTICAL_DISTANCE_TO_EDGE, + horizontal: Dimensions.horizontalSpaceBig, }, - ], - title: t('private.floating_action_button.compose'), - overrideWithAction: true, - iconHeight: 24, - iconWidth: 24, - overlayColor: Palette.transparencyDark, - distanceToEdge: { - vertical: FAB_VERTICAL_DISTANCE_TO_EDGE, - horizontal: Dimensions.horizontalSpaceBig, - }, - })); + }), + ); } diff --git a/src/frontend/screens/central/private-tab/index.ts b/src/frontend/screens/central/private-tab/index.ts index 9ad281a7..a9ad9a26 100644 --- a/src/frontend/screens/central/private-tab/index.ts +++ b/src/frontend/screens/central/private-tab/index.ts @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2020-2022 The Manyverse Authors +// SPDX-FileCopyrightText: 2020-2023 The Manyverse Authors // // SPDX-License-Identifier: MPL-2.0 @@ -7,6 +7,7 @@ import {ReactElement} from 'react'; import {ReactSource} from '@cycle/react'; import {StateSource, Reducer} from '@cycle/state'; import {Command, NavSource} from 'cycle-native-navigation'; +import {Props as FabProps} from '~frontend/components/FloatingActionButton'; import {SSBSource} from '~frontend/drivers/ssb'; import {State} from './model'; import model from './model'; @@ -14,7 +15,6 @@ import view from './view'; import intent from './intent'; import navigation from './navigation'; import floatingAction from './fab'; -import {FabProps} from '../fab'; export interface Sources { screen: ReactSource; diff --git a/src/frontend/screens/central/public-tab/fab.ts b/src/frontend/screens/central/public-tab/fab.ts index 3de0bccc..ace78a75 100644 --- a/src/frontend/screens/central/public-tab/fab.ts +++ b/src/frontend/screens/central/public-tab/fab.ts @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2018-2022 The Manyverse Authors +// SPDX-FileCopyrightText: 2018-2023 The Manyverse Authors // // SPDX-License-Identifier: MPL-2.0 @@ -8,34 +8,32 @@ import {Palette} from '~frontend/global-styles/palette'; import {Dimensions} from '~frontend/global-styles/dimens'; import {t} from '~frontend/drivers/localization'; import {Images} from '~frontend/global-styles/images'; -import {FabProps} from '../fab'; +import {Props as FabProps} from '~frontend/components/FloatingActionButton'; import {FAB_VERTICAL_DISTANCE_TO_EDGE} from '../styles'; export default function floatingAction( state$: Stream, ): Stream { - return state$.map((state) => ({ - sel: 'fab', - color: state.hasComposeDraft - ? Palette.backgroundWarningAction - : Palette.backgroundCTA, - visible: !!state.selfFeedId && state.canPublishSSB, - actions: [ - { - color: Palette.backgroundCTA, - name: 'compose', - icon: Images.pencil, - text: t('public.floating_action_button.compose'), + return state$.map( + (state): FabProps => ({ + sel: 'fab', + color: state.hasComposeDraft + ? Palette.backgroundWarningAction + : Palette.backgroundCTA, + visible: !!state.selfFeedId && state.canPublishSSB, + actions: [ + { + color: Palette.backgroundCTA, + name: 'compose', + icon: Images.pencil, + text: t('public.floating_action_button.compose'), + }, + ], + title: t('profile.floating_action_button.compose'), + distanceToEdge: { + vertical: FAB_VERTICAL_DISTANCE_TO_EDGE, + horizontal: Dimensions.horizontalSpaceBig, }, - ], - title: t('profile.floating_action_button.compose'), - overrideWithAction: true, - iconHeight: 24, - iconWidth: 24, - overlayColor: Palette.transparencyDark, - distanceToEdge: { - vertical: FAB_VERTICAL_DISTANCE_TO_EDGE, - horizontal: Dimensions.horizontalSpaceBig, - }, - })); + }), + ); } diff --git a/src/frontend/screens/central/public-tab/index.ts b/src/frontend/screens/central/public-tab/index.ts index 68197a79..b18d7d3b 100644 --- a/src/frontend/screens/central/public-tab/index.ts +++ b/src/frontend/screens/central/public-tab/index.ts @@ -14,6 +14,7 @@ import {Command as AlertCommand, DialogSource} from '~frontend/drivers/dialogs'; import {Toast} from '~frontend/drivers/toast'; import messageEtc from '~frontend/components/messageEtc'; import messageShare from '~frontend/components/messageShare'; +import {Props as FabProps} from '~frontend/components/FloatingActionButton'; import {timestampAlert} from '~frontend/drivers/dialogs/sharedCommands'; import intent from './intent'; import view from './view'; @@ -22,7 +23,6 @@ import ssb from './ssb'; import floatingAction from './fab'; import asyncStorage from './asyncstorage'; import navigation from './navigation'; -import {FabProps} from '../fab'; export interface Sources { screen: ReactSource; diff --git a/src/frontend/screens/central/styles.ts b/src/frontend/screens/central/styles.ts index 78118020..dbf2584f 100644 --- a/src/frontend/screens/central/styles.ts +++ b/src/frontend/screens/central/styles.ts @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2018-2022 The Manyverse Authors +// SPDX-FileCopyrightText: 2018-2023 The Manyverse Authors // // SPDX-License-Identifier: MPL-2.0 @@ -122,10 +122,4 @@ export const styles = StyleSheet.create({ color: Palette.textBrand, textAlign: 'center', }, - - desktopFabContainer: { - position: 'absolute', - bottom: 0, - right: `calc(50vw - ${Dimensions.desktopMiddleWidth.px} * 0.5)`, - }, }); diff --git a/src/frontend/screens/central/view.ts b/src/frontend/screens/central/view.ts index 936c7ff3..e11fdfff 100644 --- a/src/frontend/screens/central/view.ts +++ b/src/frontend/screens/central/view.ts @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2018-2022 The Manyverse Authors +// SPDX-FileCopyrightText: 2018-2023 The Manyverse Authors // // SPDX-License-Identifier: MPL-2.0 @@ -22,13 +22,15 @@ import { TouchableOpacityProps, } from 'react-native'; import {h} from '@cycle/react'; -import {FloatingAction} from 'react-native-floating-action'; +import { + Props as FabProps, + FloatingActionButton, +} from '~frontend/components/FloatingActionButton'; import {t} from '~frontend/drivers/localization'; import PublicTabIcon from '~frontend/components/tab-buttons/PublicTabIcon'; import PrivateTabIcon from '~frontend/components/tab-buttons/PrivateTabIcon'; import ActivityTabIcon from '~frontend/components/tab-buttons/ActivityTabIcon'; import ConnectionsTabIcon from '~frontend/components/tab-buttons/ConnectionsTabIcon'; -import {withTitle} from '~frontend/components/withTitle'; import ProgressBar from '~frontend/components/ProgressBar'; import StatusBarBlank from '~frontend/components/StatusBarBlank'; import { @@ -39,7 +41,6 @@ import { PROGRESS_BAR_HEIGHT, } from './styles'; import {State} from './model'; -import {FabProps} from './fab'; class CurrentTabPage extends PureComponent<{ currentTab: State['currentTab']; @@ -65,17 +66,7 @@ class CurrentTabPage extends PureComponent<{ const isActivity = currentTab === 'activity'; const isConnections = currentTab === 'connections'; - const fabSection = - Platform.OS === 'web' - ? h( - withTitle(View), - { - style: styles.desktopFabContainer, - title: fab.title, - }, - [h(FloatingAction, fab)], - ) - : h(FloatingAction, fab); + const fabSection = FloatingActionButton(fab); return h(Fragment, [ h(View, {style: [isPublic ? shown : hidden]}, [ diff --git a/src/frontend/screens/connections-panel/view/index.ts b/src/frontend/screens/connections-panel/view/index.ts index 0f4cd460..64171725 100644 --- a/src/frontend/screens/connections-panel/view/index.ts +++ b/src/frontend/screens/connections-panel/view/index.ts @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2018-2022 The Manyverse Authors +// SPDX-FileCopyrightText: 2018-2023 The Manyverse Authors // // SPDX-License-Identifier: MPL-2.0 @@ -7,15 +7,15 @@ import debounce from 'xstream/extra/debounce'; import dropRepeatsByKeys from 'xstream-drop-repeats-by-keys'; import {h} from '@cycle/react'; import {Platform, ScrollView, View} from 'react-native'; -import {FloatingAction} from 'react-native-floating-action'; import {t} from '~frontend/drivers/localization'; import {Palette} from '~frontend/global-styles/palette'; -import {Dimensions} from '~frontend/global-styles/dimens'; import {Images} from '~frontend/global-styles/images'; import TopBar from '~frontend/components/TopBar'; import StatusBarBlank from '~frontend/components/StatusBarBlank'; -import {withTitle} from '~frontend/components/withTitle'; -import {FabProps} from '~frontend/screens/central/fab'; +import { + Props as FabProps, + FloatingActionButton, +} from '~frontend/components/FloatingActionButton'; import {State} from '../model'; import {styles} from './styles'; import ConnectivityModes from './ConnectivityModes'; @@ -38,14 +38,6 @@ function getFABProps(state: State): FabProps { }, ], title: t('connections.floating_action_button.add_connection'), - overrideWithAction: true, - iconHeight: 24, - iconWidth: 24, - overlayColor: Palette.transparencyDark, - distanceToEdge: { - vertical: Dimensions.verticalSpaceLarge, - horizontal: Dimensions.horizontalSpaceBig, - }, floatingIcon: Images.plusNetwork, }; } @@ -75,13 +67,7 @@ export default function view(state$: Stream) { }, [h(ConnectivityModes, state), h(Body, state)], ), - Platform.OS === 'web' - ? h( - withTitle(View), - {style: styles.desktopFabContainer, title: fabProps.title}, - [h(FloatingAction, fabProps)], - ) - : h(FloatingAction, fabProps), + FloatingActionButton(fabProps), ]); }); } diff --git a/src/frontend/screens/connections-panel/view/styles.ts b/src/frontend/screens/connections-panel/view/styles.ts index 52a25785..1e94db7d 100644 --- a/src/frontend/screens/connections-panel/view/styles.ts +++ b/src/frontend/screens/connections-panel/view/styles.ts @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2018-2022 The Manyverse Authors +// SPDX-FileCopyrightText: 2018-2023 The Manyverse Authors // // SPDX-License-Identifier: MPL-2.0 @@ -18,12 +18,6 @@ export const styles = StyleSheet.create({ minHeight: 400, }, - desktopFabContainer: { - position: 'absolute', - bottom: 0, - right: `calc(50vw - ${Dimensions.desktopMiddleWidth.px} * 0.5)`, - }, - modesContainer: { alignSelf: 'stretch', backgroundColor: Palette.backgroundText, diff --git a/src/frontend/screens/profile/view/index.ts b/src/frontend/screens/profile/view/index.ts index 0b499561..f6022ef5 100644 --- a/src/frontend/screens/profile/view/index.ts +++ b/src/frontend/screens/profile/view/index.ts @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2018-2022 The Manyverse Authors +// SPDX-FileCopyrightText: 2018-2023 The Manyverse Authors // // SPDX-License-Identifier: MPL-2.0 @@ -7,10 +7,6 @@ import dropRepeatsByKeys from 'xstream-drop-repeats-by-keys'; import {h} from '@cycle/react'; import {View, Animated, Platform} from 'react-native'; const pull = require('pull-stream'); -import { - FloatingAction, - IFloatingActionProps, -} from 'react-native-floating-action'; import {getStatusBarHeight} from 'react-native-status-bar-height'; import {isRootPostMsg, isPublic} from 'ssb-typescript/utils'; import {GetReadable, SSBSource} from '~frontend/drivers/ssb'; @@ -20,8 +16,8 @@ import {Dimensions} from '~frontend/global-styles/dimens'; import {Images} from '~frontend/global-styles/images'; import Feed from '~frontend/components/Feed'; import EmptySection from '~frontend/components/EmptySection'; -import {withTitle} from '~frontend/components/withTitle'; import StatusBarBlank from '~frontend/components/StatusBarBlank'; +import {FloatingActionButton} from '~frontend/components/FloatingActionButton'; import {State} from '../model'; import {styles, AVATAR_SIZE} from './styles'; import ProfileHeader from './ProfileHeader'; @@ -88,8 +84,9 @@ export default function view(state$: Stream, ssbSource: SSBSource) { const isSelfProfile = state.displayFeedId === state.selfFeedId; const isBlocked = state.youBlock?.response ?? false; - const fab = h(FloatingAction, { + const fabSection = FloatingActionButton({ sel: 'fab', + title: t('profile.floating_action_button.compose'), color: Palette.backgroundCTA, visible: isSelfProfile, actions: [ @@ -100,29 +97,14 @@ export default function view(state$: Stream, ssbSource: SSBSource) { text: t('profile.floating_action_button.compose'), }, ], - overrideWithAction: true, - iconHeight: 24, - iconWidth: 24, distanceToEdge: Platform.OS === 'web' - ? ({ + ? { vertical: Dimensions.verticalSpaceLarge, horizontal: Dimensions.horizontalSpaceBig, - } as any) + } : 30, - } as IFloatingActionProps); - - const fabSection = - Platform.OS === 'web' - ? h( - withTitle(View), - { - style: styles.desktopFabContainer, - title: t('profile.floating_action_button.compose'), - }, - [fab], - ) - : fab; + }); let getReadable = pullNever; if (isBlocked) getReadable = pull.empty; diff --git a/src/frontend/screens/profile/view/styles.ts b/src/frontend/screens/profile/view/styles.ts index 95286d5c..5a6441bf 100644 --- a/src/frontend/screens/profile/view/styles.ts +++ b/src/frontend/screens/profile/view/styles.ts @@ -295,12 +295,6 @@ export const styles = StyleSheet.create({ }), }, - desktopFabContainer: { - position: 'absolute', - bottom: 0, - right: `calc(50vw - ${Dimensions.desktopMiddleWidth.px} * 0.5)`, - }, - emptySection: { marginTop: Dimensions.verticalSpaceLarger, }, diff --git a/src/frontend/screens/search/fab.ts b/src/frontend/screens/search/fab.ts index febe4b00..a636e2e2 100644 --- a/src/frontend/screens/search/fab.ts +++ b/src/frontend/screens/search/fab.ts @@ -10,24 +10,25 @@ import {t} from '~frontend/drivers/localization'; import {State} from './model'; export function floatingAction(state$: Stream): Stream { - return state$.map((state) => ({ - sel: 'fab', - color: state.hasComposeDraft - ? Palette.backgroundWarningAction - : Palette.backgroundCTA, - visible: - state.query.startsWith('#') && - state.query.length > 2 && - !!state.selfFeedId, - actions: [ - { - color: Palette.backgroundCTA, - name: 'compose', - icon: Images.pencil, - text: t('public.floating_action_button.compose'), - }, - ], - title: t('profile.floating_action_button.compose'), - overrideWithAction: true, - })); + return state$.map( + (state): FabProps => ({ + sel: 'fab', + color: state.hasComposeDraft + ? Palette.backgroundWarningAction + : Palette.backgroundCTA, + visible: + state.query.startsWith('#') && + state.query.length > 2 && + !!state.selfFeedId, + actions: [ + { + color: Palette.backgroundCTA, + name: 'compose', + icon: Images.pencil, + text: t('public.floating_action_button.compose'), + }, + ], + title: t('profile.floating_action_button.compose'), + }), + ); }