From e38d461b723a86e31eb17f1569bc3cf620ddc168 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Fri, 15 May 2020 18:49:54 -0400
Subject: [PATCH] Added FloatingActionButton to profile in desktop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Added:
- FloatingActionButton to profile in desktop

• Updated:
- FloatingActionButton z-index to z3 to be below main page components
---
 .../components/floating_action_button.js      | 25 ++++++++++++++++---
 .../gabsocial/layouts/profile_layout.js       |  2 ++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/app/javascript/gabsocial/components/floating_action_button.js b/app/javascript/gabsocial/components/floating_action_button.js
index e8698227..c92318a7 100644
--- a/app/javascript/gabsocial/components/floating_action_button.js
+++ b/app/javascript/gabsocial/components/floating_action_button.js
@@ -1,5 +1,6 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import { me } from '../initial_state'
+import { CX } from '../constants'
 import { openModal } from '../actions/modal'
 import Button from './button'
 
@@ -19,6 +20,7 @@ class FloatingActionButton extends PureComponent {
   static propTypes = {
     intl: PropTypes.object.isRequired,
     onOpenCompose: PropTypes.func.isRequired,
+    isDesktop: PropTypes.bool,
   }
 
   shouldComponentUpdate(nextProps) {
@@ -26,18 +28,35 @@ class FloatingActionButton extends PureComponent {
   }
 
   render() {
-    const { intl, onOpenCompose } = this.props
+    const {
+      intl,
+      onOpenCompose,
+      isDesktop,
+    } = this.props
 
     if (!me) return null
 
     const message = intl.formatMessage(messages.gab)
 
+    const containerClasses = CX({
+      posFixed: 1,
+      z3: 1,
+      mb15: 1,
+      mr15: 1,
+      right0: 1,
+      bottom55PX: !isDesktop,
+      bottom0: isDesktop,
+      pb15: isDesktop,
+      pr15: isDesktop,
+    })
+
     return (
       <div
-        className={[_s.posFixed, _s.z4, _s.mb15, _s.mr15, _s.bottom55PX, _s.right0].join(' ')}
+        className={containerClasses}
       >
         <Button
-          to='/compose'
+          to={isDesktop ? undefined : '/compose'}
+          onClick={isDesktop ? onOpenCompose : undefined}
           className={[_s.py15, _s.height60PX, _s.saveAreaInsetMR, _s.saveAreaInsetMB, _s.width60PX, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
           title={message}
           aria-label={message}
diff --git a/app/javascript/gabsocial/layouts/profile_layout.js b/app/javascript/gabsocial/layouts/profile_layout.js
index 90f6a9d8..b9194793 100644
--- a/app/javascript/gabsocial/layouts/profile_layout.js
+++ b/app/javascript/gabsocial/layouts/profile_layout.js
@@ -123,6 +123,8 @@ export default class ProfileLayout extends ImmutablePureComponent {
 
             </div>
 
+            <FloatingActionButton isDesktop />
+
           </main>
         </Responsive>