From 12bdeac7182516b235bb97b873097da6d30c7b0c Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Wed, 30 Sep 2020 14:09:00 -0500 Subject: [PATCH 1/3] updates to Soapbox Config. Remove unnecessary fields, add accordion component --- app/soapbox/features/soapbox_config/index.js | 37 +++++++------ .../features/ui/components/accordion.js | 54 +++++++++++++++++++ app/soapbox/locales/ar.json | 4 +- app/soapbox/locales/ast.json | 4 +- app/soapbox/locales/bg.json | 4 +- app/soapbox/locales/bn.json | 4 +- app/soapbox/locales/br.json | 4 +- app/soapbox/locales/ca.json | 4 +- app/soapbox/locales/co.json | 4 +- app/soapbox/locales/cs.json | 4 +- app/soapbox/locales/cy.json | 4 +- app/soapbox/locales/da.json | 4 +- app/soapbox/locales/de.json | 4 +- app/soapbox/locales/defaultMessages.json | 4 +- app/soapbox/locales/el.json | 4 +- app/soapbox/locales/en.json | 4 +- app/soapbox/locales/eo.json | 4 +- app/soapbox/locales/es-AR.json | 4 +- app/soapbox/locales/es.json | 4 +- app/soapbox/locales/et.json | 4 +- app/soapbox/locales/eu.json | 4 +- app/soapbox/locales/fa.json | 4 +- app/soapbox/locales/fi.json | 4 +- app/soapbox/locales/fr.json | 4 +- app/soapbox/locales/ga.json | 4 +- app/soapbox/locales/gl.json | 4 +- app/soapbox/locales/he.json | 4 +- app/soapbox/locales/hi.json | 4 +- app/soapbox/locales/hr.json | 4 +- app/soapbox/locales/hu.json | 4 +- app/soapbox/locales/hy.json | 4 +- app/soapbox/locales/id.json | 4 +- app/soapbox/locales/io.json | 4 +- app/soapbox/locales/it.json | 4 +- app/soapbox/locales/ja.json | 4 +- app/soapbox/locales/ka.json | 4 +- app/soapbox/locales/kk.json | 4 +- app/soapbox/locales/ko.json | 4 +- app/soapbox/locales/lt.json | 4 +- app/soapbox/locales/lv.json | 4 +- app/soapbox/locales/mk.json | 4 +- app/soapbox/locales/ms.json | 4 +- app/soapbox/locales/nl.json | 4 +- app/soapbox/locales/nn.json | 4 +- app/soapbox/locales/no.json | 4 +- app/soapbox/locales/oc.json | 4 +- app/soapbox/locales/pl.json | 4 +- app/soapbox/locales/pt-BR.json | 4 +- app/soapbox/locales/pt.json | 4 +- app/soapbox/locales/ro.json | 4 +- app/soapbox/locales/ru.json | 4 +- app/soapbox/locales/sk.json | 4 +- app/soapbox/locales/sl.json | 4 +- app/soapbox/locales/sq.json | 4 +- app/soapbox/locales/sr-Latn.json | 4 +- app/soapbox/locales/sr.json | 4 +- app/soapbox/locales/sv.json | 4 +- app/soapbox/locales/ta.json | 4 +- app/soapbox/locales/te.json | 4 +- app/soapbox/locales/th.json | 4 +- app/soapbox/locales/tr.json | 4 +- app/soapbox/locales/uk.json | 4 +- app/soapbox/locales/zh-CN.json | 4 +- app/soapbox/locales/zh-HK.json | 4 +- app/soapbox/locales/zh-TW.json | 4 +- app/styles/basics.scss | 19 ++++++- app/styles/forms.scss | 22 ++++++++ 67 files changed, 240 insertions(+), 144 deletions(-) create mode 100644 app/soapbox/features/ui/components/accordion.js diff --git a/app/soapbox/features/soapbox_config/index.js b/app/soapbox/features/soapbox_config/index.js index 9b8b1942d..0fa43392a 100644 --- a/app/soapbox/features/soapbox_config/index.js +++ b/app/soapbox/features/soapbox_config/index.js @@ -24,6 +24,7 @@ import { SketchPicker } from 'react-color'; import Overlay from 'react-overlays/lib/Overlay'; import { isMobile } from 'soapbox/is_mobile'; import detectPassiveEvents from 'detect-passive-events'; +import Accordion from '../ui/components/accordion'; const messages = defineMessages({ heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' }, @@ -34,8 +35,8 @@ const messages = defineMessages({ homeFooterItemLabel: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' }, homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' }, customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' }, - rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Raw JSON data' }, - rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Advanced: Edit the settings data directly.' }, + rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Advanced: Edit raw JSON data' }, + rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Edit the settings data directly. Changes made directly to the JSON file will override the form fields above. Click "Save" to apply your changes.' }, }); const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false; @@ -202,7 +203,7 @@ class SoapboxConfig extends ImmutablePureComponent { /> -
+ {/*
@@ -214,7 +215,7 @@ class SoapboxConfig extends ImmutablePureComponent { onChange={this.handleFileChange(['banner'])} />
-
+ */}
@@ -226,7 +227,7 @@ class SoapboxConfig extends ImmutablePureComponent { />
- + {/* } hint={} @@ -236,7 +237,7 @@ class SoapboxConfig extends ImmutablePureComponent { ['extensions', 'patron', 'enabled'], (e) => e.checked, )} /> - + */} */} - -
- -
- + +
+ +
+ } + />
+
{content}
diff --git a/app/styles/application.scss b/app/styles/application.scss index 2e00c036b..d5158761b 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -71,6 +71,7 @@ @import 'components/filters'; @import 'components/mfa_form'; @import 'components/snackbar'; +@import 'components/accordion'; // Holiday @import 'holiday/halloween'; diff --git a/app/styles/basics.scss b/app/styles/basics.scss index 9f42af2d7..621c7bbb2 100644 --- a/app/styles/basics.scss +++ b/app/styles/basics.scss @@ -159,50 +159,6 @@ body { color: #ffffff; } -.explanation-box, -.accordion { - color: var(--primary-text-color); - padding: 15px 20px; - font-size: 14px; - background-color: var(--brand-color--faint); - margin: 5px 20px; - border-radius: 8px; - - &__title { - font-weight: bold; - font-size: 16px; - } - - &__explanation { - margin-top: 1em; - } - - a { - color: var(--brand-color--hicontrast); - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } -} - -.accordion { - margin: 0; - - .accordion_content { - transition-duration: 0.2s; - - &.expanded { - display: block; - } - - &.closed { - display: none; - } - } -} - noscript { text-align: center; diff --git a/app/styles/components/accordion.scss b/app/styles/components/accordion.scss new file mode 100644 index 000000000..366ceb8ea --- /dev/null +++ b/app/styles/components/accordion.scss @@ -0,0 +1,63 @@ +.explanation-box { + margin: 5px 20px; +} + +.explanation-box, +.accordion { + color: var(--primary-text-color); + padding: 15px 20px; + font-size: 14px; + background-color: var(--brand-color--faint); + border-radius: 8px; + margin: 0; + + &__title { + font-weight: bold !important; + font-size: 16px !important; + background: transparent !important; + padding: 0 !important; + margin: 0 !important; + text-transform: none !important; + text-align: left !important; + display: flex !important; + + &::after { + content: ''; + display: block; + font-family: ForkAwesome; + font-size: 20px; + padding-left: 10px; + margin-left: auto; + } + } + + &__content { + height: 0; + overflow: hidden; + } + + &--expanded &__title { + margin-bottom: 10px !important; + + &::after { + content: ''; + } + } + + &--expanded &__content { + height: auto; + } + + &__explanation { + margin-top: 1em; + } + + a { + color: var(--brand-color--hicontrast); + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } +} diff --git a/app/styles/forms.scss b/app/styles/forms.scss index b741d5642..8338f2af3 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -679,14 +679,24 @@ code { max-height: 100px; } -.code-editor textarea { - font-family: monospace; - white-space: pre; -} +.code-editor { + textarea { + font-family: monospace; + white-space: pre; + } -.code-editor--invalid textarea { - border-color: $error-red !important; - color: $error-red; + &--invalid textarea { + border-color: $error-red !important; + color: $error-red; + } + + .input { + margin-bottom: 0; + } + + .hint { + margin-top: 10px; + } } .input .row .fa-times-circle { From 7b6276fa59cbb369ff5bacba98e00db8de9622a4 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 1 Oct 2020 15:54:29 -0500 Subject: [PATCH 3/3] Accordion: replace ExplanationBox with Accordion --- app/soapbox/features/public_timeline/index.js | 44 +++++++++--- app/soapbox/features/soapbox_config/index.js | 7 +- .../features/ui/components/accordion.js | 14 ++-- .../features/ui/components/explanation_box.js | 67 ------------------- app/styles/components/accordion.scss | 9 ++- 5 files changed, 53 insertions(+), 88 deletions(-) delete mode 100644 app/soapbox/features/ui/components/explanation_box.js diff --git a/app/soapbox/features/public_timeline/index.js b/app/soapbox/features/public_timeline/index.js index 1cf8f5ce1..9173274fb 100644 --- a/app/soapbox/features/public_timeline/index.js +++ b/app/soapbox/features/public_timeline/index.js @@ -6,18 +6,19 @@ import StatusListContainer from '../ui/containers/status_list_container'; import Column from '../../components/column'; import ColumnSettingsContainer from './containers/column_settings_container'; import HomeColumnHeader from '../../components/home_column_header'; -import ExplanationBox from '../ui/components/explanation_box'; +import Accordion from 'soapbox/features/ui/components/accordion'; import { expandPublicTimeline } from '../../actions/timelines'; import { connectPublicStream } from '../../actions/streaming'; import { Link } from 'react-router-dom'; -import { getSettings } from 'soapbox/actions/settings'; +import { changeSetting, getSettings } from 'soapbox/actions/settings'; const messages = defineMessages({ title: { id: 'column.public', defaultMessage: 'Federated timeline' }, }); const mapStateToProps = state => { - const onlyMedia = getSettings(state).getIn(['public', 'other', 'onlyMedia']); + const settings = getSettings(state); + const onlyMedia = settings.getIn(['public', 'other', 'onlyMedia']); const timelineId = 'public'; @@ -26,6 +27,7 @@ const mapStateToProps = state => { onlyMedia, hasUnread: state.getIn(['timelines', `${timelineId}${onlyMedia ? ':media' : ''}`, 'unread']) > 0, siteTitle: state.getIn(['instance', 'title']), + explanationBoxExpanded: settings.get('explanationBox'), }; }; @@ -44,6 +46,7 @@ class CommunityTimeline extends React.PureComponent { onlyMedia: PropTypes.bool, timelineId: PropTypes.string, siteTitle: PropTypes.string, + explanationBoxExpanded: PropTypes.bool, }; componentDidMount() { @@ -69,23 +72,48 @@ class CommunityTimeline extends React.PureComponent { } } + toggleExplanationBox = (setting) => { + this.props.dispatch(changeSetting(['explanationBox'], setting)); + } + handleLoadMore = maxId => { const { dispatch, onlyMedia } = this.props; dispatch(expandPublicTimeline({ maxId, onlyMedia })); } render() { - const { intl, hasUnread, onlyMedia, timelineId, siteTitle } = this.props; + const { intl, hasUnread, onlyMedia, timelineId, siteTitle, explanationBoxExpanded } = this.props; return ( - } - explanation={ }} />} - /> +
+ } + content={( + + + + ), + }} + /> + )} + expanded={explanationBoxExpanded} + onToggle={this.toggleExplanationBox} + /> +
this.setState({ jsonEditorExpanded: value }); + componentDidUpdate(prevProps, prevState) { if (prevProps.soapbox !== this.props.soapbox) { this.putConfig(this.props.soapbox); @@ -359,6 +360,8 @@ class SoapboxConfig extends ImmutablePureComponent { /> )} + expanded={this.state.jsonEditorExpanded} + onToggle={this.toggleJSONEditor} />
diff --git a/app/soapbox/features/ui/components/accordion.js b/app/soapbox/features/ui/components/accordion.js index 1f372f002..633309d10 100644 --- a/app/soapbox/features/ui/components/accordion.js +++ b/app/soapbox/features/ui/components/accordion.js @@ -13,28 +13,30 @@ export default @injectIntl class Accordion extends React.PureComponent { static propTypes = { headline: PropTypes.string.isRequired, content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), + expanded: PropTypes.bool, + onToggle: PropTypes.func, intl: PropTypes.object.isRequired, }; - state = { + static defaultProps = { expanded: false, + onToggle: () => {}, } - handleToggleAccordion = (e) => { - this.setState({ expanded: !this.state.expanded }); + handleToggle = (e) => { + this.props.onToggle(!this.props.expanded); e.preventDefault(); } render() { - const { headline, content, intl } = this.props; - const { expanded } = this.state; + const { headline, content, expanded, intl } = this.props; return (