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%);
+ }
+}