From eef32c96e3cc50f9a7eb3e179dea460f43985db3 Mon Sep 17 00:00:00 2001 From: crockwave Date: Tue, 21 Jul 2020 18:38:10 -0500 Subject: [PATCH] Added branding_preview. Edited index --- .../components/branding_preview.js | 32 +++++ app/soapbox/features/configuration/index.js | 130 ++++++------------ app/soapbox/features/ui/index.js | 2 + .../features/ui/util/async-components.js | 4 + 4 files changed, 83 insertions(+), 85 deletions(-) create mode 100644 app/soapbox/features/configuration/components/branding_preview.js diff --git a/app/soapbox/features/configuration/components/branding_preview.js b/app/soapbox/features/configuration/components/branding_preview.js new file mode 100644 index 000000000..86c240538 --- /dev/null +++ b/app/soapbox/features/configuration/components/branding_preview.js @@ -0,0 +1,32 @@ +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { acctFull } from 'soapbox/utils/accounts'; +import StillImage from 'soapbox/components/still_image'; + +const BrandingPreview = ({ account }) => ( +
+ +
+ +
+
+
+ +
+
+ {account.get('username')} + + {account.get('display_name')} + + {acctFull(account)} +
+
+ +
+); + +BrandingPreview.propTypes = { + account: ImmutablePropTypes.map, +}; + +export default BrandingPreview; diff --git a/app/soapbox/features/configuration/index.js b/app/soapbox/features/configuration/index.js index c574830f5..cd33df659 100644 --- a/app/soapbox/features/configuration/index.js +++ b/app/soapbox/features/configuration/index.js @@ -12,6 +12,7 @@ import { Checkbox, FileChooser, } from 'soapbox/features/forms'; +import BrandingPreview from './components/branding_preview'; import { Map as ImmutableMap, List as ImmutableList, @@ -19,82 +20,37 @@ import { import { patchMe } from 'soapbox/actions/me'; import { unescape } from 'lodash'; +const MAX_FIELDS = 6; // Max promoPanel fields + const messages = defineMessages({ - heading: { id: 'column.edit_profile', defaultMessage: 'Edit profile' }, - metaFieldLabel: { id: 'edit_profile.fields.meta_fields.label_placeholder', defaultMessage: 'Label' }, - metaFieldContent: { id: 'edit_profile.fields.meta_fields.content_placeholder', defaultMessage: 'Content' }, + heading: { id: 'column.soapbox_settings', defaultMessage: 'Soapbox settings' }, + promoPanelIcon: { id: 'soapbox_settings.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' }, + promoPanelLabel: { id: 'soapbox_settings.promo_panel.meta_fields.label_placeholder', defaultMessage: 'Label' }, + promoPanelURL: { id: 'soapbox_settings.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' }, + homeFooterLabel: { id: 'soapbox_settings.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' }, + homeFooterURL: { id: 'soapbox_settings.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' }, }); const mapStateToProps = state => { const soapbox = state.get('soapbox'); return { themeCss: generateThemeCss(state.getIn(['soapbox', 'brandColor'])), - customCss: state.getIn(['soapbox', 'customCss']), - logo: state.getIn(['soapbox', 'logo']), logo: state.getIn(['soapbox', 'logo']), promoPanel: state.getIn(['soapbox', 'promoPanel', 'items']), patronEnabled: state.getIn(['soapbox', 'extensions', 'patron', 'enabled']), - displayMode: state.getIn(['soapbox', 'defaultSettings', 'mode']), + autoPlayGif: state.getIn(['soapbox', 'defaultSettings', 'autoPlayGif']), copyright: state.getIn(['soapbox', 'copyright']), homeFooter: state.getIn(['soapbox', 'navLinks', 'homeFooter']), - - // { - // soapbox: { - // brandColor: '#1ca82b', - // logo: '/favicon.png', - // promoPanel: { - // items: [ - // { - // icon: 'area-chart', - // text: 'Gleasonator stats', - // url: 'https://fediverse.network/gleasonator.com' - // }, - // { - // icon: 'comment-o', - // text: 'Gleasonator theme song', - // url: 'https://media.gleasonator.com/custom/261905_gleasonator_song.mp3' - // } - // ] - // }, - // extensions: { - // patron: { - // enabled: true - // } - // }, - // defaultSettings: { - // mode: 'light' - // }, - // copyright: '♡2020. Copying is an act of love. Please copy and share.', - // navlinks: { - // homeFooter: [ - // { - // title: 'About', - // url: '/about' - // }, - // { - // title: 'Terms of Service', - // url: '/about/tos' - // }, - // { - // title: 'Privacy Policy', - // url: '/about/privacy' - // }, - // { - // title: 'DMCA', - // url: '/about/dmca' - // }, - // { - // title: 'Source Code', - // url: '/about#opensource' - // } - // ] - // } - // } - // } - }; }; +// Forces fields to be MAX_SIZE, filling empty values +const normalizeFields = fields => ( + ImmutableList(fields).setSize(MAX_FIELDS).map(field => + field ? field : ImmutableMap({ name: '', value: '' }) + ) +); + // HTML unescape for special chars, eg
const unescapeParams = (map, params) => ( params.reduce((map, param) => ( @@ -109,26 +65,31 @@ class ConfigSoapbox extends ImmutablePureComponent { static propTypes = { dispatch: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, - account: ImmutablePropTypes.map, + themeCss: PropTypes.text, + logo: PropTypes.object, + promoPanel: ImmutablePropTypes.map, + patronEnabled: PropTypes.Boolean, + autoPlayGif: PropTypes.Boolean, + copyright: PropTypes.text, + homeFooter: ImmutablePropTypes.map, }; state = { isLoading: false, - fields: normalizeFields(Array.from({ length: MAX_FIELDS })), + promoPanel: normalizeFields(Array.from({ length: MAX_FIELDS })), } constructor(props) { super(props); - const initialState = props.account.withMutations(map => { + const initialState = props.withMutations(map => { map.merge(map.get('source')); map.delete('source'); - map.set('fields', normalizeFields(map.get('fields'))); - unescapeParams(map, ['display_name', 'note']); + map.set('promoPanel', normalizeFields(map.get('promoPanel'))); }); this.state = initialState.toObject(); } - makePreviewAccount = () => { + makePreviewLogo = () => { const { account } = this.props; return account.merge(ImmutableMap({ header: this.state.header, @@ -137,12 +98,12 @@ class ConfigSoapbox extends ImmutablePureComponent { })); } - getFieldParams = () => { + getPromoPanelParams = () => { let params = ImmutableMap(); - this.state.fields.forEach((f, i) => + this.state.promoPanel.forEach((f, i) => params = params - .set(`fields_attributes[${i}][name]`, f.get('name')) - .set(`fields_attributes[${i}][value]`, f.get('value')) + .set(`promo_panel_attributes[${i}][name]`, f.get('name')) + .set(`promo_panel_attributes[${i}][value]`, f.get('value')) ); return params; } @@ -150,21 +111,20 @@ class ConfigSoapbox extends ImmutablePureComponent { getParams = () => { const { state } = this; return Object.assign({ - discoverable: state.discoverable, - bot: state.bot, - display_name: state.display_name, - note: state.note, - avatar: state.avatar_file, - header: state.header_file, - locked: state.locked, - }, this.getFieldParams().toJS()); + themeCss: state.themeCss, + logoFile: state.logoFile, + patronEnabled: state.patronEnabled, + displayMode: state.displayMode, + copyright: state.copyright, + homeFooter: state.homeFooter, + }, this.getPromoPanelParams().toJS()); } getFormdata = () => { const data = this.getParams(); let formData = new FormData(); for (let key in data) { - const shouldAppend = Boolean(data[key] || key.startsWith('fields_attributes')); + const shouldAppend = Boolean(data[key] || key.startsWith('promo_panel_attributes')); if (shouldAppend) formData.append(key, data[key] || ''); } return formData; @@ -189,7 +149,7 @@ class ConfigSoapbox extends ImmutablePureComponent { this.setState({ [e.target.name]: e.target.value }); } - handleFieldChange = (i, key) => { + handlePromoPanelChange = (i, key) => { return (e) => { this.setState({ fields: this.state.fields.setIn([i, key], e.target.value), @@ -212,7 +172,7 @@ class ConfigSoapbox extends ImmutablePureComponent { const { intl } = this.props; return ( - +
@@ -230,7 +190,7 @@ class ConfigSoapbox extends ImmutablePureComponent { />
- +
)) diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 11e0669a9..52a358db5 100644 --- a/app/soapbox/features/ui/index.js +++ b/app/soapbox/features/ui/index.js @@ -71,6 +71,7 @@ import { LoginPage, Preferences, EditProfile, + ConfigSoapbox, PasswordReset, SecurityForm, } from './util/async-components'; @@ -253,6 +254,7 @@ class SwitchingColumnsArea extends React.PureComponent { + diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 7d3805ef1..525f05a31 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -178,6 +178,10 @@ export function EditProfile() { return import(/* webpackChunkName: "features/edit_profile" */'../../edit_profile'); } +export function ConfigSoapbox() { + return import(/* webpackChunkName: "features/configuration" */'../../configuration'); +} + export function PasswordReset() { return import(/* webpackChunkName: "features/auth_login" */'../../auth_login/components/password_reset'); }