From 1fd6460b02d2e73c94e7c6b1fa8fdc4d2ae36241 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 23 Oct 2022 15:58:24 +0200 Subject: [PATCH] Change floating action button to be a button in header in web UI (#19422) - Fix theme color - Fix elephant being too big on error page on small screens - Remove "Follows and Followers" link from navigation panel --- .../features/ui/components/columns_area.js | 26 ++----------- .../mastodon/features/ui/components/header.js | 21 +++++++--- .../ui/components/navigation_panel.js | 1 - app/javascript/mastodon/features/ui/index.js | 2 +- .../styles/mastodon/components.scss | 39 +------------------ app/serializers/manifest_serializer.rb | 2 +- app/views/layouts/application.html.haml | 2 +- 7 files changed, 25 insertions(+), 68 deletions(-) diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index 9ee6fca43ca..f4824f04571 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/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,10 +19,8 @@ import { ListTimeline, Directory, } from '../../ui/util/async-components'; -import Icon from 'mastodon/components/icon'; import ComposePanel from './compose_panel'; import NavigationPanel from './navigation_panel'; - import { supportsPassiveEvents } from 'detect-passive-events'; import { scrollRight } from '../../../scroll'; @@ -43,22 +39,13 @@ const componentMap = { 'DIRECTORY': Directory, }; -const messages = defineMessages({ - publish: { id: 'compose_form.publish', defaultMessage: 'Publish' }, -}); - -const shouldHideFAB = path => path.match(/^\/statuses\/|^\/@[^/]+\/\d+|^\/publish|^\/explore|^\/getting-started|^\/start/); - -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, isModalOpen: PropTypes.bool.isRequired, singleColumn: PropTypes.bool, @@ -143,17 +130,14 @@ class ColumnsArea extends ImmutablePureComponent { } renderError = (props) => { - return ; + return ; } render () { - const { columns, children, singleColumn, isModalOpen, intl } = this.props; + const { columns, children, singleColumn, isModalOpen } = 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 (
@@ -162,7 +146,7 @@ class ColumnsArea extends ImmutablePureComponent {
-
+
{children}
@@ -172,8 +156,6 @@ class ColumnsArea extends ImmutablePureComponent {
- - {floatingActionButton} ); } diff --git a/app/javascript/mastodon/features/ui/components/header.js b/app/javascript/mastodon/features/ui/components/header.js index c49f48cc984..a1c281315c1 100644 --- a/app/javascript/mastodon/features/ui/components/header.js +++ b/app/javascript/mastodon/features/ui/components/header.js @@ -1,6 +1,6 @@ import React from 'react'; import Logo from 'mastodon/components/logo'; -import { Link } from 'react-router-dom'; +import { Link, withRouter } from 'react-router-dom'; import { FormattedMessage } from 'react-intl'; import { registrationsOpen, me } from 'mastodon/initial_state'; import Avatar from 'mastodon/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/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js index 757ef54ae29..10678f7d8c9 100644 --- a/app/javascript/mastodon/features/ui/components/navigation_panel.js +++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js @@ -84,7 +84,6 @@ class NavigationPanel extends React.Component {
- )} diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 7cda5e106c3..298f2111dec 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -145,7 +145,7 @@ class SwitchingColumnsArea extends React.PureComponent { setRef = c => { if (c) { - this.node = c.getWrappedInstance(); + this.node = c; } } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index afe9f9da97f..cca29161a89 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2565,30 +2565,6 @@ $ui-header-height: 55px; } } -.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%; @@ -2603,7 +2579,6 @@ $ui-header-height: 55px; margin-bottom: 10px; } - .floating-action-button, .tabs-bar__link.optional { display: none; } @@ -2620,10 +2595,6 @@ $ui-header-height: 55px; @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); } @@ -4350,6 +4321,7 @@ a.status-card.compact:hover { cursor: default; &__image { + width: 70%; max-width: 350px; margin-top: -50px; } @@ -7270,6 +7242,7 @@ noscript { &__buttons { display: flex; align-items: center; + gap: 8px; padding-top: 55px; overflow: hidden; @@ -7279,14 +7252,6 @@ noscript { box-sizing: content-box; padding: 2px; } - - & > .icon-button { - margin-right: 8px; - } - - .button { - margin: 0 8px; - } } &__name { diff --git a/app/serializers/manifest_serializer.rb b/app/serializers/manifest_serializer.rb index fb7ab563ca0..5604325be41 100644 --- a/app/serializers/manifest_serializer.rb +++ b/app/serializers/manifest_serializer.rb @@ -40,7 +40,7 @@ class ManifestSerializer < ActiveModel::Serializer end def theme_color - '#6364FF' + '#191b22' end def background_color diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 3e50de3fbf7..52cdce7c6cf 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -21,7 +21,7 @@ %link{ rel: 'mask-icon', href: asset_pack_path('media/images/logo-symbol-icon.svg'), color: '#6364FF' }/ %link{ rel: 'manifest', href: manifest_path(format: :json) }/ - %meta{ name: 'theme-color', content: '#6364FF' }/ + %meta{ name: 'theme-color', content: '#191b22' }/ %meta{ name: 'apple-mobile-web-app-capable', content: 'yes' }/ %meta{ name: 'apple-itunes-app', content: 'app-id=1571998974' }/