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

Port 1fd6460b02 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2022-10-23 15:58:24 +02:00 committed by Claire
parent 05c1dd9114
commit e9ccee38a7
7 changed files with 23 additions and 65 deletions

View file

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

View file

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

View file

@ -81,7 +81,6 @@ class NavigationPanel extends React.Component {
{!!preferencesLink && <ColumnLink transparent href={preferencesLink} icon='cog' text={intl.formatMessage(messages.preferences)} />} {!!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)} /> <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> </React.Fragment>
)} )}

View file

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

View file

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

View file

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

View file

@ -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) { @media screen and (min-width: $no-gap-breakpoint) {
.tabs-bar { .tabs-bar {
width: 100%; width: 100%;
@ -260,7 +236,6 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.floating-action-button,
.tabs-bar__link.optional { .tabs-bar__link.optional {
display: none; display: none;
} }
@ -277,10 +252,6 @@
@media screen and (max-width: $no-gap-breakpoint - 1px) { @media screen and (max-width: $no-gap-breakpoint - 1px) {
$sidebar-width: 285px; $sidebar-width: 285px;
.with-fab .scrollable .item-list:last-child {
padding-bottom: 5.25rem;
}
.columns-area__panels__main { .columns-area__panels__main {
width: calc(100% - $sidebar-width); width: calc(100% - $sidebar-width);
} }