From 206e9593ac2c808fe85177ab156027c226da8cb6 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 4 Oct 2022 20:13:23 +0200 Subject: [Glitch] Fix logged-out web UI on smaller screens Port e2b561e3a521ff893943c0e9e32952e35934ca54 to glitch-soc Signed-off-by: Claire --- .../glitch/features/ui/components/columns_area.js | 85 ++------------------- .../glitch/features/ui/components/compose_panel.js | 2 +- .../glitch/features/ui/components/header.js | 53 +++++++++++++ .../glitch/features/ui/components/link_footer.js | 44 +++-------- .../features/ui/components/navigation_panel.js | 9 ++- .../glitch/features/ui/components/tabs_bar.js | 86 ---------------------- 6 files changed, 78 insertions(+), 201 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/ui/components/header.js delete mode 100644 app/javascript/flavours/glitch/features/ui/components/tabs_bar.js (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 718b4a27f..8037c195d 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js @@ -3,13 +3,7 @@ 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 ReactSwipeableViews from 'react-swipeable-views'; -import TabsBar, { links, getIndex, getLink } from './tabs_bar'; import { Link } from 'react-router-dom'; - -import { disableSwiping } from 'flavours/glitch/initial_state'; - import BundleContainer from '../containers/bundle_container'; import ColumnLoading from './column_loading'; import DrawerLoading from './drawer_loading'; @@ -72,20 +66,13 @@ class ColumnsArea extends ImmutablePureComponent { openSettings: PropTypes.func, }; - // Corresponds to (max-width: 600px + (285px * 1) + (10px * 1)) in SCSS - mediaQuery = 'matchMedia' in window && window.matchMedia('(max-width: 895px)'); + // Corresponds to (max-width: $no-gap-breakpoint + 285px - 1px) in SCSS + mediaQuery = 'matchMedia' in window && window.matchMedia('(max-width: 1174px)'); state = { - shouldAnimate: false, renderComposePanel: !(this.mediaQuery && this.mediaQuery.matches), } - componentWillReceiveProps() { - if (typeof this.pendingIndex !== 'number' && this.lastIndex !== getIndex(this.context.router.history.location.pathname)) { - this.setState({ shouldAnimate: false }); - } - } - componentDidMount() { if (!this.props.singleColumn) { this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false); @@ -100,10 +87,7 @@ class ColumnsArea extends ImmutablePureComponent { this.setState({ renderComposePanel: !this.mediaQuery.matches }); } - this.lastIndex = getIndex(this.context.router.history.location.pathname); this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl'); - - this.setState({ shouldAnimate: true }); } componentWillUpdate(nextProps) { @@ -116,13 +100,6 @@ class ColumnsArea extends ImmutablePureComponent { if (this.props.singleColumn !== prevProps.singleColumn && !this.props.singleColumn) { this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false); } - - const newIndex = getIndex(this.context.router.history.location.pathname); - - if (this.lastIndex !== newIndex) { - this.lastIndex = newIndex; - this.setState({ shouldAnimate: true }); - } } componentWillUnmount () { @@ -150,31 +127,6 @@ class ColumnsArea extends ImmutablePureComponent { this.setState({ renderComposePanel: !e.matches }); } - handleSwipe = (index) => { - this.pendingIndex = index; - - const nextLinkTranslationId = links[index].props['data-preview-title-id']; - const currentLinkSelector = '.tabs-bar__link.active'; - const nextLinkSelector = `.tabs-bar__link[data-preview-title-id="${nextLinkTranslationId}"]`; - - // HACK: Remove the active class from the current link and set it to the next one - // React-router does this for us, but too late, feeling laggy. - document.querySelector(currentLinkSelector).classList.remove('active'); - document.querySelector(nextLinkSelector).classList.add('active'); - - if (!this.state.shouldAnimate && typeof this.pendingIndex === 'number') { - this.context.router.history.push(getLink(this.pendingIndex)); - this.pendingIndex = null; - } - } - - handleAnimationEnd = () => { - if (typeof this.pendingIndex === 'number') { - this.context.router.history.push(getLink(this.pendingIndex)); - this.pendingIndex = null; - } - } - handleWheel = () => { if (typeof this._interruptScrollAnimation !== 'function') { return; @@ -187,22 +139,6 @@ class ColumnsArea extends ImmutablePureComponent { this.node = node; } - renderView = (link, index) => { - const columnIndex = getIndex(this.context.router.history.location.pathname); - const title = this.props.intl.formatMessage({ id: link.props['data-preview-title-id'] }); - const icon = link.props['data-preview-icon']; - - const view = (index === columnIndex) ? - React.cloneElement(this.props.children) : - ; - - return ( -
- {view} -
- ); - } - renderLoading = columnId => () => { return columnId === 'COMPOSE' ? : ; } @@ -213,22 +149,12 @@ class ColumnsArea extends ImmutablePureComponent { render () { const { columns, children, singleColumn, intl, navbarUnder, openSettings } = this.props; - const { shouldAnimate, renderComposePanel } = this.state; + const { renderComposePanel } = this.state; const { signedIn } = this.context.identity; - const columnIndex = getIndex(this.context.router.history.location.pathname); - if (singleColumn) { const floatingActionButton = (!signedIn || shouldHideFAB(this.context.router.history.location.pathname)) ? null : ; - const content = columnIndex !== -1 ? ( - - {links.map(this.renderView)} - - ) : ( -
{children}
- ); - return (
@@ -238,9 +164,8 @@ class ColumnsArea extends ImmutablePureComponent {
- {!navbarUnder && } - {content} - {navbarUnder && } +
+
{children}
diff --git a/app/javascript/flavours/glitch/features/ui/components/compose_panel.js b/app/javascript/flavours/glitch/features/ui/components/compose_panel.js index 6e1c51d74..894a00747 100644 --- a/app/javascript/flavours/glitch/features/ui/components/compose_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/compose_panel.js @@ -34,7 +34,7 @@ class ComposePanel extends React.PureComponent { )} - +
); } diff --git a/app/javascript/flavours/glitch/features/ui/components/header.js b/app/javascript/flavours/glitch/features/ui/components/header.js new file mode 100644 index 000000000..041bdff05 --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/components/header.js @@ -0,0 +1,53 @@ +import React from 'react'; +import Logo from 'flavours/glitch/components/logo'; +import { Link } from 'react-router-dom'; +import { FormattedMessage } from 'react-intl'; +import { registrationsOpen, me } from 'flavours/glitch/initial_state'; +import Avatar from 'flavours/glitch/components/avatar'; +import Permalink from 'flavours/glitch/components/permalink'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; + +const Account = connect(state => ({ + account: state.getIn(['accounts', me]), +}))(({ account }) => ( + + {account.get('acct')} + + +)); + +export default class Header extends React.PureComponent { + + static contextTypes = { + identity: PropTypes.object, + }; + + render () { + const { signedIn } = this.context.identity; + + let content; + + if (signedIn) { + content = ; + } else { + content = ( + + + + + ); + } + + return ( +
+ + +
+ {content} +
+
+ ); + } + +} diff --git a/app/javascript/flavours/glitch/features/ui/components/link_footer.js b/app/javascript/flavours/glitch/features/ui/components/link_footer.js index 39576f17b..cd32c8a3d 100644 --- a/app/javascript/flavours/glitch/features/ui/components/link_footer.js +++ b/app/javascript/flavours/glitch/features/ui/components/link_footer.js @@ -3,8 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; -import { limitedFederationMode, version, repository, source_url, profile_directory as profileDirectory } from 'flavours/glitch/initial_state'; -import { signOutLink, securityLink, privacyPolicyLink } from 'flavours/glitch/utils/backend_links'; +import { version, repository, source_url, profile_directory as profileDirectory } from 'flavours/glitch/initial_state'; import { logOut } from 'flavours/glitch/utils/log_out'; import { openModal } from 'flavours/glitch/actions/modal'; import { PERMISSION_INVITE_USERS } from 'flavours/glitch/permissions'; @@ -34,7 +33,6 @@ class LinkFooter extends React.PureComponent { }; static propTypes = { - withHotkeys: PropTypes.bool, onLogout: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, }; @@ -49,44 +47,26 @@ class LinkFooter extends React.PureComponent { } render () { - const { withHotkeys } = this.props; const { signedIn, permissions } = this.context.identity; - const items = []; - if ((this.context.identity.permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS) { - items.push(); - } - - if (signedIn && withHotkeys) { - items.push(); - } - - if (signedIn && securityLink) { - items.push(); - } - - if (!limitedFederationMode) { - items.push(); - } + items.push(); + items.push(); + items.push(); + items.push(); + items.push(); + items.push(); if (profileDirectory) { - items.push(); - } - - items.push(); - - if (privacyPolicyLink) { - items.push(); + items.push(); } if (signedIn) { - items.push(); - } + if ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS) { + items.push(); + } - items.push(); - - if (signedIn) { + items.push(); items.push(); } 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 57fbfb285..cb884ec75 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js @@ -42,10 +42,10 @@ export default class NavigationPanel extends React.Component { {!signedIn && ( - +
- +
)} {signedIn && ( @@ -64,6 +64,11 @@ export default class NavigationPanel extends React.Component { )} +
+
+ +
+ {showTrends && (
diff --git a/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js b/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js deleted file mode 100644 index 9c82fc91d..000000000 --- a/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js +++ /dev/null @@ -1,86 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { NavLink, withRouter } from 'react-router-dom'; -import { FormattedMessage, injectIntl } from 'react-intl'; -import { debounce } from 'lodash'; -import { isUserTouching } from 'flavours/glitch/is_mobile'; -import Icon from 'flavours/glitch/components/icon'; -import NotificationsCounterIcon from './notifications_counter_icon'; - -export const links = [ - , - , - , - , - , - , -]; - -export function getIndex (path) { - return links.findIndex(link => link.props.to === path); -} - -export function getLink (index) { - return links[index].props.to; -} - -export default @injectIntl -@withRouter -class TabsBar extends React.PureComponent { - - static propTypes = { - intl: PropTypes.object.isRequired, - history: PropTypes.object.isRequired, - } - - setRef = ref => { - this.node = ref; - } - - handleClick = (e) => { - // Only apply optimization for touch devices, which we assume are slower - // We thus avoid the 250ms delay for non-touch devices and the lag for touch devices - if (isUserTouching()) { - e.preventDefault(); - e.persist(); - - requestAnimationFrame(() => { - const tabs = Array(...this.node.querySelectorAll('.tabs-bar__link')); - const currentTab = tabs.find(tab => tab.classList.contains('active')); - const nextTab = tabs.find(tab => tab.contains(e.target)); - const { props: { to } } = links[Array(...this.node.childNodes).indexOf(nextTab)]; - - - if (currentTab !== nextTab) { - if (currentTab) { - currentTab.classList.remove('active'); - } - - const listener = debounce(() => { - nextTab.removeEventListener('transitionend', listener); - this.props.history.push(to); - }, 50); - - nextTab.addEventListener('transitionend', listener); - nextTab.classList.add('active'); - } - }); - } - - } - - render () { - const { intl: { formatMessage } } = this.props; - - return ( -
- - -
-
- ); - } - -} -- cgit From 07df273f3725bc673b9bc2206796908f58c2500a Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 8 Oct 2022 06:01:11 +0200 Subject: [Glitch] Change privacy policy to be rendered in web UI, add REST API Port a2ba01132603174c43c5788a95f9ee127b684c0a to glitch-soc Signed-off-by: Claire --- .../glitch/features/privacy_policy/index.js | 60 ++++++++++++++++ .../glitch/features/ui/components/link_footer.js | 2 +- .../flavours/glitch/features/ui/index.js | 2 + .../glitch/features/ui/util/async-components.js | 4 ++ .../flavours/glitch/styles/components/columns.scss | 3 +- .../flavours/glitch/styles/components/index.scss | 1 + .../glitch/styles/components/privacy_policy.scss | 84 ++++++++++++++++++++++ 7 files changed, 154 insertions(+), 2 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/privacy_policy/index.js create mode 100644 app/javascript/flavours/glitch/styles/components/privacy_policy.scss (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/features/privacy_policy/index.js b/app/javascript/flavours/glitch/features/privacy_policy/index.js new file mode 100644 index 000000000..816010294 --- /dev/null +++ b/app/javascript/flavours/glitch/features/privacy_policy/index.js @@ -0,0 +1,60 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { title } from 'flavours/glitch/initial_state'; +import { Helmet } from 'react-helmet'; +import { FormattedMessage, FormattedDate, injectIntl, defineMessages } from 'react-intl'; +import Column from 'flavours/glitch/components/column'; +import api from 'flavours/glitch/api'; +import Skeleton from 'flavours/glitch/components/skeleton'; + +const messages = defineMessages({ + title: { id: 'privacy_policy.title', defaultMessage: 'Privacy Policy' }, +}); + +export default @injectIntl +class PrivacyPolicy extends React.PureComponent { + + static propTypes = { + intl: PropTypes.object, + }; + + state = { + content: null, + lastUpdated: null, + isLoading: true, + }; + + componentDidMount () { + api().get('/api/v1/instance/privacy_policy').then(({ data }) => { + this.setState({ content: data.content, lastUpdated: data.updated_at, isLoading: false }); + }).catch(() => { + this.setState({ isLoading: false }); + }); + } + + render () { + const { intl } = this.props; + const { isLoading, content, lastUpdated } = this.state; + + return ( + +
+
+

+

: }} />

+
+ +
+
+ + + {intl.formatMessage(messages.title)} - {title} + + + ); + } + +} diff --git a/app/javascript/flavours/glitch/features/ui/components/link_footer.js b/app/javascript/flavours/glitch/features/ui/components/link_footer.js index cd32c8a3d..8c55a7337 100644 --- a/app/javascript/flavours/glitch/features/ui/components/link_footer.js +++ b/app/javascript/flavours/glitch/features/ui/components/link_footer.js @@ -54,7 +54,7 @@ class LinkFooter extends React.PureComponent { items.push(); items.push(); items.push(); - items.push(); + items.push(); items.push(); if (profileDirectory) { diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index 8ea7a0b02..ea99e5097 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -53,6 +53,7 @@ import { Explore, FollowRecommendations, About, + PrivacyPolicy, } from './util/async-components'; import { HotKeys } from 'react-hotkeys'; import { me, title } from 'flavours/glitch/initial_state'; @@ -186,6 +187,7 @@ class SwitchingColumnsArea extends React.PureComponent { + diff --git a/app/javascript/flavours/glitch/features/ui/util/async-components.js b/app/javascript/flavours/glitch/features/ui/util/async-components.js index 7ef06ceb7..5bf8d7fd6 100644 --- a/app/javascript/flavours/glitch/features/ui/util/async-components.js +++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js @@ -185,3 +185,7 @@ export function Explore () { export function About () { return import(/*webpackChunkName: "features/glitch/async/about" */'flavours/glitch/features/about'); } + +export function PrivacyPolicy () { + return import(/*webpackChunkName: "features/glitch/async/privacy_policy" */'flavours/glitch/features/privacy_policy'); +} diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index b63f2c86f..1827e8c01 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -357,7 +357,8 @@ $ui-header-height: 55px; > .scrollable { background: $ui-base-color; - border-radius: 0 0 4px 4px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; } } diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 1c3540b33..a04482a79 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1778,3 +1778,4 @@ noscript { @import 'announcements'; @import 'explore'; @import 'signed_out'; +@import 'privacy_policy'; diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss new file mode 100644 index 000000000..f69bf1a07 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss @@ -0,0 +1,84 @@ +.privacy-policy { + background: $ui-base-color; + padding: 20px; + + @media screen and (min-width: $no-gap-breakpoint) { + border-radius: 4px; + } + + &__body { + margin-top: 20px; + color: $secondary-text-color; + font-size: 15px; + line-height: 22px; + + h1, + p, + ul, + ol { + margin-bottom: 20px; + } + + ul { + list-style: disc; + } + + ol { + list-style: decimal; + } + + ul, + ol { + padding-left: 1em; + } + + li { + margin-bottom: 10px; + + &::marker { + color: $darker-text-color; + } + + &:last-child { + margin-bottom: 0; + } + } + + h1 { + color: $primary-text-color; + font-size: 19px; + line-height: 24px; + font-weight: 700; + margin-top: 30px; + + &:first-child { + margin-top: 0; + } + } + + strong { + font-weight: 700; + color: $primary-text-color; + } + + em { + font-style: italic; + } + + a { + color: $highlight-text-color; + text-decoration: underline; + + &:focus, + &:hover, + &:active { + text-decoration: none; + } + } + + hr { + border: 1px solid lighten($ui-base-color, 4%); + margin: 30px 0; + } + } +} -- cgit From 8491a3532dba7176fbeb7b9283ca3abd07858b3a Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Sun, 9 Oct 2022 10:49:51 +0900 Subject: [Glitch] Remove timeline preview link from nav panel when not signed-in Port e82467ca41f4940add32061ca70214e236cc435f to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/server_banner.js | 10 ++-- .../features/ui/components/navigation_panel.js | 23 +++++---- app/javascript/flavours/glitch/initial_state.js | 59 +++++++++++++++++++++- 3 files changed, 75 insertions(+), 17 deletions(-) (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/components/server_banner.js b/app/javascript/flavours/glitch/components/server_banner.js index 16360ec56..2bb0381da 100644 --- a/app/javascript/flavours/glitch/components/server_banner.js +++ b/app/javascript/flavours/glitch/components/server_banner.js @@ -1,12 +1,12 @@ -import React from 'react'; import PropTypes from 'prop-types'; -import { domain } from 'flavours/glitch/initial_state'; -import { fetchServer } from 'flavours/glitch/actions/server'; +import React from 'react'; +import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; -import Account from 'flavours/glitch/containers/account_container'; +import { fetchServer } from 'flavours/glitch/actions/server'; import ShortNumber from 'flavours/glitch/components/short_number'; import Skeleton from 'flavours/glitch/components/skeleton'; -import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; +import Account from 'flavours/glitch/containers/account_container'; +import { domain } from 'flavours/glitch/initial_state'; const messages = defineMessages({ aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' }, 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 cb884ec75..754c651c2 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js @@ -1,15 +1,15 @@ -import React from 'react'; import PropTypes from 'prop-types'; -import { NavLink, Link } from 'react-router-dom'; +import React from 'react'; import { FormattedMessage } from 'react-intl'; +import { Link, NavLink } from 'react-router-dom'; import Icon from 'flavours/glitch/components/icon'; -import { showTrends } from 'flavours/glitch/initial_state'; -import { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links'; -import NotificationsCounterIcon from './notifications_counter_icon'; +import TrendsContainer from 'flavours/glitch/features/getting_started/containers/trends_container'; +import { showTrends, timelinePreview } from 'flavours/glitch/initial_state'; import FollowRequestsNavLink from './follow_requests_nav_link'; import ListPanel from './list_panel'; -import TrendsContainer from 'flavours/glitch/features/getting_started/containers/trends_container'; +import NotificationsCounterIcon from './notifications_counter_icon'; import SignInBanner from './sign_in_banner'; +import { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links'; export default class NavigationPanel extends React.Component { @@ -36,10 +36,13 @@ export default class NavigationPanel extends React.Component { )} - { showTrends && } - - - + + {signedIn || timelinePreview && ( + <> + + + + )} {!signedIn && (
diff --git a/app/javascript/flavours/glitch/initial_state.js b/app/javascript/flavours/glitch/initial_state.js index 0f2484ba3..b597ab2c5 100644 --- a/app/javascript/flavours/glitch/initial_state.js +++ b/app/javascript/flavours/glitch/initial_state.js @@ -1,4 +1,52 @@ +// @ts-check + +/** + * @typedef {[code: string, name: string, localName: string]} InitialStateLanguage + */ + +/** + * @typedef InitialStateMeta + * @property {string} access_token + * @property {boolean=} advanced_layout + * @property {boolean} auto_play_gif + * @property {boolean} activity_api_enabled + * @property {string} admin + * @property {boolean=} boost_modal + * @property {boolean} crop_images + * @property {boolean=} delete_modal + * @property {boolean=} disable_swiping + * @property {boolean} display_media + * @property {string} domain + * @property {boolean=} expand_spoilers + * @property {boolean} limited_federation_mode + * @property {string} locale + * @property {string | null} mascot + * @property {string=} me + * @property {boolean} profile_directory + * @property {boolean} registrations_open + * @property {boolean} reduce_motion + * @property {string} repository + * @property {boolean} search_enabled + * @property {string} source_url + * @property {string} streaming_api_base_url + * @property {boolean} timeline_preview + * @property {string} title + * @property {boolean} trends + * @property {boolean} unfollow_modal + * @property {boolean} use_blurhash + * @property {boolean=} use_pending_items + * @property {string} version + * @property {object} local_settings + */ + +/** + * @typedef InitialState + * @property {InitialStateLanguage[]} languages + * @property {InitialStateMeta} meta + */ + const element = document.getElementById('initial-state'); +/** @type {InitialState | undefined} */ const initialState = element && JSON.parse(element.textContent); // Glitch-soc-specific “local settings” @@ -8,7 +56,12 @@ try { initialState.local_settings = {}; } -const getMeta = (prop) => initialState && initialState.meta && initialState.meta[prop]; +/** + * @template {keyof InitialStateMeta} K + * @param {K} prop + * @returns {InitialStateMeta[K] | undefined} + */ +const getMeta = (prop) => initialState?.meta && initialState.meta[prop]; export const domain = getMeta('domain'); export const reduceMotion = getMeta('reduce_motion'); @@ -34,7 +87,9 @@ export const usePendingItems = getMeta('use_pending_items'); export const showTrends = getMeta('trends'); export const title = getMeta('title'); export const disableSwiping = getMeta('disable_swiping'); -export const languages = initialState && initialState.languages; +export const timelinePreview = getMeta('timeline_preview'); +export const activityApiEnabled = getMeta('activity_api_enabled'); +export const languages = initialState?.languages; // Glitch-soc-specific settings export const favouriteModal = getMeta('favourite_modal'); -- cgit From c36f28ba77d784cff6f5dba109e1286b13204221 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 9 Oct 2022 15:55:32 +0200 Subject: [Glitch] Fix intermediary responsive layout, accessibility on navigation in web UI Port 07653246223251052f5150e1e74139bf8ff41ec4 to glitch-soc Co-authored-by: Yamagishi Kazutoshi Signed-off-by: Claire --- .../flavours/glitch/components/avatar.js | 2 + app/javascript/flavours/glitch/components/logo.js | 3 +- .../glitch/features/ui/components/column_link.js | 24 ++++++---- .../ui/components/follow_requests_column_link.js | 51 ++++++++++++++++++++ .../ui/components/follow_requests_nav_link.js | 39 --------------- .../glitch/features/ui/components/header.js | 3 +- .../features/ui/components/navigation_panel.js | 56 ++++++++++++++-------- .../flavours/glitch/styles/components/columns.scss | 3 ++ .../glitch/styles/components/single_column.scss | 31 ++++++++++-- .../flavours/glitch/styles/variables.scss | 2 +- 10 files changed, 137 insertions(+), 77 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js delete mode 100644 app/javascript/flavours/glitch/features/ui/components/follow_requests_nav_link.js (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/components/avatar.js b/app/javascript/flavours/glitch/components/avatar.js index ce91d401d..1da4a861c 100644 --- a/app/javascript/flavours/glitch/components/avatar.js +++ b/app/javascript/flavours/glitch/components/avatar.js @@ -70,6 +70,8 @@ export default class Avatar extends React.PureComponent { onMouseLeave={this.handleMouseLeave} style={style} data-avatar-of={account && `@${account.get('acct')}`} + role='img' + aria-label={account.get('acct')} /> ); } diff --git a/app/javascript/flavours/glitch/components/logo.js b/app/javascript/flavours/glitch/components/logo.js index 3570b3644..ee5c22496 100644 --- a/app/javascript/flavours/glitch/components/logo.js +++ b/app/javascript/flavours/glitch/components/logo.js @@ -1,7 +1,8 @@ import React from 'react'; const Logo = () => ( - + + Mastodon ); diff --git a/app/javascript/flavours/glitch/features/ui/components/column_link.js b/app/javascript/flavours/glitch/features/ui/components/column_link.js index d04b869b6..1c475d087 100644 --- a/app/javascript/flavours/glitch/features/ui/components/column_link.js +++ b/app/javascript/flavours/glitch/features/ui/components/column_link.js @@ -1,26 +1,29 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; +import { NavLink } from 'react-router-dom'; import Icon from 'flavours/glitch/components/icon'; +import classNames from 'classnames'; -const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => { +const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent, ...other }) => { + const className = classNames('column-link', { 'column-link--transparent': transparent }); const badgeElement = typeof badge !== 'undefined' ? {badge} : null; + const iconElement = typeof icon === 'string' ? : icon; if (href) { return ( - - + + {iconElement} {text} {badgeElement} ); } else if (to) { return ( - - + + {iconElement} {text} {badgeElement} - + ); } else { const handleOnClick = (e) => { @@ -29,8 +32,8 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => { return onClick(e); } return ( - - + + {iconElement} {text} {badgeElement} @@ -39,13 +42,14 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => { }; ColumnLink.propTypes = { - icon: PropTypes.string.isRequired, + icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired, text: PropTypes.string.isRequired, to: PropTypes.string, onClick: PropTypes.func, href: PropTypes.string, method: PropTypes.string, badge: PropTypes.node, + transparent: PropTypes.bool, }; export default ColumnLink; diff --git a/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js b/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js new file mode 100644 index 000000000..301392a52 --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { fetchFollowRequests } from 'flavours/glitch/actions/accounts'; +import { connect } from 'react-redux'; +import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; +import IconWithBadge from 'flavours/glitch/components/icon_with_badge'; +import { List as ImmutableList } from 'immutable'; +import { injectIntl, defineMessages } from 'react-intl'; + +const messages = defineMessages({ + text: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, +}); + +const mapStateToProps = state => ({ + count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, +}); + +export default @injectIntl +@connect(mapStateToProps) +class FollowRequestsColumnLink extends React.Component { + + static propTypes = { + dispatch: PropTypes.func.isRequired, + count: PropTypes.number.isRequired, + intl: PropTypes.object.isRequired, + }; + + componentDidMount () { + const { dispatch } = this.props; + + dispatch(fetchFollowRequests()); + } + + render () { + const { count, intl } = this.props; + + if (count === 0) { + return null; + } + + return ( + } + text={intl.formatMessage(messages.text)} + /> + ); + } + +} diff --git a/app/javascript/flavours/glitch/features/ui/components/follow_requests_nav_link.js b/app/javascript/flavours/glitch/features/ui/components/follow_requests_nav_link.js deleted file mode 100644 index c30427896..000000000 --- a/app/javascript/flavours/glitch/features/ui/components/follow_requests_nav_link.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { fetchFollowRequests } from 'flavours/glitch/actions/accounts'; -import { connect } from 'react-redux'; -import { NavLink, withRouter } from 'react-router-dom'; -import IconWithBadge from 'flavours/glitch/components/icon_with_badge'; -import { List as ImmutableList } from 'immutable'; -import { FormattedMessage } from 'react-intl'; - -const mapStateToProps = state => ({ - count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, -}); - -export default @withRouter -@connect(mapStateToProps) -class FollowRequestsNavLink extends React.Component { - - static propTypes = { - dispatch: PropTypes.func.isRequired, - count: PropTypes.number.isRequired, - }; - - componentDidMount () { - const { dispatch } = this.props; - - dispatch(fetchFollowRequests()); - } - - render () { - const { count } = this.props; - - if (count === 0) { - return null; - } - - return ; - } - -} diff --git a/app/javascript/flavours/glitch/features/ui/components/header.js b/app/javascript/flavours/glitch/features/ui/components/header.js index 041bdff05..5fdef0af4 100644 --- a/app/javascript/flavours/glitch/features/ui/components/header.js +++ b/app/javascript/flavours/glitch/features/ui/components/header.js @@ -11,8 +11,7 @@ import { connect } from 'react-redux'; const Account = connect(state => ({ account: state.getIn(['accounts', me]), }))(({ account }) => ( - - {account.get('acct')} + )); 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 754c651c2..0955b3cf8 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js @@ -1,17 +1,34 @@ -import PropTypes from 'prop-types'; import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Link, NavLink } from 'react-router-dom'; -import Icon from 'flavours/glitch/components/icon'; +import PropTypes from 'prop-types'; +import { defineMessages, injectIntl } from 'react-intl'; +import { Link } from 'react-router-dom'; import TrendsContainer from 'flavours/glitch/features/getting_started/containers/trends_container'; import { showTrends, timelinePreview } from 'flavours/glitch/initial_state'; -import FollowRequestsNavLink from './follow_requests_nav_link'; +import FollowRequestsColumnLink from './follow_requests_column_link'; import ListPanel from './list_panel'; import NotificationsCounterIcon from './notifications_counter_icon'; import SignInBanner from './sign_in_banner'; import { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links'; +import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; + +const messages = defineMessages({ + home: { id: 'tabs_bar.home', defaultMessage: 'Home' }, + notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' }, + explore: { id: 'explore.title', defaultMessage: 'Explore' }, + local: { id: 'tabs_bar.local_timeline', defaultMessage: 'Local' }, + federated: { id: 'tabs_bar.federated_timeline', defaultMessage: 'Federated' }, + direct: { id: 'navigation_bar.direct', defaultMessage: 'Direct messages' }, + favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' }, + bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' }, + lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' }, + preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' }, + followsAndFollowers: { id: 'navigation_bar.follows_and_followers', defaultMessage: 'Follows and followers' }, + about: { id: 'navigation_bar.about', defaultMessage: 'About' }, + app_settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' }, +}); -export default class NavigationPanel extends React.Component { +export default @injectIntl +class NavigationPanel extends React.Component { static contextTypes = { router: PropTypes.object.isRequired, @@ -23,24 +40,24 @@ export default class NavigationPanel extends React.Component { }; render() { + const { intl, onOpenSettings } = this.props; const { signedIn } = this.context.identity; - const { onOpenSettings } = this.props; return (
{signedIn && ( - - - + + } text={intl.formatMessage(messages.notifications)} /> + )} - + {signedIn || timelinePreview && ( <> - - + + )} @@ -53,17 +70,18 @@ export default class NavigationPanel extends React.Component { {signedIn && ( - - - + + + +
- {!!preferencesLink && } - - {!!relationshipsLink && } + {!!preferencesLink && } + + {!!relationshipsLink && } )} diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 6f878f791..3233506cc 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -214,6 +214,9 @@ $ui-header-height: 55px; font-size: 16px; padding: 15px; text-decoration: none; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; &:hover, &:focus, diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 63bebc514..4a987a131 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -275,12 +275,14 @@ } @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% - 55px); + width: calc(100% - $sidebar-width); } .columns-area__panels { @@ -288,10 +290,10 @@ } .columns-area__panels__pane--navigational { - min-width: 55px; + min-width: $sidebar-width; .columns-area__panels__pane__inner { - width: 55px; + width: $sidebar-width; } .navigation-panel { @@ -301,7 +303,6 @@ height: 100vh; } - .column-link span, .navigation-panel__sign-in-banner, .navigation-panel__logo, .getting-started__trends { @@ -326,11 +327,31 @@ } } +@media screen and (max-width: $no-gap-breakpoint - 285px - 1px) { + $sidebar-width: 55px; + + .columns-area__panels__main { + width: calc(100% - $sidebar-width); + } + + .columns-area__panels__pane--navigational { + min-width: $sidebar-width; + + .columns-area__panels__pane__inner { + width: $sidebar-width; + } + + .column-link span { + display: none; + } + } +} + .explore__search-header { display: none; } -@media screen and (max-width: $no-gap-breakpoint + 285px - 1px) { +@media screen and (max-width: $no-gap-breakpoint - 1px) { .columns-area__panels__pane--compositional { display: none; } diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index 4b4f5ffbe..b865b5a2d 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -51,7 +51,7 @@ $media-modal-media-max-width: 100%; // put margins on top and bottom of image to avoid the screen covered by image. $media-modal-media-max-height: 80%; -$no-gap-breakpoint: 890px; +$no-gap-breakpoint: 1175px; $font-sans-serif: 'mastodon-font-sans-serif' !default; $font-display: 'mastodon-font-display' !default; -- cgit From 492ceeceb0dcf31b2a521633690973e56f3a3cad Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Mon, 10 Oct 2022 02:26:14 +0900 Subject: [Glitch] Fix fedi/local timeline nav link always hide Port d3f1a010e561e3de9a1d99ec104f5b286aaffbda to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/features/ui/components/navigation_panel.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/navigation_panel.js b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js index 0955b3cf8..2817374ab 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js @@ -54,7 +54,7 @@ class NavigationPanel extends React.Component { )} - {signedIn || timelinePreview && ( + {(signedIn || timelinePreview) && ( <> -- cgit From 1e7f819c8509e475288414c7e629de04a7189a48 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Mon, 10 Oct 2022 13:51:16 +0900 Subject: [Glitch] Fix `ColumnLink` labels not disappearing in mobile UI Port 3eef8a7a81512f283300d2371d5b743611cb0d27 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/features/ui/components/column_link.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/features/ui/components/column_link.js b/app/javascript/flavours/glitch/features/ui/components/column_link.js index 1c475d087..4f04fdba2 100644 --- a/app/javascript/flavours/glitch/features/ui/components/column_link.js +++ b/app/javascript/flavours/glitch/features/ui/components/column_link.js @@ -13,7 +13,7 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent, return ( {iconElement} - {text} + {text} {badgeElement} ); @@ -21,7 +21,7 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent, return ( {iconElement} - {text} + {text} {badgeElement} ); -- cgit From 1850166de92058161d9e0607bb1528b738aca0c7 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Tue, 11 Oct 2022 04:41:25 +0900 Subject: [Glitch] Hide list panel from nav bar in mobile layout Port d7873433256746c9b453aeca31520d68c6de4975 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/features/ui/components/list_panel.js | 12 ++++++------ .../glitch/features/ui/components/navigation_panel.js | 2 +- app/javascript/flavours/glitch/is_mobile.js | 14 +++++++++++++- app/javascript/flavours/glitch/styles/about.scss | 4 ++-- .../flavours/glitch/styles/components/columns.scss | 2 +- .../flavours/glitch/styles/components/single_column.scss | 4 ++++ 6 files changed, 27 insertions(+), 11 deletions(-) (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/features/ui/components/list_panel.js b/app/javascript/flavours/glitch/features/ui/components/list_panel.js index e61234283..dff830065 100644 --- a/app/javascript/flavours/glitch/features/ui/components/list_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/list_panel.js @@ -1,12 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { createSelector } from 'reselect'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { fetchLists } from 'flavours/glitch/actions/lists'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; -import { NavLink, withRouter } from 'react-router-dom'; -import Icon from 'flavours/glitch/components/icon'; +import { withRouter } from 'react-router-dom'; +import { fetchLists } from 'flavours/glitch/actions/lists'; +import ColumnLink from './column_link'; const getOrderedLists = createSelector([state => state.get('lists')], lists => { if (!lists) { @@ -42,11 +42,11 @@ class ListPanel extends ImmutablePureComponent { } return ( -
+
{lists.map(list => ( - {list.get('title')} + ))}
); 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 2817374ab..f36258990 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js @@ -4,12 +4,12 @@ import { defineMessages, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; import TrendsContainer from 'flavours/glitch/features/getting_started/containers/trends_container'; import { showTrends, timelinePreview } from 'flavours/glitch/initial_state'; +import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; import FollowRequestsColumnLink from './follow_requests_column_link'; import ListPanel from './list_panel'; import NotificationsCounterIcon from './notifications_counter_icon'; import SignInBanner from './sign_in_banner'; import { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links'; -import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; const messages = defineMessages({ home: { id: 'tabs_bar.home', defaultMessage: 'Home' }, diff --git a/app/javascript/flavours/glitch/is_mobile.js b/app/javascript/flavours/glitch/is_mobile.js index 0d5663098..31944d89b 100644 --- a/app/javascript/flavours/glitch/is_mobile.js +++ b/app/javascript/flavours/glitch/is_mobile.js @@ -1,10 +1,20 @@ +// @ts-check + import { supportsPassiveEvents } from 'detect-passive-events'; import { forceSingleColumn } from 'flavours/glitch/initial_state'; const LAYOUT_BREAKPOINT = 630; +/** + * @param {number} width + * @returns {boolean} + */ export const isMobile = width => width <= LAYOUT_BREAKPOINT; +/** + * @param {string} layout_local_setting + * @returns {string} + */ export const layoutFromWindow = (layout_local_setting) => { switch (layout_local_setting) { case 'multiple': @@ -28,11 +38,13 @@ export const layoutFromWindow = (layout_local_setting) => { const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; +const listenerOptions = supportsPassiveEvents ? { passive: true } : false; + let userTouching = false; -let listenerOptions = supportsPassiveEvents ? { passive: true } : false; const touchListener = () => { userTouching = true; + window.removeEventListener('touchstart', touchListener, listenerOptions); }; diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index 1843129a0..28761796b 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -163,8 +163,8 @@ $small-breakpoint: 960px; th, td { padding: 8px; - align-self: start; - align-items: start; + align-self: flex-start; + align-items: flex-start; word-break: break-all; &.nowrap { diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 3233506cc..9d8372e75 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -907,7 +907,7 @@ $ui-header-height: 55px; .column-actions { display: flex; - align-items: start; + align-items: flex-start; justify-content: center; padding: 40px; padding-top: 40px; diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 4a987a131..3befca567 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -344,6 +344,10 @@ .column-link span { display: none; } + + .list-panel { + display: none; + } } } -- cgit From 67b4ecdd2124cb2cf05731b26a77129bb8151236 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 13 Oct 2022 14:42:37 +0200 Subject: [Glitch] Change about page to be mounted in the web UI Port 1bd00036c284bcafb419eaf80347ba49d1b491d9 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/actions/server.js | 61 ++ app/javascript/flavours/glitch/components/image.js | 33 + .../flavours/glitch/components/server_banner.js | 8 +- .../flavours/glitch/components/skeleton.js | 4 +- .../flavours/glitch/features/about/index.js | 195 ++++- .../glitch/features/privacy_policy/index.js | 2 +- .../flavours/glitch/features/report/rules.js | 2 +- .../glitch/features/ui/components/link_footer.js | 2 +- app/javascript/flavours/glitch/reducers/server.js | 46 +- app/javascript/flavours/glitch/styles/about.scss | 904 +-------------------- .../flavours/glitch/styles/compact_header.scss | 34 - .../flavours/glitch/styles/components/about.scss | 238 ++++++ .../flavours/glitch/styles/components/index.scss | 3 +- .../glitch/styles/components/privacy_policy.scss | 235 ++++-- .../flavours/glitch/styles/containers.scss | 1 - .../flavours/glitch/styles/contrast/diff.scss | 4 - .../flavours/glitch/styles/dashboard.scss | 1 - app/javascript/flavours/glitch/styles/forms.scss | 63 +- app/javascript/flavours/glitch/styles/index.scss | 2 - .../glitch/styles/mastodon-light/diff.scss | 3 - app/javascript/flavours/glitch/styles/widgets.scss | 229 +----- 21 files changed, 782 insertions(+), 1288 deletions(-) create mode 100644 app/javascript/flavours/glitch/components/image.js delete mode 100644 app/javascript/flavours/glitch/styles/compact_header.scss create mode 100644 app/javascript/flavours/glitch/styles/components/about.scss (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/actions/server.js b/app/javascript/flavours/glitch/actions/server.js index af8fef780..31d4aea10 100644 --- a/app/javascript/flavours/glitch/actions/server.js +++ b/app/javascript/flavours/glitch/actions/server.js @@ -5,6 +5,14 @@ export const SERVER_FETCH_REQUEST = 'Server_FETCH_REQUEST'; export const SERVER_FETCH_SUCCESS = 'Server_FETCH_SUCCESS'; export const SERVER_FETCH_FAIL = 'Server_FETCH_FAIL'; +export const EXTENDED_DESCRIPTION_REQUEST = 'EXTENDED_DESCRIPTION_REQUEST'; +export const EXTENDED_DESCRIPTION_SUCCESS = 'EXTENDED_DESCRIPTION_SUCCESS'; +export const EXTENDED_DESCRIPTION_FAIL = 'EXTENDED_DESCRIPTION_FAIL'; + +export const SERVER_DOMAIN_BLOCKS_FETCH_REQUEST = 'SERVER_DOMAIN_BLOCKS_FETCH_REQUEST'; +export const SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS = 'SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS'; +export const SERVER_DOMAIN_BLOCKS_FETCH_FAIL = 'SERVER_DOMAIN_BLOCKS_FETCH_FAIL'; + export const fetchServer = () => (dispatch, getState) => { dispatch(fetchServerRequest()); @@ -28,3 +36,56 @@ const fetchServerFail = error => ({ type: SERVER_FETCH_FAIL, error, }); + +export const fetchExtendedDescription = () => (dispatch, getState) => { + dispatch(fetchExtendedDescriptionRequest()); + + api(getState) + .get('/api/v1/instance/extended_description') + .then(({ data }) => dispatch(fetchExtendedDescriptionSuccess(data))) + .catch(err => dispatch(fetchExtendedDescriptionFail(err))); +}; + +const fetchExtendedDescriptionRequest = () => ({ + type: EXTENDED_DESCRIPTION_REQUEST, +}); + +const fetchExtendedDescriptionSuccess = description => ({ + type: EXTENDED_DESCRIPTION_SUCCESS, + description, +}); + +const fetchExtendedDescriptionFail = error => ({ + type: EXTENDED_DESCRIPTION_FAIL, + error, +}); + +export const fetchDomainBlocks = () => (dispatch, getState) => { + dispatch(fetchDomainBlocksRequest()); + + api(getState) + .get('/api/v1/instance/domain_blocks') + .then(({ data }) => dispatch(fetchDomainBlocksSuccess(true, data))) + .catch(err => { + if (err.response.status === 404) { + dispatch(fetchDomainBlocksSuccess(false, [])); + } else { + dispatch(fetchDomainBlocksFail(err)); + } + }); +}; + +const fetchDomainBlocksRequest = () => ({ + type: SERVER_DOMAIN_BLOCKS_FETCH_REQUEST, +}); + +const fetchDomainBlocksSuccess = (isAvailable, blocks) => ({ + type: SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS, + isAvailable, + blocks, +}); + +const fetchDomainBlocksFail = error => ({ + type: SERVER_DOMAIN_BLOCKS_FETCH_FAIL, + error, +}); diff --git a/app/javascript/flavours/glitch/components/image.js b/app/javascript/flavours/glitch/components/image.js new file mode 100644 index 000000000..6e81ddf08 --- /dev/null +++ b/app/javascript/flavours/glitch/components/image.js @@ -0,0 +1,33 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Blurhash from './blurhash'; +import classNames from 'classnames'; + +export default class Image extends React.PureComponent { + + static propTypes = { + src: PropTypes.string, + srcSet: PropTypes.string, + blurhash: PropTypes.string, + className: PropTypes.string, + }; + + state = { + loaded: false, + }; + + handleLoad = () => this.setState({ loaded: true }); + + render () { + const { src, srcSet, blurhash, className } = this.props; + const { loaded } = this.state; + + return ( +
+ {blurhash && } + +
+ ); + } + +} diff --git a/app/javascript/flavours/glitch/components/server_banner.js b/app/javascript/flavours/glitch/components/server_banner.js index 2bb0381da..9cb0ef13c 100644 --- a/app/javascript/flavours/glitch/components/server_banner.js +++ b/app/javascript/flavours/glitch/components/server_banner.js @@ -7,13 +7,15 @@ import ShortNumber from 'flavours/glitch/components/short_number'; import Skeleton from 'flavours/glitch/components/skeleton'; import Account from 'flavours/glitch/containers/account_container'; import { domain } from 'flavours/glitch/initial_state'; +import Image from 'flavours/glitch/components/image'; +import { Link } from 'react-router-dom'; const messages = defineMessages({ aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' }, }); const mapStateToProps = state => ({ - server: state.get('server'), + server: state.getIn(['server', 'server']), }); export default @connect(mapStateToProps) @@ -41,7 +43,7 @@ class ServerBanner extends React.PureComponent { {domain}, mastodon: Mastodon }} />
- {server.get('title')} +
{isLoading ? ( @@ -83,7 +85,7 @@ class ServerBanner extends React.PureComponent {
- +
); } diff --git a/app/javascript/flavours/glitch/components/skeleton.js b/app/javascript/flavours/glitch/components/skeleton.js index 09093e99c..6a17ffb26 100644 --- a/app/javascript/flavours/glitch/components/skeleton.js +++ b/app/javascript/flavours/glitch/components/skeleton.js @@ -4,8 +4,8 @@ import PropTypes from 'prop-types'; const Skeleton = ({ width, height }) => ‌; Skeleton.propTypes = { - width: PropTypes.number, - height: PropTypes.number, + width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), }; export default Skeleton; diff --git a/app/javascript/flavours/glitch/features/about/index.js b/app/javascript/flavours/glitch/features/about/index.js index 4500480f5..8d7f9c108 100644 --- a/app/javascript/flavours/glitch/features/about/index.js +++ b/app/javascript/flavours/glitch/features/about/index.js @@ -1,27 +1,214 @@ import React from 'react'; -import { defineMessages, injectIntl } from 'react-intl'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import Column from 'flavours/glitch/components/column'; import LinkFooter from 'flavours/glitch/features/ui/components/link_footer'; import { Helmet } from 'react-helmet'; +import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'flavours/glitch/actions/server'; +import Account from 'flavours/glitch/containers/account_container'; +import Skeleton from 'flavours/glitch/components/skeleton'; +import Icon from 'flavours/glitch/components/icon'; +import classNames from 'classnames'; +import Image from 'flavours/glitch/components/image'; const messages = defineMessages({ title: { id: 'column.about', defaultMessage: 'About' }, + rules: { id: 'about.rules', defaultMessage: 'Server rules' }, + blocks: { id: 'about.blocks', defaultMessage: 'Moderated servers' }, + silenced: { id: 'about.domain_blocks.silenced.title', defaultMessage: 'Limited' }, + silencedExplanation: { id: 'about.domain_blocks.silenced.explanation', defaultMessage: 'You will generally not see profiles and content from this server, unless you explicitly look it up or opt into it by following.' }, + suspended: { id: 'about.domain_blocks.suspended.title', defaultMessage: 'Suspended' }, + suspendedExplanation: { id: 'about.domain_blocks.suspended.explanation', defaultMessage: 'No data from this server will be processed, stored or exchanged, making any interaction or communication with users from this server impossible.' }, }); -export default @injectIntl +const severityMessages = { + silence: { + title: messages.silenced, + explanation: messages.silencedExplanation, + }, + + suspend: { + title: messages.suspended, + explanation: messages.suspendedExplanation, + }, +}; + +const mapStateToProps = state => ({ + server: state.getIn(['server', 'server']), + extendedDescription: state.getIn(['server', 'extendedDescription']), + domainBlocks: state.getIn(['server', 'domainBlocks']), +}); + +class Section extends React.PureComponent { + + static propTypes = { + title: PropTypes.string, + children: PropTypes.node, + open: PropTypes.bool, + onOpen: PropTypes.func, + }; + + state = { + collapsed: !this.props.open, + }; + + handleClick = () => { + const { onOpen } = this.props; + const { collapsed } = this.state; + + this.setState({ collapsed: !collapsed }, () => onOpen && onOpen()); + } + + render () { + const { title, children } = this.props; + const { collapsed } = this.state; + + return ( +
+
+ {title} +
+ + {!collapsed && ( +
{children}
+ )} +
+ ); + } + +} + +export default @connect(mapStateToProps) +@injectIntl class About extends React.PureComponent { static propTypes = { + server: ImmutablePropTypes.map, + extendedDescription: ImmutablePropTypes.map, + domainBlocks: ImmutablePropTypes.contains({ + isLoading: PropTypes.bool, + isAvailable: PropTypes.bool, + items: ImmutablePropTypes.list, + }), + dispatch: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, }; + componentDidMount () { + const { dispatch } = this.props; + dispatch(fetchServer()); + dispatch(fetchExtendedDescription()); + } + + handleDomainBlocksOpen = () => { + const { dispatch } = this.props; + dispatch(fetchDomainBlocks()); + } + render () { - const { intl } = this.props; + const { intl, server, extendedDescription, domainBlocks } = this.props; + const isLoading = server.get('isLoading'); return ( - +
+
+ `${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' /> +

{isLoading ? : server.get('domain')}

+

Mastodon }} />

+
+ +
+
+

+ + +
+ +
+ +
+

+ + {isLoading ? : {server.getIn(['contact', 'email'])}} +
+
+ +
+ {extendedDescription.get('isLoading') ? ( + <> + +
+ +
+ +
+ + + ) : (extendedDescription.get('content')?.length > 0 ? ( +
+ ) : ( +

+ ))} +
+ +
+ {!isLoading && (server.get('rules').isEmpty() ? ( +

+ ) : ( +
    + {server.get('rules').map(rule => ( +
  1. + {rule.get('text')} +
    2. + ))} +
+ ))} +
+ +
+ {domainBlocks.get('isLoading') ? ( + <> + +
+ + + ) : (domainBlocks.get('isAvailable') ? ( + <> +

+ + + + + + + + + + + + {domainBlocks.get('items').map(block => ( + + + + + + ))} + +
{block.get('domain')}{intl.formatMessage(severityMessages[block.get('severity')].title)}{block.get('comment')}
+ + ) : ( +

+ ))} +
+ + +
{intl.formatMessage(messages.title)} diff --git a/app/javascript/flavours/glitch/features/privacy_policy/index.js b/app/javascript/flavours/glitch/features/privacy_policy/index.js index c1f7c4f1e..47ee80038 100644 --- a/app/javascript/flavours/glitch/features/privacy_policy/index.js +++ b/app/javascript/flavours/glitch/features/privacy_policy/index.js @@ -44,7 +44,7 @@ class PrivacyPolicy extends React.PureComponent {
diff --git a/app/javascript/flavours/glitch/features/report/rules.js b/app/javascript/flavours/glitch/features/report/rules.js index 599c04dbd..efcdf1fcf 100644 --- a/app/javascript/flavours/glitch/features/report/rules.js +++ b/app/javascript/flavours/glitch/features/report/rules.js @@ -7,7 +7,7 @@ import Button from 'flavours/glitch/components/button'; import Option from './components/option'; const mapStateToProps = state => ({ - rules: state.getIn(['server', 'rules']), + rules: state.getIn(['server', 'server', 'rules']), }); export default @connect(mapStateToProps) diff --git a/app/javascript/flavours/glitch/features/ui/components/link_footer.js b/app/javascript/flavours/glitch/features/ui/components/link_footer.js index 8c55a7337..2e061f760 100644 --- a/app/javascript/flavours/glitch/features/ui/components/link_footer.js +++ b/app/javascript/flavours/glitch/features/ui/components/link_footer.js @@ -51,7 +51,7 @@ class LinkFooter extends React.PureComponent { const items = []; items.push(); - items.push(); + items.push(); items.push(); items.push(); items.push(); diff --git a/app/javascript/flavours/glitch/reducers/server.js b/app/javascript/flavours/glitch/reducers/server.js index 977574148..cc5798fb3 100644 --- a/app/javascript/flavours/glitch/reducers/server.js +++ b/app/javascript/flavours/glitch/reducers/server.js @@ -1,18 +1,52 @@ -import { SERVER_FETCH_REQUEST, SERVER_FETCH_SUCCESS, SERVER_FETCH_FAIL } from 'flavours/glitch/actions/server'; -import { Map as ImmutableMap, fromJS } from 'immutable'; +import { + SERVER_FETCH_REQUEST, + SERVER_FETCH_SUCCESS, + SERVER_FETCH_FAIL, + EXTENDED_DESCRIPTION_REQUEST, + EXTENDED_DESCRIPTION_SUCCESS, + EXTENDED_DESCRIPTION_FAIL, + SERVER_DOMAIN_BLOCKS_FETCH_REQUEST, + SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS, + SERVER_DOMAIN_BLOCKS_FETCH_FAIL, +} from 'flavours/glitch/actions/server'; +import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable'; const initialState = ImmutableMap({ - isLoading: true, + server: ImmutableMap({ + isLoading: true, + }), + + extendedDescription: ImmutableMap({ + isLoading: true, + }), + + domainBlocks: ImmutableMap({ + isLoading: true, + isAvailable: true, + items: ImmutableList(), + }), }); export default function server(state = initialState, action) { switch (action.type) { case SERVER_FETCH_REQUEST: - return state.set('isLoading', true); + return state.setIn(['server', 'isLoading'], true); case SERVER_FETCH_SUCCESS: - return fromJS(action.server).set('isLoading', false); + return state.set('server', fromJS(action.server)).setIn(['server', 'isLoading'], false); case SERVER_FETCH_FAIL: - return state.set('isLoading', false); + return state.setIn(['server', 'isLoading'], false); + case EXTENDED_DESCRIPTION_REQUEST: + return state.setIn(['extendedDescription', 'isLoading'], true); + case EXTENDED_DESCRIPTION_SUCCESS: + return state.set('extendedDescription', fromJS(action.description)).setIn(['extendedDescription', 'isLoading'], false); + case EXTENDED_DESCRIPTION_FAIL: + return state.setIn(['extendedDescription', 'isLoading'], false); + case SERVER_DOMAIN_BLOCKS_FETCH_REQUEST: + return state.setIn(['domainBlocks', 'isLoading'], true); + case SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS: + return state.setIn(['domainBlocks', 'items'], fromJS(action.blocks)).setIn(['domainBlocks', 'isLoading'], false).setIn(['domainBlocks', 'isAvailable'], action.isAvailable); + case SERVER_DOMAIN_BLOCKS_FETCH_FAIL: + return state.setIn(['domainBlocks', 'isLoading'], false); default: return state; } diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index 28761796b..0183c43d5 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -1,7 +1,5 @@ $maximum-width: 1235px; $fluid-breakpoint: $maximum-width + 20px; -$column-breakpoint: 700px; -$small-breakpoint: 960px; .container { box-sizing: border-box; @@ -15,894 +13,44 @@ $small-breakpoint: 960px; } } -.rich-formatting { - font-family: $font-sans-serif, sans-serif; - font-size: 14px; - font-weight: 400; - line-height: 1.7; - word-wrap: break-word; - color: $darker-text-color; - - a { - color: $highlight-text-color; - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - - p, - li { - color: $darker-text-color; - } - - p { - margin-top: 0; - margin-bottom: .85em; - - &:last-child { - margin-bottom: 0; - } - } - - strong { - font-weight: 700; - color: $secondary-text-color; - } - - em { - font-style: italic; - color: $secondary-text-color; - } - - code { - font-size: 0.85em; - background: darken($ui-base-color, 8%); - border-radius: 4px; - padding: 0.2em 0.3em; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - font-family: $font-display, sans-serif; - margin-top: 1.275em; - margin-bottom: .85em; - font-weight: 500; - color: $secondary-text-color; - } - - h1 { - font-size: 2em; - } - - h2 { - font-size: 1.75em; - } - - h3 { - font-size: 1.5em; - } - - h4 { - font-size: 1.25em; - } - - h5, - h6 { - font-size: 1em; - } - - ul { - list-style: disc; - } - - ol { - list-style: decimal; - } - - ul, - ol { - margin: 0; - padding: 0; - padding-left: 2em; - margin-bottom: 0.85em; - - &[type='a'] { - list-style-type: lower-alpha; - } - - &[type='i'] { - list-style-type: lower-roman; - } - } - - hr { - width: 100%; - height: 0; - border: 0; - border-bottom: 1px solid lighten($ui-base-color, 4%); - margin: 1.7em 0; - - &.spacer { - height: 1px; - border: 0; - } - } - - table { - width: 100%; - border-collapse: collapse; - break-inside: auto; - margin-top: 24px; - margin-bottom: 32px; - - thead tr, - tbody tr { - border-bottom: 1px solid lighten($ui-base-color, 4%); - font-size: 1em; - line-height: 1.625; - font-weight: 400; - text-align: left; - color: $darker-text-color; - } - - thead tr { - border-bottom-width: 2px; - line-height: 1.5; - font-weight: 500; - color: $dark-text-color; - } - - th, - td { - padding: 8px; - align-self: flex-start; - align-items: flex-start; - word-break: break-all; - - &.nowrap { - width: 25%; - position: relative; - - &::before { - content: ' '; - visibility: hidden; - } - - span { - position: absolute; - left: 8px; - right: 8px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - } - - & > :first-child { - margin-top: 0; - } +.brand { + position: relative; + text-decoration: none; } -.information-board { - background: darken($ui-base-color, 4%); - padding: 20px 0; - - .container-alt { - position: relative; - padding-right: 280px + 15px; - } - - &__sections { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - } - - &__section { - flex: 1 0 0; - font-family: $font-sans-serif, sans-serif; - font-size: 16px; - line-height: 28px; - color: $primary-text-color; - text-align: right; - padding: 10px 15px; - - span, - strong { - display: block; - } - - span { - &:last-child { - color: $secondary-text-color; - } - } - - strong { - font-family: $font-display, sans-serif; - font-weight: 500; - font-size: 32px; - line-height: 48px; - } - - @media screen and (max-width: $column-breakpoint) { - text-align: center; - } - } - - .panel { - position: absolute; - width: 280px; - box-sizing: border-box; - background: darken($ui-base-color, 8%); - padding: 20px; - padding-top: 10px; - border-radius: 4px 4px 0 0; - right: 0; - bottom: -40px; - - .panel-header { - font-family: $font-display, sans-serif; - font-size: 14px; - line-height: 24px; - font-weight: 500; - color: $darker-text-color; - padding-bottom: 5px; - margin-bottom: 15px; - border-bottom: 1px solid lighten($ui-base-color, 4%); - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - - a, - span { - font-weight: 400; - color: darken($darker-text-color, 10%); - } - - a { - text-decoration: none; - } - } - } - - .owner { - text-align: center; - - .avatar { - width: 80px; - height: 80px; - @include avatar-size(80px); - margin: 0 auto; - margin-bottom: 15px; - - img { - display: block; - width: 80px; - height: 80px; - border-radius: 48px; - @include avatar-radius(); - } - } - - .name { - font-size: 14px; - - a { - display: block; - color: $primary-text-color; - text-decoration: none; - - &:hover { - .display_name { - text-decoration: underline; - } - } - } - - .username { - display: block; - color: $darker-text-color; - } - } - } -} +.rules-list { + font-size: 15px; + line-height: 22px; + color: $primary-text-color; + counter-reset: list-counter; -.landing-page { - p, li { - font-family: $font-sans-serif, sans-serif; - font-size: 16px; - font-weight: 400; - line-height: 30px; - margin-bottom: 12px; - color: $darker-text-color; - - a { - color: $highlight-text-color; - text-decoration: underline; - } - } - - em { - display: inline; - margin: 0; - padding: 0; - font-weight: 700; - background: transparent; - font-family: inherit; - font-size: inherit; - line-height: inherit; - color: lighten($darker-text-color, 10%); - } - - h1 { - font-family: $font-display, sans-serif; - font-size: 26px; - line-height: 30px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - - small { - font-family: $font-sans-serif, sans-serif; - display: block; - font-size: 18px; - font-weight: 400; - color: lighten($darker-text-color, 10%); - } - } - - h2 { - font-family: $font-display, sans-serif; - font-size: 22px; - line-height: 26px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - } - - h3 { - font-family: $font-display, sans-serif; - font-size: 18px; - line-height: 24px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - } - - h4 { - font-family: $font-display, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - } - - h5 { - font-family: $font-display, sans-serif; - font-size: 14px; - line-height: 24px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - } - - h6 { - font-family: $font-display, sans-serif; - font-size: 12px; - line-height: 24px; + position: relative; + border-bottom: 1px solid lighten($ui-base-color, 8%); + padding: 1em 1.75em; + padding-left: 3em; font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - } - - ul, - ol { - margin-left: 20px; - - &[type='a'] { - list-style-type: lower-alpha; - } - - &[type='i'] { - list-style-type: lower-roman; - } - } - - ul { - list-style: disc; - } - - ol { - list-style: decimal; - } - - li > ol, - li > ul { - margin-top: 6px; - } - - hr { - width: 100%; - height: 0; - border: 0; - border-bottom: 1px solid rgba($ui-base-lighter-color, .6); - margin: 20px 0; - - &.spacer { - height: 1px; - border: 0; - } - } - - &__information, - &__forms { - padding: 20px; - } - - &__call-to-action { - background: $ui-base-color; - border-radius: 4px; - padding: 25px 40px; - overflow: hidden; - box-sizing: border-box; - - .row { - width: 100%; - display: flex; - flex-direction: row-reverse; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; - } - - .row__information-board { - display: flex; - justify-content: flex-end; - align-items: flex-end; - - .information-board__section { - flex: 1 0 auto; - padding: 0 10px; - } - - @media screen and (max-width: $no-gap-breakpoint) { - width: 100%; - justify-content: space-between; - } - } - - .row__mascot { - flex: 1; - margin: 10px -50px 0 0; - - @media screen and (max-width: $no-gap-breakpoint) { - display: none; - } - } - } - - &__logo { - margin-right: 20px; - - img { - height: 50px; - width: auto; - mix-blend-mode: lighten; - } - } - - &__information { - padding: 45px 40px; - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - - strong { + counter-increment: list-counter; + + &::before { + content: counter(list-counter); + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + background: $highlight-text-color; + color: $ui-base-color; + border-radius: 50%; + width: 4ch; + height: 4ch; font-weight: 500; - color: lighten($darker-text-color, 10%); - } - - .account { - border-bottom: 0; - padding: 0; - - &__display-name { - align-items: center; - display: flex; - margin-right: 5px; - } - - div.account__display-name { - &:hover { - .display-name strong { - text-decoration: none; - } - } - - .account__avatar { - cursor: default; - } - } - - &__avatar-wrapper { - margin-left: 0; - flex: 0 0 auto; - } - - .display-name { - font-size: 15px; - - &__account { - font-size: 14px; - } - } - } - - @media screen and (max-width: $small-breakpoint) { - .contact { - margin-top: 30px; - } - } - - @media screen and (max-width: $column-breakpoint) { - padding: 25px 20px; - } - } - - &__information, - &__forms, - #mastodon-timeline { - box-sizing: border-box; - background: $ui-base-color; - border-radius: 4px; - box-shadow: 0 0 6px rgba($black, 0.1); - } - - &__mascot { - height: 104px; - position: relative; - left: -40px; - bottom: 25px; - - img { - height: 190px; - width: auto; - } - } - - &__short-description { - .row { display: flex; - flex-wrap: wrap; + justify-content: center; align-items: center; - margin-bottom: 40px; - } - - @media screen and (max-width: $column-breakpoint) { - .row { - margin-bottom: 20px; - } - } - - p a { - color: $secondary-text-color; - } - - h1 { - font-weight: 500; - color: $primary-text-color; - margin-bottom: 0; - - small { - color: $darker-text-color; - - span { - color: $secondary-text-color; - } - } - } - - p:last-child { - margin-bottom: 0; - } - } - - &__hero { - margin-bottom: 10px; - - img { - display: block; - margin: 0; - max-width: 100%; - height: auto; - border-radius: 4px; - } - } - - @media screen and (max-width: 840px) { - .information-board { - .container-alt { - padding-right: 20px; - } - - .panel { - position: static; - margin-top: 20px; - width: 100%; - border-radius: 4px; - - .panel-header { - text-align: center; - } - } - } - } - - @media screen and (max-width: 675px) { - .header-wrapper { - padding-top: 0; - - &.compact { - padding-bottom: 0; - } - - &.compact .hero .heading { - text-align: initial; - } } - .header .container-alt, - .features .container-alt { - display: block; - } - } - - .cta { - margin: 20px; - } -} - -.landing { - margin-bottom: 100px; - - @media screen and (max-width: 738px) { - margin-bottom: 0; - } - - &__brand { - display: flex; - justify-content: center; - align-items: center; - padding: 50px; - - .logo { - fill: $primary-text-color; - height: 52px; - } - - @media screen and (max-width: $no-gap-breakpoint) { - padding: 0; - margin-bottom: 30px; - } - } - - .directory { - margin-top: 30px; - background: transparent; - box-shadow: none; - border-radius: 0; - } - - .hero-widget { - margin-top: 30px; - margin-bottom: 0; - - h4 { - padding: 10px; - text-transform: uppercase; - font-weight: 700; - font-size: 13px; - color: $darker-text-color; - } - - &__text { - border-radius: 0; - padding-bottom: 0; - } - - &__footer { - background: $ui-base-color; - padding: 10px; - border-radius: 0 0 4px 4px; - display: flex; - - &__column { - flex: 1 1 50%; - overflow-x: hidden; - } - } - - .account { - padding: 10px 0; - border-bottom: 0; - - .account__display-name { - display: flex; - align-items: center; - } - } - - &__counters__wrapper { - display: flex; - } - - &__counter { - padding: 10px; - width: 50%; - - strong { - font-family: $font-display, sans-serif; - font-size: 15px; - font-weight: 700; - display: block; - } - - span { - font-size: 14px; - color: $darker-text-color; - } - } - } - - .simple_form .user_agreement .label_input > label { - font-weight: 400; - color: $darker-text-color; - } - - .simple_form p.lead { - color: $darker-text-color; - font-size: 15px; - line-height: 20px; - font-weight: 400; - margin-bottom: 25px; - } - - &__grid { - max-width: 960px; - margin: 0 auto; - display: grid; - grid-template-columns: minmax(0, 50%) minmax(0, 50%); - grid-gap: 30px; - - @media screen and (max-width: 738px) { - grid-template-columns: minmax(0, 100%); - grid-gap: 10px; - - &__column-login { - grid-row: 1; - display: flex; - flex-direction: column; - - .box-widget { - order: 2; - flex: 0 0 auto; - } - - .hero-widget { - margin-top: 0; - margin-bottom: 10px; - order: 1; - flex: 0 0 auto; - } - } - - &__column-registration { - grid-row: 2; - } - - .directory { - margin-top: 10px; - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - grid-gap: 0; - - .hero-widget { - display: block; - margin-bottom: 0; - box-shadow: none; - - &__img, - &__img img, - &__footer { - border-radius: 0; - } - } - - .hero-widget, - .box-widget, - .directory__tag { - border-bottom: 1px solid lighten($ui-base-color, 8%); - } - - .directory { - margin-top: 0; - - &__tag { - margin-bottom: 0; - - & > a, - & > div { - border-radius: 0; - box-shadow: none; - } - - &:last-child { - border-bottom: 0; - } - } - } - } - } -} - -.brand { - position: relative; - text-decoration: none; -} - -.brand__tagline { - display: block; - position: absolute; - bottom: -10px; - left: 50px; - width: 300px; - color: $ui-primary-color; - text-decoration: none; - font-size: 14px; - - @media screen and (max-width: $no-gap-breakpoint) { - position: static; - width: auto; - margin-top: 20px; - color: $dark-text-color; - } -} - -.rules-list { - background: darken($ui-base-color, 2%); - border: 1px solid darken($ui-base-color, 8%); - border-radius: 4px; - padding: 0.5em 2.5em !important; - margin-top: 1.85em !important; - - li { - border-bottom: 1px solid lighten($ui-base-color, 4%); - color: $dark-text-color; - padding: 1em; - &:last-child { border-bottom: 0; } } - - &__text { - color: $primary-text-color; - } } diff --git a/app/javascript/flavours/glitch/styles/compact_header.scss b/app/javascript/flavours/glitch/styles/compact_header.scss deleted file mode 100644 index 4980ab5f1..000000000 --- a/app/javascript/flavours/glitch/styles/compact_header.scss +++ /dev/null @@ -1,34 +0,0 @@ -.compact-header { - h1 { - font-size: 24px; - line-height: 28px; - color: $darker-text-color; - font-weight: 500; - margin-bottom: 20px; - padding: 0 10px; - word-wrap: break-word; - - @media screen and (max-width: 740px) { - text-align: center; - padding: 20px 10px 0; - } - - a { - color: inherit; - text-decoration: none; - } - - small { - font-weight: 400; - color: $secondary-text-color; - } - - img { - display: inline-block; - margin-bottom: -5px; - margin-right: 15px; - width: 36px; - height: 36px; - } - } -} diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss new file mode 100644 index 000000000..ca9ba3ebf --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/about.scss @@ -0,0 +1,238 @@ +.image { + position: relative; + overflow: hidden; + + &__preview { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + + &.loaded &__preview { + display: none; + } + + img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + border: 0; + background: transparent; + opacity: 0; + } + + &.loaded img { + opacity: 1; + } +} + +.about { + padding: 20px; + + @media screen and (min-width: $no-gap-breakpoint) { + border-radius: 4px; + } + + &__header { + margin-bottom: 30px; + + &__hero { + width: 100%; + height: auto; + aspect-ratio: 1.9; + background: lighten($ui-base-color, 4%); + border-radius: 8px; + margin-bottom: 30px; + } + + h1, + p { + text-align: center; + } + + h1 { + font-size: 24px; + line-height: 1.5; + font-weight: 700; + margin-bottom: 10px; + } + + p { + font-size: 16px; + line-height: 24px; + font-weight: 400; + color: $darker-text-color; + } + } + + &__meta { + background: lighten($ui-base-color, 4%); + border-radius: 4px; + display: flex; + margin-bottom: 30px; + font-size: 15px; + + &__column { + box-sizing: border-box; + width: 50%; + padding: 20px; + } + + &__divider { + width: 0; + border: 0; + border-style: solid; + border-color: lighten($ui-base-color, 8%); + border-left-width: 1px; + min-height: calc(100% - 60px); + flex: 0 0 auto; + } + + h4 { + font-size: 15px; + text-transform: uppercase; + color: $darker-text-color; + font-weight: 500; + margin-bottom: 20px; + } + + @media screen and (max-width: 600px) { + display: block; + + h4 { + text-align: center; + } + + &__column { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + &__divider { + min-height: 0; + width: 100%; + border-left-width: 0; + border-top-width: 1px; + } + } + + .layout-multiple-columns & { + display: block; + + h4 { + text-align: center; + } + + &__column { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + &__divider { + min-height: 0; + width: 100%; + border-left-width: 0; + border-top-width: 1px; + } + } + } + + &__mail { + color: $primary-text-color; + text-decoration: none; + font-weight: 500; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + + .getting-started__footer { + padding: 0; + margin-top: 60px; + text-align: center; + font-size: 15px; + line-height: 22px; + + @media screen and (min-width: $no-gap-breakpoint) { + display: none; + } + } + + .account { + padding: 0; + border: 0; + } + + .account__avatar-wrapper { + margin-left: 0; + } + + .account__relationship { + display: none; + } + + &__section { + margin-bottom: 10px; + + &__title { + font-size: 17px; + font-weight: 600; + line-height: 22px; + padding: 20px; + border-radius: 4px; + background: lighten($ui-base-color, 4%); + color: $highlight-text-color; + cursor: pointer; + } + + &.active &__title { + border-radius: 4px 4px 0 0; + } + + &__body { + border: 1px solid lighten($ui-base-color, 4%); + border-top: 0; + padding: 20px; + font-size: 15px; + line-height: 22px; + } + } + + &__domain-blocks { + margin-top: 30px; + width: 100%; + border-collapse: collapse; + break-inside: auto; + + th { + text-align: left; + font-weight: 500; + color: $darker-text-color; + } + + thead tr, + tbody tr { + border-bottom: 1px solid lighten($ui-base-color, 8%); + } + + tbody tr:last-child { + border-bottom: 0; + } + + th, + td { + padding: 8px; + } + } +} diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index a04482a79..81d90f442 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1034,6 +1034,7 @@ padding: 10px; padding-top: 20px; z-index: 1; + font-size: 13px; ul { margin-bottom: 10px; @@ -1045,7 +1046,6 @@ p { color: $dark-text-color; - font-size: 13px; margin-bottom: 20px; a { @@ -1779,3 +1779,4 @@ noscript { @import 'explore'; @import 'signed_out'; @import 'privacy_policy'; +@import 'about'; diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss index f69bf1a07..96cf06742 100644 --- a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss +++ b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss @@ -8,77 +8,200 @@ &__body { margin-top: 20px; - color: $secondary-text-color; - font-size: 15px; - line-height: 22px; - - h1, - p, - ul, - ol { - margin-bottom: 20px; - } + } +} - ul { - list-style: disc; - } +.prose { + color: $secondary-text-color; + font-size: 15px; + line-height: 22px; - ol { - list-style: decimal; - } + p, + ul, + ol { + margin-top: 1.25em; + margin-bottom: 1.25em; + } - ul, - ol { - padding-left: 1em; - } + img { + margin-top: 2em; + margin-bottom: 2em; + } - li { - margin-bottom: 10px; + video { + margin-top: 2em; + margin-bottom: 2em; + } - &::marker { - color: $darker-text-color; - } + figure { + margin-top: 2em; + margin-bottom: 2em; - &:last-child { - margin-bottom: 0; - } + figcaption { + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; } + } - h1 { - color: $primary-text-color; - font-size: 19px; - line-height: 24px; - font-weight: 700; - margin-top: 30px; + figure > * { + margin-top: 0; + margin-bottom: 0; + } - &:first-child { - margin-top: 0; - } - } + h1 { + font-size: 1.5em; + margin-top: 0; + margin-bottom: 1em; + line-height: 1.33; + } - strong { - font-weight: 700; - color: $primary-text-color; - } + h2 { + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } - em { - font-style: italic; - } + h3, + h4, + h5, + h6 { + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + + ol { + counter-reset: list-counter; + } - a { - color: $highlight-text-color; - text-decoration: underline; + li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + ol > li { + counter-increment: list-counter; - &:focus, - &:hover, - &:active { - text-decoration: none; - } + &::before { + content: counter(list-counter) "."; + position: absolute; + left: 0; } + } + + ul > li::before { + content: ""; + position: absolute; + background-color: $darker-text-color; + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: 0.5em; + left: 0.25em; + } + + ul > li, + ol > li { + position: relative; + padding-left: 1.75em; + } + + & > ul > li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + & > ul > li > *:first-child { + margin-top: 1.25em; + } - hr { - border: 1px solid lighten($ui-base-color, 4%); - margin: 30px 0; + & > ul > li > *:last-child { + margin-bottom: 1.25em; + } + + & > ol > li > *:first-child { + margin-top: 1.25em; + } + + & > ol > li > *:last-child { + margin-bottom: 1.25em; + } + + ul ul, + ul ol, + ol ul, + ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + h1, + h2, + h3, + h4, + h5, + h6, + strong, + b { + color: $primary-text-color; + font-weight: 700; + } + + em, + i { + font-style: italic; + } + + a { + color: $highlight-text-color; + text-decoration: underline; + + &:focus, + &:hover, + &:active { + text-decoration: none; } } + + code { + font-size: 0.875em; + background: darken($ui-base-color, 8%); + border-radius: 4px; + padding: 0.2em 0.3em; + } + + hr { + border: 0; + border-top: 1px solid lighten($ui-base-color, 4%); + margin-top: 3em; + margin-bottom: 3em; + } + + hr + * { + margin-top: 0; + } + + h2 + * { + margin-top: 0; + } + + h3 + * { + margin-top: 0; + } + + h4 + *, + h5 + *, + h6 + * { + margin-top: 0; + } + + & > :first-child { + margin-top: 0; + } + + & > :last-child { + margin-bottom: 0; + } } diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index f0caeb4c5..3f8165370 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -30,7 +30,6 @@ outline: 0; padding: 12px 16px; line-height: 32px; - font-family: $font-display, sans-serif; font-weight: 500; font-size: 14px; } diff --git a/app/javascript/flavours/glitch/styles/contrast/diff.scss b/app/javascript/flavours/glitch/styles/contrast/diff.scss index 9bd31cd7e..a9a203960 100644 --- a/app/javascript/flavours/glitch/styles/contrast/diff.scss +++ b/app/javascript/flavours/glitch/styles/contrast/diff.scss @@ -1,9 +1,5 @@ // components.scss -.rich-formatting a, -.rich-formatting p a, -.rich-formatting li a, -.landing-page__short-description p a, .status__content a, .reply-indicator__content a { color: lighten($ui-highlight-color, 12%); diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss index 9b06b44d6..bb103e9ce 100644 --- a/app/javascript/flavours/glitch/styles/dashboard.scss +++ b/app/javascript/flavours/glitch/styles/dashboard.scss @@ -39,7 +39,6 @@ font-size: 24px; line-height: 21px; color: $primary-text-color; - font-family: $font-display, sans-serif; margin-bottom: 20px; line-height: 30px; } diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 6ab1189da..57075a75f 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -138,18 +138,9 @@ code { } .rules-list { - list-style: decimal; font-size: 17px; line-height: 22px; - font-weight: 500; - background: transparent; - border: 0; - padding: 0.5em 1em !important; margin-bottom: 30px; - - li { - border-color: lighten($ui-base-color, 8%); - } } .hint { @@ -593,41 +584,6 @@ code { } } } - - &__overlay-area { - position: relative; - - &__blurred form { - filter: blur(2px); - } - - &__overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - background: rgba($ui-base-color, 0.65); - border-radius: 4px; - margin-left: -4px; - margin-top: -4px; - padding: 4px; - - &__content { - text-align: center; - - &.rich-formatting { - &, - p { - color: $primary-text-color; - } - } - } - } - } } .block-icon { @@ -898,24 +854,7 @@ code { } } -.table-form { - p { - margin-bottom: 15px; - - strong { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - } -} - -.simple_form, -.table-form { +.simple_form { .warning { box-sizing: border-box; background: rgba($error-value-color, 0.5); diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss index f808773f3..5c2532758 100644 --- a/app/javascript/flavours/glitch/styles/index.scss +++ b/app/javascript/flavours/glitch/styles/index.scss @@ -2,7 +2,6 @@ @import 'variables'; @import 'styles/fonts/roboto'; @import 'styles/fonts/roboto-mono'; -@import 'styles/fonts/montserrat'; @import 'reset'; @import 'basics'; @@ -11,7 +10,6 @@ @import 'lists'; @import 'modal'; @import 'footer'; -@import 'compact_header'; @import 'widgets'; @import 'forms'; @import 'accounts'; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index d16f23aed..64b86ffc1 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -390,9 +390,6 @@ } .hero-widget, -.box-widget, -.contact-widget, -.landing-page__information.contact-widget, .moved-account-widget, .memoriam-widget, .activity-stream, diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss index a88f3b2c7..fd091ee89 100644 --- a/app/javascript/flavours/glitch/styles/widgets.scss +++ b/app/javascript/flavours/glitch/styles/widgets.scss @@ -108,13 +108,6 @@ } } -.box-widget { - padding: 20px; - border-radius: 4px; - background: $ui-base-color; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); -} - .placeholder-widget { padding: 16px; border-radius: 4px; @@ -124,47 +117,6 @@ margin-bottom: 10px; } -.contact-widget { - min-height: 100%; - font-size: 15px; - color: $darker-text-color; - line-height: 20px; - word-wrap: break-word; - font-weight: 400; - padding: 0; - - h4 { - padding: 10px; - text-transform: uppercase; - font-weight: 700; - font-size: 13px; - color: $darker-text-color; - } - - .account { - border-bottom: 0; - padding: 10px 0; - padding-top: 5px; - } - - & > a { - display: inline-block; - padding: 10px; - padding-top: 0; - color: $darker-text-color; - text-decoration: none; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } -} - .moved-account-widget { padding: 15px; padding-bottom: 20px; @@ -245,37 +197,6 @@ margin-bottom: 10px; } -.page-header { - background: lighten($ui-base-color, 8%); - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - border-radius: 4px; - padding: 60px 15px; - text-align: center; - margin: 10px 0; - - h1 { - color: $primary-text-color; - font-size: 36px; - line-height: 1.1; - font-weight: 700; - margin-bottom: 10px; - } - - p { - font-size: 15px; - color: $darker-text-color; - } - - @media screen and (max-width: $no-gap-breakpoint) { - margin-top: 0; - background: lighten($ui-base-color, 4%); - - h1 { - font-size: 24px; - } - } -} - .directory { background: $ui-base-color; border-radius: 4px; @@ -357,34 +278,6 @@ } } -.avatar-stack { - display: flex; - justify-content: flex-end; - - .account__avatar { - flex: 0 0 auto; - width: 36px; - height: 36px; - border-radius: 50%; - position: relative; - margin-left: -10px; - background: darken($ui-base-color, 8%); - border: 2px solid $ui-base-color; - - &:nth-child(1) { - z-index: 1; - } - - &:nth-child(2) { - z-index: 2; - } - - &:nth-child(3) { - z-index: 3; - } - } -} - .accounts-table { width: 100%; @@ -486,11 +379,7 @@ .moved-account-widget, .memoriam-widget, -.box-widget, -.contact-widget, -.landing-page__information.contact-widget, -.directory, -.page-header { +.directory { @media screen and (max-width: $no-gap-breakpoint) { margin-bottom: 0; box-shadow: none; @@ -498,88 +387,6 @@ } } -$maximum-width: 1235px; -$fluid-breakpoint: $maximum-width + 20px; - -.statuses-grid { - min-height: 600px; - - @media screen and (max-width: 640px) { - width: 100% !important; // Masonry layout is unnecessary at this width - } - - &__item { - width: math.div(960px - 20px, 3); - - @media screen and (max-width: $fluid-breakpoint) { - width: math.div(940px - 20px, 3); - } - - @media screen and (max-width: 640px) { - width: 100%; - } - - @media screen and (max-width: $no-gap-breakpoint) { - width: 100vw; - } - } - - .detailed-status { - border-radius: 4px; - - @media screen and (max-width: $no-gap-breakpoint) { - border-top: 1px solid lighten($ui-base-color, 16%); - } - - &.compact { - .detailed-status__meta { - margin-top: 15px; - } - - .status__content { - font-size: 15px; - line-height: 20px; - - .emojione { - width: 20px; - height: 20px; - margin: -3px 0 0; - } - - .status__content__spoiler-link { - line-height: 20px; - margin: 0; - } - } - - .media-gallery, - .status-card, - .video-player { - margin-top: 15px; - } - } - } -} - -.notice-widget { - margin-bottom: 10px; - color: $darker-text-color; - - p { - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - } - - a { - font-size: 14px; - line-height: 20px; - } -} - -.notice-widget, .placeholder-widget { a { text-decoration: none; @@ -593,37 +400,3 @@ $fluid-breakpoint: $maximum-width + 20px; } } } - -.table-of-contents { - background: darken($ui-base-color, 4%); - min-height: 100%; - font-size: 14px; - border-radius: 4px; - - li a { - display: block; - font-weight: 500; - padding: 15px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-decoration: none; - color: $primary-text-color; - border-bottom: 1px solid lighten($ui-base-color, 4%); - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - - li:last-child a { - border-bottom: 0; - } - - li ul { - padding-left: 20px; - border-bottom: 1px solid lighten($ui-base-color, 4%); - } -} -- cgit From 9363e5c24e48952ddb9a57a5b7d8cc8fe862fbd5 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 20 Oct 2022 14:35:29 +0200 Subject: [Glitch] Change public accounts pages to mount the web UI Port 839f893168ab221b08fa439012189e6c29a2721a to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/error_boundary.js | 5 + .../glitch/components/missing_indicator.js | 5 + .../flavours/glitch/containers/mastodon.js | 2 +- .../flavours/glitch/features/about/index.js | 6 +- .../glitch/features/account/components/header.js | 5 +- .../glitch/features/account_timeline/index.js | 12 +- .../glitch/features/bookmarked_statuses/index.js | 1 + .../glitch/features/community_timeline/index.js | 1 + .../flavours/glitch/features/compose/index.js | 5 + .../glitch/features/direct_timeline/index.js | 1 + .../flavours/glitch/features/directory/index.js | 1 + .../glitch/features/domain_blocks/index.js | 6 + .../flavours/glitch/features/explore/index.js | 1 + .../glitch/features/favourited_statuses/index.js | 1 + .../flavours/glitch/features/favourites/index.js | 5 + .../features/follow_recommendations/index.js | 5 + .../glitch/features/follow_requests/index.js | 5 + .../glitch/features/getting_started/index.js | 1 + .../glitch/features/hashtag_timeline/index.js | 1 + .../glitch/features/home_timeline/index.js | 3 +- .../glitch/features/keyboard_shortcuts/index.js | 5 + .../glitch/features/list_timeline/index.js | 1 + .../flavours/glitch/features/lists/index.js | 1 + .../flavours/glitch/features/mutes/index.js | 5 + .../glitch/features/notifications/index.js | 1 + .../glitch/features/pinned_statuses/index.js | 4 + .../glitch/features/privacy_policy/index.js | 6 +- .../glitch/features/public_timeline/index.js | 1 + .../flavours/glitch/features/reblogs/index.js | 5 + .../flavours/glitch/features/status/index.js | 16 +- .../features/ui/components/bundle_column_error.js | 24 +- .../features/ui/components/column_loading.js | 6 +- .../glitch/features/ui/components/columns_area.js | 4 +- .../glitch/features/ui/components/modal_root.js | 21 +- .../flavours/glitch/features/ui/index.js | 4 +- .../glitch/features/ui/util/async-components.js | 8 + .../features/ui/util/react_router_helpers.js | 4 +- app/javascript/flavours/glitch/main.js | 8 - app/javascript/flavours/glitch/packs/public.js | 7 - .../flavours/glitch/reducers/statuses.js | 6 + app/javascript/flavours/glitch/selectors/index.js | 2 +- .../flavours/glitch/styles/containers.scss | 786 --------------------- app/javascript/flavours/glitch/styles/footer.scss | 152 ---- app/javascript/flavours/glitch/styles/index.scss | 1 - .../glitch/styles/mastodon-light/diff.scss | 31 - app/javascript/flavours/glitch/styles/rtl.scss | 74 -- .../flavours/glitch/styles/statuses.scss | 9 +- 47 files changed, 162 insertions(+), 1102 deletions(-) delete mode 100644 app/javascript/flavours/glitch/styles/footer.scss (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/components/error_boundary.js b/app/javascript/flavours/glitch/components/error_boundary.js index fd3659de7..e0ca3e2b0 100644 --- a/app/javascript/flavours/glitch/components/error_boundary.js +++ b/app/javascript/flavours/glitch/components/error_boundary.js @@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl'; import { source_url } from 'flavours/glitch/initial_state'; import { preferencesLink } from 'flavours/glitch/utils/backend_links'; import StackTrace from 'stacktrace-js'; +import { Helmet } from 'react-helmet'; export default class ErrorBoundary extends React.PureComponent { @@ -122,6 +123,10 @@ export default class ErrorBoundary extends React.PureComponent { )}
+ + + +
); } diff --git a/app/javascript/flavours/glitch/components/missing_indicator.js b/app/javascript/flavours/glitch/components/missing_indicator.js index ee5bf7c1e..08e39c236 100644 --- a/app/javascript/flavours/glitch/components/missing_indicator.js +++ b/app/javascript/flavours/glitch/components/missing_indicator.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import illustration from 'flavours/glitch/images/elephant_ui_disappointed.svg'; import classNames from 'classnames'; +import { Helmet } from 'react-helmet'; const MissingIndicator = ({ fullPage }) => (
@@ -14,6 +15,10 @@ const MissingIndicator = ({ fullPage }) => (
+ + + +
); diff --git a/app/javascript/flavours/glitch/containers/mastodon.js b/app/javascript/flavours/glitch/containers/mastodon.js index eb88c2655..cf870102b 100644 --- a/app/javascript/flavours/glitch/containers/mastodon.js +++ b/app/javascript/flavours/glitch/containers/mastodon.js @@ -83,7 +83,7 @@ export default class Mastodon extends React.PureComponent { - + diff --git a/app/javascript/flavours/glitch/features/about/index.js b/app/javascript/flavours/glitch/features/about/index.js index 8d7f9c108..3d26c59bc 100644 --- a/app/javascript/flavours/glitch/features/about/index.js +++ b/app/javascript/flavours/glitch/features/about/index.js @@ -94,6 +94,7 @@ class About extends React.PureComponent { }), dispatch: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, + multiColumn: PropTypes.bool, }; componentDidMount () { @@ -108,11 +109,11 @@ class About extends React.PureComponent { } render () { - const { intl, server, extendedDescription, domainBlocks } = this.props; + const { multiColumn, intl, server, extendedDescription, domainBlocks } = this.props; const isLoading = server.get('isLoading'); return ( - +
`${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' /> @@ -212,6 +213,7 @@ class About extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js index 9c7e62fc2..9aca72172 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.js +++ b/app/javascript/flavours/glitch/features/account/components/header.js @@ -273,7 +273,9 @@ class Header extends ImmutablePureComponent { const content = { __html: account.get('note_emojified') }; const displayNameHtml = { __html: account.get('display_name_html') }; const fields = account.get('fields'); - const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct'); + const isLocal = account.get('acct').indexOf('@') === -1; + const acct = isLocal && domain ? `${account.get('acct')}@${domain}` : account.get('acct'); + const isIndexable = !account.get('noindex'); let badge; @@ -353,6 +355,7 @@ class Header extends ImmutablePureComponent { {titleFromAccount(account)} +
); diff --git a/app/javascript/flavours/glitch/features/account_timeline/index.js b/app/javascript/flavours/glitch/features/account_timeline/index.js index 68d558e66..222d40ca1 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/index.js +++ b/app/javascript/flavours/glitch/features/account_timeline/index.js @@ -136,19 +136,17 @@ class AccountTimeline extends ImmutablePureComponent { render () { const { accountId, statusIds, featuredStatusIds, isLoading, hasMore, suspended, isAccount, hidden, multiColumn, remote, remoteUrl } = this.props; - if (!isAccount) { + if (isLoading && statusIds.isEmpty()) { return ( - - + ); - } - - if (!statusIds && isLoading) { + } else if (!isLoading && !isAccount) { return ( - + + ); } diff --git a/app/javascript/flavours/glitch/features/bookmarked_statuses/index.js b/app/javascript/flavours/glitch/features/bookmarked_statuses/index.js index 91dd0e892..8978ac5fc 100644 --- a/app/javascript/flavours/glitch/features/bookmarked_statuses/index.js +++ b/app/javascript/flavours/glitch/features/bookmarked_statuses/index.js @@ -99,6 +99,7 @@ class Bookmarks extends ImmutablePureComponent { {intl.formatMessage(messages.heading)} + ); diff --git a/app/javascript/flavours/glitch/features/community_timeline/index.js b/app/javascript/flavours/glitch/features/community_timeline/index.js index 77809574d..67bf54875 100644 --- a/app/javascript/flavours/glitch/features/community_timeline/index.js +++ b/app/javascript/flavours/glitch/features/community_timeline/index.js @@ -155,6 +155,7 @@ class CommunityTimeline extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/flavours/glitch/features/compose/index.js b/app/javascript/flavours/glitch/features/compose/index.js index 150e78c48..63cff836c 100644 --- a/app/javascript/flavours/glitch/features/compose/index.js +++ b/app/javascript/flavours/glitch/features/compose/index.js @@ -15,6 +15,7 @@ import { me, mascot } from 'flavours/glitch/initial_state'; import { cycleElefriendCompose } from 'flavours/glitch/actions/compose'; import HeaderContainer from './containers/header_container'; import Column from 'flavours/glitch/components/column'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new post' }, @@ -114,6 +115,10 @@ class Compose extends React.PureComponent { + + + + ); } diff --git a/app/javascript/flavours/glitch/features/direct_timeline/index.js b/app/javascript/flavours/glitch/features/direct_timeline/index.js index cb209ed76..d55c63c2b 100644 --- a/app/javascript/flavours/glitch/features/direct_timeline/index.js +++ b/app/javascript/flavours/glitch/features/direct_timeline/index.js @@ -147,6 +147,7 @@ class DirectTimeline extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/flavours/glitch/features/directory/index.js b/app/javascript/flavours/glitch/features/directory/index.js index 672a11430..94bcd578c 100644 --- a/app/javascript/flavours/glitch/features/directory/index.js +++ b/app/javascript/flavours/glitch/features/directory/index.js @@ -169,6 +169,7 @@ class Directory extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/flavours/glitch/features/domain_blocks/index.js b/app/javascript/flavours/glitch/features/domain_blocks/index.js index acce87d5a..cb0b55c63 100644 --- a/app/javascript/flavours/glitch/features/domain_blocks/index.js +++ b/app/javascript/flavours/glitch/features/domain_blocks/index.js @@ -11,6 +11,7 @@ import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_bloc import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ heading: { id: 'column.domain_blocks', defaultMessage: 'Blocked domains' }, @@ -59,6 +60,7 @@ class Blocks extends ImmutablePureComponent { return ( + , )} + + + + ); } diff --git a/app/javascript/flavours/glitch/features/explore/index.js b/app/javascript/flavours/glitch/features/explore/index.js index 934e309f8..24fa26eec 100644 --- a/app/javascript/flavours/glitch/features/explore/index.js +++ b/app/javascript/flavours/glitch/features/explore/index.js @@ -85,6 +85,7 @@ class Explore extends React.PureComponent { {intl.formatMessage(messages.title)} + )} diff --git a/app/javascript/flavours/glitch/features/favourited_statuses/index.js b/app/javascript/flavours/glitch/features/favourited_statuses/index.js index ae94f05ca..a03e1a4eb 100644 --- a/app/javascript/flavours/glitch/features/favourited_statuses/index.js +++ b/app/javascript/flavours/glitch/features/favourited_statuses/index.js @@ -99,6 +99,7 @@ class Favourites extends ImmutablePureComponent { {intl.formatMessage(messages.heading)} + ); diff --git a/app/javascript/flavours/glitch/features/favourites/index.js b/app/javascript/flavours/glitch/features/favourites/index.js index faaf62dee..47c3279c4 100644 --- a/app/javascript/flavours/glitch/features/favourites/index.js +++ b/app/javascript/flavours/glitch/features/favourites/index.js @@ -11,6 +11,7 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; import AccountContainer from 'flavours/glitch/containers/account_container'; import Column from 'flavours/glitch/features/ui/components/column'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ heading: { id: 'column.favourited_by', defaultMessage: 'Favourited by' }, @@ -91,6 +92,10 @@ class Favourites extends ImmutablePureComponent { , )} + + + + ); } diff --git a/app/javascript/flavours/glitch/features/follow_recommendations/index.js b/app/javascript/flavours/glitch/features/follow_recommendations/index.js index f934aeb35..d9d962b7c 100644 --- a/app/javascript/flavours/glitch/features/follow_recommendations/index.js +++ b/app/javascript/flavours/glitch/features/follow_recommendations/index.js @@ -12,6 +12,7 @@ import Column from 'flavours/glitch/features/ui/components/column'; import Account from './components/account'; import imageGreeting from 'mastodon/../images/elephant_ui_greeting.svg'; import Button from 'flavours/glitch/components/button'; +import { Helmet } from 'react-helmet'; const mapStateToProps = state => ({ suggestions: state.getIn(['suggestions', 'items']), @@ -104,6 +105,10 @@ class FollowRecommendations extends ImmutablePureComponent { )}
+ + + + ); } diff --git a/app/javascript/flavours/glitch/features/follow_requests/index.js b/app/javascript/flavours/glitch/features/follow_requests/index.js index 47ca1e1bf..7b35e3ec9 100644 --- a/app/javascript/flavours/glitch/features/follow_requests/index.js +++ b/app/javascript/flavours/glitch/features/follow_requests/index.js @@ -12,6 +12,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; import { me } from 'flavours/glitch/initial_state'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' }, @@ -88,6 +89,10 @@ class FollowRequests extends ImmutablePureComponent { , )} + + + + ); } diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js index 39e00e4af..b00383877 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.js +++ b/app/javascript/flavours/glitch/features/getting_started/index.js @@ -194,6 +194,7 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2); {intl.formatMessage(messages.menu)} + ); diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js index 80b4c82be..f1827789f 100644 --- a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js +++ b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js @@ -228,6 +228,7 @@ class HashtagTimeline extends React.PureComponent { #{id} + ); diff --git a/app/javascript/flavours/glitch/features/home_timeline/index.js b/app/javascript/flavours/glitch/features/home_timeline/index.js index aa319b576..23d0440a9 100644 --- a/app/javascript/flavours/glitch/features/home_timeline/index.js +++ b/app/javascript/flavours/glitch/features/home_timeline/index.js @@ -20,7 +20,7 @@ const messages = defineMessages({ title: { id: 'column.home', defaultMessage: 'Home' }, show_announcements: { id: 'home.show_announcements', defaultMessage: 'Show announcements' }, hide_announcements: { id: 'home.hide_announcements', defaultMessage: 'Hide announcements' }, -}); +}); const mapStateToProps = state => ({ hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0, @@ -170,6 +170,7 @@ class HomeTimeline extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js index 06df2ed99..2bc0116d4 100644 --- a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js +++ b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js @@ -5,6 +5,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types'; import ImmutablePureComponent from 'react-immutable-pure-component'; import ColumnHeader from 'flavours/glitch/components/column_header'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' }, @@ -137,6 +138,10 @@ class KeyboardShortcuts extends ImmutablePureComponent {
+ + + + ); } diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.js b/app/javascript/flavours/glitch/features/list_timeline/index.js index 9cc5bc1c4..a94c05c56 100644 --- a/app/javascript/flavours/glitch/features/list_timeline/index.js +++ b/app/javascript/flavours/glitch/features/list_timeline/index.js @@ -215,6 +215,7 @@ class ListTimeline extends React.PureComponent { {title} + ); diff --git a/app/javascript/flavours/glitch/features/lists/index.js b/app/javascript/flavours/glitch/features/lists/index.js index 32217cf41..8773be5e6 100644 --- a/app/javascript/flavours/glitch/features/lists/index.js +++ b/app/javascript/flavours/glitch/features/lists/index.js @@ -80,6 +80,7 @@ class Lists extends ImmutablePureComponent { {intl.formatMessage(messages.heading)} + ); diff --git a/app/javascript/flavours/glitch/features/mutes/index.js b/app/javascript/flavours/glitch/features/mutes/index.js index 764cbef1a..8da106e47 100644 --- a/app/javascript/flavours/glitch/features/mutes/index.js +++ b/app/javascript/flavours/glitch/features/mutes/index.js @@ -11,6 +11,7 @@ import AccountContainer from 'flavours/glitch/containers/account_container'; import { fetchMutes, expandMutes } from 'flavours/glitch/actions/mutes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ heading: { id: 'column.mutes', defaultMessage: 'Muted users' }, @@ -72,6 +73,10 @@ class Mutes extends ImmutablePureComponent { , )} + + + + ); } diff --git a/app/javascript/flavours/glitch/features/notifications/index.js b/app/javascript/flavours/glitch/features/notifications/index.js index 0b26a3d9e..67b155ced 100644 --- a/app/javascript/flavours/glitch/features/notifications/index.js +++ b/app/javascript/flavours/glitch/features/notifications/index.js @@ -373,6 +373,7 @@ class Notifications extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/flavours/glitch/features/pinned_statuses/index.js b/app/javascript/flavours/glitch/features/pinned_statuses/index.js index 518d0294b..eeeab46ab 100644 --- a/app/javascript/flavours/glitch/features/pinned_statuses/index.js +++ b/app/javascript/flavours/glitch/features/pinned_statuses/index.js @@ -8,6 +8,7 @@ import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_ import StatusList from 'flavours/glitch/components/status_list'; import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ heading: { id: 'column.pins', defaultMessage: 'Pinned post' }, @@ -54,6 +55,9 @@ class PinnedStatuses extends ImmutablePureComponent { hasMore={hasMore} bindToDocument={!multiColumn} /> + + + ); } diff --git a/app/javascript/flavours/glitch/features/privacy_policy/index.js b/app/javascript/flavours/glitch/features/privacy_policy/index.js index 47ee80038..4618d9e32 100644 --- a/app/javascript/flavours/glitch/features/privacy_policy/index.js +++ b/app/javascript/flavours/glitch/features/privacy_policy/index.js @@ -15,6 +15,7 @@ class PrivacyPolicy extends React.PureComponent { static propTypes = { intl: PropTypes.object, + multiColumn: PropTypes.bool, }; state = { @@ -32,11 +33,11 @@ class PrivacyPolicy extends React.PureComponent { } render () { - const { intl } = this.props; + const { intl, multiColumn } = this.props; const { isLoading, content, lastUpdated } = this.state; return ( - +

@@ -51,6 +52,7 @@ class PrivacyPolicy extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/flavours/glitch/features/public_timeline/index.js b/app/javascript/flavours/glitch/features/public_timeline/index.js index 49015c2fb..a61a47de1 100644 --- a/app/javascript/flavours/glitch/features/public_timeline/index.js +++ b/app/javascript/flavours/glitch/features/public_timeline/index.js @@ -159,6 +159,7 @@ class PublicTimeline extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/flavours/glitch/features/reblogs/index.js b/app/javascript/flavours/glitch/features/reblogs/index.js index ed646c6ed..b097ff9d7 100644 --- a/app/javascript/flavours/glitch/features/reblogs/index.js +++ b/app/javascript/flavours/glitch/features/reblogs/index.js @@ -11,6 +11,7 @@ import ColumnHeader from 'flavours/glitch/components/column_header'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ heading: { id: 'column.reblogged_by', defaultMessage: 'Boosted by' }, @@ -92,6 +93,10 @@ class Reblogs extends ImmutablePureComponent { , )} + + + + ); } diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js index f84928d2e..2560faf05 100644 --- a/app/javascript/flavours/glitch/features/status/index.js +++ b/app/javascript/flavours/glitch/features/status/index.js @@ -135,6 +135,7 @@ const makeMapStateToProps = () => { } return { + isLoading: state.getIn(['statuses', props.params.statusId, 'isLoading']), status, ancestorsIds, descendantsIds, @@ -178,6 +179,7 @@ class Status extends ImmutablePureComponent { params: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, status: ImmutablePropTypes.map, + isLoading: PropTypes.bool, settings: ImmutablePropTypes.map.isRequired, ancestorsIds: ImmutablePropTypes.list, descendantsIds: ImmutablePropTypes.list, @@ -589,9 +591,17 @@ class Status extends ImmutablePureComponent { render () { let ancestors, descendants; - const { status, settings, ancestorsIds, descendantsIds, intl, domain, multiColumn, usingPiP } = this.props; + const { isLoading, status, settings, ancestorsIds, descendantsIds, intl, domain, multiColumn, usingPiP } = this.props; const { fullscreen } = this.state; + if (isLoading) { + return ( + + + + ); + } + if (status === null) { return ( @@ -611,6 +621,9 @@ class Status extends ImmutablePureComponent { descendants =
{this.renderChildren(descendantsIds)}
; } + const isLocal = status.getIn(['account', 'acct'], '').indexOf('@') === -1; + const isIndexable = !status.getIn(['account', 'noindex']); + const handlers = { moveUp: this.handleHotkeyMoveUp, moveDown: this.handleHotkeyMoveDown, @@ -685,6 +698,7 @@ class Status extends ImmutablePureComponent { {titleFromStatus(status)} + ); diff --git a/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js b/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js index 3e979a250..382481905 100644 --- a/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js +++ b/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js @@ -2,10 +2,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; -import Column from './column'; -import ColumnHeader from './column_header'; -import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; +import Column from 'flavours/glitch/components/column'; +import ColumnHeader from 'flavours/glitch/components/column_header'; import IconButton from 'flavours/glitch/components/icon_button'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' }, @@ -18,6 +18,7 @@ class BundleColumnError extends React.Component { static propTypes = { onRetry: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, + multiColumn: PropTypes.bool, } handleRetry = () => { @@ -25,16 +26,25 @@ class BundleColumnError extends React.Component { } render () { - const { intl: { formatMessage } } = this.props; + const { multiColumn, intl: { formatMessage } } = this.props; return ( - - - + + +
{formatMessage(messages.body)}
+ + + + ); } diff --git a/app/javascript/flavours/glitch/features/ui/components/column_loading.js b/app/javascript/flavours/glitch/features/ui/components/column_loading.js index 22c00c915..b07385397 100644 --- a/app/javascript/flavours/glitch/features/ui/components/column_loading.js +++ b/app/javascript/flavours/glitch/features/ui/components/column_loading.js @@ -10,6 +10,7 @@ export default class ColumnLoading extends ImmutablePureComponent { static propTypes = { title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), icon: PropTypes.string, + multiColumn: PropTypes.bool, }; static defaultProps = { @@ -18,10 +19,11 @@ export default class ColumnLoading extends ImmutablePureComponent { }; render() { - let { title, icon } = this.props; + let { title, icon, multiColumn } = this.props; + return ( - +
); 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 8037c195d..76e9a3690 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js @@ -140,11 +140,11 @@ class ColumnsArea extends ImmutablePureComponent { } renderLoading = columnId => () => { - return columnId === 'COMPOSE' ? : ; + return columnId === 'COMPOSE' ? : ; } renderError = (props) => { - return ; + return ; } render () { diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.js b/app/javascript/flavours/glitch/features/ui/components/modal_root.js index cedfabe03..8767840d6 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.js +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.js @@ -13,10 +13,8 @@ import FavouriteModal from './favourite_modal'; import AudioModal from './audio_modal'; import DoodleModal from './doodle_modal'; import ConfirmationModal from './confirmation_modal'; -import SubscribedLanguagesModal from 'flavours/glitch/features/subscribed_languages_modal'; import FocalPointModal from './focal_point_modal'; import DeprecatedSettingsModal from './deprecated_settings_modal'; -import InteractionModal from 'flavours/glitch/features/interaction_modal'; import { OnboardingModal, MuteModal, @@ -29,7 +27,10 @@ import { PinnedAccountsEditor, CompareHistoryModal, FilterModal, + InteractionModal, + SubscribedLanguagesModal, } from 'flavours/glitch/features/ui/util/async-components'; +import { Helmet } from 'react-helmet'; const MODAL_COMPONENTS = { 'MEDIA': () => Promise.resolve({ default: MediaModal }), @@ -53,8 +54,8 @@ const MODAL_COMPONENTS = { 'PINNED_ACCOUNTS_EDITOR': PinnedAccountsEditor, 'COMPARE_HISTORY': CompareHistoryModal, 'FILTER': FilterModal, - 'SUBSCRIBED_LANGUAGES': () => Promise.resolve({ default: SubscribedLanguagesModal }), - 'INTERACTION': () => Promise.resolve({ default: InteractionModal }), + 'SUBSCRIBED_LANGUAGES': SubscribedLanguagesModal, + 'INTERACTION': InteractionModal, }; export default class ModalRoot extends React.PureComponent { @@ -119,9 +120,15 @@ export default class ModalRoot extends React.PureComponent { return ( {visible && ( - - {(SpecificComponent) => } - + <> + + {(SpecificComponent) => } + + + + + + )} ); diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index eb5c3e87b..0b6ce2ba5 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -210,8 +210,8 @@ class SwitchingColumnsArea extends React.PureComponent { - - + + diff --git a/app/javascript/flavours/glitch/features/ui/util/async-components.js b/app/javascript/flavours/glitch/features/ui/util/async-components.js index 5bf8d7fd6..e1a0723e1 100644 --- a/app/javascript/flavours/glitch/features/ui/util/async-components.js +++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js @@ -182,6 +182,14 @@ export function Explore () { return import(/* webpackChunkName: "flavours/glitch/async/explore" */'flavours/glitch/features/explore'); } +export function InteractionModal () { + return import(/*webpackChunkName: "flavours/glitch/async/modals/interaction_modal" */'flavours/glitch/features/interaction_modal'); +} + +export function SubscribedLanguagesModal () { + return import(/*webpackChunkName: "flavours/glitch/async/modals/subscribed_languages_modal" */'flavours/glitch/features/subscribed_languages_modal'); +} + export function About () { return import(/*webpackChunkName: "features/glitch/async/about" */'flavours/glitch/features/about'); } diff --git a/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js b/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js index e36c512f3..60a81a581 100644 --- a/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js +++ b/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js @@ -53,7 +53,9 @@ export class WrappedRoute extends React.Component { } renderLoading = () => { - return ; + const { multiColumn } = this.props; + + return ; } renderError = (props) => { diff --git a/app/javascript/flavours/glitch/main.js b/app/javascript/flavours/glitch/main.js index ecb19ef54..f1e10df34 100644 --- a/app/javascript/flavours/glitch/main.js +++ b/app/javascript/flavours/glitch/main.js @@ -12,14 +12,6 @@ const perf = require('flavours/glitch/performance'); function main() { perf.start('main()'); - if (window.history && history.replaceState) { - const { pathname, search, hash } = window.location; - const path = pathname + search + hash; - if (!(/^\/web($|\/)/).test(path)) { - history.replaceState(null, document.title, `/web${path}`); - } - } - return ready(async () => { const mountNode = document.getElementById('mastodon'); const props = JSON.parse(mountNode.getAttribute('data-props')); diff --git a/app/javascript/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js index ae1899638..629ea32b7 100644 --- a/app/javascript/flavours/glitch/packs/public.js +++ b/app/javascript/flavours/glitch/packs/public.js @@ -12,7 +12,6 @@ function main() { const { messages } = getLocale(); const React = require('react'); const ReactDOM = require('react-dom'); - const Rellax = require('rellax'); const { createBrowserHistory } = require('history'); const scrollToDetailedStatus = () => { @@ -90,12 +89,6 @@ function main() { scrollToDetailedStatus(); } - const parallaxComponents = document.querySelectorAll('.parallax'); - - if (parallaxComponents.length > 0 ) { - new Rellax('.parallax', { speed: -1 }); - } - delegate(document, '#registration_user_password_confirmation,#registration_user_password', 'input', () => { const password = document.getElementById('registration_user_password'); const confirmation = document.getElementById('registration_user_password_confirmation'); diff --git a/app/javascript/flavours/glitch/reducers/statuses.js b/app/javascript/flavours/glitch/reducers/statuses.js index 333e4b45c..b47155c5f 100644 --- a/app/javascript/flavours/glitch/reducers/statuses.js +++ b/app/javascript/flavours/glitch/reducers/statuses.js @@ -13,6 +13,8 @@ import { STATUS_REVEAL, STATUS_HIDE, STATUS_COLLAPSE, + STATUS_FETCH_REQUEST, + STATUS_FETCH_FAIL, } from 'flavours/glitch/actions/statuses'; import { TIMELINE_DELETE, @@ -37,6 +39,10 @@ const initialState = ImmutableMap(); export default function statuses(state = initialState, action) { switch(action.type) { + case STATUS_FETCH_REQUEST: + return state.setIn([action.id, 'isLoading'], true); + case STATUS_FETCH_FAIL: + return state.delete(action.id); case STATUS_IMPORT: return importStatus(state, action.status); case STATUSES_IMPORT: diff --git a/app/javascript/flavours/glitch/selectors/index.js b/app/javascript/flavours/glitch/selectors/index.js index 8e6e40d24..df46b58a8 100644 --- a/app/javascript/flavours/glitch/selectors/index.js +++ b/app/javascript/flavours/glitch/selectors/index.js @@ -42,7 +42,7 @@ export const makeGetStatus = () => { ], (statusBase, statusReblog, accountBase, accountReblog, filters) => { - if (!statusBase) { + if (!statusBase || statusBase.get('isLoading')) { return null; } diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index 3f8165370..75472646e 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -106,789 +106,3 @@ margin-left: 10px; } } - -.grid-3 { - display: grid; - grid-gap: 10px; - grid-template-columns: 3fr 1fr; - grid-auto-columns: 25%; - grid-auto-rows: max-content; - - .column-0 { - grid-column: 1/3; - grid-row: 1; - } - - .column-1 { - grid-column: 1; - grid-row: 2; - } - - .column-2 { - grid-column: 2; - grid-row: 2; - } - - .column-3 { - grid-column: 1/3; - grid-row: 3; - } - - @media screen and (max-width: $no-gap-breakpoint) { - grid-gap: 0; - grid-template-columns: minmax(0, 100%); - - .column-0 { - grid-column: 1; - } - - .column-1 { - grid-column: 1; - grid-row: 3; - } - - .column-2 { - grid-column: 1; - grid-row: 2; - } - - .column-3 { - grid-column: 1; - grid-row: 4; - } - } -} - -.grid-4 { - display: grid; - grid-gap: 10px; - grid-template-columns: repeat(4, minmax(0, 1fr)); - grid-auto-columns: 25%; - grid-auto-rows: max-content; - - .column-0 { - grid-column: 1 / 5; - grid-row: 1; - } - - .column-1 { - grid-column: 1 / 4; - grid-row: 2; - } - - .column-2 { - grid-column: 4; - grid-row: 2; - } - - .column-3 { - grid-column: 2 / 5; - grid-row: 3; - } - - .column-4 { - grid-column: 1; - grid-row: 3; - } - - .landing-page__call-to-action { - min-height: 100%; - } - - .flash-message { - margin-bottom: 10px; - } - - @media screen and (max-width: 738px) { - grid-template-columns: minmax(0, 50%) minmax(0, 50%); - - .landing-page__call-to-action { - padding: 20px; - display: flex; - align-items: center; - justify-content: center; - } - - .row__information-board { - width: 100%; - justify-content: center; - align-items: center; - } - - .row__mascot { - display: none; - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - grid-gap: 0; - grid-template-columns: minmax(0, 100%); - - .column-0 { - grid-column: 1; - } - - .column-1 { - grid-column: 1; - grid-row: 3; - } - - .column-2 { - grid-column: 1; - grid-row: 2; - } - - .column-3 { - grid-column: 1; - grid-row: 5; - } - - .column-4 { - grid-column: 1; - grid-row: 4; - } - } -} - -.public-layout { - @media screen and (max-width: $no-gap-breakpoint) { - padding-top: 48px; - } - - .container { - max-width: 960px; - - @media screen and (max-width: $no-gap-breakpoint) { - padding: 0; - } - } - - .header { - background: lighten($ui-base-color, 8%); - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - border-radius: 4px; - height: 48px; - margin: 10px 0; - display: flex; - align-items: stretch; - justify-content: center; - flex-wrap: nowrap; - overflow: hidden; - - @media screen and (max-width: $no-gap-breakpoint) { - position: fixed; - width: 100%; - top: 0; - left: 0; - margin: 0; - border-radius: 0; - box-shadow: none; - z-index: 110; - } - - & > div { - flex: 1 1 33.3%; - min-height: 1px; - } - - .nav-left { - display: flex; - align-items: stretch; - justify-content: flex-start; - flex-wrap: nowrap; - } - - .nav-center { - display: flex; - align-items: stretch; - justify-content: center; - flex-wrap: nowrap; - } - - .nav-right { - display: flex; - align-items: stretch; - justify-content: flex-end; - flex-wrap: nowrap; - } - - .brand { - display: block; - padding: 15px; - - .logo { - display: block; - height: 18px; - width: auto; - position: relative; - bottom: -2px; - fill: $primary-text-color; - - @media screen and (max-width: $no-gap-breakpoint) { - height: 20px; - } - } - - &:hover, - &:focus, - &:active { - background: lighten($ui-base-color, 12%); - } - } - - .nav-link { - display: flex; - align-items: center; - padding: 0 1rem; - font-size: 12px; - font-weight: 500; - text-decoration: none; - color: $darker-text-color; - white-space: nowrap; - text-align: center; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - color: $primary-text-color; - } - - @media screen and (max-width: 550px) { - &.optional { - display: none; - } - } - } - - .nav-button { - background: lighten($ui-base-color, 16%); - margin: 8px; - margin-left: 0; - border-radius: 4px; - - &:hover, - &:focus, - &:active { - text-decoration: none; - background: lighten($ui-base-color, 20%); - } - } - } - - $no-columns-breakpoint: 600px; - - .grid { - display: grid; - grid-gap: 10px; - grid-template-columns: minmax(300px, 3fr) minmax(298px, 1fr); - grid-auto-columns: 25%; - grid-auto-rows: max-content; - - .column-0 { - grid-row: 1; - grid-column: 1; - } - - .column-1 { - grid-row: 1; - grid-column: 2; - } - - @media screen and (max-width: $no-columns-breakpoint) { - grid-template-columns: 100%; - grid-gap: 0; - - .column-1 { - display: none; - } - } - } - - .page-header { - @media screen and (max-width: $no-gap-breakpoint) { - border-bottom: 0; - } - } - - .public-account-header { - overflow: hidden; - margin-bottom: 10px; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - - &.inactive { - opacity: 0.5; - - .public-account-header__image, - .avatar { - filter: grayscale(100%); - } - - .logo-button { - background-color: $secondary-text-color; - } - } - - .logo-button { - padding: 3px 15px; - } - - &__image { - border-radius: 4px 4px 0 0; - overflow: hidden; - height: 300px; - position: relative; - background: darken($ui-base-color, 12%); - - &::after { - content: ""; - display: block; - position: absolute; - width: 100%; - height: 100%; - box-shadow: inset 0 -1px 1px 1px rgba($base-shadow-color, 0.15); - top: 0; - left: 0; - } - - img { - object-fit: cover; - display: block; - width: 100%; - height: 100%; - margin: 0; - border-radius: 4px 4px 0 0; - } - - @media screen and (max-width: 600px) { - height: 200px; - } - } - - &--no-bar { - margin-bottom: 0; - - .public-account-header__image, - .public-account-header__image img { - border-radius: 4px; - - @media screen and (max-width: $no-gap-breakpoint) { - border-radius: 0; - } - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - margin-bottom: 0; - box-shadow: none; - - &__image::after { - display: none; - } - - &__image, - &__image img { - border-radius: 0; - } - } - - &__bar { - position: relative; - margin-top: -80px; - display: flex; - justify-content: flex-start; - - &::before { - content: ""; - display: block; - background: lighten($ui-base-color, 4%); - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 60px; - border-radius: 0 0 4px 4px; - z-index: -1; - } - - .avatar { - display: block; - width: 120px; - height: 120px; - @include avatar-size(120px); - padding-left: 20px - 4px; - flex: 0 0 auto; - - img { - display: block; - width: 100%; - height: 100%; - margin: 0; - border-radius: 50%; - border: 4px solid lighten($ui-base-color, 4%); - background: darken($ui-base-color, 8%); - @include avatar-radius(); - } - } - - @media screen and (max-width: 600px) { - margin-top: 0; - background: lighten($ui-base-color, 4%); - border-radius: 0 0 4px 4px; - padding: 5px; - - &::before { - display: none; - } - - .avatar { - width: 48px; - height: 48px; - @include avatar-size(48px); - padding: 7px 0; - padding-left: 10px; - - img { - border: 0; - border-radius: 4px; - @include avatar-radius(); - } - - @media screen and (max-width: 360px) { - display: none; - } - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - border-radius: 0; - } - - @media screen and (max-width: $no-columns-breakpoint) { - flex-wrap: wrap; - } - } - - &__tabs { - flex: 1 1 auto; - margin-left: 20px; - - &__name { - padding-top: 20px; - padding-bottom: 8px; - - h1 { - font-size: 20px; - line-height: 18px * 1.5; - color: $primary-text-color; - font-weight: 500; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - text-shadow: 1px 1px 1px $base-shadow-color; - - small { - display: block; - font-size: 14px; - color: $primary-text-color; - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - - @media screen and (max-width: 600px) { - margin-left: 15px; - display: flex; - justify-content: space-between; - align-items: center; - - &__name { - padding-top: 0; - padding-bottom: 0; - - h1 { - font-size: 16px; - line-height: 24px; - text-shadow: none; - - small { - color: $darker-text-color; - } - } - } - } - - &__tabs { - display: flex; - justify-content: flex-start; - align-items: stretch; - height: 58px; - - .details-counters { - display: flex; - flex-direction: row; - min-width: 300px; - } - - @media screen and (max-width: $no-columns-breakpoint) { - .details-counters { - display: none; - } - } - - .counter { - min-width: 33.3%; - box-sizing: border-box; - flex: 0 0 auto; - color: $darker-text-color; - padding: 10px; - border-right: 1px solid lighten($ui-base-color, 4%); - cursor: default; - text-align: center; - position: relative; - - a { - display: block; - } - - &:last-child { - border-right: 0; - } - - &::after { - display: block; - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - border-bottom: 4px solid $ui-primary-color; - opacity: 0.5; - transition: all 400ms ease; - } - - &.active { - &::after { - border-bottom: 4px solid $highlight-text-color; - opacity: 1; - } - - &.inactive::after { - border-bottom-color: $secondary-text-color; - } - } - - &:hover { - &::after { - opacity: 1; - transition-duration: 100ms; - } - } - - a { - text-decoration: none; - color: inherit; - } - - .counter-label { - font-size: 12px; - display: block; - } - - .counter-number { - font-weight: 500; - font-size: 18px; - margin-bottom: 5px; - color: $primary-text-color; - font-family: $font-display, sans-serif; - } - } - - .spacer { - flex: 1 1 auto; - height: 1px; - } - - &__buttons { - padding: 7px 8px; - } - } - } - - &__extra { - display: none; - margin-top: 4px; - - .public-account-bio { - border-radius: 0; - box-shadow: none; - background: transparent; - margin: 0 -5px; - - .account__header__fields { - border-top: 1px solid lighten($ui-base-color, 12%); - } - - .roles { - display: none; - } - } - - &__links { - margin-top: -15px; - font-size: 14px; - color: $darker-text-color; - - a { - display: inline-block; - color: $darker-text-color; - text-decoration: none; - padding: 15px; - font-weight: 500; - - strong { - font-weight: 700; - color: $primary-text-color; - } - } - } - - @media screen and (max-width: $no-columns-breakpoint) { - display: block; - flex: 100%; - } - } - } - - .account__section-headline { - border-radius: 4px 4px 0 0; - - @media screen and (max-width: $no-gap-breakpoint) { - border-radius: 0; - } - } - - .detailed-status__meta { - margin-top: 25px; - } - - .public-account-bio { - background: lighten($ui-base-color, 8%); - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - border-radius: 4px; - overflow: hidden; - margin-bottom: 10px; - - @media screen and (max-width: $no-gap-breakpoint) { - box-shadow: none; - margin-bottom: 0; - border-radius: 0; - } - - .account__header__fields { - margin: 0; - border-top: 0; - - a { - color: $highlight-text-color; - } - - dl:first-child .verified { - border-radius: 0 4px 0 0; - } - - .verified a { - color: $valid-value-color; - } - } - - .account__header__content { - padding: 20px; - padding-bottom: 0; - color: $primary-text-color; - } - - &__extra, - .roles { - padding: 20px; - font-size: 14px; - color: $darker-text-color; - } - - .roles { - padding-bottom: 0; - } - } - - .directory__list { - display: grid; - grid-gap: 10px; - grid-template-columns: minmax(0, 50%) minmax(0, 50%); - - .account-card { - display: flex; - flex-direction: column; - } - - @media screen and (max-width: $no-gap-breakpoint) { - display: block; - - .account-card { - margin-bottom: 10px; - display: block; - } - } - } - - .card-grid { - display: flex; - flex-wrap: wrap; - min-width: 100%; - margin: 0 -5px; - - & > div { - box-sizing: border-box; - flex: 1 0 auto; - width: 300px; - padding: 0 5px; - margin-bottom: 10px; - max-width: 33.333%; - - @media screen and (max-width: 900px) { - max-width: 50%; - } - - @media screen and (max-width: 600px) { - max-width: 100%; - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - margin: 0; - border-top: 1px solid lighten($ui-base-color, 8%); - - & > div { - width: 100%; - padding: 0; - margin-bottom: 0; - border-bottom: 1px solid lighten($ui-base-color, 8%); - - &:last-child { - border-bottom: 0; - } - - .card__bar { - background: $ui-base-color; - - &:hover, - &:active, - &:focus { - background: lighten($ui-base-color, 4%); - } - } - } - } - } -} diff --git a/app/javascript/flavours/glitch/styles/footer.scss b/app/javascript/flavours/glitch/styles/footer.scss deleted file mode 100644 index 0c3e42033..000000000 --- a/app/javascript/flavours/glitch/styles/footer.scss +++ /dev/null @@ -1,152 +0,0 @@ -.public-layout { - .footer { - text-align: left; - padding-top: 20px; - padding-bottom: 60px; - font-size: 12px; - color: lighten($ui-base-color, 34%); - - @media screen and (max-width: $no-gap-breakpoint) { - padding-left: 20px; - padding-right: 20px; - } - - .grid { - display: grid; - grid-gap: 10px; - grid-template-columns: 1fr 1fr 2fr 1fr 1fr; - - .column-0 { - grid-column: 1; - grid-row: 1; - min-width: 0; - } - - .column-1 { - grid-column: 2; - grid-row: 1; - min-width: 0; - } - - .column-2 { - grid-column: 3; - grid-row: 1; - min-width: 0; - text-align: center; - - h4 a { - color: lighten($ui-base-color, 34%); - } - } - - .column-3 { - grid-column: 4; - grid-row: 1; - min-width: 0; - } - - .column-4 { - grid-column: 5; - grid-row: 1; - min-width: 0; - } - - @media screen and (max-width: 690px) { - grid-template-columns: 1fr 2fr 1fr; - - .column-0, - .column-1 { - grid-column: 1; - } - - .column-1 { - grid-row: 2; - } - - .column-2 { - grid-column: 2; - } - - .column-3, - .column-4 { - grid-column: 3; - } - - .column-4 { - grid-row: 2; - } - } - - @media screen and (max-width: 600px) { - .column-1 { - display: block; - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - .column-0, - .column-1, - .column-3, - .column-4 { - display: none; - } - - .column-2 h4 { - display: none; - } - } - } - - .legal-xs { - display: none; - text-align: center; - padding-top: 20px; - - @media screen and (max-width: $no-gap-breakpoint) { - display: block; - } - } - - h4 { - text-transform: uppercase; - font-weight: 700; - margin-bottom: 8px; - color: $darker-text-color; - - a { - color: inherit; - text-decoration: none; - } - } - - ul a, - .legal-xs a { - text-decoration: none; - color: lighten($ui-base-color, 34%); - - &:hover, - &:active, - &:focus { - text-decoration: underline; - } - } - - .brand { - .logo { - display: block; - height: 36px; - width: auto; - margin: 0 auto; - color: lighten($ui-base-color, 34%); - } - - &:hover, - &:focus, - &:active { - .logo { - color: lighten($ui-base-color, 38%); - } - } - } - } -} diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss index 5c2532758..fbb02c788 100644 --- a/app/javascript/flavours/glitch/styles/index.scss +++ b/app/javascript/flavours/glitch/styles/index.scss @@ -9,7 +9,6 @@ @import 'containers'; @import 'lists'; @import 'modal'; -@import 'footer'; @import 'widgets'; @import 'forms'; @import 'accounts'; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 64b86ffc1..d4ac55847 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -354,37 +354,6 @@ } } -.public-layout { - .header, - .public-account-header, - .public-account-bio { - box-shadow: none; - } - - .header { - background: lighten($ui-base-color, 12%); - } - - .public-account-header { - &__image { - background: lighten($ui-base-color, 12%); - - &::after { - box-shadow: none; - } - } - - &__tabs { - &__name { - h1, - h1 small { - color: $white; - } - } - } - } -} - .account__section-headline a.active::after { border-color: transparent transparent $white; } diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index d0153c9f9..31d1de376 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -30,16 +30,6 @@ body.rtl { right: -26px; } - .landing-page__logo { - margin-right: 0; - margin-left: 20px; - } - - .landing-page .features-list .features-list__row .visual { - margin-left: 0; - margin-right: 15px; - } - .column-link__icon, .column-header__icon { margin-right: 0; @@ -327,44 +317,6 @@ body.rtl { margin-left: 45px; } - .landing-page .header-wrapper .mascot { - right: 60px; - left: auto; - } - - .landing-page__call-to-action .row__information-board { - direction: rtl; - } - - .landing-page .header .hero .floats .float-1 { - left: -120px; - right: auto; - } - - .landing-page .header .hero .floats .float-2 { - left: 210px; - right: auto; - } - - .landing-page .header .hero .floats .float-3 { - left: 110px; - right: auto; - } - - .landing-page .header .links .brand img { - left: 0; - } - - .landing-page .fa-external-link { - padding-right: 5px; - padding-left: 0 !important; - } - - .landing-page .features #mastodon-timeline { - margin-right: 0; - margin-left: 30px; - } - @media screen and (min-width: 631px) { .column, .drawer { @@ -392,32 +344,6 @@ body.rtl { padding-right: 0; } - .public-layout { - .header { - .nav-button { - margin-left: 8px; - margin-right: 0; - } - } - - .public-account-header__tabs { - margin-left: 0; - margin-right: 20px; - } - } - - .landing-page__information { - .account__display-name { - margin-right: 0; - margin-left: 5px; - } - - .account__avatar-wrapper { - margin-left: 12px; - margin-right: 0; - } - } - .card__bar .display-name { margin-left: 0; margin-right: 15px; diff --git a/app/javascript/flavours/glitch/styles/statuses.scss b/app/javascript/flavours/glitch/styles/statuses.scss index c302fc0d0..947a5d3ae 100644 --- a/app/javascript/flavours/glitch/styles/statuses.scss +++ b/app/javascript/flavours/glitch/styles/statuses.scss @@ -133,8 +133,7 @@ a.button.logo-button { justify-content: center; } -.embed, -.public-layout { +.embed { .status__content[data-spoiler=folded] { .e-content { display: none; @@ -204,8 +203,7 @@ a.button.logo-button { } // Styling from upstream's WebUI, as public pages use the same layout -.embed, -.public-layout { +.embed { .status { .status__info { font-size: 15px; @@ -244,8 +242,7 @@ a.button.logo-button { } .rtl { - .embed, - .public-layout { + .embed { .status { padding-left: 10px; padding-right: 68px; -- cgit From 89e9ec8ae2ea64a5df1385726354618c84c2e857 Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 28 Oct 2022 17:14:02 +0200 Subject: fixup! [Glitch] Fix intermediary responsive layout, accessibility on navigation in web UI --- .../flavours/glitch/features/ui/components/navigation_panel.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/navigation_panel.js b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js index f36258990..1f3e4f1fd 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js @@ -87,7 +87,7 @@ class NavigationPanel extends React.Component {
- +
{showTrends && ( -- cgit From 1315c149c0c6159cf7b7091b31accedb714a648f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 22 Oct 2022 23:18:32 +0200 Subject: [Glitch] Add error boundary around routes in web UI Port a43a8237681187f6e56524aa3effcfc998a877de to glitch-soc Co-authored-by: Yamagishi Kazutoshi Signed-off-by: Claire --- .../features/ui/components/bundle_column_error.js | 160 +++++++++++++++++---- .../flavours/glitch/features/ui/index.js | 6 +- .../features/ui/util/react_router_helpers.js | 34 ++++- .../flavours/glitch/styles/components/columns.scss | 41 +++++- .../flavours/glitch/styles/components/index.scss | 9 ++ .../glitch/styles/components/single_column.scss | 3 +- 6 files changed, 220 insertions(+), 33 deletions(-) (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js b/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js index 382481905..7cbe1413d 100644 --- a/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js +++ b/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js @@ -1,45 +1,155 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { defineMessages, injectIntl } from 'react-intl'; - +import { injectIntl, FormattedMessage } from 'react-intl'; import Column from 'flavours/glitch/components/column'; -import ColumnHeader from 'flavours/glitch/components/column_header'; -import IconButton from 'flavours/glitch/components/icon_button'; +import Button from 'flavours/glitch/components/button'; import { Helmet } from 'react-helmet'; +import { Link } from 'react-router-dom'; +import classNames from 'classnames'; +import { autoPlayGif } from 'flavours/glitch/initial_state'; + +class GIF extends React.PureComponent { + + static propTypes = { + src: PropTypes.string.isRequired, + staticSrc: PropTypes.string.isRequired, + className: PropTypes.string, + animate: PropTypes.bool, + }; + + static defaultProps = { + animate: autoPlayGif, + }; + + state = { + hovering: false, + }; + + handleMouseEnter = () => { + const { animate } = this.props; + + if (!animate) { + this.setState({ hovering: true }); + } + } + + handleMouseLeave = () => { + const { animate } = this.props; + + if (!animate) { + this.setState({ hovering: false }); + } + } + + render () { + const { src, staticSrc, className, animate } = this.props; + const { hovering } = this.state; + + return ( + + ); + } + +} + +class CopyButton extends React.PureComponent { + + static propTypes = { + children: PropTypes.node.isRequired, + value: PropTypes.string.isRequired, + }; + + state = { + copied: false, + }; + + handleClick = () => { + const { value } = this.props; + navigator.clipboard.writeText(value); + this.setState({ copied: true }); + this.timeout = setTimeout(() => this.setState({ copied: false }), 700); + } + + componentWillUnmount () { + if (this.timeout) clearTimeout(this.timeout); + } + + render () { + const { children } = this.props; + const { copied } = this.state; + + return ( + + ); + } -const messages = defineMessages({ - title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' }, - body: { id: 'bundle_column_error.body', defaultMessage: 'Something went wrong while loading this component.' }, - retry: { id: 'bundle_column_error.retry', defaultMessage: 'Try again' }, -}); +} -class BundleColumnError extends React.Component { +export default @injectIntl +class BundleColumnError extends React.PureComponent { static propTypes = { - onRetry: PropTypes.func.isRequired, + errorType: PropTypes.oneOf(['routing', 'network', 'error']), + onRetry: PropTypes.func, intl: PropTypes.object.isRequired, multiColumn: PropTypes.bool, - } + stacktrace: PropTypes.string, + }; + + static defaultProps = { + errorType: 'routing', + }; handleRetry = () => { - this.props.onRetry(); + const { onRetry } = this.props; + + if (onRetry) { + onRetry(); + } } render () { - const { multiColumn, intl: { formatMessage } } = this.props; + const { errorType, multiColumn, stacktrace } = this.props; - return ( - - + let title, body; + switch(errorType) { + case 'routing': + title = ; + body = ; + break; + case 'network': + title = ; + body = ; + break; + case 'error': + title = ; + body = ; + break; + } + + return ( +
- - {formatMessage(messages.body)} + + +
+

{title}

+

{body}

+ +
+ {errorType === 'network' && } + {errorType === 'error' && } + +
+
@@ -50,5 +160,3 @@ class BundleColumnError extends React.Component { } } - -export default injectIntl(BundleColumnError); diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index 5c567be42..9ca946142 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import LoadingBarContainer from './containers/loading_bar_container'; import ModalContainer from './containers/modal_container'; import { connect } from 'react-redux'; -import { Redirect, withRouter } from 'react-router-dom'; +import { Redirect, Route, withRouter } from 'react-router-dom'; import { layoutFromWindow } from 'flavours/glitch/is_mobile'; import { debounce } from 'lodash'; import { uploadCompose, resetCompose, changeComposeSpoilerness } from 'flavours/glitch/actions/compose'; @@ -15,6 +15,7 @@ import { clearHeight } from 'flavours/glitch/actions/height_cache'; import { changeLayout } from 'flavours/glitch/actions/app'; import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavours/glitch/actions/markers'; import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers'; +import BundleColumnError from './components/bundle_column_error'; import UploadArea from './components/upload_area'; import PermaLink from 'flavours/glitch/components/permalink'; import ColumnsAreaContainer from './containers/columns_area_container'; @@ -39,7 +40,6 @@ import { HashtagTimeline, Notifications, FollowRequests, - GenericNotFound, FavouritedStatuses, BookmarkedStatuses, ListTimeline, @@ -233,7 +233,7 @@ class SwitchingColumnsArea extends React.PureComponent { - + ); diff --git a/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js b/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js index 60a81a581..8946c8252 100644 --- a/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js +++ b/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Switch, Route } from 'react-router-dom'; - +import StackTrace from 'stacktrace-js'; import ColumnLoading from 'flavours/glitch/features/ui/components/column_loading'; import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error'; import BundleContainer from 'flavours/glitch/features/ui/containers/bundle_container'; @@ -42,8 +42,38 @@ export class WrappedRoute extends React.Component { componentParams: {}, }; + static getDerivedStateFromError () { + return { + hasError: true, + }; + }; + + state = { + hasError: false, + stacktrace: '', + }; + + componentDidCatch (error) { + StackTrace.fromError(error).then(stackframes => { + this.setState({ stacktrace: error.toString() + '\n' + stackframes.map(frame => frame.toString()).join('\n') }); + }).catch(err => { + console.error(err); + }); + } + renderComponent = ({ match }) => { const { component, content, multiColumn, componentParams } = this.props; + const { hasError, stacktrace } = this.state; + + if (hasError) { + return ( + + ); + } return ( @@ -59,7 +89,7 @@ export class WrappedRoute extends React.Component { } renderError = (props) => { - return ; + return ; } render () { diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 75891ad2e..5de8547e9 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -627,7 +627,6 @@ $ui-header-height: 55px; } .empty-column-indicator, -.error-column, .follow_requests-unlocked_explanation { color: $dark-text-color; background: $ui-base-color; @@ -664,7 +663,47 @@ $ui-header-height: 55px; } .error-column { + padding: 20px; + background: $ui-base-color; + border-radius: 4px; + display: flex; + flex: 1 1 auto; + align-items: center; + justify-content: center; flex-direction: column; + cursor: default; + + &__image { + max-width: 350px; + margin-top: -50px; + } + + &__message { + text-align: center; + color: $darker-text-color; + font-size: 15px; + line-height: 22px; + + h1 { + font-size: 28px; + line-height: 33px; + font-weight: 700; + margin-bottom: 15px; + color: $primary-text-color; + } + + p { + max-width: 48ch; + } + + &__actions { + margin-top: 30px; + display: flex; + gap: 10px; + align-items: center; + justify-content: center; + } + } } // more fixes for the navbar-under mode diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 81d90f442..8877626b8 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -189,6 +189,15 @@ color: $highlight-text-color; } + &.copyable { + transition: background 300ms linear; + } + + &.copied { + background: $valid-value-color; + transition: none; + } + &::-moz-focus-inner { border: 0; } diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 3befca567..1725a5480 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -322,7 +322,8 @@ .column-header, .column-back-button, - .scrollable { + .scrollable, + .error-column { border-radius: 0 !important; } } -- cgit From 05c1dd9114c605a535a405d5a232e17a07007c45 Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 26 Oct 2022 19:35:55 +0200 Subject: [Glitch] Add closed registrations modal Port 2277913f3f01d3bdb9a1661f019221b1cb185fbb to glitch-soc Signed-off-by: Claire --- .../features/closed_registrations_modal/index.js | 75 ++++++++++++++++++++++ .../glitch/features/interaction_modal/index.js | 33 +++++++++- .../glitch/features/ui/components/modal_root.js | 2 + .../features/ui/components/sign_in_banner.js | 43 ++++++++++--- .../glitch/features/ui/util/async-components.js | 4 ++ 5 files changed, 147 insertions(+), 10 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/closed_registrations_modal/index.js (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/features/closed_registrations_modal/index.js b/app/javascript/flavours/glitch/features/closed_registrations_modal/index.js new file mode 100644 index 000000000..25dc4e20f --- /dev/null +++ b/app/javascript/flavours/glitch/features/closed_registrations_modal/index.js @@ -0,0 +1,75 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { FormattedMessage } from 'react-intl'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { domain } from 'flavours/glitch/initial_state'; +import { fetchServer } from 'flavours/glitch/actions/server'; + +const mapStateToProps = state => ({ + closed_registrations_message: state.getIn(['server', 'server', 'registrations', 'closed_registrations_message']), +}); + +export default @connect(mapStateToProps) +class ClosedRegistrationsModal extends ImmutablePureComponent { + + componentDidMount () { + const { dispatch } = this.props; + dispatch(fetchServer()); + } + + render () { + let closedRegistrationsMessage; + + if (this.props.closed_registrations_message) { + closedRegistrationsMessage = ( +

+ ); + } else { + closedRegistrationsMessage = ( +

+ {domain} }} + /> +

+ ); + } + + return ( +
+
+

+

+ +

+
+ +
+
+

+ {closedRegistrationsMessage} +
+ +
+

+

+ +

+ +
+
+
+ ); + } + +}; diff --git a/app/javascript/flavours/glitch/features/interaction_modal/index.js b/app/javascript/flavours/glitch/features/interaction_modal/index.js index 5623f8a06..4cd8e51de 100644 --- a/app/javascript/flavours/glitch/features/interaction_modal/index.js +++ b/app/javascript/flavours/glitch/features/interaction_modal/index.js @@ -5,11 +5,19 @@ import { registrationsOpen } from 'flavours/glitch/initial_state'; import { connect } from 'react-redux'; import Icon from 'flavours/glitch/components/icon'; import classNames from 'classnames'; +import { openModal, closeModal } from 'flavours/glitch/actions/modal'; const mapStateToProps = (state, { accountId }) => ({ displayNameHtml: state.getIn(['accounts', accountId, 'display_name_html']), }); +const mapDispatchToProps = (dispatch) => ({ + onSignupClick() { + dispatch(closeModal()); + dispatch(openModal('CLOSED_REGISTRATIONS')); + }, +}); + class Copypaste extends React.PureComponent { static propTypes = { @@ -66,15 +74,20 @@ class Copypaste extends React.PureComponent { } -export default @connect(mapStateToProps) +export default @connect(mapStateToProps, mapDispatchToProps) class InteractionModal extends React.PureComponent { static propTypes = { displayNameHtml: PropTypes.string, url: PropTypes.string, type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow']), + onSignupClick: PropTypes.func.isRequired, }; + handleSignupClick = () => { + this.props.onSignupClick(); + } + render () { const { url, type, displayNameHtml } = this.props; @@ -105,6 +118,22 @@ class InteractionModal extends React.PureComponent { break; } + let signupButton; + + if (registrationsOpen) { + signupButton = ( + + + + ); + } else { + signupButton = ( + + ); + } + return (
@@ -116,7 +145,7 @@ class InteractionModal extends React.PureComponent {

- + {signupButton}
diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.js b/app/javascript/flavours/glitch/features/ui/components/modal_root.js index 8767840d6..93834f60e 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.js +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.js @@ -29,6 +29,7 @@ import { FilterModal, InteractionModal, SubscribedLanguagesModal, + ClosedRegistrationsModal, } from 'flavours/glitch/features/ui/util/async-components'; import { Helmet } from 'react-helmet'; @@ -56,6 +57,7 @@ const MODAL_COMPONENTS = { 'FILTER': FilterModal, 'SUBSCRIBED_LANGUAGES': SubscribedLanguagesModal, 'INTERACTION': InteractionModal, + 'CLOSED_REGISTRATIONS': ClosedRegistrationsModal, }; export default class ModalRoot extends React.PureComponent { diff --git a/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js b/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js index a935d7422..e8023803f 100644 --- a/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js +++ b/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js @@ -1,13 +1,40 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { FormattedMessage } from 'react-intl'; +import { useDispatch } from 'react-redux'; import { registrationsOpen } from 'flavours/glitch/initial_state'; +import { openModal } from 'flavours/glitch/actions/modal'; -const SignInBanner = () => ( -
-

- - -
-); +const SignInBanner = () => { + const dispatch = useDispatch(); + + const openClosedRegistrationsModal = useCallback( + () => dispatch(openModal('CLOSED_REGISTRATIONS')), + [dispatch], + ); + + let signupButton; + + if (registrationsOpen) { + signupButton = ( + + + + ); + } else { + signupButton = ( + + ); + } + + return ( +
+

+ + {signupButton} +
+ ); +}; export default SignInBanner; diff --git a/app/javascript/flavours/glitch/features/ui/util/async-components.js b/app/javascript/flavours/glitch/features/ui/util/async-components.js index e1a0723e1..025b22e61 100644 --- a/app/javascript/flavours/glitch/features/ui/util/async-components.js +++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js @@ -190,6 +190,10 @@ export function SubscribedLanguagesModal () { return import(/*webpackChunkName: "flavours/glitch/async/modals/subscribed_languages_modal" */'flavours/glitch/features/subscribed_languages_modal'); } +export function ClosedRegistrationsModal () { + return import(/*webpackChunkName: "flavours/glitch/async/modals/closed_registrations_modal" */'flavours/glitch/features/closed_registrations_modal'); +} + export function About () { return import(/*webpackChunkName: "features/glitch/async/about" */'flavours/glitch/features/about'); } -- cgit 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/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 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 From 7bb1b917b27760609b08c8c690c87a69ea321ce3 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 19 Oct 2022 11:30:59 +0200 Subject: [Glitch] Change featured hashtags to be displayed in navigation panel Port aefa9253d61def572396c18a8d2ac3cc706ffa2e to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/hashtag.js | 36 +++++++++---- .../glitch/components/navigation_portal.js | 30 +++++++++++ .../features/account/components/featured_tags.js | 60 ++++++++-------------- .../account/containers/featured_tags_container.js | 15 ++++++ .../flavours/glitch/features/account/navigation.js | 51 ++++++++++++++++++ .../features/account_timeline/components/header.js | 3 +- .../features/ui/components/navigation_panel.js | 12 ++--- .../flavours/glitch/styles/components/search.scss | 6 --- 8 files changed, 148 insertions(+), 65 deletions(-) create mode 100644 app/javascript/flavours/glitch/components/navigation_portal.js create mode 100644 app/javascript/flavours/glitch/features/account/containers/featured_tags_container.js create mode 100644 app/javascript/flavours/glitch/features/account/navigation.js (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/components/hashtag.js b/app/javascript/flavours/glitch/components/hashtag.js index e54cba5c4..085591439 100644 --- a/app/javascript/flavours/glitch/components/hashtag.js +++ b/app/javascript/flavours/glitch/components/hashtag.js @@ -65,23 +65,35 @@ ImmutableHashtag.propTypes = { hashtag: ImmutablePropTypes.map.isRequired, }; -const Hashtag = ({ name, href, to, people, history, className }) => ( +const Hashtag = ({ name, href, to, people, uses, history, className, description, withGraph }) => (
{name ? #{name} : } - {typeof people !== 'undefined' ? : } + {description ? ( + {description} + ) : ( + typeof people !== 'undefined' ? : + )}
-
- - 0)}> - - - -
+ {typeof uses !== 'undefined' && ( +
+ +
+ )} + + {withGraph && ( +
+ + 0)}> + + + +
+ )}
); @@ -90,9 +102,15 @@ Hashtag.propTypes = { href: PropTypes.string, to: PropTypes.string, people: PropTypes.number, + description: PropTypes.node, uses: PropTypes.number, history: PropTypes.arrayOf(PropTypes.number), className: PropTypes.string, + withGraph: PropTypes.bool, +}; + +Hashtag.defaultProps = { + withGraph: true, }; export default Hashtag; diff --git a/app/javascript/flavours/glitch/components/navigation_portal.js b/app/javascript/flavours/glitch/components/navigation_portal.js new file mode 100644 index 000000000..16a8ca3f5 --- /dev/null +++ b/app/javascript/flavours/glitch/components/navigation_portal.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { Switch, Route, withRouter } from 'react-router-dom'; +import { showTrends } from 'flavours/glitch/initial_state'; +import Trends from 'flavours/glitch/features/getting_started/containers/trends_container'; +import AccountNavigation from 'flavours/glitch/features/account/navigation'; + +const DefaultNavigation = () => ( + <> + {showTrends && ( + <> +
+ + + )} + +); + +export default @withRouter +class NavigationPortal extends React.PureComponent { + + render () { + return ( + + + + + ); + } + +} diff --git a/app/javascript/flavours/glitch/features/account/components/featured_tags.js b/app/javascript/flavours/glitch/features/account/components/featured_tags.js index a273d8fc6..7466180c9 100644 --- a/app/javascript/flavours/glitch/features/account/components/featured_tags.js +++ b/app/javascript/flavours/glitch/features/account/components/featured_tags.js @@ -1,27 +1,16 @@ import React from 'react'; -import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { defineMessages, injectIntl } from 'react-intl'; -import classNames from 'classnames'; -import Permalink from 'flavours/glitch/components/permalink'; -import ShortNumber from 'flavours/glitch/components/short_number'; -import { List as ImmutableList } from 'immutable'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import Hashtag from 'flavours/glitch/components/hashtag'; const messages = defineMessages({ - hashtag_all: { id: 'account.hashtag_all', defaultMessage: 'All' }, - hashtag_all_description: { id: 'account.hashtag_all_description', defaultMessage: 'All posts (deselect hashtags)' }, - hashtag_select_description: { id: 'account.hashtag_select_description', defaultMessage: 'Select hashtag #{name}' }, - statuses_counter: { id: 'account.statuses_counter', defaultMessage: '{count, plural, one {{counter} Post} other {{counter} Posts}}' }, + lastStatusAt: { id: 'account.featured_tags.last_status_at', defaultMessage: 'Last post on {date}' }, + empty: { id: 'account.featured_tags.last_status_never', defaultMessage: 'No posts' }, }); -const mapStateToProps = (state, { account }) => ({ - featuredTags: state.getIn(['user_lists', 'featured_tags', account.get('id'), 'items'], ImmutableList()), -}); - -export default @connect(mapStateToProps) -@injectIntl +export default @injectIntl class FeaturedTags extends ImmutablePureComponent { static contextTypes = { @@ -36,34 +25,27 @@ class FeaturedTags extends ImmutablePureComponent { }; render () { - const { account, featuredTags, tagged, intl } = this.props; + const { account, featuredTags, intl } = this.props; - if (!account || featuredTags.isEmpty()) { + if (!account || account.get('suspended') || featuredTags.isEmpty()) { return null; } - const suspended = account.get('suspended'); - return ( -
-
-
- {intl.formatMessage(messages.hashtag_all)} - {!suspended && featuredTags.map(featuredTag => { - const name = featuredTag.get('name'); - const url = featuredTag.get('url'); - const to = `/@${account.get('acct')}/tagged/${name}`; - const desc = intl.formatMessage(messages.hashtag_select_description, { name }); - const count = featuredTag.get('statuses_count'); - - return ( - - #{name} ({}) - - ); - })} -
-
+
+

}} />

+ + {featuredTags.map(featuredTag => ( + 0) ? intl.formatMessage(messages.lastStatusAt, { date: intl.formatDate(featuredTag.get('last_status_at'), { month: 'short', day: '2-digit' }) }) : intl.formatMessage(messages.empty)} + /> + ))}
); } diff --git a/app/javascript/flavours/glitch/features/account/containers/featured_tags_container.js b/app/javascript/flavours/glitch/features/account/containers/featured_tags_container.js new file mode 100644 index 000000000..6f0b06941 --- /dev/null +++ b/app/javascript/flavours/glitch/features/account/containers/featured_tags_container.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux'; +import FeaturedTags from '../components/featured_tags'; +import { makeGetAccount } from 'flavours/glitch/selectors'; +import { List as ImmutableList } from 'immutable'; + +const mapStateToProps = () => { + const getAccount = makeGetAccount(); + + return (state, { accountId }) => ({ + account: getAccount(state, accountId), + featuredTags: state.getIn(['user_lists', 'featured_tags', accountId, 'items'], ImmutableList()), + }); +}; + +export default connect(mapStateToProps)(FeaturedTags); diff --git a/app/javascript/flavours/glitch/features/account/navigation.js b/app/javascript/flavours/glitch/features/account/navigation.js new file mode 100644 index 000000000..ebd37ec14 --- /dev/null +++ b/app/javascript/flavours/glitch/features/account/navigation.js @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import FeaturedTags from 'flavours/glitch/features/account/containers/featured_tags_container'; + +const mapStateToProps = (state, { match: { params: { acct } } }) => { + const accountId = state.getIn(['accounts_map', acct]); + + if (!accountId) { + return { + isLoading: true, + }; + } + + return { + accountId, + isLoading: false, + }; +}; + +export default @connect(mapStateToProps) +class AccountNavigation extends React.PureComponent { + + static propTypes = { + match: PropTypes.shape({ + params: PropTypes.shape({ + acct: PropTypes.string, + tagged: PropTypes.string, + }).isRequired, + }).isRequired, + + accountId: PropTypes.string, + isLoading: PropTypes.bool, + }; + + render () { + const { accountId, isLoading, match: { params: { tagged } } } = this.props; + + if (isLoading) { + return null; + } + + return ( + <> +
+ + + ); + } + +} diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/header.js b/app/javascript/flavours/glitch/features/account_timeline/components/header.js index 3a4008310..eb332e296 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/header.js +++ b/app/javascript/flavours/glitch/features/account_timeline/components/header.js @@ -28,7 +28,6 @@ export default class Header extends ImmutablePureComponent { hideTabs: PropTypes.bool, domain: PropTypes.string.isRequired, hidden: PropTypes.bool, - tagged: PropTypes.string, }; static contextTypes = { @@ -104,7 +103,7 @@ export default class Header extends ImmutablePureComponent { } render () { - const { account, hidden, hideTabs, tagged } = this.props; + const { account, hidden, hideTabs } = this.props; if (account === null) { return null; 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 d7d3b8257..7c8da46bd 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js @@ -2,14 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; -import TrendsContainer from 'flavours/glitch/features/getting_started/containers/trends_container'; -import { showTrends, timelinePreview } from 'flavours/glitch/initial_state'; +import { timelinePreview } from 'flavours/glitch/initial_state'; import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; import FollowRequestsColumnLink from './follow_requests_column_link'; import ListPanel from './list_panel'; import NotificationsCounterIcon from './notifications_counter_icon'; import SignInBanner from './sign_in_banner'; import { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links'; +import NavigationPortal from 'flavours/glitch/components/navigation_portal'; const messages = defineMessages({ home: { id: 'tabs_bar.home', defaultMessage: 'Home' }, @@ -89,13 +89,7 @@ class NavigationPanel extends React.Component {
- {showTrends && ( - -
- - - )} - +
); } diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index bb861a88e..ee6b1c0a7 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -173,12 +173,6 @@ margin-left: 5px; color: $secondary-text-color; text-decoration: none; - - &__asterisk { - color: $darker-text-color; - font-size: 18px; - vertical-align: super; - } } &__sparkline { -- cgit From 89fdfb8fe6e03a578c824868502178dbec61c7f9 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 23 Oct 2022 23:37:58 +0200 Subject: [Glitch] Fix redirecting to `/publish` when compose form is visible in web UI Port 5452af2188ba65c9f934280b65a2040c8cc9e718 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/features/compose/index.js | 24 +++++++--------------- .../glitch/features/ui/components/compose_panel.js | 18 +++++++++++++++- 2 files changed, 24 insertions(+), 18 deletions(-) (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/features/compose/index.js b/app/javascript/flavours/glitch/features/compose/index.js index 63cff836c..8ca378672 100644 --- a/app/javascript/flavours/glitch/features/compose/index.js +++ b/app/javascript/flavours/glitch/features/compose/index.js @@ -23,7 +23,7 @@ const messages = defineMessages({ const mapStateToProps = (state, ownProps) => ({ elefriend: state.getIn(['compose', 'elefriend']), - showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : ownProps.isSearchPage, + showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : false, }); const mapDispatchToProps = (dispatch, { intl }) => ({ @@ -46,7 +46,6 @@ class Compose extends React.PureComponent { static propTypes = { multiColumn: PropTypes.bool, showSearch: PropTypes.bool, - isSearchPage: PropTypes.bool, elefriend: PropTypes.number, onClickElefriend: PropTypes.func, onMount: PropTypes.func, @@ -55,19 +54,11 @@ class Compose extends React.PureComponent { }; componentDidMount () { - const { isSearchPage } = this.props; - - if (!isSearchPage) { - this.props.onMount(); - } + this.props.onMount(); } componentWillUnmount () { - const { isSearchPage } = this.props; - - if (!isSearchPage) { - this.props.onUnmount(); - } + this.props.onUnmount(); } render () { @@ -76,7 +67,6 @@ class Compose extends React.PureComponent { intl, multiColumn, onClickElefriend, - isSearchPage, showSearch, } = this.props; const computedClass = classNames('drawer', `mbstobon-${elefriend}`); @@ -86,10 +76,10 @@ class Compose extends React.PureComponent {
- {(multiColumn || isSearchPage) && } + {multiColumn && }
- {!isSearchPage &&
+
@@ -97,9 +87,9 @@ class Compose extends React.PureComponent {
{mascot ? :
-
} +
- + {({ x }) => (
diff --git a/app/javascript/flavours/glitch/features/ui/components/compose_panel.js b/app/javascript/flavours/glitch/features/ui/components/compose_panel.js index 894a00747..dde252a61 100644 --- a/app/javascript/flavours/glitch/features/ui/components/compose_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/compose_panel.js @@ -1,18 +1,34 @@ import React from 'react'; +import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import SearchContainer from 'flavours/glitch/features/compose/containers/search_container'; import ComposeFormContainer from 'flavours/glitch/features/compose/containers/compose_form_container'; import NavigationContainer from 'flavours/glitch/features/compose/containers/navigation_container'; import LinkFooter from './link_footer'; import ServerBanner from 'flavours/glitch/components/server_banner'; +import { mountCompose, unmountCompose } from 'flavours/glitch/actions/compose'; -export default +export default @connect() class ComposePanel extends React.PureComponent { static contextTypes = { identity: PropTypes.object.isRequired, }; + static propTypes = { + dispatch: PropTypes.func.isRequired, + }; + + componentDidMount () { + const { dispatch } = this.props; + dispatch(mountCompose()); + } + + componentWillUnmount () { + const { dispatch } = this.props; + dispatch(unmountCompose()); + } + render() { const { signedIn } = this.context.identity; -- cgit From f405ad69b37f4ca9fe3df7503272352a22808972 Mon Sep 17 00:00:00 2001 From: Claire Date: Tue, 25 Oct 2022 19:03:16 +0200 Subject: [Glitch] Remove navigation links to /explore when trends are disabled Port 267978d4fe0eaee92f64d505df2a4a07d22f582c to glithc-soc Signed-off-by: Claire --- .../flavours/glitch/features/ui/components/navigation_panel.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch/features/ui/components') 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 7c8da46bd..c3f14ac72 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; -import { timelinePreview } from 'flavours/glitch/initial_state'; +import { timelinePreview, showTrends } from 'flavours/glitch/initial_state'; import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; import FollowRequestsColumnLink from './follow_requests_column_link'; import ListPanel from './list_panel'; @@ -24,6 +24,7 @@ const messages = defineMessages({ preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' }, followsAndFollowers: { id: 'navigation_bar.follows_and_followers', defaultMessage: 'Follows and followers' }, about: { id: 'navigation_bar.about', defaultMessage: 'About' }, + search: { id: 'navigation_bar.search', defaultMessage: 'Search' }, app_settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' }, }); @@ -53,7 +54,12 @@ class NavigationPanel extends React.Component { )} - + {showTrends ? ( + + ) : ( + + )} + {(signedIn || timelinePreview) && ( <> -- cgit