treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Move "compose" on mobile to floating action button 

Port 1237c34997 to glitch-soc
lolsob-rspec
Thibaut Girka 2018-08-31 13:34:11 +02:00 committed by ThibG
parent 000b9f7b03
commit e88fe59712
3 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/javascript/flavours/glitch/features/ui/components/columns_area.js
View File

@ -6,6 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import ReactSwipeableViews from 'react-swipeable-views'; import ReactSwipeableViews from 'react-swipeable-views';
import { links, getIndex, getLink } from './tabs_bar'; import { links, getIndex, getLink } from './tabs_bar';
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';
@ -153,11 +154,19 @@ export default class ColumnsArea extends ImmutablePureComponent {
this.pendingIndex = null; this.pendingIndex = null;
if (singleColumn) { if (singleColumn) {
return columnIndex !== -1 ? ( const floatingActionButton = this.context.router.history.location.pathname === '/statuses/new' ? null : <Link key='floating-action-button' to='/statuses/new' className='floating-action-button'><i className='fa fa-pencil' /></Link>;
<ReactSwipeableViews index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}>
return columnIndex !== -1 ? [
<ReactSwipeableViews key='content' index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}>
{links.map(this.renderView)} {links.map(this.renderView)}
</ReactSwipeableViews> </ReactSwipeableViews>,
) : <div className='columns-area'>{children}</div>;
floatingActionButton,
] : [
<div className='columns-area'>{children}</div>,
floatingActionButton,
];
} }
return ( return (

1
app/javascript/flavours/glitch/features/ui/components/tabs_bar.js
View File

@ -6,7 +6,6 @@ import { debounce } from 'lodash';
import { isUserTouching } from 'flavours/glitch/util/is_mobile'; import { isUserTouching } from 'flavours/glitch/util/is_mobile';
export const links = [ export const links = [
<NavLink className='tabs-bar__link primary' to='/statuses/new' data-preview-title-id='tabs_bar.compose' data-preview-icon='pencil' ><i className='fa fa-fw fa-pencil' /><FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></NavLink>,
<NavLink className='tabs-bar__link primary' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><i className='fa fa-fw fa-home' /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>, <NavLink className='tabs-bar__link primary' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><i className='fa fa-fw fa-home' /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>,
<NavLink className='tabs-bar__link primary' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><i className='fa fa-fw fa-bell' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>, <NavLink className='tabs-bar__link primary' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><i className='fa fa-fw fa-bell' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>,

24
app/javascript/flavours/glitch/styles/components/columns.scss
View File

@ -503,3 +503,27 @@
margin-left: 5px; margin-left: 5px;
} }
} }
.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, 3%);
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: lighten($ui-highlight-color, 7%);
}
}