From 14ddb85c3bd5b9e57c1f3e6fe6eaf59200f0a34c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 4 Oct 2022 20:13:46 +0200 Subject: [Glitch] Remove code for rendering public and hashtag timelines outside the web UI Port 02ba9cfa35c7b2285950955619ae3431391e9625 to glitch-soc Signed-off-by: Claire --- .../features/standalone/hashtag_timeline/index.js | 90 ------------------- .../features/standalone/public_timeline/index.js | 100 --------------------- app/javascript/flavours/glitch/packs/about.js | 23 ----- app/javascript/flavours/glitch/theme.yml | 1 - 4 files changed, 214 deletions(-) delete mode 100644 app/javascript/flavours/glitch/features/standalone/hashtag_timeline/index.js delete mode 100644 app/javascript/flavours/glitch/features/standalone/public_timeline/index.js delete mode 100644 app/javascript/flavours/glitch/packs/about.js (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/standalone/hashtag_timeline/index.js b/app/javascript/flavours/glitch/features/standalone/hashtag_timeline/index.js deleted file mode 100644 index 629f5c2ea..000000000 --- a/app/javascript/flavours/glitch/features/standalone/hashtag_timeline/index.js +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { expandHashtagTimeline } from 'flavours/glitch/actions/timelines'; -import Masonry from 'react-masonry-infinite'; -import { List as ImmutableList } from 'immutable'; -import DetailedStatusContainer from 'flavours/glitch/features/status/containers/detailed_status_container'; -import { debounce } from 'lodash'; -import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; - -const mapStateToProps = (state, { hashtag }) => ({ - statusIds: state.getIn(['timelines', `hashtag:${hashtag}`, 'items'], ImmutableList()), - isLoading: state.getIn(['timelines', `hashtag:${hashtag}`, 'isLoading'], false), - hasMore: state.getIn(['timelines', `hashtag:${hashtag}`, 'hasMore'], false), -}); - -export default @connect(mapStateToProps) -class HashtagTimeline extends React.PureComponent { - - static propTypes = { - dispatch: PropTypes.func.isRequired, - statusIds: ImmutablePropTypes.list.isRequired, - isLoading: PropTypes.bool.isRequired, - hasMore: PropTypes.bool.isRequired, - hashtag: PropTypes.string.isRequired, - local: PropTypes.bool.isRequired, - }; - - static defaultProps = { - local: false, - }; - - componentDidMount () { - const { dispatch, hashtag, local } = this.props; - - dispatch(expandHashtagTimeline(hashtag, { local })); - } - - handleLoadMore = () => { - const { dispatch, hashtag, local, statusIds } = this.props; - const maxId = statusIds.last(); - - if (maxId) { - dispatch(expandHashtagTimeline(hashtag, { maxId, local })); - } - } - - setRef = c => { - this.masonry = c; - } - - handleHeightChange = debounce(() => { - if (!this.masonry) { - return; - } - - this.masonry.forcePack(); - }, 50) - - render () { - const { statusIds, hasMore, isLoading } = this.props; - - const sizes = [ - { columns: 1, gutter: 0 }, - { mq: '415px', columns: 1, gutter: 10 }, - { mq: '640px', columns: 2, gutter: 10 }, - { mq: '960px', columns: 3, gutter: 10 }, - { mq: '1255px', columns: 3, gutter: 10 }, - ]; - - const loader = (isLoading && statusIds.isEmpty()) ? : undefined; - - return ( - - {statusIds.map(statusId => ( -
- -
- )).toArray()} - - ); - } - -} diff --git a/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js b/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js deleted file mode 100644 index 5f8a369ff..000000000 --- a/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js +++ /dev/null @@ -1,100 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { expandPublicTimeline, expandCommunityTimeline } from 'flavours/glitch/actions/timelines'; -import Masonry from 'react-masonry-infinite'; -import { List as ImmutableList, Map as ImmutableMap } from 'immutable'; -import DetailedStatusContainer from 'flavours/glitch/features/status/containers/detailed_status_container'; -import { debounce } from 'lodash'; -import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; - -const mapStateToProps = (state, { local }) => { - const timeline = state.getIn(['timelines', local ? 'community' : 'public'], ImmutableMap()); - - return { - statusIds: timeline.get('items', ImmutableList()), - isLoading: timeline.get('isLoading', false), - hasMore: timeline.get('hasMore', false), - }; -}; - -export default @connect(mapStateToProps) -class PublicTimeline extends React.PureComponent { - - static propTypes = { - dispatch: PropTypes.func.isRequired, - statusIds: ImmutablePropTypes.list.isRequired, - isLoading: PropTypes.bool.isRequired, - hasMore: PropTypes.bool.isRequired, - local: PropTypes.bool, - }; - - componentDidMount () { - this._connect(); - } - - componentDidUpdate (prevProps) { - if (prevProps.local !== this.props.local) { - this._disconnect(); - this._connect(); - } - } - - _connect () { - const { dispatch, local } = this.props; - - dispatch(local ? expandCommunityTimeline() : expandPublicTimeline()); - } - - handleLoadMore = () => { - const { dispatch, statusIds, local } = this.props; - const maxId = statusIds.last(); - - if (maxId) { - dispatch(local ? expandCommunityTimeline({ maxId }) : expandPublicTimeline({ maxId })); - } - } - - setRef = c => { - this.masonry = c; - } - - handleHeightChange = debounce(() => { - if (!this.masonry) { - return; - } - - this.masonry.forcePack(); - }, 50) - - render () { - const { statusIds, hasMore, isLoading } = this.props; - - const sizes = [ - { columns: 1, gutter: 0 }, - { mq: '415px', columns: 1, gutter: 10 }, - { mq: '640px', columns: 2, gutter: 10 }, - { mq: '960px', columns: 3, gutter: 10 }, - { mq: '1255px', columns: 3, gutter: 10 }, - ]; - - const loader = (isLoading && statusIds.isEmpty()) ? : undefined; - - return ( - - {statusIds.map(statusId => ( -
- -
- )).toArray()} - - ); - } - -} diff --git a/app/javascript/flavours/glitch/packs/about.js b/app/javascript/flavours/glitch/packs/about.js deleted file mode 100644 index ef17fdea4..000000000 --- a/app/javascript/flavours/glitch/packs/about.js +++ /dev/null @@ -1,23 +0,0 @@ -import 'packs/public-path'; -import loadPolyfills from 'flavours/glitch/load_polyfills'; - -function loaded() { - const TimelineContainer = require('flavours/glitch/containers/timeline_container').default; - const React = require('react'); - const ReactDOM = require('react-dom'); - const mountNode = document.getElementById('mastodon-timeline'); - - if (mountNode !== null) { - const props = JSON.parse(mountNode.getAttribute('data-props')); - ReactDOM.render(, mountNode); - } -} - -function main() { - const ready = require('flavours/glitch/ready').default; - ready(loaded); -} - -loadPolyfills().then(main).catch(error => { - console.error(error); -}); diff --git a/app/javascript/flavours/glitch/theme.yml b/app/javascript/flavours/glitch/theme.yml index f3c7fac7e..e85dd74e1 100644 --- a/app/javascript/flavours/glitch/theme.yml +++ b/app/javascript/flavours/glitch/theme.yml @@ -1,6 +1,5 @@ # (REQUIRED) The location of the pack files. pack: - about: packs/about.js admin: - packs/admin.js - packs/public.js -- cgit 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 --- .../flavours/glitch/features/about/index.js | 34 ++++ .../flavours/glitch/features/compose/index.js | 50 +++--- .../glitch/features/getting_started/index.js | 65 ++++---- .../glitch/features/keyboard_shortcuts/index.js | 13 +- .../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 ----------- .../flavours/glitch/features/ui/index.js | 6 + .../glitch/features/ui/util/async-components.js | 4 + .../flavours/glitch/styles/components/columns.scss | 39 ++++- .../flavours/glitch/styles/components/explore.scss | 13 +- .../flavours/glitch/styles/components/search.scss | 2 +- .../glitch/styles/components/single_column.scss | 172 +++++++++++++-------- .../flavours/glitch/styles/variables.scss | 2 +- 17 files changed, 347 insertions(+), 332 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/about/index.js 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') diff --git a/app/javascript/flavours/glitch/features/about/index.js b/app/javascript/flavours/glitch/features/about/index.js new file mode 100644 index 000000000..9f7c90d91 --- /dev/null +++ b/app/javascript/flavours/glitch/features/about/index.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { defineMessages, injectIntl } from 'react-intl'; +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 { title } from 'flavours/glitch/initial_state'; + +const messages = defineMessages({ + title: { id: 'column.about', defaultMessage: 'About' }, +}); + +export default @injectIntl +class About extends React.PureComponent { + + static propTypes = { + intl: PropTypes.object.isRequired, + }; + + render () { + const { intl } = this.props; + + return ( + + + + + {intl.formatMessage(messages.title)} - {title} + + + ); + } + +} diff --git a/app/javascript/flavours/glitch/features/compose/index.js b/app/javascript/flavours/glitch/features/compose/index.js index 567bb3711..150e78c48 100644 --- a/app/javascript/flavours/glitch/features/compose/index.js +++ b/app/javascript/flavours/glitch/features/compose/index.js @@ -14,6 +14,7 @@ import SearchResultsContainer from './containers/search_results_container'; 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'; const messages = defineMessages({ compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new post' }, @@ -79,32 +80,41 @@ class Compose extends React.PureComponent { } = this.props; const computedClass = classNames('drawer', `mbstobon-${elefriend}`); - return ( -
- {multiColumn && } - - {(multiColumn || isSearchPage) && } + if (multiColumn) { + return ( +
+ -
- {!isSearchPage &&
- + {(multiColumn || isSearchPage) && } - +
+ {!isSearchPage &&
+ -
- {mascot ? :
-
} + - - {({ x }) => ( -
- +
+ {mascot ? :
- )} - +
} + + + {({ x }) => ( +
+ +
+ )} + +
-
+ ); + } + + return ( + + + + ); } diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js index f52b769a3..4d3427877 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.js +++ b/app/javascript/flavours/glitch/features/getting_started/index.js @@ -84,11 +84,12 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2); static contextTypes = { router: PropTypes.object.isRequired, + identity: PropTypes.object, }; static propTypes = { intl: PropTypes.object.isRequired, - myAccount: ImmutablePropTypes.map.isRequired, + myAccount: ImmutablePropTypes.map, columns: ImmutablePropTypes.list, multiColumn: PropTypes.bool, fetchFollowRequests: PropTypes.func.isRequired, @@ -104,10 +105,10 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2); } componentDidMount () { - const { fetchFollowRequests, multiColumn } = this.props; + const { fetchFollowRequests } = this.props; + const { signedIn } = this.context.identity; - if (!multiColumn && window.innerWidth >= NAVIGATION_PANEL_BREAKPOINT) { - this.context.router.history.replace('/home'); + if (!signedIn) { return; } @@ -121,7 +122,7 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2); let listItems = []; if (multiColumn) { - if (!columns.find(item => item.get('id') === 'HOME')) { + if (signedIn && !columns.find(item => item.get('id') === 'HOME')) { navItems.push(); } @@ -142,41 +143,47 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2); navItems.push(); } - if (!multiColumn || !columns.find(item => item.get('id') === 'DIRECT')) { - navItems.push(); - } + if (signedIn) { + if (!multiColumn || !columns.find(item => item.get('id') === 'DIRECT')) { + navItems.push(); + } - if (!multiColumn || !columns.find(item => item.get('id') === 'BOOKMARKS')) { - navItems.push(); - } + if (!multiColumn || !columns.find(item => item.get('id') === 'BOOKMARKS')) { + navItems.push(); + } - if (myAccount.get('locked') || unreadFollowRequests > 0) { - navItems.push(); - } + if (myAccount.get('locked') || unreadFollowRequests > 0) { + navItems.push(); + } - navItems.push(); + navItems.push(); - listItems = listItems.concat([ -
- - {lists.filter(list => !columns.find(item => item.get('id') === 'LIST' && item.getIn(['params', 'id']) === list.get('id'))).map(list => - - )} -
, - ]); + listItems = listItems.concat([ +
+ + {lists.filter(list => !columns.find(item => item.get('id') === 'LIST' && item.getIn(['params', 'id']) === list.get('id'))).map(list => + + )} +
, + ]); + } return (
- {!multiColumn && } + {!multiColumn && signedIn && } {multiColumn && } {navItems} - - {listItems} - - { preferencesLink !== undefined && } - + {signedIn && ( + + + {listItems} + + { preferencesLink !== undefined && } + + + )}
diff --git a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js index 481f76763..06df2ed99 100644 --- a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js +++ b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js @@ -1,10 +1,10 @@ import React from 'react'; -import Column from 'flavours/glitch/features/ui/components/column'; -import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; +import Column from 'flavours/glitch/components/column'; import { connect } from 'react-redux'; 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'; const messages = defineMessages({ heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' }, @@ -28,8 +28,13 @@ class KeyboardShortcuts extends ImmutablePureComponent { const { intl, collapseEnabled, 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 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 ( -
- - -
-
- ); - } - -} diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index c8cc905e7..8ea7a0b02 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -52,12 +52,14 @@ import { Directory, Explore, FollowRecommendations, + About, } from './util/async-components'; import { HotKeys } from 'react-hotkeys'; import { me, title } from 'flavours/glitch/initial_state'; import { closeOnboarding, INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import { Helmet } from 'react-helmet'; +import Header from './components/header'; // Dummy import, to make sure that ends up in the application bundle. // Without this it ends up in ~8 very commonly used bundles. @@ -183,6 +185,7 @@ class SwitchingColumnsArea extends React.PureComponent { + @@ -652,6 +655,9 @@ class UI extends React.Component { )}} />
)} + +
+ {children} 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 eef3a941d..7ef06ceb7 100644 --- a/app/javascript/flavours/glitch/features/ui/util/async-components.js +++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js @@ -181,3 +181,7 @@ export function FilterModal () { export function Explore () { return import(/* webpackChunkName: "flavours/glitch/async/explore" */'flavours/glitch/features/explore'); } + +export function About () { + return import(/*webpackChunkName: "features/glitch/async/about" */'flavours/glitch/features/about'); +} diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 762e5dbb9..b63f2c86f 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -42,27 +42,62 @@ &__main { box-sizing: border-box; width: 100%; - max-width: 600px; flex: 0 0 auto; display: flex; flex-direction: column; @media screen and (min-width: $no-gap-breakpoint) { padding: 0 10px; + max-width: 600px; } } } } +$ui-header-height: 55px; + +.ui__header { + display: none; + box-sizing: border-box; + height: $ui-header-height; + position: sticky; + top: 0; + z-index: 2; + justify-content: space-between; + align-items: center; + + &__logo { + display: inline-flex; + padding: 15px; + + .logo { + height: $ui-header-height - 30px; + width: auto; + } + } + + &__links { + display: flex; + align-items: center; + gap: 10px; + padding: 0 10px; + + .button { + flex: 0 0 auto; + } + } +} + .tabs-bar__wrapper { background: darken($ui-base-color, 8%); position: sticky; - top: 0; + top: $ui-header-height; z-index: 2; padding-top: 0; @media screen and (min-width: $no-gap-breakpoint) { padding-top: 10px; + top: 0; } .tabs-bar { diff --git a/app/javascript/flavours/glitch/styles/components/explore.scss b/app/javascript/flavours/glitch/styles/components/explore.scss index 05df34eff..bad77fc1c 100644 --- a/app/javascript/flavours/glitch/styles/components/explore.scss +++ b/app/javascript/flavours/glitch/styles/components/explore.scss @@ -3,10 +3,9 @@ } .explore__search-header { - background: $ui-base-color; - display: flex; - align-items: flex-start; + background: darken($ui-base-color, 4%); justify-content: center; + align-items: center; padding: 15px; .search { @@ -15,14 +14,8 @@ } .search__input { - border-radius: 4px; - color: $inverted-text-color; - background: $simple-background-color; + border: 1px solid lighten($ui-base-color, 8%); padding: 10px; - - &::placeholder { - color: $dark-text-color; - } } .search .fa { diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index 17a34db62..c0653a7b1 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -191,7 +191,7 @@ path:first-child { fill: rgba($highlight-text-color, 0.25) !important; - fill-opacity: 1 !important; + fill-opacity: 100% !important; } path:last-child { diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index bbb8b456c..63bebc514 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -154,72 +154,70 @@ padding-top: 0; } - @media screen and (min-width: 630px) { - .detailed-status { - padding: 15px; + .detailed-status { + padding: 15px; - .media-gallery, - .video-player, - .audio-player { - margin-top: 15px; - } + .media-gallery, + .video-player, + .audio-player { + margin-top: 15px; } + } - .account__header__bar { - padding: 5px 10px; - } + .account__header__bar { + padding: 5px 10px; + } - .navigation-bar, - .compose-form { - padding: 15px; - } + .navigation-bar, + .compose-form { + padding: 15px; + } - .compose-form .compose-form__publish .compose-form__publish-button-wrapper { - padding-top: 15px; - } + .compose-form .compose-form__publish .compose-form__publish-button-wrapper { + padding-top: 15px; + } - .notification__report { - padding: 15px 15px 15px (48px + 15px * 2); - min-height: 48px + 2px; + .notification__report { + padding: 15px 15px 15px (48px + 15px * 2); + min-height: 48px + 2px; - &__avatar { - left: 15px; - top: 17px; - } + &__avatar { + left: 15px; + top: 17px; } + } - .status { - padding: 15px; - min-height: 48px + 2px; + .status { + padding: 15px; + min-height: 48px + 2px; - .media-gallery, - &__action-bar, - .video-player, - .audio-player { - margin-top: 10px; - } + .media-gallery, + &__action-bar, + .video-player, + .audio-player { + margin-top: 10px; } + } - .account { - padding: 15px 10px; + .account { + padding: 15px 10px; - &__header__bio { - margin: 0 -10px; - } + &__header__bio { + margin: 0 -10px; } + } - .notification { - &__message { - padding-top: 15px; - } + .notification { + &__message { + padding-top: 15px; + } - .status { - padding-top: 8px; - } + .status { + padding-top: 8px; + } - .account { - padding-top: 8px; - } + .account { + padding-top: 8px; } } } @@ -261,37 +259,83 @@ .search { margin-bottom: 10px; } -} -@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) { - .columns-area__panels__pane--compositional { + .floating-action-button, + .tabs-bar__link.optional { + display: none; + } + + .search-page .search { display: none; } + .navigation-panel__legal { + display: none; + } +} + +@media screen and (max-width: $no-gap-breakpoint - 1px) { .with-fab .scrollable .item-list:last-child { padding-bottom: 5.25rem; } -} -@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) { - .floating-action-button, - .tabs-bar__link.optional { - display: none; + .columns-area__panels__main { + width: calc(100% - 55px); } - .search-page .search { - display: none; + .columns-area__panels { + min-height: calc(100vh - $ui-header-height); } -} -@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) { .columns-area__panels__pane--navigational { - display: none; + min-width: 55px; + + .columns-area__panels__pane__inner { + width: 55px; + } + + .navigation-panel { + margin: 0; + background: $ui-base-color; + border-left: 1px solid lighten($ui-base-color, 8%); + height: 100vh; + } + + .column-link span, + .navigation-panel__sign-in-banner, + .navigation-panel__logo, + .getting-started__trends { + display: none; + } + + .column-link__icon { + font-size: 18px; + } + } + + .ui__header { + display: flex; + background: $ui-base-color; + border-bottom: 1px solid lighten($ui-base-color, 8%); + } + + .column-header, + .column-back-button, + .scrollable { + border-radius: 0 !important; } } -@media screen and (min-width: 600px + (285px * 2) + (10px * 2)) { - .tabs-bar { +.explore__search-header { + display: none; +} + +@media screen and (max-width: $no-gap-breakpoint + 285px - 1px) { + .columns-area__panels__pane--compositional { display: none; } + + .explore__search-header { + display: flex; + } } diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index 65758e6e0..4b4f5ffbe 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: 415px; +$no-gap-breakpoint: 890px; $font-sans-serif: 'mastodon-font-sans-serif' !default; $font-display: 'mastodon-font-display' !default; -- cgit From b68b96a0ccf3cb032f2ff37b9efff88a16a813f8 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 5 Oct 2022 18:57:33 +0200 Subject: [Glitch] Add server rules to sign-up flow Port 679274465b3a2aaf87a13553f08104d6d3f1d275 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/styles/containers.scss | 6 +-- app/javascript/flavours/glitch/styles/forms.scss | 49 +++++++++++++++++++--- 2 files changed, 44 insertions(+), 11 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index b8d0fdad2..f0caeb4c5 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -9,11 +9,7 @@ } .logo-container { - margin: 100px auto 50px; - - @media screen and (max-width: 500px) { - margin: 40px auto 0; - } + margin: 50px auto; h1 { display: flex; diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 8ae2b5bd8..6ab1189da 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -6,9 +6,10 @@ code { } .form-container { - max-width: 400px; + max-width: 450px; padding: 20px; - margin: 0 auto; + padding-bottom: 50px; + margin: 50px auto; } .indicator-icon { @@ -123,13 +124,34 @@ code { } .title { - color: #d9e1e8; - font-size: 20px; - line-height: 28px; - font-weight: 400; + font-size: 28px; + line-height: 33px; + font-weight: 700; + margin-bottom: 15px; + } + + .lead { + font-size: 17px; + line-height: 22px; + color: $secondary-text-color; margin-bottom: 30px; } + .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 { color: $darker-text-color; @@ -451,6 +473,11 @@ code { } } + .stacked-actions { + margin-top: 30px; + margin-bottom: 15px; + } + button, .button, .block-button { @@ -502,6 +529,16 @@ code { } } + .button.button-tertiary { + padding: 9px; + + &:hover, + &:focus, + &:active { + padding: 10px; + } + } + select { appearance: none; box-sizing: border-box; -- 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') 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') 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 e5720cd54027951d450977ba1a836b60b095cbb0 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Sun, 9 Oct 2022 10:55:09 +0900 Subject: [Glitch] Add title to pages with missing title in Web UI Port a5112b51fdf3ec2b31690e064ea330a090e71957 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/containers/mastodon.js | 23 +++++++++++-------- .../glitch/features/account/components/header.js | 4 ++-- .../glitch/features/bookmarked_statuses/index.js | 19 ++++++++++------ .../glitch/features/direct_timeline/index.js | 19 ++++++++++------ .../glitch/features/favourited_statuses/index.js | 19 ++++++++++------ .../flavours/glitch/features/favourites/index.js | 16 ++++++------- .../glitch/features/getting_started/index.js | 5 +++++ .../glitch/features/list_timeline/index.js | 26 +++++++++++++--------- .../flavours/glitch/features/lists/index.js | 21 ++++++++++------- .../flavours/glitch/features/status/index.js | 4 ++-- .../flavours/glitch/features/ui/index.js | 6 +---- 11 files changed, 97 insertions(+), 65 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/containers/mastodon.js b/app/javascript/flavours/glitch/containers/mastodon.js index bc0311293..eb88c2655 100644 --- a/app/javascript/flavours/glitch/containers/mastodon.js +++ b/app/javascript/flavours/glitch/containers/mastodon.js @@ -1,22 +1,25 @@ -import React from 'react'; -import { Provider } from 'react-redux'; import PropTypes from 'prop-types'; -import configureStore from 'flavours/glitch/store/configureStore'; +import React from 'react'; +import { Helmet } from 'react-helmet'; +import { IntlProvider, addLocaleData } from 'react-intl'; +import { Provider as ReduxProvider } from 'react-redux'; import { BrowserRouter, Route } from 'react-router-dom'; import { ScrollContext } from 'react-router-scroll-4'; +import configureStore from 'flavours/glitch/store/configureStore'; import UI from 'flavours/glitch/features/ui'; import { fetchCustomEmojis } from 'flavours/glitch/actions/custom_emojis'; import { hydrateStore } from 'flavours/glitch/actions/store'; -import { connectUserStream } from 'flavours/glitch/actions/streaming'; import { checkDeprecatedLocalSettings } from 'flavours/glitch/actions/local_settings'; -import { IntlProvider, addLocaleData } from 'react-intl'; -import { getLocale } from 'locales'; -import initialState from 'flavours/glitch/initial_state'; +import { connectUserStream } from 'flavours/glitch/actions/streaming'; import ErrorBoundary from 'flavours/glitch/components/error_boundary'; +import initialState, { title as siteTitle } from 'flavours/glitch/initial_state'; +import { getLocale } from 'locales'; const { localeData, messages } = getLocale(); addLocaleData(localeData); +const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`; + export const store = configureStore(); const hydrateAction = hydrateStore(initialState); store.dispatch(hydrateAction); @@ -78,15 +81,17 @@ export default class Mastodon extends React.PureComponent { return ( - + + + - + ); } diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js index 0f0e40268..9c7e62fc2 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.js +++ b/app/javascript/flavours/glitch/features/account/components/header.js @@ -3,7 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { autoPlayGif, me, title, domain } from 'flavours/glitch/initial_state'; +import { autoPlayGif, me, domain } from 'flavours/glitch/initial_state'; import { preferencesLink, profileLink, accountAdminLink } from 'flavours/glitch/utils/backend_links'; import classNames from 'classnames'; import Icon from 'flavours/glitch/components/icon'; @@ -352,7 +352,7 @@ class Header extends ImmutablePureComponent {
- {titleFromAccount(account)} - {title} + {titleFromAccount(account)}
); diff --git a/app/javascript/flavours/glitch/features/bookmarked_statuses/index.js b/app/javascript/flavours/glitch/features/bookmarked_statuses/index.js index ada8fb068..91dd0e892 100644 --- a/app/javascript/flavours/glitch/features/bookmarked_statuses/index.js +++ b/app/javascript/flavours/glitch/features/bookmarked_statuses/index.js @@ -1,15 +1,16 @@ -import React from 'react'; -import { connect } from 'react-redux'; +import { debounce } from 'lodash'; import PropTypes from 'prop-types'; +import React from 'react'; +import { Helmet } from 'react-helmet'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { debounce } from 'lodash'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { connect } from 'react-redux'; import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'flavours/glitch/actions/bookmarks'; -import Column from 'flavours/glitch/features/ui/components/column'; -import ColumnHeader from 'flavours/glitch/components/column_header'; import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns'; +import ColumnHeader from 'flavours/glitch/components/column_header'; import StatusList from 'flavours/glitch/components/status_list'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import ImmutablePureComponent from 'react-immutable-pure-component'; +import Column from 'flavours/glitch/features/ui/components/column'; const messages = defineMessages({ heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' }, @@ -95,6 +96,10 @@ class Bookmarks extends ImmutablePureComponent { emptyMessage={emptyMessage} bindToDocument={!multiColumn} /> + + + {intl.formatMessage(messages.heading)} + ); } diff --git a/app/javascript/flavours/glitch/features/direct_timeline/index.js b/app/javascript/flavours/glitch/features/direct_timeline/index.js index 75ca19d17..cb209ed76 100644 --- a/app/javascript/flavours/glitch/features/direct_timeline/index.js +++ b/app/javascript/flavours/glitch/features/direct_timeline/index.js @@ -1,15 +1,16 @@ +import PropTypes from 'prop-types'; import React from 'react'; +import { Helmet } from 'react-helmet'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container'; +import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns'; +import { mountConversations, unmountConversations, expandConversations } from 'flavours/glitch/actions/conversations'; +import { connectDirectStream } from 'flavours/glitch/actions/streaming'; +import { expandDirectTimeline } from 'flavours/glitch/actions/timelines'; import Column from 'flavours/glitch/components/column'; import ColumnHeader from 'flavours/glitch/components/column_header'; -import { expandDirectTimeline } from 'flavours/glitch/actions/timelines'; -import { mountConversations, unmountConversations, expandConversations } from 'flavours/glitch/actions/conversations'; -import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container'; import ColumnSettingsContainer from './containers/column_settings_container'; -import { connectDirectStream } from 'flavours/glitch/actions/streaming'; import ConversationsListContainer from './containers/conversations_list_container'; const messages = defineMessages({ @@ -143,6 +144,10 @@ class DirectTimeline extends React.PureComponent { {contents} + + + {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 4df3aaa64..ae94f05ca 100644 --- a/app/javascript/flavours/glitch/features/favourited_statuses/index.js +++ b/app/javascript/flavours/glitch/features/favourited_statuses/index.js @@ -1,15 +1,16 @@ -import React from 'react'; -import { connect } from 'react-redux'; +import { debounce } from 'lodash'; import PropTypes from 'prop-types'; +import React from 'react'; +import { Helmet } from 'react-helmet'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { debounce } from 'lodash'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { connect } from 'react-redux'; +import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns'; import { fetchFavouritedStatuses, expandFavouritedStatuses } from 'flavours/glitch/actions/favourites'; -import Column from 'flavours/glitch/features/ui/components/column'; import ColumnHeader from 'flavours/glitch/components/column_header'; -import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns'; import StatusList from 'flavours/glitch/components/status_list'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import ImmutablePureComponent from 'react-immutable-pure-component'; +import Column from 'flavours/glitch/features/ui/components/column'; const messages = defineMessages({ heading: { id: 'column.favourites', defaultMessage: 'Favourites' }, @@ -95,6 +96,10 @@ class Favourites extends ImmutablePureComponent { emptyMessage={emptyMessage} bindToDocument={!multiColumn} /> + + + {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 a51562e71..faaf62dee 100644 --- a/app/javascript/flavours/glitch/features/favourites/index.js +++ b/app/javascript/flavours/glitch/features/favourites/index.js @@ -1,16 +1,16 @@ -import React from 'react'; -import { connect } from 'react-redux'; import PropTypes from 'prop-types'; +import React from 'react'; +import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { connect } from 'react-redux'; +import ColumnHeader from 'flavours/glitch/components/column_header'; +import Icon from 'flavours/glitch/components/icon'; import { fetchFavourites } from 'flavours/glitch/actions/interactions'; +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 Icon from 'flavours/glitch/components/icon'; -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 '../../components/scrollable_list'; const messages = defineMessages({ heading: { id: 'column.favourited_by', defaultMessage: 'Favourited by' }, diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js index 4d3427877..39e00e4af 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.js +++ b/app/javascript/flavours/glitch/features/getting_started/index.js @@ -17,6 +17,7 @@ import { preferencesLink } from 'flavours/glitch/utils/backend_links'; import NavigationBar from '../compose/components/navigation_bar'; import LinkFooter from 'flavours/glitch/features/ui/components/link_footer'; import TrendsContainer from './containers/trends_container'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ heading: { id: 'getting_started.heading', defaultMessage: 'Getting started' }, @@ -190,6 +191,10 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
{multiColumn && showTrends && } + + + {intl.formatMessage(messages.menu)} + ); } diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.js b/app/javascript/flavours/glitch/features/list_timeline/index.js index 08347446b..9cc5bc1c4 100644 --- a/app/javascript/flavours/glitch/features/list_timeline/index.js +++ b/app/javascript/flavours/glitch/features/list_timeline/index.js @@ -1,20 +1,22 @@ -import React from 'react'; -import { connect } from 'react-redux'; import PropTypes from 'prop-types'; +import React from 'react'; +import { Helmet } from 'react-helmet'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container'; -import Column from 'flavours/glitch/components/column'; -import ColumnHeader from 'flavours/glitch/components/column_header'; -import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; -import { connectListStream } from 'flavours/glitch/actions/streaming'; -import { expandListTimeline } from 'flavours/glitch/actions/timelines'; +import { connect } from 'react-redux'; +import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns'; import { fetchList, deleteList, updateList } from 'flavours/glitch/actions/lists'; import { openModal } from 'flavours/glitch/actions/modal'; -import MissingIndicator from 'flavours/glitch/components/missing_indicator'; -import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; +import { connectListStream } from 'flavours/glitch/actions/streaming'; +import { expandListTimeline } from 'flavours/glitch/actions/timelines'; +import Column from 'flavours/glitch/components/column'; +import ColumnBackButton from 'flavours/glitch/components/column_back_button'; +import ColumnHeader from 'flavours/glitch/components/column_header'; import Icon from 'flavours/glitch/components/icon'; +import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; +import MissingIndicator from 'flavours/glitch/components/missing_indicator'; import RadioButton from 'flavours/glitch/components/radio_button'; +import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container'; const messages = defineMessages({ deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' }, @@ -210,6 +212,10 @@ class ListTimeline extends React.PureComponent { emptyMessage={} bindToDocument={!multiColumn} /> + + + {title} + ); } diff --git a/app/javascript/flavours/glitch/features/lists/index.js b/app/javascript/flavours/glitch/features/lists/index.js index b92389d82..32217cf41 100644 --- a/app/javascript/flavours/glitch/features/lists/index.js +++ b/app/javascript/flavours/glitch/features/lists/index.js @@ -1,18 +1,19 @@ -import React from 'react'; -import { connect } from 'react-redux'; import PropTypes from 'prop-types'; +import React from 'react'; +import { Helmet } from 'react-helmet'; import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { connect } from 'react-redux'; +import { createSelector } from 'reselect'; +import { fetchLists } from 'flavours/glitch/actions/lists'; +import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; +import ScrollableList from 'flavours/glitch/components/scrollable_list'; import Column from 'flavours/glitch/features/ui/components/column'; -import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; -import { fetchLists } from 'flavours/glitch/actions/lists'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import ImmutablePureComponent from 'react-immutable-pure-component'; import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subheading'; import NewListForm from './components/new_list_form'; -import { createSelector } from 'reselect'; -import ScrollableList from 'flavours/glitch/components/scrollable_list'; const messages = defineMessages({ heading: { id: 'column.lists', defaultMessage: 'Lists' }, @@ -76,6 +77,10 @@ class Lists extends ImmutablePureComponent { , )} + + + {intl.formatMessage(messages.heading)} + ); } diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js index c967ef34d..f84928d2e 100644 --- a/app/javascript/flavours/glitch/features/status/index.js +++ b/app/javascript/flavours/glitch/features/status/index.js @@ -47,7 +47,7 @@ import { openModal } from 'flavours/glitch/actions/modal'; import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { HotKeys } from 'react-hotkeys'; -import { boostModal, favouriteModal, deleteModal, title } from 'flavours/glitch/initial_state'; +import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/initial_state'; import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen'; import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning'; import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status'; @@ -684,7 +684,7 @@ class Status extends ImmutablePureComponent { - {titleFromStatus(status)} - {title} + {titleFromStatus(status)} ); diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index ea99e5097..d5abefb19 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -56,7 +56,7 @@ import { PrivacyPolicy, } from './util/async-components'; import { HotKeys } from 'react-hotkeys'; -import { me, title } from 'flavours/glitch/initial_state'; +import { me } from 'flavours/glitch/initial_state'; import { closeOnboarding, INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import { Helmet } from 'react-helmet'; @@ -669,10 +669,6 @@ class UI extends React.Component { - - - {title} -
); -- cgit From dea951cce881a4d7379013d7cb5b8d012b5aa59d Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 9 Oct 2022 06:08:37 +0200 Subject: [Glitch] Add dismissable hints to various timelines in web UI Port f41ec9af05d3e2145e62f705225dbabb7e04e242 to glitch-soc Co-authored-by: Yamagishi Kazutoshi Signed-off-by: Claire --- .../glitch/components/dismissable_banner.js | 51 ++++++++++++++++++++++ .../flavours/glitch/features/about/index.js | 3 +- .../glitch/features/community_timeline/index.js | 9 +++- .../flavours/glitch/features/directory/index.js | 3 +- .../flavours/glitch/features/explore/index.js | 3 +- .../flavours/glitch/features/explore/links.js | 11 +++++ .../flavours/glitch/features/explore/results.js | 3 +- .../flavours/glitch/features/explore/statuses.js | 29 +++++++----- .../flavours/glitch/features/explore/tags.js | 11 +++++ .../glitch/features/hashtag_timeline/index.js | 3 +- .../glitch/features/home_timeline/index.js | 5 +-- .../glitch/features/notifications/index.js | 3 +- .../glitch/features/privacy_policy/index.js | 3 +- .../glitch/features/public_timeline/index.js | 8 +++- app/javascript/flavours/glitch/settings.js | 1 + .../flavours/glitch/styles/components/columns.scss | 25 +++++++++++ 16 files changed, 139 insertions(+), 32 deletions(-) create mode 100644 app/javascript/flavours/glitch/components/dismissable_banner.js (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/dismissable_banner.js b/app/javascript/flavours/glitch/components/dismissable_banner.js new file mode 100644 index 000000000..ff52a619d --- /dev/null +++ b/app/javascript/flavours/glitch/components/dismissable_banner.js @@ -0,0 +1,51 @@ +import React from 'react'; +import IconButton from './icon_button'; +import PropTypes from 'prop-types'; +import { injectIntl, defineMessages } from 'react-intl'; +import { bannerSettings } from 'flavours/glitch/settings'; + +const messages = defineMessages({ + dismiss: { id: 'dismissable_banner.dismiss', defaultMessage: 'Dismiss' }, +}); + +export default @injectIntl +class DismissableBanner extends React.PureComponent { + + static propTypes = { + id: PropTypes.string.isRequired, + children: PropTypes.node, + intl: PropTypes.object.isRequired, + }; + + state = { + visible: !bannerSettings.get(this.props.id), + }; + + handleDismiss = () => { + const { id } = this.props; + this.setState({ visible: false }, () => bannerSettings.set(id, true)); + } + + render () { + const { visible } = this.state; + + if (!visible) { + return null; + } + + const { children, intl } = this.props; + + return ( +
+
+ {children} +
+ +
+ +
+
+ ); + } + +} diff --git a/app/javascript/flavours/glitch/features/about/index.js b/app/javascript/flavours/glitch/features/about/index.js index 9f7c90d91..4500480f5 100644 --- a/app/javascript/flavours/glitch/features/about/index.js +++ b/app/javascript/flavours/glitch/features/about/index.js @@ -4,7 +4,6 @@ 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 { title } from 'flavours/glitch/initial_state'; const messages = defineMessages({ title: { id: 'column.about', defaultMessage: 'About' }, @@ -25,7 +24,7 @@ class About extends React.PureComponent { - {intl.formatMessage(messages.title)} - {title} + {intl.formatMessage(messages.title)} ); diff --git a/app/javascript/flavours/glitch/features/community_timeline/index.js b/app/javascript/flavours/glitch/features/community_timeline/index.js index 5ee46ca3b..77809574d 100644 --- a/app/javascript/flavours/glitch/features/community_timeline/index.js +++ b/app/javascript/flavours/glitch/features/community_timeline/index.js @@ -10,7 +10,8 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col import ColumnSettingsContainer from './containers/column_settings_container'; import { connectCommunityStream } from 'flavours/glitch/actions/streaming'; import { Helmet } from 'react-helmet'; -import { title } from 'flavours/glitch/initial_state'; +import { domain } from 'flavours/glitch/initial_state'; +import DismissableBanner from 'flavours/glitch/components/dismissable_banner'; const messages = defineMessages({ title: { id: 'column.community', defaultMessage: 'Local timeline' }, @@ -138,6 +139,10 @@ class CommunityTimeline extends React.PureComponent { + + + + - {intl.formatMessage(messages.title)} - {title} + {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 dce8fa4e7..672a11430 100644 --- a/app/javascript/flavours/glitch/features/directory/index.js +++ b/app/javascript/flavours/glitch/features/directory/index.js @@ -13,7 +13,6 @@ import RadioButton from 'flavours/glitch/components/radio_button'; import LoadMore from 'flavours/glitch/components/load_more'; import ScrollContainer from 'flavours/glitch/containers/scroll_container'; import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; -import { title } from 'flavours/glitch/initial_state'; import { Helmet } from 'react-helmet'; const messages = defineMessages({ @@ -169,7 +168,7 @@ class Directory extends React.PureComponent { {multiColumn && !pinned ? {scrollableArea} : scrollableArea} - {intl.formatMessage(messages.title)} - {title} + {intl.formatMessage(messages.title)} ); diff --git a/app/javascript/flavours/glitch/features/explore/index.js b/app/javascript/flavours/glitch/features/explore/index.js index f37793732..934e309f8 100644 --- a/app/javascript/flavours/glitch/features/explore/index.js +++ b/app/javascript/flavours/glitch/features/explore/index.js @@ -13,7 +13,6 @@ import Search from 'flavours/glitch/features/compose/containers/search_container import SearchResults from './results'; import { showTrends } from 'flavours/glitch/initial_state'; import { Helmet } from 'react-helmet'; -import { title } from 'flavours/glitch/initial_state'; const messages = defineMessages({ title: { id: 'explore.title', defaultMessage: 'Explore' }, @@ -85,7 +84,7 @@ class Explore extends React.PureComponent { - {intl.formatMessage(messages.title)} - {title} + {intl.formatMessage(messages.title)} )} diff --git a/app/javascript/flavours/glitch/features/explore/links.js b/app/javascript/flavours/glitch/features/explore/links.js index 6adc2f6fb..092f86b29 100644 --- a/app/javascript/flavours/glitch/features/explore/links.js +++ b/app/javascript/flavours/glitch/features/explore/links.js @@ -6,6 +6,7 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { connect } from 'react-redux'; import { fetchTrendingLinks } from 'flavours/glitch/actions/trends'; import { FormattedMessage } from 'react-intl'; +import DismissableBanner from 'flavours/glitch/components/dismissable_banner'; const mapStateToProps = state => ({ links: state.getIn(['trends', 'links', 'items']), @@ -29,9 +30,17 @@ class Links extends React.PureComponent { render () { const { isLoading, links } = this.props; + const banner = ( + + + + ); + if (!isLoading && links.isEmpty()) { return (
+ {banner} +
@@ -41,6 +50,8 @@ class Links extends React.PureComponent { return (
+ {banner} + {isLoading ? () : links.map(link => ( - {intl.formatMessage(messages.title, { q })} - {title} + {intl.formatMessage(messages.title, { q })} ); diff --git a/app/javascript/flavours/glitch/features/explore/statuses.js b/app/javascript/flavours/glitch/features/explore/statuses.js index fe08ce466..0a5c9de23 100644 --- a/app/javascript/flavours/glitch/features/explore/statuses.js +++ b/app/javascript/flavours/glitch/features/explore/statuses.js @@ -6,6 +6,7 @@ import { FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; import { fetchTrendingStatuses, expandTrendingStatuses } from 'flavours/glitch/actions/trends'; import { debounce } from 'lodash'; +import DismissableBanner from 'flavours/glitch/components/dismissable_banner'; const mapStateToProps = state => ({ statusIds: state.getIn(['status_lists', 'trending', 'items']), @@ -40,17 +41,23 @@ class Statuses extends React.PureComponent { const emptyMessage = ; return ( - + <> + + + + + + ); } diff --git a/app/javascript/flavours/glitch/features/explore/tags.js b/app/javascript/flavours/glitch/features/explore/tags.js index 465fad0df..938036b64 100644 --- a/app/javascript/flavours/glitch/features/explore/tags.js +++ b/app/javascript/flavours/glitch/features/explore/tags.js @@ -6,6 +6,7 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { connect } from 'react-redux'; import { fetchTrendingHashtags } from 'flavours/glitch/actions/trends'; import { FormattedMessage } from 'react-intl'; +import DismissableBanner from 'flavours/glitch/components/dismissable_banner'; const mapStateToProps = state => ({ hashtags: state.getIn(['trends', 'tags', 'items']), @@ -29,9 +30,17 @@ class Tags extends React.PureComponent { render () { const { isLoading, hashtags } = this.props; + const banner = ( + + + + ); + if (!isLoading && hashtags.isEmpty()) { return (
+ {banner} +
@@ -41,6 +50,8 @@ class Tags extends React.PureComponent { return (
+ {banner} + {isLoading ? () : hashtags.map(hashtag => ( ))} diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js index 5e098514a..80b4c82be 100644 --- a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js +++ b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js @@ -14,7 +14,6 @@ import { isEqual } from 'lodash'; import { fetchHashtag, followHashtag, unfollowHashtag } from 'flavours/glitch/actions/tags'; import Icon from 'flavours/glitch/components/icon'; import classNames from 'classnames'; -import { title } from 'flavours/glitch/initial_state'; import { Helmet } from 'react-helmet'; const messages = defineMessages({ @@ -228,7 +227,7 @@ class HashtagTimeline extends React.PureComponent { /> - {`#${id}`} - {title} + #{id} ); diff --git a/app/javascript/flavours/glitch/features/home_timeline/index.js b/app/javascript/flavours/glitch/features/home_timeline/index.js index 86aaa0258..aa319b576 100644 --- a/app/javascript/flavours/glitch/features/home_timeline/index.js +++ b/app/javascript/flavours/glitch/features/home_timeline/index.js @@ -15,13 +15,12 @@ import classNames from 'classnames'; import IconWithBadge from 'flavours/glitch/components/icon_with_badge'; import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator'; import { Helmet } from 'react-helmet'; -import { title } from 'flavours/glitch/initial_state'; 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,7 +169,7 @@ class HomeTimeline extends React.PureComponent { ) : } - {intl.formatMessage(messages.title)} - {title} + {intl.formatMessage(messages.title)} ); diff --git a/app/javascript/flavours/glitch/features/notifications/index.js b/app/javascript/flavours/glitch/features/notifications/index.js index 26eeba168..0b26a3d9e 100644 --- a/app/javascript/flavours/glitch/features/notifications/index.js +++ b/app/javascript/flavours/glitch/features/notifications/index.js @@ -30,7 +30,6 @@ import compareId from 'flavours/glitch/compare_id'; import NotificationsPermissionBanner from './components/notifications_permission_banner'; import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator'; import { Helmet } from 'react-helmet'; -import { title } from 'flavours/glitch/initial_state'; import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container'; @@ -373,7 +372,7 @@ class Notifications extends React.PureComponent { {scrollContainer} - {intl.formatMessage(messages.title)} - {title} + {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 816010294..c1f7c4f1e 100644 --- a/app/javascript/flavours/glitch/features/privacy_policy/index.js +++ b/app/javascript/flavours/glitch/features/privacy_policy/index.js @@ -1,6 +1,5 @@ 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'; @@ -51,7 +50,7 @@ class PrivacyPolicy extends React.PureComponent {
- {intl.formatMessage(messages.title)} - {title} + {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 aa70acf15..49015c2fb 100644 --- a/app/javascript/flavours/glitch/features/public_timeline/index.js +++ b/app/javascript/flavours/glitch/features/public_timeline/index.js @@ -10,7 +10,7 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col import ColumnSettingsContainer from './containers/column_settings_container'; import { connectPublicStream } from 'flavours/glitch/actions/streaming'; import { Helmet } from 'react-helmet'; -import { title } from 'flavours/glitch/initial_state'; +import DismissableBanner from 'flavours/glitch/components/dismissable_banner'; const messages = defineMessages({ title: { id: 'column.public', defaultMessage: 'Federated timeline' }, @@ -143,6 +143,10 @@ class PublicTimeline extends React.PureComponent { + + + + - {intl.formatMessage(messages.title)} - {title} + {intl.formatMessage(messages.title)} ); diff --git a/app/javascript/flavours/glitch/settings.js b/app/javascript/flavours/glitch/settings.js index 7643a508e..46cfadfa3 100644 --- a/app/javascript/flavours/glitch/settings.js +++ b/app/javascript/flavours/glitch/settings.js @@ -45,3 +45,4 @@ export default class Settings { export const pushNotificationsSetting = new Settings('mastodon_push_notification_data'); export const tagHistory = new Settings('mastodon_tag_history'); +export const bannerSettings = new Settings('mastodon_banner_settings'); diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 1827e8c01..6f878f791 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -936,3 +936,28 @@ $ui-header-height: 55px; color: $darker-text-color; } } + +.dismissable-banner { + background: $ui-base-color; + border-bottom: 1px solid lighten($ui-base-color, 8%); + display: flex; + align-items: center; + gap: 30px; + + &__message { + flex: 1 1 auto; + padding: 20px 15px; + cursor: default; + font-size: 14px; + line-height: 18px; + color: $primary-text-color; + } + + &__action { + padding: 15px; + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + } +} -- 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') 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') 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') 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') 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 5d4d4a69f65ea8612d6e992282c061ba9a01a8be Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Thu, 13 Oct 2022 04:07:30 +0900 Subject: [Glitch] Redirect non-logged-in user to owner statuses on single user mode Port 7afc6a630c76fb071bd189af3ac1366efc82f819 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/features/ui/index.js | 4 +- app/javascript/flavours/glitch/initial_state.js | 81 +++++++++++++++++----- 2 files changed, 66 insertions(+), 19 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index d5abefb19..eb5c3e87b 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -56,7 +56,7 @@ import { PrivacyPolicy, } from './util/async-components'; import { HotKeys } from 'react-hotkeys'; -import { me } from 'flavours/glitch/initial_state'; +import initialState, { me, owner, singleUserMode } from '../../initial_state'; import { closeOnboarding, INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import { Helmet } from 'react-helmet'; @@ -175,6 +175,8 @@ class SwitchingColumnsArea extends React.PureComponent { } else { redirect = ; } + } else if (singleUserMode && owner && initialState?.accounts[owner]) { + redirect = ; } else { redirect = ; } diff --git a/app/javascript/flavours/glitch/initial_state.js b/app/javascript/flavours/glitch/initial_state.js index b597ab2c5..ce6bf920c 100644 --- a/app/javascript/flavours/glitch/initial_state.js +++ b/app/javascript/flavours/glitch/initial_state.js @@ -1,5 +1,44 @@ // @ts-check +/** + * @typedef Emoji + * @property {string} shortcode + * @property {string} static_url + * @property {string} url + */ + +/** + * @typedef AccountField + * @property {string} name + * @property {string} value + * @property {string} verified_at + */ + +/** + * @typedef Account + * @property {string} acct + * @property {string} avatar + * @property {string} avatar_static + * @property {boolean} bot + * @property {string} created_at + * @property {boolean=} discoverable + * @property {string} display_name + * @property {Emoji[]} emojis + * @property {AccountField[]} fields + * @property {number} followers_count + * @property {number} following_count + * @property {boolean} group + * @property {string} header + * @property {string} header_static + * @property {string} id + * @property {string=} last_status_at + * @property {boolean} locked + * @property {string} note + * @property {number} statuses_count + * @property {string} url + * @property {string} username + */ + /** * @typedef {[code: string, name: string, localName: string]} InitialStateLanguage */ @@ -22,11 +61,13 @@ * @property {string} locale * @property {string | null} mascot * @property {string=} me + * @property {string=} owner * @property {boolean} profile_directory * @property {boolean} registrations_open * @property {boolean} reduce_motion * @property {string} repository * @property {boolean} search_enabled + * @property {boolean} single_user_mode * @property {string} source_url * @property {string} streaming_api_base_url * @property {boolean} timeline_preview @@ -41,13 +82,14 @@ /** * @typedef InitialState + * @property {Record} accounts * @property {InitialStateLanguage[]} languages * @property {InitialStateMeta} meta */ const element = document.getElementById('initial-state'); /** @type {InitialState | undefined} */ -const initialState = element && JSON.parse(element.textContent); +const initialState = element?.textContent && JSON.parse(element.textContent); // Glitch-soc-specific “local settings” try { @@ -63,35 +105,38 @@ try { */ const getMeta = (prop) => initialState?.meta && initialState.meta[prop]; -export const domain = getMeta('domain'); -export const reduceMotion = getMeta('reduce_motion'); +export const activityApiEnabled = getMeta('activity_api_enabled'); export const autoPlayGif = getMeta('auto_play_gif'); -export const displayMedia = getMeta('display_media'); -export const expandSpoilers = getMeta('expand_spoilers'); -export const unfollowModal = getMeta('unfollow_modal'); export const boostModal = getMeta('boost_modal'); +export const cropImages = getMeta('crop_images'); export const deleteModal = getMeta('delete_modal'); -export const me = getMeta('me'); -export const searchEnabled = getMeta('search_enabled'); -export const maxChars = (initialState && initialState.max_toot_chars) || 500; +export const disableSwiping = getMeta('disable_swiping'); +export const displayMedia = getMeta('display_media'); +export const domain = getMeta('domain'); +export const expandSpoilers = getMeta('expand_spoilers'); +export const forceSingleColumn = !getMeta('advanced_layout'); export const limitedFederationMode = getMeta('limited_federation_mode'); +export const mascot = getMeta('mascot'); +export const me = getMeta('me'); +export const owner = getMeta('owner'); +export const profile_directory = getMeta('profile_directory'); +export const reduceMotion = getMeta('reduce_motion'); export const registrationsOpen = getMeta('registrations_open'); export const repository = getMeta('repository'); +export const searchEnabled = getMeta('search_enabled'); +export const showTrends = getMeta('trends'); +export const singleUserMode = getMeta('single_user_mode'); export const source_url = getMeta('source_url'); -export const version = getMeta('version'); -export const mascot = getMeta('mascot'); -export const profile_directory = getMeta('profile_directory'); -export const forceSingleColumn = !getMeta('advanced_layout'); +export const timelinePreview = getMeta('timeline_preview'); +export const title = getMeta('title'); +export const unfollowModal = getMeta('unfollow_modal'); export const useBlurhash = getMeta('use_blurhash'); 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 timelinePreview = getMeta('timeline_preview'); -export const activityApiEnabled = getMeta('activity_api_enabled'); +export const version = getMeta('version'); export const languages = initialState?.languages; // Glitch-soc-specific settings +export const maxChars = (initialState && initialState.max_toot_chars) || 500; export const favouriteModal = getMeta('favourite_modal'); export const pollLimits = (initialState && initialState.poll_limits); export const defaultContentType = getMeta('default_content_type'); -- 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') 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 e301cfb4637ff0ef75de066d929d52c39ddfb7ea Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Fri, 14 Oct 2022 10:16:37 +0900 Subject: [Glitch] Replace `CancelToken` to `AbortSignal` Port 219c38b9217d6dbb1621c27f64e9bf86bf92ec19 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/actions/compose.js | 44 ++++++++++--------- app/javascript/flavours/glitch/api.js | 53 ++++++++++++++++------- app/javascript/flavours/glitch/extra_polyfills.js | 1 + app/javascript/flavours/glitch/load_polyfills.js | 1 + 4 files changed, 63 insertions(+), 36 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/actions/compose.js b/app/javascript/flavours/glitch/actions/compose.js index 02aa4f144..56a3b7b5f 100644 --- a/app/javascript/flavours/glitch/actions/compose.js +++ b/app/javascript/flavours/glitch/actions/compose.js @@ -1,19 +1,21 @@ -import api from '../api'; -import { CancelToken, isCancel } from 'axios'; +import { isCancel } from 'axios'; import { throttle } from 'lodash'; +import { defineMessages } from 'react-intl'; +import api from 'flavours/glitch/api'; import { search as emojiSearch } from 'flavours/glitch/features/emoji/emoji_mart_search_light'; -import { useEmoji } from './emojis'; -import { tagHistory } from '../settings'; +import { tagHistory } from 'flavours/glitch/settings'; import { recoverHashtags } from 'flavours/glitch/utils/hashtag'; import resizeImage from 'flavours/glitch/utils/resize_image'; +import { showAlert, showAlertForError } from './alerts'; +import { useEmoji } from './emojis'; import { importFetchedAccounts } from './importer'; -import { updateTimeline } from './timelines'; -import { showAlertForError } from './alerts'; -import { showAlert } from './alerts'; import { openModal } from './modal'; -import { defineMessages } from 'react-intl'; +import { updateTimeline } from './timelines'; -let cancelFetchComposeSuggestionsAccounts, cancelFetchComposeSuggestionsTags; +/** @type {AbortController | undefined} */ +let fetchComposeSuggestionsAccountsController; +/** @type {AbortController | undefined} */ +let fetchComposeSuggestionsTagsController; export const COMPOSE_CHANGE = 'COMPOSE_CHANGE'; export const COMPOSE_CYCLE_ELEFRIEND = 'COMPOSE_CYCLE_ELEFRIEND'; @@ -472,8 +474,8 @@ export function undoUploadCompose(media_id) { }; export function clearComposeSuggestions() { - if (cancelFetchComposeSuggestionsAccounts) { - cancelFetchComposeSuggestionsAccounts(); + if (fetchComposeSuggestionsAccountsController) { + fetchComposeSuggestionsAccountsController.abort(); } return { type: COMPOSE_SUGGESTIONS_CLEAR, @@ -481,14 +483,14 @@ export function clearComposeSuggestions() { }; const fetchComposeSuggestionsAccounts = throttle((dispatch, getState, token) => { - if (cancelFetchComposeSuggestionsAccounts) { - cancelFetchComposeSuggestionsAccounts(); + if (fetchComposeSuggestionsAccountsController) { + fetchComposeSuggestionsAccountsController.abort(); } + fetchComposeSuggestionsAccountsController = new AbortController(); + api(getState).get('/api/v1/accounts/search', { - cancelToken: new CancelToken(cancel => { - cancelFetchComposeSuggestionsAccounts = cancel; - }), + signal: fetchComposeSuggestionsAccountsController.signal, params: { q: token.slice(1), @@ -511,16 +513,16 @@ const fetchComposeSuggestionsEmojis = (dispatch, getState, token) => { }; const fetchComposeSuggestionsTags = throttle((dispatch, getState, token) => { - if (cancelFetchComposeSuggestionsTags) { - cancelFetchComposeSuggestionsTags(); + if (fetchComposeSuggestionsTagsController) { + fetchComposeSuggestionsTagsController.abort(); } dispatch(updateSuggestionTags(token)); + fetchComposeSuggestionsTagsController = new AbortController(); + api(getState).get('/api/v2/search', { - cancelToken: new CancelToken(cancel => { - cancelFetchComposeSuggestionsTags = cancel; - }), + signal: fetchComposeSuggestionsTagsController.signal, params: { type: 'hashtags', diff --git a/app/javascript/flavours/glitch/api.js b/app/javascript/flavours/glitch/api.js index 645ef6500..6bbddbef6 100644 --- a/app/javascript/flavours/glitch/api.js +++ b/app/javascript/flavours/glitch/api.js @@ -1,20 +1,31 @@ +// @ts-check + import axios from 'axios'; import LinkHeader from 'http-link-header'; import ready from './ready'; +/** + * @param {import('axios').AxiosResponse} response + * @returns {LinkHeader} + */ export const getLinks = response => { const value = response.headers.link; if (!value) { - return { refs: [] }; + return new LinkHeader(); } return LinkHeader.parse(value); }; +/** @type {import('axios').RawAxiosRequestHeaders} */ const csrfHeader = {}; +/** + * @returns {void} + */ const setCSRFHeader = () => { + /** @type {HTMLMetaElement | null} */ const csrfToken = document.querySelector('meta[name=csrf-token]'); if (csrfToken) { @@ -24,6 +35,10 @@ const setCSRFHeader = () => { ready(setCSRFHeader); +/** + * @param {() => import('immutable').Map} getState + * @returns {import('axios').RawAxiosRequestHeaders} + */ const authorizationHeaderFromState = getState => { const accessToken = getState && getState().getIn(['meta', 'access_token'], ''); @@ -36,17 +51,25 @@ const authorizationHeaderFromState = getState => { }; }; -export default getState => axios.create({ - headers: { - ...csrfHeader, - ...authorizationHeaderFromState(getState), - }, - - transformResponse: [function (data) { - try { - return JSON.parse(data); - } catch(Exception) { - return data; - } - }], -}); +/** + * @param {() => import('immutable').Map} getState + * @returns {import('axios').AxiosInstance} + */ +export default function api(getState) { + return axios.create({ + headers: { + ...csrfHeader, + ...authorizationHeaderFromState(getState), + }, + + transformResponse: [ + function (data) { + try { + return JSON.parse(data); + } catch { + return data; + } + }, + ], + }); +} diff --git a/app/javascript/flavours/glitch/extra_polyfills.js b/app/javascript/flavours/glitch/extra_polyfills.js index 3acc55abd..0d45c23b0 100644 --- a/app/javascript/flavours/glitch/extra_polyfills.js +++ b/app/javascript/flavours/glitch/extra_polyfills.js @@ -1,3 +1,4 @@ +import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'; import 'intersection-observer'; import 'requestidlecallback'; import objectFitImages from 'object-fit-images'; diff --git a/app/javascript/flavours/glitch/load_polyfills.js b/app/javascript/flavours/glitch/load_polyfills.js index 73eedc9dc..cc5bcd18f 100644 --- a/app/javascript/flavours/glitch/load_polyfills.js +++ b/app/javascript/flavours/glitch/load_polyfills.js @@ -26,6 +26,7 @@ function loadPolyfills() { // Edge does not have requestIdleCallback and object-fit CSS property. // This avoids shipping them all the polyfills. const needsExtraPolyfills = !( + window.AbortController && window.IntersectionObserver && window.IntersectionObserverEntry && 'isIntersecting' in IntersectionObserverEntry.prototype && -- cgit From 39ec0e8398def877572c8a489ae32473f449a8b3 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Fri, 14 Oct 2022 23:14:22 +0900 Subject: [Glitch] Fix missing `isCancel` Port e02bdc14fdf9b811a241dbaec8605cc70cb2961c to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/actions/compose.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/actions/compose.js b/app/javascript/flavours/glitch/actions/compose.js index 56a3b7b5f..e68ba9c67 100644 --- a/app/javascript/flavours/glitch/actions/compose.js +++ b/app/javascript/flavours/glitch/actions/compose.js @@ -1,4 +1,4 @@ -import { isCancel } from 'axios'; +import axios from 'axios'; import { throttle } from 'lodash'; import { defineMessages } from 'react-intl'; import api from 'flavours/glitch/api'; @@ -501,9 +501,11 @@ const fetchComposeSuggestionsAccounts = throttle((dispatch, getState, token) => dispatch(importFetchedAccounts(response.data)); dispatch(readyComposeSuggestionsAccounts(token, response.data)); }).catch(error => { - if (!isCancel(error)) { + if (!axios.isCancel(error)) { dispatch(showAlertForError(error)); } + }).finally(() => { + fetchComposeSuggestionsAccountsController = undefined; }); }, 200, { leading: true, trailing: true }); @@ -533,9 +535,11 @@ const fetchComposeSuggestionsTags = throttle((dispatch, getState, token) => { }).then(({ data }) => { dispatch(readyComposeSuggestionsTags(token, data.hashtags)); }).catch(error => { - if (!isCancel(error)) { + if (!axios.isCancel(error)) { dispatch(showAlertForError(error)); } + }).finally(() => { + fetchComposeSuggestionsTagsController = undefined; }); }, 200, { leading: true, trailing: true }); -- cgit From 2aa70c112a5381ad6c81597dbe2cb04e29532aa8 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 18 Oct 2022 18:57:01 +0200 Subject: [Glitch] Fix error while server rules are loading in report modal in web UI Port 4c7b5fb6c1787438ef130d9aecd5d0a4d54d08a9 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/features/report/category.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/report/category.js b/app/javascript/flavours/glitch/features/report/category.js index 43fb7a17c..88a6c1969 100644 --- a/app/javascript/flavours/glitch/features/report/category.js +++ b/app/javascript/flavours/glitch/features/report/category.js @@ -5,6 +5,7 @@ import { connect } from 'react-redux'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import Button from 'flavours/glitch/components/button'; import Option from './components/option'; +import { List as ImmutableList } from 'immutable'; const messages = defineMessages({ dislike: { id: 'report.reasons.dislike', defaultMessage: 'I don\'t like it' }, @@ -20,7 +21,7 @@ const messages = defineMessages({ }); const mapStateToProps = state => ({ - rules: state.getIn(['server', 'rules']), + rules: state.getIn(['server', 'rules'], ImmutableList()), }); export default @connect(mapStateToProps) -- cgit From 6013eeea4c3492ac219bc8221396aa687775bf44 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 18 Oct 2022 19:33:11 +0200 Subject: [Glitch] Fix missing rules in report modal in web UI Port 9c7f4ab8e8d19d29a5b9367ebaec8fc8af70ab7f to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/features/report/category.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/report/category.js b/app/javascript/flavours/glitch/features/report/category.js index 88a6c1969..55c43577b 100644 --- a/app/javascript/flavours/glitch/features/report/category.js +++ b/app/javascript/flavours/glitch/features/report/category.js @@ -21,7 +21,7 @@ const messages = defineMessages({ }); const mapStateToProps = state => ({ - rules: state.getIn(['server', 'rules'], ImmutableList()), + rules: state.getIn(['server', 'server', 'rules'], ImmutableList()), }); export default @connect(mapStateToProps) -- 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') 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') 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 885389d279cd8648b77a6420f9b3e963cac46725 Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 28 Oct 2022 17:18:45 +0200 Subject: fixup! [Glitch] Change public accounts pages to mount the web UI --- app/javascript/flavours/glitch/features/status/index.js | 1 + 1 file changed, 1 insertion(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js index 2560faf05..f59e8c7f6 100644 --- a/app/javascript/flavours/glitch/features/status/index.js +++ b/app/javascript/flavours/glitch/features/status/index.js @@ -7,6 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import { createSelector } from 'reselect'; import { fetchStatus } from 'flavours/glitch/actions/statuses'; import MissingIndicator from 'flavours/glitch/components/missing_indicator'; +import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import DetailedStatus from './components/detailed_status'; import ActionBar from './components/action_bar'; import Column from 'flavours/glitch/features/ui/components/column'; -- cgit From 7cfb31928308cb6904d3b0e808365e98466890eb Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 28 Oct 2022 17:22:43 +0200 Subject: fixup! [Glitch] Fix logged-out web UI on smaller screens --- app/javascript/flavours/glitch/features/getting_started/index.js | 1 + 1 file changed, 1 insertion(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js index b00383877..f9d79013b 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.js +++ b/app/javascript/flavours/glitch/features/getting_started/index.js @@ -118,6 +118,7 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2); render () { const { intl, myAccount, columns, multiColumn, unreadFollowRequests, unreadNotifications, lists, openSettings } = this.props; + const { signedIn } = this.context.identity; const navItems = []; let listItems = []; -- cgit From b9195f8fb71ae7f4c48c896baff273c9518b6492 Mon Sep 17 00:00:00 2001 From: prplecake Date: Tue, 18 Oct 2022 17:12:55 -0500 Subject: [Glitch] Don't use "unfollow language" when cancelling follow requests Port 1b83040bd45770ff831ff697418aaa2468a1516a to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/features/account/components/header.js | 2 +- .../features/account_timeline/containers/header_container.js | 11 ++++++++++- .../glitch/features/directory/components/account_card.js | 2 +- 3 files changed, 12 insertions(+), 3 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js index 9aca72172..cf1494f05 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.js +++ b/app/javascript/flavours/glitch/features/account/components/header.js @@ -19,7 +19,7 @@ import { Helmet } from 'react-helmet'; const messages = defineMessages({ unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, follow: { id: 'account.follow', defaultMessage: 'Follow' }, - cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Cancel follow request' }, + cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Withdraw follow request' }, requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' }, unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' }, edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' }, diff --git a/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.js b/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.js index c1577e170..e6d8bb3bc 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.js +++ b/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.js @@ -24,6 +24,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { unfollowModal } from 'flavours/glitch/initial_state'; const messages = defineMessages({ + cancelFollowRequestConfirm: { id: 'confirmations.cancel_follow_request.confirm', defaultMessage: 'Withdraw request' }, unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' }, blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' }, }); @@ -43,7 +44,7 @@ const makeMapStateToProps = () => { const mapDispatchToProps = (dispatch, { intl }) => ({ onFollow (account) { - if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) { + if (account.getIn(['relationship', 'following'])) { if (unfollowModal) { dispatch(openModal('CONFIRM', { message: @{account.get('acct')} }} />, @@ -53,6 +54,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ } else { dispatch(unfollowAccount(account.get('id'))); } + } else if (account.getIn(['relationship', 'requested'])) { + if (unfollowModal) { + dispatch(openModal('CONFIRM', { + message: @{account.get('acct')} }} />, + confirm: intl.formatMessage(messages.cancelFollowRequestConfirm), + onConfirm: () => dispatch(unfollowAccount(account.get('id'))), + })); + } } else { dispatch(followAccount(account.get('id'))); } diff --git a/app/javascript/flavours/glitch/features/directory/components/account_card.js b/app/javascript/flavours/glitch/features/directory/components/account_card.js index b6785a5f9..8c344c793 100644 --- a/app/javascript/flavours/glitch/features/directory/components/account_card.js +++ b/app/javascript/flavours/glitch/features/directory/components/account_card.js @@ -24,7 +24,7 @@ import classNames from 'classnames'; const messages = defineMessages({ unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, follow: { id: 'account.follow', defaultMessage: 'Follow' }, - cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Cancel follow request' }, + cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Withdraw follow request' }, requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' }, unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' }, unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' }, -- cgit From 5f4f37f4325b3777d500dcfdcce80f6afb1a67f0 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 20 Oct 2022 14:47:42 +0200 Subject: [Glitch] Fix error on profile in web UI Port 74738b49933eeadb6e837711ef1a1d0718829b6c to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/features/account_timeline/index.js | 1 + 1 file changed, 1 insertion(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/account_timeline/index.js b/app/javascript/flavours/glitch/features/account_timeline/index.js index 222d40ca1..9f2a66881 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/index.js +++ b/app/javascript/flavours/glitch/features/account_timeline/index.js @@ -26,6 +26,7 @@ const mapStateToProps = (state, { params: { acct, id }, withReplies = false }) = if (!accountId) { return { isLoading: true, + statusIds: emptyList, }; } -- cgit From f9f0949bd322bde741f81707ff871715c35d90e0 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 21 Oct 2022 10:06:03 +0200 Subject: [Glitch] Fix case-sensitive look-up for profiles in web UI Port 5e908c5a95a64a4d48e35516723955ac61a15c4d to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/features/account_timeline/index.js | 3 ++- app/javascript/flavours/glitch/reducers/accounts_map.js | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/account_timeline/index.js b/app/javascript/flavours/glitch/features/account_timeline/index.js index 9f2a66881..6d4ebd341 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/index.js +++ b/app/javascript/flavours/glitch/features/account_timeline/index.js @@ -17,11 +17,12 @@ import MissingIndicator from 'flavours/glitch/components/missing_indicator'; import TimelineHint from 'flavours/glitch/components/timeline_hint'; import LimitedAccountHint from './components/limited_account_hint'; import { getAccountHidden } from 'flavours/glitch/selectors'; +import { normalizeForLookup } from 'flavours/glitch/reducers/accounts_map'; const emptyList = ImmutableList(); const mapStateToProps = (state, { params: { acct, id }, withReplies = false }) => { - const accountId = id || state.getIn(['accounts_map', acct]); + const accountId = id || state.getIn(['accounts_map', normalizeForLookup(acct)]); if (!accountId) { return { diff --git a/app/javascript/flavours/glitch/reducers/accounts_map.js b/app/javascript/flavours/glitch/reducers/accounts_map.js index e0d42e9cd..53e08c8fb 100644 --- a/app/javascript/flavours/glitch/reducers/accounts_map.js +++ b/app/javascript/flavours/glitch/reducers/accounts_map.js @@ -1,14 +1,16 @@ import { ACCOUNT_IMPORT, ACCOUNTS_IMPORT } from '../actions/importer'; import { Map as ImmutableMap } from 'immutable'; +export const normalizeForLookup = str => str.toLowerCase(); + const initialState = ImmutableMap(); export default function accountsMap(state = initialState, action) { switch(action.type) { case ACCOUNT_IMPORT: - return state.set(action.account.acct, action.account.id); + return state.set(normalizeForLookup(action.account.acct), action.account.id); case ACCOUNTS_IMPORT: - return state.withMutations(map => action.accounts.forEach(account => map.set(account.acct, account.id))); + return state.withMutations(map => action.accounts.forEach(account => map.set(normalizeForLookup(account.acct), account.id))); default: return state; } -- cgit From bda5040085e2e80a2f58917e1f12e5a95473ce9c Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 22 Oct 2022 18:09:51 +0200 Subject: [Glitch] Change landing page to be /about instead of /explore when trends are disabled Port 062b3c9090c6935d4bf754e7aeb37793a2aa7b68 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/features/ui/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index 0b6ce2ba5..5c567be42 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -56,7 +56,7 @@ import { PrivacyPolicy, } from './util/async-components'; import { HotKeys } from 'react-hotkeys'; -import initialState, { me, owner, singleUserMode } from '../../initial_state'; +import initialState, { me, owner, singleUserMode, showTrends } from '../../initial_state'; import { closeOnboarding, INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import { Helmet } from 'react-helmet'; @@ -177,8 +177,10 @@ class SwitchingColumnsArea extends React.PureComponent { } } else if (singleUserMode && owner && initialState?.accounts[owner]) { redirect = ; - } else { + } else if (showTrends) { redirect = ; + } else { + redirect = ; } return ( -- cgit From 7d3acb1f2c984cb402aa507b51abf7c824227fc8 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 22 Oct 2022 18:30:20 +0200 Subject: [Glitch] Fix error when rendering limited account in web UI Port 73a48318a19a207c63f6d03ecea8ce35b7e2364a to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/avatar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/avatar.js b/app/javascript/flavours/glitch/components/avatar.js index 1da4a861c..38fd99af5 100644 --- a/app/javascript/flavours/glitch/components/avatar.js +++ b/app/javascript/flavours/glitch/components/avatar.js @@ -71,7 +71,7 @@ export default class Avatar extends React.PureComponent { style={style} data-avatar-of={account && `@${account.get('acct')}`} role='img' - aria-label={account.get('acct')} + aria-label={account?.get('acct')} /> ); } -- cgit From 92385da9c3d3c88108db530dd468c1933d40540f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 22 Oct 2022 23:15:14 +0200 Subject: [Glitch] Fix reply not opening compose page on certain screen sizes in web UI Port 56efa8d22f041ca87efdfb2e95e80d213e72dde9 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/actions/compose.js | 4 +--- app/javascript/flavours/glitch/styles/components/columns.scss | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/actions/compose.js b/app/javascript/flavours/glitch/actions/compose.js index e68ba9c67..728bcf79b 100644 --- a/app/javascript/flavours/glitch/actions/compose.js +++ b/app/javascript/flavours/glitch/actions/compose.js @@ -85,10 +85,8 @@ const messages = defineMessages({ uploadErrorPoll: { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' }, }); -const COMPOSE_PANEL_BREAKPOINT = 600 + (285 * 1) + (10 * 1); - export const ensureComposeIsVisible = (getState, routerHistory) => { - if (!getState().getIn(['compose', 'mounted']) && window.innerWidth < COMPOSE_PANEL_BREAKPOINT) { + if (!getState().getIn(['compose', 'mounted'])) { routerHistory.push('/publish'); } }; diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 9d8372e75..75891ad2e 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -215,7 +215,6 @@ $ui-header-height: 55px; padding: 15px; text-decoration: none; overflow: hidden; - text-overflow: ellipsis; white-space: nowrap; &:hover, -- 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') 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 bfa47eb7d6b407327f1de33b237a8005480bd2ec Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 23 Oct 2022 23:38:20 +0200 Subject: [Glitch] Fix language dropdown causing zoom on mobile devices in web UI Port 3ad0a2ae3dcd36e4a9e0be5f72273f9c30df7548 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/styles/components/emoji_picker.scss | 2 +- app/javascript/flavours/glitch/styles/components/search.scss | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index 0089445e1..bad6949c2 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -111,7 +111,7 @@ position: relative; input { - font-size: 14px; + font-size: 16px; font-weight: 400; padding: 7px 9px; padding-right: 25px; diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index c0653a7b1..bb861a88e 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -28,10 +28,6 @@ &:focus { background: lighten($ui-base-color, 4%); } - - @media screen and (max-width: 600px) { - font-size: 16px; - } } .search__icon { -- cgit From d9f182e5f3e14eb5cabac6e2925cebe8b9338dd5 Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 24 Oct 2022 17:37:46 +0200 Subject: [Glitch] Fix WebUI notification settings for new user and new report notifications Port dd76bbf8b7aef3aed6bb27a5c093211eebcdb24b to glitch-soc Signed-off-by: Claire --- .../glitch/features/notifications/components/column_settings.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js index 42ab9de35..ee05c7fd6 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js +++ b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js @@ -171,7 +171,7 @@ export default class ColumnSettings extends React.PureComponent {
- {(this.context.identity.permissions & PERMISSION_MANAGE_USERS === PERMISSION_MANAGE_USERS) && ( + {((this.context.identity.permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS) && (
@@ -184,7 +184,7 @@ export default class ColumnSettings extends React.PureComponent {
)} - {(this.context.identity.permissions & PERMISSION_MANAGE_REPORTS === PERMISSION_MANAGE_REPORTS) && ( + {((this.context.identity.permissions & PERMISSION_MANAGE_REPORTS) === PERMISSION_MANAGE_REPORTS) && (
-- cgit From 2d731dbde6504763229b0bdc0e38fe7eed8c4d35 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 26 Oct 2022 13:42:29 +0200 Subject: [Glitch] Add ability to view previous edits of a status in admin UI Port f8ca3bb2a1dd648f41e8fea5b5eb87b53bc8d521 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/styles/admin.scss | 64 ++++++++++++++++++++++ .../flavours/glitch/utils/backend_links.js | 2 +- 2 files changed, 65 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 77890c467..cb5a2d7ce 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -1721,3 +1721,67 @@ a.sparkline { } } } + +.history { + counter-reset: step 0; + font-size: 15px; + line-height: 22px; + + li { + counter-increment: step 1; + padding-left: 2.5rem; + padding-bottom: 8px; + position: relative; + margin-bottom: 8px; + + &::before { + position: absolute; + content: counter(step); + font-size: 0.625rem; + font-weight: 500; + left: 0; + display: flex; + justify-content: center; + align-items: center; + width: calc(1.375rem + 1px); + height: calc(1.375rem + 1px); + background: $ui-base-color; + border: 1px solid $highlight-text-color; + color: $highlight-text-color; + border-radius: 8px; + } + + &::after { + position: absolute; + content: ""; + width: 1px; + background: $highlight-text-color; + bottom: 0; + top: calc(1.875rem + 1px); + left: 0.6875rem; + } + + &:last-child { + margin-bottom: 0; + + &::after { + display: none; + } + } + } + + &__entry { + h5 { + font-weight: 500; + color: $primary-text-color; + line-height: 25px; + margin-bottom: 16px; + } + + .status { + border: 1px solid lighten($ui-base-color, 4%); + background: $ui-base-color; + border-radius: 4px; + } + } +} diff --git a/app/javascript/flavours/glitch/utils/backend_links.js b/app/javascript/flavours/glitch/utils/backend_links.js index d0ae63419..2028a1e60 100644 --- a/app/javascript/flavours/glitch/utils/backend_links.js +++ b/app/javascript/flavours/glitch/utils/backend_links.js @@ -3,7 +3,7 @@ export const profileLink = '/settings/profile'; export const signOutLink = '/auth/sign_out'; export const privacyPolicyLink = '/privacy-policy'; export const accountAdminLink = (id) => `/admin/accounts/${id}`; -export const statusAdminLink = (account_id, status_id) => `/admin/accounts/${account_id}/statuses?id=${status_id}`; +export const statusAdminLink = (account_id, status_id) => `/admin/accounts/${account_id}/statuses/${status_id}`; export const filterEditLink = (id) => `/filters/${id}/edit`; export const relationshipsLink = '/relationships'; export const securityLink = '/auth/edit'; -- cgit From b36c58b99e33f134d12e2489a35475e561f612b7 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 26 Oct 2022 15:23:00 +0200 Subject: [Glitch] Change post editing to be enabled in web UI Port 8ebff0efcb91e8b2a0805ebd4583a274ad5f1a69 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/status_action_bar.js | 2 +- .../flavours/glitch/features/status/components/action_bar.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js index deb9cfc15..b260b5bca 100644 --- a/app/javascript/flavours/glitch/components/status_action_bar.js +++ b/app/javascript/flavours/glitch/components/status_action_bar.js @@ -242,7 +242,7 @@ class StatusActionBar extends ImmutablePureComponent { } if (writtenByMe) { - // menu.push({ text: intl.formatMessage(messages.edit), action: this.handleEditClick }); + menu.push({ text: intl.formatMessage(messages.edit), action: this.handleEditClick }); menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick }); menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick }); } else { diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.js b/app/javascript/flavours/glitch/features/status/components/action_bar.js index 9868621fe..afcf4cc69 100644 --- a/app/javascript/flavours/glitch/features/status/components/action_bar.js +++ b/app/javascript/flavours/glitch/features/status/components/action_bar.js @@ -175,9 +175,8 @@ class ActionBar extends React.PureComponent { menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick }); menu.push(null); - // menu.push({ text: intl.formatMessage(messages.edit), action: this.handleEditClick }); + menu.push({ text: intl.formatMessage(messages.edit), action: this.handleEditClick }); menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick }); - menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick }); } else { menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick }); menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick }); -- cgit From 5dfb7ba35cce50c38be9aa2b935919f6462bb619 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 27 Oct 2022 19:17:15 +0200 Subject: [Glitch] Fix missing delete and redraft link in web UI Port 371d96940342b616723df36d54e6c2d1ab3ca827 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/features/status/components/action_bar.js | 1 + 1 file changed, 1 insertion(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.js b/app/javascript/flavours/glitch/features/status/components/action_bar.js index afcf4cc69..0e21ca5cc 100644 --- a/app/javascript/flavours/glitch/features/status/components/action_bar.js +++ b/app/javascript/flavours/glitch/features/status/components/action_bar.js @@ -177,6 +177,7 @@ class ActionBar extends React.PureComponent { menu.push(null); menu.push({ text: intl.formatMessage(messages.edit), action: this.handleEditClick }); menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick }); + menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick }); } else { menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick }); menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick }); -- cgit From ce27c6502bc439acda8ad89a4c5386698dbf82c0 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 27 Oct 2022 02:10:54 +0200 Subject: [Glitch] Fix notifications about deleted reports not being also deleted Port d2eb726962187226c85ef7f2ee1886cb0767bbd1 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/features/notifications/components/admin_report.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/notifications/components/admin_report.js b/app/javascript/flavours/glitch/features/notifications/components/admin_report.js index 80beeb9da..4662bd953 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/admin_report.js +++ b/app/javascript/flavours/glitch/features/notifications/components/admin_report.js @@ -69,6 +69,10 @@ export default class AdminReport extends ImmutablePureComponent { render () { const { intl, account, notification, unread, report } = this.props; + if (!report) { + return null; + } + // Links to the display name. const displayName = account.get('display_name_html') || account.get('username'); const link = ( -- 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') 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') 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 a2942fd0b89a0adaf86231d0d580f695738f700c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 25 Oct 2022 18:47:04 +0200 Subject: [Glitch] Fix `nofollow` rel being removed in web UI Port 9757c917da1753a706c4cd9e191e77059620b022 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/status_content.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index fe0d4c043..61788f350 100644 --- a/app/javascript/flavours/glitch/components/status_content.js +++ b/app/javascript/flavours/glitch/components/status_content.js @@ -124,6 +124,9 @@ export default class StatusContent extends React.PureComponent { link.setAttribute('title', link.href); link.classList.add('unhandled-link'); + link.setAttribute('target', '_blank'); + link.setAttribute('rel', 'noopener nofollow noreferrer'); + try { if (tagLinks && isLinkMisleading(link)) { // Add a tag besides the link to display its origin @@ -149,9 +152,6 @@ export default class StatusContent extends React.PureComponent { if (tagLinks && e instanceof TypeError) link.removeAttribute('href'); } } - - link.setAttribute('target', '_blank'); - link.setAttribute('rel', 'noopener noreferrer'); } } -- cgit From 8be350cc82cbe2d7befad8be2768e614be52ade4 Mon Sep 17 00:00:00 2001 From: Takeshi Umeda Date: Sun, 16 Oct 2022 15:43:59 +0900 Subject: [Glitch] Add featured tags selector for WebUI Port 4c7b5fb6c1787438ef130d9aecd5d0a4d54d08a9 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/actions/featured_tags.js | 34 +++++++++++ .../flavours/glitch/actions/timelines.js | 4 +- .../features/account/components/featured_tags.js | 71 ++++++++++++++++++++++ .../features/account_timeline/components/header.js | 3 +- .../glitch/features/account_timeline/index.js | 27 +++++--- .../flavours/glitch/features/ui/index.js | 1 + .../flavours/glitch/reducers/user_lists.js | 26 +++++++- 7 files changed, 153 insertions(+), 13 deletions(-) create mode 100644 app/javascript/flavours/glitch/actions/featured_tags.js create mode 100644 app/javascript/flavours/glitch/features/account/components/featured_tags.js (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/actions/featured_tags.js b/app/javascript/flavours/glitch/actions/featured_tags.js new file mode 100644 index 000000000..18bb61539 --- /dev/null +++ b/app/javascript/flavours/glitch/actions/featured_tags.js @@ -0,0 +1,34 @@ +import api from '../api'; + +export const FEATURED_TAGS_FETCH_REQUEST = 'FEATURED_TAGS_FETCH_REQUEST'; +export const FEATURED_TAGS_FETCH_SUCCESS = 'FEATURED_TAGS_FETCH_SUCCESS'; +export const FEATURED_TAGS_FETCH_FAIL = 'FEATURED_TAGS_FETCH_FAIL'; + +export const fetchFeaturedTags = (id) => (dispatch, getState) => { + if (getState().getIn(['user_lists', 'featured_tags', id, 'items'])) { + return; + } + + dispatch(fetchFeaturedTagsRequest(id)); + + api(getState).get(`/api/v1/accounts/${id}/featured_tags`) + .then(({ data }) => dispatch(fetchFeaturedTagsSuccess(id, data))) + .catch(err => dispatch(fetchFeaturedTagsFail(id, err))); +}; + +export const fetchFeaturedTagsRequest = (id) => ({ + type: FEATURED_TAGS_FETCH_REQUEST, + id, +}); + +export const fetchFeaturedTagsSuccess = (id, tags) => ({ + type: FEATURED_TAGS_FETCH_SUCCESS, + id, + tags, +}); + +export const fetchFeaturedTagsFail = (id, error) => ({ + type: FEATURED_TAGS_FETCH_FAIL, + id, + error, +}); diff --git a/app/javascript/flavours/glitch/actions/timelines.js b/app/javascript/flavours/glitch/actions/timelines.js index ef1e4dbbb..a1c4dd43a 100644 --- a/app/javascript/flavours/glitch/actions/timelines.js +++ b/app/javascript/flavours/glitch/actions/timelines.js @@ -156,8 +156,8 @@ export const expandHomeTimeline = ({ maxId } = {}, done = noOp) => ex export const expandPublicTimeline = ({ maxId, onlyMedia, onlyRemote, allowLocalOnly } = {}, done = noOp) => expandTimeline(`public${onlyRemote ? ':remote' : (allowLocalOnly ? ':allow_local_only' : '')}${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { remote: !!onlyRemote, allow_local_only: !!allowLocalOnly, max_id: maxId, only_media: !!onlyMedia }, done); export const expandCommunityTimeline = ({ maxId, onlyMedia } = {}, done = noOp) => expandTimeline(`community${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { local: true, max_id: maxId, only_media: !!onlyMedia }, done); export const expandDirectTimeline = ({ maxId } = {}, done = noOp) => expandTimeline('direct', '/api/v1/timelines/direct', { max_id: maxId }, done); -export const expandAccountTimeline = (accountId, { maxId, withReplies } = {}) => expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}`, `/api/v1/accounts/${accountId}/statuses`, { exclude_replies: !withReplies, max_id: maxId }); -export const expandAccountFeaturedTimeline = accountId => expandTimeline(`account:${accountId}:pinned`, `/api/v1/accounts/${accountId}/statuses`, { pinned: true }); +export const expandAccountTimeline = (accountId, { maxId, withReplies, tagged } = {}) => expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}${tagged ? `:${tagged}` : ''}`, `/api/v1/accounts/${accountId}/statuses`, { exclude_replies: !withReplies, tagged, max_id: maxId }); +export const expandAccountFeaturedTimeline = (accountId, { tagged } = {}) => expandTimeline(`account:${accountId}:pinned`, `/api/v1/accounts/${accountId}/statuses`, { pinned: true, tagged }); export const expandAccountMediaTimeline = (accountId, { maxId } = {}) => expandTimeline(`account:${accountId}:media`, `/api/v1/accounts/${accountId}/statuses`, { max_id: maxId, only_media: true, limit: 40 }); export const expandListTimeline = (id, { maxId } = {}, done = noOp) => expandTimeline(`list:${id}`, `/api/v1/timelines/list/${id}`, { max_id: maxId }, done); export const expandHashtagTimeline = (hashtag, { maxId, tags, local } = {}, done = noOp) => { diff --git a/app/javascript/flavours/glitch/features/account/components/featured_tags.js b/app/javascript/flavours/glitch/features/account/components/featured_tags.js new file mode 100644 index 000000000..a273d8fc6 --- /dev/null +++ b/app/javascript/flavours/glitch/features/account/components/featured_tags.js @@ -0,0 +1,71 @@ +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'; + +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}}' }, +}); + +const mapStateToProps = (state, { account }) => ({ + featuredTags: state.getIn(['user_lists', 'featured_tags', account.get('id'), 'items'], ImmutableList()), +}); + +export default @connect(mapStateToProps) +@injectIntl +class FeaturedTags extends ImmutablePureComponent { + + static contextTypes = { + router: PropTypes.object, + }; + + static propTypes = { + account: ImmutablePropTypes.map, + featuredTags: ImmutablePropTypes.list, + tagged: PropTypes.string, + intl: PropTypes.object.isRequired, + }; + + render () { + const { account, featuredTags, tagged, intl } = this.props; + + if (!account || 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} ({}) + + ); + })} +
+
+
+ ); + } + +} 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 eb332e296..3a4008310 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/header.js +++ b/app/javascript/flavours/glitch/features/account_timeline/components/header.js @@ -28,6 +28,7 @@ export default class Header extends ImmutablePureComponent { hideTabs: PropTypes.bool, domain: PropTypes.string.isRequired, hidden: PropTypes.bool, + tagged: PropTypes.string, }; static contextTypes = { @@ -103,7 +104,7 @@ export default class Header extends ImmutablePureComponent { } render () { - const { account, hidden, hideTabs } = this.props; + const { account, hidden, hideTabs, tagged } = this.props; if (account === null) { return null; diff --git a/app/javascript/flavours/glitch/features/account_timeline/index.js b/app/javascript/flavours/glitch/features/account_timeline/index.js index 6d4ebd341..b735af0ac 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/index.js +++ b/app/javascript/flavours/glitch/features/account_timeline/index.js @@ -18,10 +18,11 @@ import TimelineHint from 'flavours/glitch/components/timeline_hint'; import LimitedAccountHint from './components/limited_account_hint'; import { getAccountHidden } from 'flavours/glitch/selectors'; import { normalizeForLookup } from 'flavours/glitch/reducers/accounts_map'; +import { fetchFeaturedTags } from '../../actions/featured_tags'; const emptyList = ImmutableList(); -const mapStateToProps = (state, { params: { acct, id }, withReplies = false }) => { +const mapStateToProps = (state, { params: { acct, id, tagged }, withReplies = false }) => { const accountId = id || state.getIn(['accounts_map', normalizeForLookup(acct)]); if (!accountId) { @@ -31,7 +32,7 @@ const mapStateToProps = (state, { params: { acct, id }, withReplies = false }) = }; } - const path = withReplies ? `${accountId}:with_replies` : accountId; + const path = withReplies ? `${accountId}:with_replies` : `${accountId}${tagged ? `:${tagged}` : ''}`; return { accountId, @@ -39,7 +40,7 @@ const mapStateToProps = (state, { params: { acct, id }, withReplies = false }) = remoteUrl: state.getIn(['accounts', accountId, 'url']), isAccount: !!state.getIn(['accounts', accountId]), statusIds: state.getIn(['timelines', `account:${path}`, 'items'], ImmutableList()), - featuredStatusIds: withReplies ? ImmutableList() : state.getIn(['timelines', `account:${accountId}:pinned`, 'items'], ImmutableList()), + featuredStatusIds: withReplies ? ImmutableList() : state.getIn(['timelines', `account:${accountId}:pinned${tagged ? `:${tagged}` : ''}`, 'items'], ImmutableList()), isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']), hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']), suspended: state.getIn(['accounts', accountId, 'suspended'], false), @@ -62,6 +63,7 @@ class AccountTimeline extends ImmutablePureComponent { params: PropTypes.shape({ acct: PropTypes.string, id: PropTypes.string, + tagged: PropTypes.string, }).isRequired, accountId: PropTypes.string, dispatch: PropTypes.func.isRequired, @@ -79,14 +81,16 @@ class AccountTimeline extends ImmutablePureComponent { }; _load () { - const { accountId, withReplies, dispatch } = this.props; + const { accountId, withReplies, params: { tagged }, dispatch } = this.props; dispatch(fetchAccount(accountId)); if (!withReplies) { - dispatch(expandAccountFeaturedTimeline(accountId)); + dispatch(expandAccountFeaturedTimeline(accountId, { tagged })); } - dispatch(expandAccountTimeline(accountId, { withReplies })); + + dispatch(fetchFeaturedTags(accountId)); + dispatch(expandAccountTimeline(accountId, { withReplies, tagged })); } componentDidMount () { @@ -100,12 +104,17 @@ class AccountTimeline extends ImmutablePureComponent { } componentDidUpdate (prevProps) { - const { params: { acct }, accountId, dispatch } = this.props; + const { params: { acct, tagged }, accountId, withReplies, dispatch } = this.props; if (prevProps.accountId !== accountId && accountId) { this._load(); } else if (prevProps.params.acct !== acct) { dispatch(lookupAccount(acct)); + } else if (prevProps.params.tagged !== tagged) { + if (!withReplies) { + dispatch(expandAccountFeaturedTimeline(accountId, { tagged })); + } + dispatch(expandAccountTimeline(accountId, { withReplies, tagged })); } } @@ -128,7 +137,7 @@ class AccountTimeline extends ImmutablePureComponent { } handleLoadMore = maxId => { - this.props.dispatch(expandAccountTimeline(this.props.accountId, { maxId, withReplies: this.props.withReplies })); + this.props.dispatch(expandAccountTimeline(this.props.accountId, { maxId, withReplies: this.props.withReplies, tagged: this.props.params.tagged })); } setRef = c => { @@ -174,7 +183,7 @@ class AccountTimeline extends ImmutablePureComponent { } + prepend={} alwaysPrepend append={remoteMessage} scrollKey='account_timeline' diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index 164c475cc..3d385eee2 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -211,6 +211,7 @@ class SwitchingColumnsArea extends React.PureComponent { + diff --git a/app/javascript/flavours/glitch/reducers/user_lists.js b/app/javascript/flavours/glitch/reducers/user_lists.js index bfddbd246..0a75e85c1 100644 --- a/app/javascript/flavours/glitch/reducers/user_lists.js +++ b/app/javascript/flavours/glitch/reducers/user_lists.js @@ -51,7 +51,12 @@ import { DIRECTORY_EXPAND_SUCCESS, DIRECTORY_EXPAND_FAIL, } from 'flavours/glitch/actions/directory'; -import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; +import { + FEATURED_TAGS_FETCH_REQUEST, + FEATURED_TAGS_FETCH_SUCCESS, + FEATURED_TAGS_FETCH_FAIL, +} from 'flavours/glitch/actions/featured_tags'; +import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable'; const initialListState = ImmutableMap({ next: null, @@ -67,6 +72,7 @@ const initialState = ImmutableMap({ follow_requests: initialListState, blocks: initialListState, mutes: initialListState, + featured_tags: initialListState, }); const normalizeList = (state, path, accounts, next) => { @@ -89,6 +95,18 @@ const normalizeFollowRequest = (state, notification) => { }); }; +const normalizeFeaturedTag = (featuredTags, accountId) => { + const normalizeFeaturedTag = { ...featuredTags, accountId: accountId }; + return fromJS(normalizeFeaturedTag); +}; + +const normalizeFeaturedTags = (state, path, featuredTags, accountId) => { + return state.setIn(path, ImmutableMap({ + items: ImmutableList(featuredTags.map(featuredTag => normalizeFeaturedTag(featuredTag, accountId)).sort((a, b) => b.get('statuses_count') - a.get('statuses_count'))), + isLoading: false, + })); +}; + export default function userLists(state = initialState, action) { switch(action.type) { case FOLLOWERS_FETCH_SUCCESS: @@ -160,6 +178,12 @@ export default function userLists(state = initialState, action) { case DIRECTORY_FETCH_FAIL: case DIRECTORY_EXPAND_FAIL: return state.setIn(['directory', 'isLoading'], false); + case FEATURED_TAGS_FETCH_SUCCESS: + return normalizeFeaturedTags(state, ['featured_tags', action.id], action.tags, action.id); + case FEATURED_TAGS_FETCH_REQUEST: + return state.setIn(['featured_tags', action.id, 'isLoading'], true); + case FEATURED_TAGS_FETCH_FAIL: + return state.setIn(['featured_tags', action.id, 'isLoading'], false); default: return state; } -- cgit From 2cea6e55646bf47feb96c43d5461fc36f7a828f4 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 30 Sep 2022 01:14:37 +0200 Subject: [Glitch] Remove volume number from hashtags in web UI Port c55219efa811b3c6347774bec1b174d325e5f300 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/hashtag.js | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/hashtag.js b/app/javascript/flavours/glitch/components/hashtag.js index 2bb7f02f7..e54cba5c4 100644 --- a/app/javascript/flavours/glitch/components/hashtag.js +++ b/app/javascript/flavours/glitch/components/hashtag.js @@ -1,7 +1,7 @@ // @ts-check import React from 'react'; import { Sparklines, SparklinesCurve } from 'react-sparklines'; -import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; +import { FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Permalink from './permalink'; @@ -9,10 +9,6 @@ import ShortNumber from 'flavours/glitch/components/short_number'; import Skeleton from 'flavours/glitch/components/skeleton'; import classNames from 'classnames'; -const messages = defineMessages({ - totalVolume: { id: 'hashtag.total_volume', defaultMessage: 'Total volume in the last {days, plural, one {day} other {{days} days}}' }, -}); - class SilentErrorBoundary extends React.Component { static propTypes = { @@ -69,7 +65,7 @@ ImmutableHashtag.propTypes = { hashtag: ImmutablePropTypes.map.isRequired, }; -const Hashtag = injectIntl(({ name, href, to, people, uses, history, className, intl }) => ( +const Hashtag = ({ name, href, to, people, history, className }) => (
@@ -79,11 +75,6 @@ const Hashtag = injectIntl(({ name, href, to, people, uses, history, className, {typeof people !== 'undefined' ? : }
- - {typeof uses !== 'undefined' ? : } - * - -
0)}> @@ -92,7 +83,7 @@ const Hashtag = injectIntl(({ name, href, to, people, uses, history, className,
-)); +); Hashtag.propTypes = { name: PropTypes.string, -- 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') 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 c9d3c7d63a3218e3e113435213b7f9e63feb68a1 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 21 Oct 2022 10:05:50 +0200 Subject: [Glitch] Fix too many featured tags causing navigation panel scroll in web UI Port 23d367f544485eaeed888c707012a8282bbb5806 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/features/account/components/featured_tags.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours') 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 7466180c9..d646b08b2 100644 --- a/app/javascript/flavours/glitch/features/account/components/featured_tags.js +++ b/app/javascript/flavours/glitch/features/account/components/featured_tags.js @@ -35,7 +35,7 @@ class FeaturedTags extends ImmutablePureComponent {

}} />

- {featuredTags.map(featuredTag => ( + {featuredTags.take(3).map(featuredTag => ( Date: Sun, 23 Oct 2022 23:38:08 +0200 Subject: [Glitch] Fix media, following and followers tabs in web UI Port 73de39e6323460792ef8982555e5cfdaefb5a29b to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/features/account/navigation.js | 3 ++- app/javascript/flavours/glitch/features/account_gallery/index.js | 3 ++- app/javascript/flavours/glitch/features/followers/index.js | 3 ++- app/javascript/flavours/glitch/features/following/index.js | 3 ++- 4 files changed, 8 insertions(+), 4 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/account/navigation.js b/app/javascript/flavours/glitch/features/account/navigation.js index ebd37ec14..edae38ce5 100644 --- a/app/javascript/flavours/glitch/features/account/navigation.js +++ b/app/javascript/flavours/glitch/features/account/navigation.js @@ -2,9 +2,10 @@ 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'; +import { normalizeForLookup } from 'flavours/glitch/reducers/accounts_map'; const mapStateToProps = (state, { match: { params: { acct } } }) => { - const accountId = state.getIn(['accounts_map', acct]); + const accountId = state.getIn(['accounts_map', normalizeForLookup(acct)]); if (!accountId) { return { diff --git a/app/javascript/flavours/glitch/features/account_gallery/index.js b/app/javascript/flavours/glitch/features/account_gallery/index.js index 8df1bf4ca..638224bc0 100644 --- a/app/javascript/flavours/glitch/features/account_gallery/index.js +++ b/app/javascript/flavours/glitch/features/account_gallery/index.js @@ -15,9 +15,10 @@ import ScrollContainer from 'flavours/glitch/containers/scroll_container'; import LoadMore from 'flavours/glitch/components/load_more'; import MissingIndicator from 'flavours/glitch/components/missing_indicator'; import { openModal } from 'flavours/glitch/actions/modal'; +import { normalizeForLookup } from 'flavours/glitch/reducers/accounts_map'; const mapStateToProps = (state, { params: { acct, id } }) => { - const accountId = id || state.getIn(['accounts_map', acct]); + const accountId = id || state.getIn(['accounts_map', normalizeForLookup(acct)]); if (!accountId) { return { diff --git a/app/javascript/flavours/glitch/features/followers/index.js b/app/javascript/flavours/glitch/features/followers/index.js index 27a63b3fd..7122c1905 100644 --- a/app/javascript/flavours/glitch/features/followers/index.js +++ b/app/javascript/flavours/glitch/features/followers/index.js @@ -21,9 +21,10 @@ import ScrollableList from 'flavours/glitch/components/scrollable_list'; import TimelineHint from 'flavours/glitch/components/timeline_hint'; import LimitedAccountHint from '../account_timeline/components/limited_account_hint'; import { getAccountHidden } from 'flavours/glitch/selectors'; +import { normalizeForLookup } from 'flavours/glitch/reducers/accounts_map'; const mapStateToProps = (state, { params: { acct, id } }) => { - const accountId = id || state.getIn(['accounts_map', acct]); + const accountId = id || state.getIn(['accounts_map', normalizeForLookup(acct)]); if (!accountId) { return { diff --git a/app/javascript/flavours/glitch/features/following/index.js b/app/javascript/flavours/glitch/features/following/index.js index aa187bf95..4ad670105 100644 --- a/app/javascript/flavours/glitch/features/following/index.js +++ b/app/javascript/flavours/glitch/features/following/index.js @@ -21,9 +21,10 @@ import ScrollableList from 'flavours/glitch/components/scrollable_list'; import TimelineHint from 'flavours/glitch/components/timeline_hint'; import LimitedAccountHint from '../account_timeline/components/limited_account_hint'; import { getAccountHidden } from 'flavours/glitch/selectors'; +import { normalizeForLookup } from 'flavours/glitch/reducers/accounts_map'; const mapStateToProps = (state, { params: { acct, id } }) => { - const accountId = id || state.getIn(['accounts_map', acct]); + const accountId = id || state.getIn(['accounts_map', normalizeForLookup(acct)]); if (!accountId) { return { -- cgit From 80b53623e1bb5a3e0c220d4f2f30d62ddf3e37b1 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 22 Oct 2022 11:44:41 +0200 Subject: [Glitch] Change settings area to be separated into categories in admin UI Port 7c152acb2cc545a87610de349a94e14f45fbed5d to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/styles/admin.scss | 82 +++++++++++++++++----- .../flavours/glitch/styles/components/index.scss | 5 ++ app/javascript/flavours/glitch/styles/forms.scss | 16 ++++- 3 files changed, 85 insertions(+), 18 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index cb5a2d7ce..0f0a785ea 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -188,24 +188,71 @@ $content-width: 840px; padding-top: 30px; } - &-heading { - display: flex; - + &__heading { padding-bottom: 36px; border-bottom: 1px solid lighten($ui-base-color, 8%); - margin: -15px -15px 40px 0; + margin-bottom: 40px; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; + &__row { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + margin: -15px -15px 0 0; + + & > * { + margin-top: 15px; + margin-right: 15px; + } + } - & > * { - margin-top: 15px; - margin-right: 15px; + &__tabs { + margin-top: 30px; + margin-bottom: -31px; + + & > div { + display: flex; + gap: 10px; + } + + a { + font-size: 14px; + display: inline-flex; + align-items: center; + padding: 7px 15px; + border-radius: 4px; + color: $darker-text-color; + text-decoration: none; + position: relative; + font-weight: 500; + gap: 5px; + white-space: nowrap; + + &.selected { + font-weight: 700; + color: $primary-text-color; + + &::after { + content: ""; + display: block; + width: 100%; + border-bottom: 1px solid $ui-highlight-color; + position: absolute; + bottom: -5px; + left: 0; + } + } + + &:hover, + &:focus, + &:active { + background: lighten($ui-base-color, 4%); + } + } } - &-actions { + &__actions { display: inline-flex; & > :not(:first-child) { @@ -231,11 +278,7 @@ $content-width: 840px; color: $secondary-text-color; font-size: 24px; line-height: 36px; - font-weight: 400; - - @media screen and (max-width: $no-columns-breakpoint) { - font-weight: 700; - } + font-weight: 700; } h3 { @@ -440,6 +483,11 @@ body, } } + & > div { + display: flex; + gap: 5px; + } + strong { font-weight: 500; text-transform: uppercase; @@ -1162,7 +1210,7 @@ a.name-tag, path:first-child { fill: rgba($highlight-text-color, 0.25) !important; - fill-opacity: 1 !important; + fill-opacity: 100% !important; } path:last-child { diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 8877626b8..d25ca579b 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -20,6 +20,11 @@ background: transparent; padding: 0; cursor: pointer; + text-decoration: none; + + &--destructive { + color: $error-value-color; + } &:hover, &:active { diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 57075a75f..84a87eb86 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -244,7 +244,7 @@ code { & > label { font-family: inherit; - font-size: 16px; + font-size: 14px; color: $primary-text-color; display: block; font-weight: 500; @@ -281,6 +281,20 @@ code { .input:last-child { margin-bottom: 0; } + + &__thumbnail { + display: block; + margin: 0; + margin-bottom: 10px; + max-width: 100%; + height: auto; + border-radius: 4px; + background: url("images/void.png"); + + &:last-child { + margin-bottom: 0; + } + } } .fields-row { -- 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') 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') 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 From 592147b9021c5ee5aebed4e3355bafd82c393533 Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 28 Oct 2022 19:30:51 +0200 Subject: Remove local settings items that make no sense anymore --- .../glitch/features/local_settings/page/index.js | 30 ---------------------- 1 file changed, 30 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.js b/app/javascript/flavours/glitch/features/local_settings/page/index.js index e154fe1c8..d01eec811 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js @@ -181,36 +181,6 @@ class LocalSettingsPage extends React.PureComponent { - - - - - - - - - - ) - }} - /> - -
), -- cgit From 047a2f1f1bb72a0cd638def175d29c12b4737a4a Mon Sep 17 00:00:00 2001 From: Robert Laurenz <8169746+laurenzcodes@users.noreply.github.com> Date: Fri, 28 Oct 2022 12:46:41 +0200 Subject: [Glitch] fix(component): adjust style of counter button to fix overflow issue Port 10922294ffd2c83e155f020896318d16f3764e8d to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/styles/components/index.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index d25ca579b..28f93018d 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -257,11 +257,12 @@ display: inline-flex; align-items: center; width: auto !important; + padding: 0 4px 0 2px; } &__counter { display: inline-block; - width: 14px; + width: auto; margin-left: 4px; font-size: 12px; font-weight: 500; -- cgit From 2cb3dd93649670019871183f5d4d6bb77e33f5ba Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 28 Oct 2022 12:56:32 +0200 Subject: [Glitch] Change admin announcement edition interface to use datetime-local Port d9d722d74b2cb9bf30fa4cc98af6ddbeca003ebc to glitch-soc Co-authored-by: Eugen Rochko Signed-off-by: Claire --- app/javascript/flavours/glitch/styles/forms.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 84a87eb86..ef0ca1fcd 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -395,6 +395,7 @@ code { input[type=email], input[type=password], input[type=url], + input[type=datetime-local], textarea { box-sizing: border-box; font-size: 16px; @@ -435,7 +436,8 @@ code { input[type=text], input[type=number], input[type=email], - input[type=password] { + input[type=password], + input[type=datetime-local] { &:focus:invalid:not(:placeholder-shown), &:required:invalid:not(:placeholder-shown) { border-color: lighten($error-red, 12%); @@ -451,6 +453,7 @@ code { input[type=number], input[type=email], input[type=password], + input[type=datetime-local], textarea, select { border-color: lighten($error-red, 12%); -- cgit From 9f6c175550cf419334ca65bd71b7a456c13cb5a4 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 28 Oct 2022 12:56:51 +0200 Subject: [Glitch] Fix number of uses being shown again on trending hashtags in web UI Port 923f06a07c851b25b989412f341f87f8b8fff42f to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/hashtag.js | 1 - app/javascript/flavours/glitch/styles/components/search.scss | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/hashtag.js b/app/javascript/flavours/glitch/components/hashtag.js index 085591439..422b9a8fa 100644 --- a/app/javascript/flavours/glitch/components/hashtag.js +++ b/app/javascript/flavours/glitch/components/hashtag.js @@ -56,7 +56,6 @@ export const ImmutableHashtag = ({ hashtag }) => ( href={hashtag.get('url')} to={`/tags/${hashtag.get('name')}`} people={hashtag.getIn(['history', 0, 'accounts']) * 1 + hashtag.getIn(['history', 1, 'accounts']) * 1} - uses={hashtag.getIn(['history', 0, 'uses']) * 1 + hashtag.getIn(['history', 1, 'uses']) * 1} history={hashtag.get('history').reverse().map((day) => day.get('uses')).toArray()} /> ); diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index ee6b1c0a7..70af0f651 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -128,6 +128,7 @@ align-items: center; padding: 15px; border-bottom: 1px solid lighten($ui-base-color, 8%); + gap: 15px; &:last-child { border-bottom: 0; @@ -169,8 +170,6 @@ font-size: 24px; font-weight: 500; text-align: right; - padding-right: 15px; - margin-left: 5px; color: $secondary-text-color; text-decoration: none; } -- cgit From 8814a1b949c18c8908ab29e89799511e13ca7871 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 28 Oct 2022 19:34:22 +0200 Subject: [Glitch] Fix closed registrations message not appearing in web UI Port 5fa340931e2bd39a4bcccc9a97ad58e13a2d56ab to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/features/closed_registrations_modal/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/closed_registrations_modal/index.js b/app/javascript/flavours/glitch/features/closed_registrations_modal/index.js index 25dc4e20f..cb91636cb 100644 --- a/app/javascript/flavours/glitch/features/closed_registrations_modal/index.js +++ b/app/javascript/flavours/glitch/features/closed_registrations_modal/index.js @@ -6,7 +6,7 @@ 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']), + message: state.getIn(['server', 'server', 'registrations', 'message']), }); export default @connect(mapStateToProps) @@ -20,11 +20,11 @@ class ClosedRegistrationsModal extends ImmutablePureComponent { render () { let closedRegistrationsMessage; - if (this.props.closed_registrations_message) { + if (this.props.message) { closedRegistrationsMessage = (

); } else { -- cgit From eb307ec1bdb0acd1f90ebf338b9664a9c5b49f80 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 29 Oct 2022 13:32:49 +0200 Subject: [Glitch] Fix logged out search and changed logged-in search placeholder Port 55af04b253435ae771b69c8b7cfe3fc7e3b18033 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/actions/search.js | 5 +++-- app/javascript/flavours/glitch/features/compose/components/search.js | 5 ++++- 2 files changed, 7 insertions(+), 3 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/actions/search.js b/app/javascript/flavours/glitch/actions/search.js index 776782693..f21c0058b 100644 --- a/app/javascript/flavours/glitch/actions/search.js +++ b/app/javascript/flavours/glitch/actions/search.js @@ -29,7 +29,8 @@ export function clearSearch() { export function submitSearch() { return (dispatch, getState) => { - const value = getState().getIn(['search', 'value']); + const value = getState().getIn(['search', 'value']); + const signedIn = !!getState().getIn(['meta', 'me']); if (value.length === 0) { dispatch(fetchSearchSuccess({ accounts: [], statuses: [], hashtags: [] }, '')); @@ -41,7 +42,7 @@ export function submitSearch() { api(getState).get('/api/v2/search', { params: { q: value, - resolve: true, + resolve: signedIn, limit: 10, }, }).then(response => { diff --git a/app/javascript/flavours/glitch/features/compose/components/search.js b/app/javascript/flavours/glitch/features/compose/components/search.js index a59418e46..326fe5b70 100644 --- a/app/javascript/flavours/glitch/features/compose/components/search.js +++ b/app/javascript/flavours/glitch/features/compose/components/search.js @@ -21,6 +21,7 @@ import Motion from '../../ui/util/optional_motion'; const messages = defineMessages({ placeholder: { id: 'search.placeholder', defaultMessage: 'Search' }, + placeholderSignedIn: { id: 'search.search_or_paste', defaultMessage: 'Search or paste URL' }, }); class SearchPopout extends React.PureComponent { @@ -62,6 +63,7 @@ class Search extends React.PureComponent { static contextTypes = { router: PropTypes.object.isRequired, + identity: PropTypes.object.isRequired, }; static propTypes = { @@ -137,6 +139,7 @@ class Search extends React.PureComponent { render () { const { intl, value, submitted } = this.props; const { expanded } = this.state; + const { signedIn } = this.context.identity; const hasValue = value.length > 0 || submitted; return ( @@ -147,7 +150,7 @@ class Search extends React.PureComponent { ref={this.setRef} className='search__input' type='text' - placeholder={intl.formatMessage(messages.placeholder)} + placeholder={intl.formatMessage(signedIn ? messages.placeholderSignedIn : messages.placeholder)} value={value || ''} onChange={this.handleChange} onKeyUp={this.handleKeyUp} -- cgit From ebfe393e9cf398ad496cd48c050cbfb7acecd6ad Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 29 Oct 2022 20:05:53 +0200 Subject: [Glitch] Fix upload progress not communicating processing phase in web UI Port 30ef11022487364256656efee3cee92db2c839b2 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/actions/compose.js | 21 +++++++++++++++------ .../features/compose/components/upload_form.js | 3 +-- .../features/compose/components/upload_progress.js | 16 ++++++++++++---- .../compose/containers/upload_progress_container.js | 1 + app/javascript/flavours/glitch/reducers/compose.js | 6 +++++- 5 files changed, 34 insertions(+), 13 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/actions/compose.js b/app/javascript/flavours/glitch/actions/compose.js index 728bcf79b..15476fc59 100644 --- a/app/javascript/flavours/glitch/actions/compose.js +++ b/app/javascript/flavours/glitch/actions/compose.js @@ -27,11 +27,13 @@ export const COMPOSE_REPLY_CANCEL = 'COMPOSE_REPLY_CANCEL'; export const COMPOSE_DIRECT = 'COMPOSE_DIRECT'; export const COMPOSE_MENTION = 'COMPOSE_MENTION'; export const COMPOSE_RESET = 'COMPOSE_RESET'; -export const COMPOSE_UPLOAD_REQUEST = 'COMPOSE_UPLOAD_REQUEST'; -export const COMPOSE_UPLOAD_SUCCESS = 'COMPOSE_UPLOAD_SUCCESS'; -export const COMPOSE_UPLOAD_FAIL = 'COMPOSE_UPLOAD_FAIL'; -export const COMPOSE_UPLOAD_PROGRESS = 'COMPOSE_UPLOAD_PROGRESS'; -export const COMPOSE_UPLOAD_UNDO = 'COMPOSE_UPLOAD_UNDO'; + +export const COMPOSE_UPLOAD_REQUEST = 'COMPOSE_UPLOAD_REQUEST'; +export const COMPOSE_UPLOAD_SUCCESS = 'COMPOSE_UPLOAD_SUCCESS'; +export const COMPOSE_UPLOAD_FAIL = 'COMPOSE_UPLOAD_FAIL'; +export const COMPOSE_UPLOAD_PROGRESS = 'COMPOSE_UPLOAD_PROGRESS'; +export const COMPOSE_UPLOAD_PROCESSING = 'COMPOSE_UPLOAD_PROCESSING'; +export const COMPOSE_UPLOAD_UNDO = 'COMPOSE_UPLOAD_UNDO'; export const THUMBNAIL_UPLOAD_REQUEST = 'THUMBNAIL_UPLOAD_REQUEST'; export const THUMBNAIL_UPLOAD_SUCCESS = 'THUMBNAIL_UPLOAD_SUCCESS'; @@ -307,13 +309,16 @@ export function uploadCompose(files) { if (status === 200) { dispatch(uploadComposeSuccess(data, f)); } else if (status === 202) { + dispatch(uploadComposeProcessing()); + let tryCount = 1; + const poll = () => { api(getState).get(`/api/v1/media/${data.id}`).then(response => { if (response.status === 200) { dispatch(uploadComposeSuccess(response.data, f)); } else if (response.status === 206) { - let retryAfter = (Math.log2(tryCount) || 1) * 1000; + const retryAfter = (Math.log2(tryCount) || 1) * 1000; tryCount += 1; setTimeout(() => poll(), retryAfter); } @@ -328,6 +333,10 @@ export function uploadCompose(files) { }; }; +export const uploadComposeProcessing = () => ({ + type: COMPOSE_UPLOAD_PROCESSING, +}); + export const uploadThumbnail = (id, file) => (dispatch, getState) => { dispatch(uploadThumbnailRequest()); diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_form.js b/app/javascript/flavours/glitch/features/compose/components/upload_form.js index 43039c674..35880ddcc 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/upload_form.js @@ -4,7 +4,6 @@ import UploadProgressContainer from '../containers/upload_progress_container'; import ImmutablePureComponent from 'react-immutable-pure-component'; import UploadContainer from '../containers/upload_container'; import SensitiveButtonContainer from '../containers/sensitive_button_container'; -import { FormattedMessage } from 'react-intl'; export default class UploadForm extends ImmutablePureComponent { static propTypes = { @@ -16,7 +15,7 @@ export default class UploadForm extends ImmutablePureComponent { return (

- } /> + {mediaIds.size > 0 && (
diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_progress.js b/app/javascript/flavours/glitch/features/compose/components/upload_progress.js index 8896bbffd..c7c33c418 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload_progress.js +++ b/app/javascript/flavours/glitch/features/compose/components/upload_progress.js @@ -3,26 +3,34 @@ import PropTypes from 'prop-types'; import Motion from '../../ui/util/optional_motion'; import spring from 'react-motion/lib/spring'; import Icon from 'flavours/glitch/components/icon'; +import { FormattedMessage } from 'react-intl'; export default class UploadProgress extends React.PureComponent { static propTypes = { active: PropTypes.bool, progress: PropTypes.number, - icon: PropTypes.string.isRequired, - message: PropTypes.node.isRequired, + isProcessing: PropTypes.bool, }; render () { - const { active, progress, icon, message } = this.props; + const { active, progress, isProcessing } = this.props; if (!active) { return null; } + let message; + + if (isProcessing) { + message = ; + } else { + message = ; + } + return (
- +
{message} diff --git a/app/javascript/flavours/glitch/features/compose/containers/upload_progress_container.js b/app/javascript/flavours/glitch/features/compose/containers/upload_progress_container.js index 0cfee96da..b18c76a43 100644 --- a/app/javascript/flavours/glitch/features/compose/containers/upload_progress_container.js +++ b/app/javascript/flavours/glitch/features/compose/containers/upload_progress_container.js @@ -4,6 +4,7 @@ import UploadProgress from '../components/upload_progress'; const mapStateToProps = state => ({ active: state.getIn(['compose', 'is_uploading']), progress: state.getIn(['compose', 'progress']), + isProcessing: state.getIn(['compose', 'is_processing']), }); export default connect(mapStateToProps)(UploadProgress); diff --git a/app/javascript/flavours/glitch/reducers/compose.js b/app/javascript/flavours/glitch/reducers/compose.js index 035e9f564..b739456da 100644 --- a/app/javascript/flavours/glitch/reducers/compose.js +++ b/app/javascript/flavours/glitch/reducers/compose.js @@ -15,6 +15,7 @@ import { COMPOSE_UPLOAD_FAIL, COMPOSE_UPLOAD_UNDO, COMPOSE_UPLOAD_PROGRESS, + COMPOSE_UPLOAD_PROCESSING, THUMBNAIL_UPLOAD_REQUEST, THUMBNAIL_UPLOAD_SUCCESS, THUMBNAIL_UPLOAD_FAIL, @@ -223,6 +224,7 @@ function appendMedia(state, media, file) { } map.update('media_attachments', list => list.push(media)); map.set('is_uploading', false); + map.set('is_processing', false); map.set('resetFileKey', Math.floor((Math.random() * 0x10000))); map.set('idempotencyKey', uuid()); map.update('pending_media_attachments', n => n - 1); @@ -465,10 +467,12 @@ export default function compose(state = initialState, action) { return state.set('is_changing_upload', false); case COMPOSE_UPLOAD_REQUEST: return state.set('is_uploading', true).update('pending_media_attachments', n => n + 1); + case COMPOSE_UPLOAD_PROCESSING: + return state.set('is_processing', true); case COMPOSE_UPLOAD_SUCCESS: return appendMedia(state, fromJS(action.media), action.file); case COMPOSE_UPLOAD_FAIL: - return state.set('is_uploading', false).update('pending_media_attachments', n => n - 1); + return state.set('is_uploading', false).set('is_processing', false).update('pending_media_attachments', n => n - 1); case COMPOSE_UPLOAD_UNDO: return removeMedia(state, action.media_id); case COMPOSE_UPLOAD_PROGRESS: -- cgit From 8048874a3a62abab052d769b7fcae1c2c947e398 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 30 Oct 2022 02:43:15 +0200 Subject: [Glitch] Fix sidebar and tabs on settings on small screens in admin UI Port ad83e64795361dc9d5990a9dae4f91a3642109a0 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/styles/admin.scss | 90 +++++++++++++----------- 1 file changed, 49 insertions(+), 41 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 0f0a785ea..c2426944b 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -31,23 +31,17 @@ $content-width: 840px; &__toggle { display: none; - background: lighten($ui-base-color, 8%); - height: 48px; + background: darken($ui-base-color, 4%); + border-bottom: 1px solid lighten($ui-base-color, 4%); + align-items: center; &__logo { flex: 1 1 auto; a { - display: inline-block; + display: block; padding: 15px; } - - svg { - fill: $primary-text-color; - height: 20px; - position: relative; - bottom: -2px; - } } &__icon { @@ -55,15 +49,27 @@ $content-width: 840px; color: $darker-text-color; text-decoration: none; flex: 0 0 auto; - font-size: 20px; - padding: 15px; - } + font-size: 18px; + padding: 10px; + margin: 5px 10px; + border-radius: 4px; - a { - &:hover, - &:focus, - &:active { - background: lighten($ui-base-color, 12%); + &:focus { + background: $ui-base-color; + } + + .fa-times { + display: none; + } + + &.active { + .fa-times { + display: block; + } + + .fa-bars { + display: none; + } } } } @@ -79,7 +85,7 @@ $content-width: 840px; display: inherit; margin: inherit; width: inherit; - height: 20px; + height: 25px; } @media screen and (max-width: $no-columns-breakpoint) { @@ -189,10 +195,7 @@ $content-width: 840px; } &__heading { - padding-bottom: 36px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - - margin-bottom: 40px; + margin-bottom: 45px; &__row { display: flex; @@ -209,46 +212,43 @@ $content-width: 840px; &__tabs { margin-top: 30px; - margin-bottom: -31px; + width: 100%; & > div { display: flex; - gap: 10px; + flex-wrap: wrap; + gap: 5px; } a { font-size: 14px; display: inline-flex; align-items: center; - padding: 7px 15px; + padding: 7px 10px; border-radius: 4px; color: $darker-text-color; text-decoration: none; - position: relative; font-weight: 500; gap: 5px; white-space: nowrap; + &:hover, + &:focus, + &:active { + background: lighten($ui-base-color, 4%); + } + &.selected { font-weight: 700; color: $primary-text-color; + background: $ui-highlight-color; - &::after { - content: ""; - display: block; - width: 100%; - border-bottom: 1px solid $ui-highlight-color; - position: absolute; - bottom: -5px; - left: 0; + &:hover, + &:focus, + &:active { + background: lighten($ui-highlight-color, 4%); } } - - &:hover, - &:focus, - &:active { - background: lighten($ui-base-color, 4%); - } } } @@ -383,6 +383,14 @@ $content-width: 840px; &.visible { display: block; + position: fixed; + z-index: 10; + width: 100%; + height: calc(100vh - 56px); + left: 0; + bottom: 0; + overflow-y: auto; + background: $ui-base-color; } } -- cgit