From e9ccee38a7b067802e4ebafeb10401f5ef82d318 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 23 Oct 2022 15:58:24 +0200 Subject: [Glitch] Change floating action button to be a button in header in web UI Port 1fd6460b02d2e73c94e7c6b1fa8fdc4d2ae36241 to glitch-soc Signed-off-by: Claire --- .../glitch/features/ui/components/columns_area.js | 25 +++---------------- .../glitch/features/ui/components/header.js | 21 ++++++++++++---- .../features/ui/components/navigation_panel.js | 1 - .../flavours/glitch/features/ui/index.js | 2 +- .../glitch/styles/components/accounts.scss | 9 +------ .../flavours/glitch/styles/components/columns.scss | 1 + .../glitch/styles/components/single_column.scss | 29 ---------------------- 7 files changed, 23 insertions(+), 65 deletions(-) (limited to 'app/javascript/flavours') 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 76e9a3690..bf3e79c24 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js @@ -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,7 +19,6 @@ import { ListTimeline, Directory, } from '../../ui/util/async-components'; -import Icon from 'flavours/glitch/components/icon'; import ComposePanel from './compose_panel'; import NavigationPanel from './navigation_panel'; @@ -43,22 +40,13 @@ const componentMap = { 'DIRECTORY': Directory, }; -const shouldHideFAB = path => path.match(/^\/statuses\/|^\/@[^/]+\/\d+|^\/publish|^\/explore|^\/getting-started|^\/start/); - -const messages = defineMessages({ - publish: { id: 'compose_form.publish', defaultMessage: 'Toot' }, -}); - -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, singleColumn: PropTypes.bool, children: PropTypes.node, @@ -144,17 +132,14 @@ class ColumnsArea extends ImmutablePureComponent { } renderError = (props) => { - return ; + return ; } render () { - const { columns, children, singleColumn, intl, navbarUnder, openSettings } = this.props; + const { columns, children, singleColumn, navbarUnder, openSettings } = this.props; const { renderComposePanel } = this.state; - const { signedIn } = this.context.identity; if (singleColumn) { - const floatingActionButton = (!signedIn || shouldHideFAB(this.context.router.history.location.pathname)) ? null : ; - return (
@@ -163,7 +148,7 @@ class ColumnsArea extends ImmutablePureComponent {
-
+
{children}
@@ -173,8 +158,6 @@ class ColumnsArea extends ImmutablePureComponent {
- - {floatingActionButton} ); } diff --git a/app/javascript/flavours/glitch/features/ui/components/header.js b/app/javascript/flavours/glitch/features/ui/components/header.js index 5fdef0af4..6c2fb40ba 100644 --- a/app/javascript/flavours/glitch/features/ui/components/header.js +++ b/app/javascript/flavours/glitch/features/ui/components/header.js @@ -1,6 +1,6 @@ import React from 'react'; import Logo from 'flavours/glitch/components/logo'; -import { Link } from 'react-router-dom'; +import { Link, withRouter } from 'react-router-dom'; import { FormattedMessage } from 'react-intl'; import { registrationsOpen, me } from 'flavours/glitch/initial_state'; import Avatar from 'flavours/glitch/components/avatar'; @@ -16,25 +16,36 @@ const Account = connect(state => ({ )); -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 = ; + content = ( + <> + {location.pathname !== '/publish' && } + + + ); } else { content = ( - + <> - + ); } diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js index 1f3e4f1fd..d7d3b8257 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js @@ -81,7 +81,6 @@ class NavigationPanel extends React.Component { {!!preferencesLink && } - {!!relationshipsLink && } )} diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index 9ca946142..164c475cc 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -159,7 +159,7 @@ class SwitchingColumnsArea extends React.PureComponent { setRef = c => { if (c) { - this.node = c.getWrappedInstance(); + this.node = c; } } diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 4e912b18b..00519adf1 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -541,6 +541,7 @@ &__buttons { display: flex; align-items: center; + gap: 8px; padding-top: 55px; overflow: hidden; @@ -550,14 +551,6 @@ box-sizing: content-box; padding: 2px; } - - & > .icon-button { - margin-right: 8px; - } - - .button { - margin: 0 8px; - } } &__name { diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 5de8547e9..c61815e07 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -674,6 +674,7 @@ $ui-header-height: 55px; cursor: default; &__image { + width: 70%; max-width: 350px; margin-top: -50px; } diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 1725a5480..1f1d7d68d 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -222,30 +222,6 @@ } } -.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%; @@ -260,7 +236,6 @@ margin-bottom: 10px; } - .floating-action-button, .tabs-bar__link.optional { display: none; } @@ -277,10 +252,6 @@ @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); } -- cgit