Merge branch 'dismiss-explanation-box' into 'develop'
Let fedi explanation box be dismissed, fixes #624 Closes #624 See merge request soapbox-pub/soapbox-fe!486
This commit is contained in:
commit
6346b996ab
4 changed files with 32 additions and 4 deletions
|
@ -25,6 +25,7 @@ export const defaultSettings = ImmutableMap({
|
||||||
defaultContentType: 'text/plain',
|
defaultContentType: 'text/plain',
|
||||||
themeMode: 'light',
|
themeMode: 'light',
|
||||||
locale: navigator.language.split(/[-_]/)[0] || 'en',
|
locale: navigator.language.split(/[-_]/)[0] || 'en',
|
||||||
|
showExplanationBox: true,
|
||||||
explanationBox: true,
|
explanationBox: true,
|
||||||
otpEnabled: false,
|
otpEnabled: false,
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,7 @@ import { changeSetting, getSettings } from 'soapbox/actions/settings';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
title: { id: 'column.public', defaultMessage: 'Federated timeline' },
|
title: { id: 'column.public', defaultMessage: 'Federated timeline' },
|
||||||
|
dismiss: { id: 'fediverse_tab.explanation_box.dismiss', defaultMessage: 'Don\'t show again' },
|
||||||
});
|
});
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
const mapStateToProps = state => {
|
||||||
|
@ -28,6 +29,7 @@ const mapStateToProps = state => {
|
||||||
hasUnread: state.getIn(['timelines', `${timelineId}${onlyMedia ? ':media' : ''}`, 'unread']) > 0,
|
hasUnread: state.getIn(['timelines', `${timelineId}${onlyMedia ? ':media' : ''}`, 'unread']) > 0,
|
||||||
siteTitle: state.getIn(['instance', 'title']),
|
siteTitle: state.getIn(['instance', 'title']),
|
||||||
explanationBoxExpanded: settings.get('explanationBox'),
|
explanationBoxExpanded: settings.get('explanationBox'),
|
||||||
|
showExplanationBox: settings.get('showExplanationBox'),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -46,6 +48,7 @@ class CommunityTimeline extends React.PureComponent {
|
||||||
onlyMedia: PropTypes.bool,
|
onlyMedia: PropTypes.bool,
|
||||||
timelineId: PropTypes.string,
|
timelineId: PropTypes.string,
|
||||||
siteTitle: PropTypes.string,
|
siteTitle: PropTypes.string,
|
||||||
|
showExplanationBox: PropTypes.bool,
|
||||||
explanationBoxExpanded: PropTypes.bool,
|
explanationBoxExpanded: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -72,6 +75,15 @@ class CommunityTimeline extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
explanationBoxMenu = () => {
|
||||||
|
const { intl } = this.props;
|
||||||
|
return [{ text: intl.formatMessage(messages.dismiss), action: this.dismissExplanationBox }];
|
||||||
|
}
|
||||||
|
|
||||||
|
dismissExplanationBox = () => {
|
||||||
|
this.props.dispatch(changeSetting(['showExplanationBox'], false));
|
||||||
|
}
|
||||||
|
|
||||||
toggleExplanationBox = (setting) => {
|
toggleExplanationBox = (setting) => {
|
||||||
this.props.dispatch(changeSetting(['explanationBox'], setting));
|
this.props.dispatch(changeSetting(['explanationBox'], setting));
|
||||||
}
|
}
|
||||||
|
@ -82,16 +94,17 @@ class CommunityTimeline extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { intl, hasUnread, onlyMedia, timelineId, siteTitle, explanationBoxExpanded } = this.props;
|
const { intl, hasUnread, onlyMedia, timelineId, siteTitle, showExplanationBox, explanationBoxExpanded } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Column label={intl.formatMessage(messages.title)}>
|
<Column label={intl.formatMessage(messages.title)}>
|
||||||
<HomeColumnHeader activeItem='fediverse' active={hasUnread} >
|
<HomeColumnHeader activeItem='fediverse' active={hasUnread} >
|
||||||
<ColumnSettingsContainer />
|
<ColumnSettingsContainer />
|
||||||
</HomeColumnHeader>
|
</HomeColumnHeader>
|
||||||
<div className='explanation-box'>
|
{showExplanationBox && <div className='explanation-box'>
|
||||||
<Accordion
|
<Accordion
|
||||||
headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
|
headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
|
||||||
|
menu={this.explanationBoxMenu()}
|
||||||
expanded={explanationBoxExpanded}
|
expanded={explanationBoxExpanded}
|
||||||
onToggle={this.toggleExplanationBox}
|
onToggle={this.toggleExplanationBox}
|
||||||
>
|
>
|
||||||
|
@ -112,7 +125,7 @@ class CommunityTimeline extends React.PureComponent {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
</div>
|
</div>}
|
||||||
<StatusListContainer
|
<StatusListContainer
|
||||||
scrollKey={`${timelineId}_timeline`}
|
scrollKey={`${timelineId}_timeline`}
|
||||||
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
|
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { defineMessages, injectIntl } from 'react-intl';
|
import { defineMessages, injectIntl } from 'react-intl';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
collapse: { id: 'accordion.collapse', defaultMessage: 'Collapse' },
|
collapse: { id: 'accordion.collapse', defaultMessage: 'Collapse' },
|
||||||
|
@ -13,6 +14,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
headline: PropTypes.node.isRequired,
|
headline: PropTypes.node.isRequired,
|
||||||
children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.node]),
|
children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.node]),
|
||||||
|
menu: PropTypes.array,
|
||||||
expanded: PropTypes.bool,
|
expanded: PropTypes.bool,
|
||||||
onToggle: PropTypes.func,
|
onToggle: PropTypes.func,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
|
@ -29,10 +31,15 @@ export default @injectIntl class Accordion extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { headline, children, expanded, intl } = this.props;
|
const { headline, children, menu, expanded, intl } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames('accordion', { 'accordion--expanded' : expanded })}>
|
<div className={classNames('accordion', { 'accordion--expanded' : expanded })}>
|
||||||
|
{menu && (
|
||||||
|
<div className='accordion__menu'>
|
||||||
|
<DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<button
|
<button
|
||||||
type='button'
|
type='button'
|
||||||
className='accordion__title'
|
className='accordion__title'
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
background-color: var(--brand-color--faint);
|
background-color: var(--brand-color--faint);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-weight: bold !important;
|
font-weight: bold !important;
|
||||||
|
@ -34,6 +35,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 17px;
|
||||||
|
right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
height: 0;
|
height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
Loading…
Reference in a new issue