Added FloatingActionButton to profile in desktop

• Added:
- FloatingActionButton to profile in desktop

• Updated:
- FloatingActionButton z-index to z3 to be below main page components

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}

app/javascript/gabsocial/layouts/profile_layout.js

@@ -123,6 +123,8 @@ export default class ProfileLayout extends ImmutablePureComponent {
 
             </div>
 
+            <FloatingActionButton isDesktop />
+
           </main>
         </Responsive>