From e72db6d9dd53a9d44f641bdf6bce7e64548e7d94 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 2 Mar 2018 07:12:40 +0100 Subject: [PATCH] Move "compose" on mobile to floating action button (#6594) * Move "compose" on mobile to floating action button * Fix contrast on floating action button --- .../features/ui/components/columns_area.js | 17 +++++++++--- .../features/ui/components/tabs_bar.js | 1 - .../styles/mastodon/components.scss | 27 +++++++++++++++++-- 3 files changed, 38 insertions(+), 7 deletions(-) diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index a01e5a390e..e82c46402b 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -6,6 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import ReactSwipeableViews from 'react-swipeable-views'; import { links, getIndex, getLink } from './tabs_bar'; +import { Link } from 'react-router-dom'; import BundleContainer from '../containers/bundle_container'; import ColumnLoading from './column_loading'; @@ -152,11 +153,19 @@ export default class ColumnsArea extends ImmutablePureComponent { this.pendingIndex = null; if (singleColumn) { - return columnIndex !== -1 ? ( - + const floatingActionButton = this.context.router.history.location.pathname === '/statuses/new' ? null : ; + + return columnIndex !== -1 ? [ + {links.map(this.renderView)} - - ) :
{children}
; +
, + + floatingActionButton, + ] : [ +
{children}
, + + floatingActionButton, + ]; } return ( diff --git a/app/javascript/mastodon/features/ui/components/tabs_bar.js b/app/javascript/mastodon/features/ui/components/tabs_bar.js index 863061d999..77fe5f5e2f 100644 --- a/app/javascript/mastodon/features/ui/components/tabs_bar.js +++ b/app/javascript/mastodon/features/ui/components/tabs_bar.js @@ -6,7 +6,6 @@ import { debounce } from 'lodash'; import { isUserTouching } from '../../../is_mobile'; export const links = [ - , , , diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 90c07f5693..626f515340 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1878,7 +1878,7 @@ font-size: 14px; font-weight: 500; border-bottom: 2px solid lighten($ui-base-color, 8%); - transition: all 200ms linear; + transition: all 50ms linear; .fa { font-weight: 400; @@ -1895,7 +1895,6 @@ &:active { @media screen and (min-width: 631px) { background: lighten($ui-base-color, 14%); - transition: all 100ms linear; } } @@ -5024,3 +5023,27 @@ noscript { left: 0; } } + +.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%); + } +}