From 7a6126b978b5f77f85ba4c33fed9d0591d3dc8e9 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 14:51:57 -0600 Subject: [PATCH 1/3] Move FloatingActionButton to its own component --- .../ui/components/floating-action-button.tsx | 38 +++++++++++++++++++ app/soapbox/features/ui/index.tsx | 30 +++------------ app/styles/ui.scss | 13 ------- 3 files changed, 43 insertions(+), 38 deletions(-) create mode 100644 app/soapbox/features/ui/components/floating-action-button.tsx diff --git a/app/soapbox/features/ui/components/floating-action-button.tsx b/app/soapbox/features/ui/components/floating-action-button.tsx new file mode 100644 index 000000000..e837cf128 --- /dev/null +++ b/app/soapbox/features/ui/components/floating-action-button.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; + +import { openModal } from 'soapbox/actions/modals'; +import { Icon } from 'soapbox/components/ui'; +import { useAppDispatch } from 'soapbox/hooks'; + +const messages = defineMessages({ + publish: { id: 'compose_form.publish', defaultMessage: 'Publish' }, +}); + +interface IFloatingActionButton { +} + +/** FloatingActionButton (aka FAB), a composer button that floats in the corner on mobile. */ +const FloatingActionButton: React.FC = () => { + const intl = useIntl(); + const dispatch = useAppDispatch(); + + const handleOpenComposeModal = () => { + dispatch(openModal('COMPOSE')); + }; + + return ( + + ); +}; + +export default FloatingActionButton; \ No newline at end of file diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx index bc643efff..9945afd1b 100644 --- a/app/soapbox/features/ui/index.tsx +++ b/app/soapbox/features/ui/index.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'; import { HotKeys } from 'react-hotkeys'; -import { defineMessages, useIntl } from 'react-intl'; +import { useIntl } from 'react-intl'; import { Switch, useHistory, useLocation, Redirect } from 'react-router-dom'; import { fetchFollowRequests } from 'soapbox/actions/accounts'; @@ -20,7 +20,6 @@ import { fetchScheduledStatuses } from 'soapbox/actions/scheduled-statuses'; import { connectUserStream } from 'soapbox/actions/streaming'; import { fetchSuggestionsForTimeline } from 'soapbox/actions/suggestions'; import { expandHomeTimeline } from 'soapbox/actions/timelines'; -import Icon from 'soapbox/components/icon'; import SidebarNavigation from 'soapbox/components/sidebar-navigation'; import ThumbNavigation from 'soapbox/components/thumb-navigation'; import { Layout } from 'soapbox/components/ui'; @@ -39,6 +38,7 @@ import { getAccessToken, getVapidKey } from 'soapbox/utils/auth'; import { isStandalone } from 'soapbox/utils/state'; import BackgroundShapes from './components/background-shapes'; +import FloatingActionButton from './components/floating-action-button'; import { supportedPolicyIds } from './components/modals/policy-modal'; import Navbar from './components/navbar'; import BundleContainer from './containers/bundle-container'; @@ -121,11 +121,6 @@ import 'soapbox/components/status'; const EmptyPage = HomePage; -const messages = defineMessages({ - beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave.' }, - publish: { id: 'compose_form.publish', defaultMessage: 'Publish' }, -}); - const keyMap = { help: '?', new: 'n', @@ -597,10 +592,6 @@ const UI: React.FC = ({ children }) => { history.push('/follow_requests'); }; - const handleOpenComposeModal = () => { - dispatch(openModal('COMPOSE')); - }; - const shouldHideFAB = (): boolean => { const path = location.pathname; return Boolean(path.match(/^\/posts\/|^\/search|^\/getting-started|^\/chats/)); @@ -627,19 +618,6 @@ const UI: React.FC = ({ children }) => { goToRequests: handleHotkeyGoToRequests, }; - const fabElem = ( - - ); - - const floatingActionButton = shouldHideFAB() ? null : fabElem; - const style: React.CSSProperties = { pointerEvents: dropdownMenuIsOpen ? 'none' : undefined, }; @@ -662,7 +640,9 @@ const UI: React.FC = ({ children }) => { - {me && floatingActionButton} + {(me && !shouldHideFAB()) && ( + + )} {Component => } diff --git a/app/styles/ui.scss b/app/styles/ui.scss index c49c54562..92ffc77e2 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -241,19 +241,6 @@ } } -.floating-action-button { - @apply z-40 lg:hidden transition-all fixed bottom-24 right-4 p-4 text-white bg-accent-300 hover:bg-accent-500 rounded-full; - - .svg-icon { - @apply w-6 h-6; - - svg { - @apply w-6; // iOS fix - stroke-width: 1.5px; - } - } -} - .slist { &--flex { display: flex; From ab7ec4babda9fb1325f2eaa8ed81c4db0974183d Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 15:22:41 -0600 Subject: [PATCH 2/3] Refactor ComposeButton, FAB, and sidebar nav spacing --- app/soapbox/components/sidebar-navigation.tsx | 9 +++++---- app/soapbox/components/ui/button/button.tsx | 11 ++++++++--- .../features/ui/components/compose-button.tsx | 14 +++++++++----- .../ui/components/floating-action-button.tsx | 8 ++++++-- app/soapbox/features/ui/index.tsx | 4 +++- 5 files changed, 31 insertions(+), 15 deletions(-) diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx index 6bce826ba..6e87adec7 100644 --- a/app/soapbox/components/sidebar-navigation.tsx +++ b/app/soapbox/components/sidebar-navigation.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; +import { Stack } from 'soapbox/components/ui'; import DropdownMenu from 'soapbox/containers/dropdown-menu-container'; import { useStatContext } from 'soapbox/contexts/stat-context'; import ComposeButton from 'soapbox/features/ui/components/compose-button'; @@ -109,8 +110,8 @@ const SidebarNavigation = () => { }; return ( -
-
+ + { /> )} -
+ {account && ( )} -
+ ); }; diff --git a/app/soapbox/components/ui/button/button.tsx b/app/soapbox/components/ui/button/button.tsx index 4be97ee83..942ce9df9 100644 --- a/app/soapbox/components/ui/button/button.tsx +++ b/app/soapbox/components/ui/button/button.tsx @@ -49,6 +49,8 @@ const Button = React.forwardRef((props, ref): JSX.El className, } = props; + const body = text || children; + const themeClass = useButtonStyles({ theme, block, @@ -61,7 +63,7 @@ const Button = React.forwardRef((props, ref): JSX.El return null; } - return ; + return ; }; const handleClick = React.useCallback((event) => { @@ -72,7 +74,7 @@ const Button = React.forwardRef((props, ref): JSX.El const renderButton = () => ( ); diff --git a/app/soapbox/features/ui/components/compose-button.tsx b/app/soapbox/features/ui/components/compose-button.tsx index bbe6467a3..c0ffa1a81 100644 --- a/app/soapbox/features/ui/components/compose-button.tsx +++ b/app/soapbox/features/ui/components/compose-button.tsx @@ -10,11 +10,15 @@ const ComposeButton = () => { const onOpenCompose = () => dispatch(openModal('COMPOSE')); return ( -
- -
+ ); }; diff --git a/app/soapbox/features/ui/components/floating-action-button.tsx b/app/soapbox/features/ui/components/floating-action-button.tsx index e837cf128..845867030 100644 --- a/app/soapbox/features/ui/components/floating-action-button.tsx +++ b/app/soapbox/features/ui/components/floating-action-button.tsx @@ -1,3 +1,4 @@ +import clsx from 'clsx'; import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; @@ -24,12 +25,15 @@ const FloatingActionButton: React.FC = () => { return ( ); diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx index 9945afd1b..f2e40827a 100644 --- a/app/soapbox/features/ui/index.tsx +++ b/app/soapbox/features/ui/index.tsx @@ -641,7 +641,9 @@ const UI: React.FC = ({ children }) => { {(me && !shouldHideFAB()) && ( - +
+ +
)} From 01d7aa630751e52a8613e82900236e053f016eb0 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 15:37:45 -0600 Subject: [PATCH 3/3] Move FAB to the left in RTL --- app/soapbox/features/ui/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx index f2e40827a..a5a29ec93 100644 --- a/app/soapbox/features/ui/index.tsx +++ b/app/soapbox/features/ui/index.tsx @@ -641,7 +641,7 @@ const UI: React.FC = ({ children }) => { {(me && !shouldHideFAB()) && ( -
+
)}