forked from fedi/mastodon
Change floating action button to be a button in header in web UI (#19422)
- Fix theme color - Fix elephant being too big on error page on small screens - Remove "Follows and Followers" link from navigation panel
This commit is contained in:
parent
c2c14331b2
commit
1fd6460b02
|
@ -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,10 +19,8 @@ import {
|
|||
ListTimeline,
|
||||
Directory,
|
||||
} from '../../ui/util/async-components';
|
||||
import Icon from 'mastodon/components/icon';
|
||||
import ComposePanel from './compose_panel';
|
||||
import NavigationPanel from './navigation_panel';
|
||||
|
||||
import { supportsPassiveEvents } from 'detect-passive-events';
|
||||
import { scrollRight } from '../../../scroll';
|
||||
|
||||
|
@ -43,22 +39,13 @@ const componentMap = {
|
|||
'DIRECTORY': Directory,
|
||||
};
|
||||
|
||||
const messages = defineMessages({
|
||||
publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
|
||||
});
|
||||
|
||||
const shouldHideFAB = path => path.match(/^\/statuses\/|^\/@[^/]+\/\d+|^\/publish|^\/explore|^\/getting-started|^\/start/);
|
||||
|
||||
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,
|
||||
isModalOpen: PropTypes.bool.isRequired,
|
||||
singleColumn: PropTypes.bool,
|
||||
|
@ -143,17 +130,14 @@ class ColumnsArea extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
renderError = (props) => {
|
||||
return <BundleColumnError multiColumn {...props} />;
|
||||
return <BundleColumnError multiColumn errorType='network' {...props} />;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { columns, children, singleColumn, isModalOpen, intl } = this.props;
|
||||
const { columns, children, singleColumn, isModalOpen } = 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'>
|
||||
|
@ -162,7 +146,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>
|
||||
|
@ -172,8 +156,6 @@ class ColumnsArea extends ImmutablePureComponent {
|
|||
<NavigationPanel />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{floatingActionButton}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import Logo from 'mastodon/components/logo';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Link, withRouter } from 'react-router-dom';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { registrationsOpen, me } from 'mastodon/initial_state';
|
||||
import Avatar from 'mastodon/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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -84,7 +84,6 @@ class NavigationPanel extends React.Component {
|
|||
<hr />
|
||||
|
||||
<ColumnLink transparent href='/settings/preferences' icon='cog' text={intl.formatMessage(messages.preferences)} />
|
||||
<ColumnLink transparent href='/relationships' icon='users' text={intl.formatMessage(messages.followsAndFollowers)} />
|
||||
</React.Fragment>
|
||||
)}
|
||||
|
||||
|
|
|
@ -145,7 +145,7 @@ class SwitchingColumnsArea extends React.PureComponent {
|
|||
|
||||
setRef = c => {
|
||||
if (c) {
|
||||
this.node = c.getWrappedInstance();
|
||||
this.node = c;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -2565,30 +2565,6 @@ $ui-header-height: 55px;
|
|||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
|
@ -2603,7 +2579,6 @@ $ui-header-height: 55px;
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.floating-action-button,
|
||||
.tabs-bar__link.optional {
|
||||
display: none;
|
||||
}
|
||||
|
@ -2620,10 +2595,6 @@ $ui-header-height: 55px;
|
|||
@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);
|
||||
}
|
||||
|
@ -4350,6 +4321,7 @@ a.status-card.compact:hover {
|
|||
cursor: default;
|
||||
|
||||
&__image {
|
||||
width: 70%;
|
||||
max-width: 350px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
@ -7270,6 +7242,7 @@ noscript {
|
|||
&__buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-top: 55px;
|
||||
overflow: hidden;
|
||||
|
||||
|
@ -7279,14 +7252,6 @@ noscript {
|
|||
box-sizing: content-box;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
& > .icon-button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
|
|
|
@ -40,7 +40,7 @@ class ManifestSerializer < ActiveModel::Serializer
|
|||
end
|
||||
|
||||
def theme_color
|
||||
'#6364FF'
|
||||
'#191b22'
|
||||
end
|
||||
|
||||
def background_color
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
%link{ rel: 'mask-icon', href: asset_pack_path('media/images/logo-symbol-icon.svg'), color: '#6364FF' }/
|
||||
%link{ rel: 'manifest', href: manifest_path(format: :json) }/
|
||||
%meta{ name: 'theme-color', content: '#6364FF' }/
|
||||
%meta{ name: 'theme-color', content: '#191b22' }/
|
||||
%meta{ name: 'apple-mobile-web-app-capable', content: 'yes' }/
|
||||
%meta{ name: 'apple-itunes-app', content: 'app-id=1571998974' }/
|
||||
|
||||
|
|
Loading…
Reference in a new issue