From 70c308c4aa97acaaf6354420bee7d843ddf97d13 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Fri, 31 Aug 2018 13:31:45 +0200 Subject: [Glitch] When search enabled, display hint in search popout Port 7901f9f63e156732ab10154c34f3c2d188471a9d to glitch-soc --- app/javascript/flavours/glitch/features/ui/components/tabs_bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js b/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js index 89b455dd8..257178439 100644 --- a/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js +++ b/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js @@ -13,7 +13,7 @@ export const links = [ , , - , + , ]; export function getIndex (path) { -- cgit From 5f035a2a1acbd6072b556837b5dd647a0fdbf263 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Fri, 31 Aug 2018 13:34:11 +0200 Subject: [Glitch] Move "compose" on mobile to floating action button Port e72db6d9dd53a9d44f641bdf6bce7e64548e7d94 to glitch-soc --- .../glitch/features/ui/components/columns_area.js | 17 +++++++++++---- .../glitch/features/ui/components/tabs_bar.js | 1 - .../flavours/glitch/styles/components/columns.scss | 24 ++++++++++++++++++++++ 3 files changed, 37 insertions(+), 5 deletions(-) (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.js index ee71e514a..8fde279c7 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ b/app/javascript/flavours/glitch/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'; @@ -153,11 +154,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/flavours/glitch/features/ui/components/tabs_bar.js b/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js index 257178439..81d5f5a7d 100644 --- a/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js +++ b/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js @@ -6,7 +6,6 @@ import { debounce } from 'lodash'; import { isUserTouching } from 'flavours/glitch/util/is_mobile'; export const links = [ - , , , diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index c61cd038f..86c77f980 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -503,3 +503,27 @@ 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%); + } +} -- cgit From 76a3f373e3bfa94df13272aed9b92a50ed912928 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Fri, 31 Aug 2018 13:34:58 +0200 Subject: [Glitch] Use withRouter for TabsBar Port 61e62757816cd8cfe38944d509f8ec13d7d86912 to glitch-soc --- .../flavours/glitch/features/ui/components/tabs_bar.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js b/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js index 81d5f5a7d..93a74faae 100644 --- a/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js +++ b/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { NavLink } from 'react-router-dom'; +import { NavLink, withRouter } from 'react-router-dom'; import { FormattedMessage, injectIntl } from 'react-intl'; import { debounce } from 'lodash'; import { isUserTouching } from 'flavours/glitch/util/is_mobile'; @@ -24,14 +24,12 @@ export function getLink (index) { } @injectIntl -export default class TabsBar extends React.Component { - - static contextTypes = { - router: PropTypes.object.isRequired, - } +@withRouter +export default class TabsBar extends React.PureComponent { static propTypes = { intl: PropTypes.object.isRequired, + history: PropTypes.object.isRequired, } setRef = ref => { @@ -59,7 +57,7 @@ export default class TabsBar extends React.Component { const listener = debounce(() => { nextTab.removeEventListener('transitionend', listener); - this.context.router.history.push(to); + this.props.history.push(to); }, 50); nextTab.addEventListener('transitionend', listener); -- cgit From 37a00d4c1dd3aa1b66f60d296fa71fa3201a32da Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Fri, 31 Aug 2018 13:54:25 +0200 Subject: [Glitch] Add search item to tab bar for mobile devices Port c9cbb8de703e321c0d152813a2e22471ffe5eef7 to glitch-soc --- app/javascript/flavours/glitch/features/drawer/index.js | 4 +++- app/javascript/flavours/glitch/features/ui/components/tabs_bar.js | 1 + app/javascript/flavours/glitch/features/ui/index.js | 2 ++ 3 files changed, 6 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/features/drawer/index.js b/app/javascript/flavours/glitch/features/drawer/index.js index 1679e9a4b..eb051ba42 100644 --- a/app/javascript/flavours/glitch/features/drawer/index.js +++ b/app/javascript/flavours/glitch/features/drawer/index.js @@ -86,6 +86,7 @@ class Drawer extends React.Component { searchHidden, searchValue, submitted, + isSearchPage, } = this.props; const computedClass = classNames('drawer', `mbstobon-${elefriend}`); @@ -110,7 +111,7 @@ class Drawer extends React.Component { />
- + {!isSearchPage && } {multiColumn &&