[Glitch] Change floating action button to be a button in header in web UI

Port 370f2609b8 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/ui/components/columns_area.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { Link } from 'react-router-dom';
 import BundleContainer from '../containers/bundle_container';
 import ColumnLoading from './column_loading';
 import DrawerLoading from './drawer_loading';
@@ -21,7 +19,6 @@ import {
   ListTimeline,
   Directory,
 } from '../../ui/util/async-components';
-import Icon from 'flavours/glitch/components/icon';
 import ComposePanel from './compose_panel';
 import NavigationPanel from './navigation_panel';
 
@@ -43,22 +40,13 @@ const componentMap = {
   'DIRECTORY': Directory,
 };
 
-const shouldHideFAB = path => path.match(/^\/statuses\/|^\/@[^/]+\/\d+|^\/publish|^\/explore|^\/getting-started|^\/start/);
-
-const messages = defineMessages({
-  publish: { id: 'compose_form.publish', defaultMessage: 'Toot' },
-});
-
-export default @(component => injectIntl(component, { withRef: true }))
-class ColumnsArea extends ImmutablePureComponent {
+export default class ColumnsArea extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object.isRequired,
-    identity: PropTypes.object.isRequired,
   };
 
   static propTypes = {
-    intl: PropTypes.object.isRequired,
     columns: ImmutablePropTypes.list.isRequired,
     singleColumn: PropTypes.bool,
     children: PropTypes.node,
@@ -144,17 +132,14 @@ class ColumnsArea extends ImmutablePureComponent {
   }
 
   renderError = (props) => {
-    return <BundleColumnError multiColumn {...props} />;
+    return <BundleColumnError multiColumn errorType='network' {...props} />;
   }
 
   render () {
-    const { columns, children, singleColumn, intl, navbarUnder, openSettings } = this.props;
+    const { columns, children, singleColumn, navbarUnder, openSettings } = this.props;
     const { renderComposePanel } = this.state;
-    const { signedIn } = this.context.identity;
 
     if (singleColumn) {
-      const floatingActionButton = (!signedIn || shouldHideFAB(this.context.router.history.location.pathname)) ? null : <Link key='floating-action-button' to='/publish' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>;
-
       return (
         <div className='columns-area__panels'>
           <div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
@@ -163,7 +148,7 @@ class ColumnsArea extends ImmutablePureComponent {
             </div>
           </div>
 
-          <div className={`columns-area__panels__main ${floatingActionButton && 'with-fab'}`}>
+          <div className='columns-area__panels__main'>
             <div className='tabs-bar__wrapper'><div id='tabs-bar__portal' /></div>
             <div className='columns-area columns-area--mobile'>{children}</div>
           </div>
@@ -173,8 +158,6 @@ class ColumnsArea extends ImmutablePureComponent {
               <NavigationPanel onOpenSettings={openSettings} />
             </div>
           </div>
-
-          {floatingActionButton}
         </div>
       );
     }

app/javascript/flavours/glitch/features/ui/components/header.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Logo from 'flavours/glitch/components/logo';
-import { Link } from 'react-router-dom';
+import { Link, withRouter } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { registrationsOpen, me } from 'flavours/glitch/initial_state';
 import Avatar from 'flavours/glitch/components/avatar';
@@ -16,25 +16,36 @@ const Account = connect(state => ({
   </Permalink>
 ));
 
-export default class Header extends React.PureComponent {
+export default @withRouter
+class Header extends React.PureComponent {
 
   static contextTypes = {
     identity: PropTypes.object,
   };
 
+  static propTypes = {
+    location: PropTypes.object,
+  };
+
   render () {
     const { signedIn } = this.context.identity;
+    const { location } = this.props;
 
     let content;
 
     if (signedIn) {
-      content = <Account />;
+      content = (
+        <>
+          {location.pathname !== '/publish' && <Link to='/publish' className='button'><FormattedMessage id='compose_form.publish' defaultMessage='Publish' /></Link>}
+          <Account />
+        </>
+      );
     } else {
       content = (
-        <React.Fragment>
+        <>
           <a href='/auth/sign_in' className='button'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Sign in' /></a>
           <a href={registrationsOpen ? '/auth/sign_up' : 'https://joinmastodon.org/servers'} className='button button-tertiary'><FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' /></a>
-        </React.Fragment>
+        </>
       );
     }
 

app/javascript/flavours/glitch/features/ui/components/navigation_panel.js

@@ -81,7 +81,6 @@ class NavigationPanel extends React.Component {
 
             {!!preferencesLink && <ColumnLink transparent href={preferencesLink} icon='cog' text={intl.formatMessage(messages.preferences)} />}
             <ColumnLink transparent href='#' onClick={onOpenSettings} icon='cogs' text={intl.formatMessage(messages.app_settings)} />
-            {!!relationshipsLink && <ColumnLink transparent href={relationshipsLink} icon='users' text={intl.formatMessage(messages.followsAndFollowers)} />}
           </React.Fragment>
         )}
 

app/javascript/flavours/glitch/features/ui/index.js

@@ -159,7 +159,7 @@ class SwitchingColumnsArea extends React.PureComponent {
 
   setRef = c => {
     if (c) {
-      this.node = c.getWrappedInstance();
+      this.node = c;
     }
   }
 

app/javascript/flavours/glitch/styles/components/accounts.scss

@@ -541,6 +541,7 @@
     &__buttons {
       display: flex;
       align-items: center;
+      gap: 8px;
       padding-top: 55px;
       overflow: hidden;
 
@@ -550,14 +551,6 @@
         box-sizing: content-box;
         padding: 2px;
       }
-
-      & > .icon-button {
-        margin-right: 8px;
-      }
-
-      .button {
-        margin: 0 8px;
-      }
     }
 
     &__name {

app/javascript/flavours/glitch/styles/components/columns.scss

@@ -674,6 +674,7 @@ $ui-header-height: 55px;
   cursor: default;
 
   &__image {
+    width: 70%;
     max-width: 350px;
     margin-top: -50px;
   }

app/javascript/flavours/glitch/styles/components/single_column.scss

@@ -222,30 +222,6 @@
   }
 }
 
-.floating-action-button {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 3.9375rem;
-  height: 3.9375rem;
-  bottom: 1.3125rem;
-  right: 1.3125rem;
-  background: darken($ui-highlight-color, 2%);
-  color: $white;
-  border-radius: 50%;
-  font-size: 21px;
-  line-height: 21px;
-  text-decoration: none;
-  box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
-
-  &:hover,
-  &:focus,
-  &:active {
-    background: $ui-highlight-color;
-  }
-}
-
 @media screen and (min-width: $no-gap-breakpoint) {
   .tabs-bar {
     width: 100%;
@@ -260,7 +236,6 @@
     margin-bottom: 10px;
   }
 
-  .floating-action-button,
   .tabs-bar__link.optional {
     display: none;
   }
@@ -277,10 +252,6 @@
 @media screen and (max-width: $no-gap-breakpoint - 1px) {
   $sidebar-width: 285px;
 
-  .with-fab .scrollable .item-list:last-child {
-    padding-bottom: 5.25rem;
-  }
-
   .columns-area__panels__main {
     width: calc(100% - $sidebar-width);
   }