diff options
7 files changed, 23 insertions, 65 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.js index 76e9a3690..bf3e79c24 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ b/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> ); } diff --git a/app/javascript/flavours/glitch/features/ui/components/header.js b/app/javascript/flavours/glitch/features/ui/components/header.js index 5fdef0af4..6c2fb40ba 100644 --- a/app/javascript/flavours/glitch/features/ui/components/header.js +++ b/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> + </> ); } diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js index 1f3e4f1fd..d7d3b8257 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/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> )} diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index 9ca946142..164c475cc 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/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; } } diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 4e912b18b..00519adf1 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/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 { diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 5de8547e9..c61815e07 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/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; } diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 1725a5480..1f1d7d68d 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/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); } |